常用重要CSS樣式的屬性

盒子模型是CSS中一個(gè)很重要的概念，頁(yè)面中的所有元素都可以看成一個(gè)盒子，并占據(jù)一定的頁(yè)面空間，一個(gè)頁(yè)面由很多盒子組成，盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法，才能真正控制好頁(yè)面元素。

成都創(chuàng)新互聯(lián)是一家專注于成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),和田網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:和田等地區(qū)。和田做網(wǎng)站價(jià)格咨詢:18982081108

盒子模型主要定義四個(gè)區(qū)域： 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。

盒子的內(nèi)容區(qū)域存放文本和圖片等頁(yè)面元素，擁有如下屬性：

邊框基本屬性：

通過(guò)一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色

屬性：border

取值：width style color;

只設(shè)置某一條邊框的寬度、樣式、顏色

語(yǔ)法：border-方向（top/right/bottom/left）：width style color;

只設(shè)置邊框的寬度、樣式、顏色中的一種

語(yǔ)法：border-屬性（width/style/color）：取值;

只設(shè)置某一條邊框的寬度、樣式、顏色中的一種

語(yǔ)法：border-方向（top/right/bottom/left）-屬性（width/style/color）：取值;

屬性：border-radius

作用：設(shè)置倒角位置處圓的半徑，半徑越大，弧度越大。

取值：

屬性：border-image

語(yǔ)法：

border-image-source ：引入背景圖片

取值：

默認(rèn)值：無(wú)圖片

url(圖片URL地址)

border-image-slice ：切割引入背景圖片，把邊框背景切成9份

取值：

number：默認(rèn)單位px

百分比：

fill：保留邊框圖像的中間部分

border-image-width ：指定邊框圖片的寬度

border-image-repeat ：指定邊框背景圖片的排列方式，可定義2個(gè)參數(shù)，即水平和垂直方向

取值：

Stretch：默認(rèn)值，拉伸

Repeat：平鋪

Round：取整平鋪

內(nèi)容區(qū)域和邊框（邊緣）之間的距離

語(yǔ)法：padding: 值；

單邊設(shè)置：padding-方向（top/right/bottom/left）:值；

取值：

數(shù)值px

百分比

內(nèi)邊距的簡(jiǎn)寫方式：

padding:value;

四個(gè)方向內(nèi)邊距的值均為value

padding:value1 value2;

Value1為上下內(nèi)邊距的值，value2為左右內(nèi)邊距的值

padding:value1 value2 value3;

Value1為上內(nèi)邊距的值，value2為左右內(nèi)邊距的值，value3為下內(nèi)邊距的值

padding:value1 value2 value3 value4;

上右下左內(nèi)邊距的值分別為value1， value2， value3， value4

外邊距指元素與元素之間的距離，即圍繞在元素邊框之外的空白區(qū)域，通過(guò)外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù)，用于拉伸兩個(gè)元素間的距離。

語(yǔ)法：margin: 值；

單邊設(shè)置：margin-方向（top/right/bottom/left）:值；

取值：

重新制定元素尺寸計(jì)算模式

屬性：box-sizing

取值：

屬性：resize

取值：

位于元素邊框之外的一條線

屬性：

outline：width style color;

屬性：box-shadow

語(yǔ)法：

box-shadow: h-shadow v-shadow blur spread color inset;

取值：由一組值構(gòu)成的值列表

屬性：background-color

取值：顏色值或transparent

注意：背景顏色是從邊框位置處開始繪制

屬性：background-image

取值：url(背景圖像URL)

屬性：background-repeat

取值：

屬性：background-attchment

取值：

scroll：默認(rèn)值，滾動(dòng)

fixed：固定

屬性：background-position

取值：

屬性：background-size

取值：

屬性：background-origin

取值：

屬性：background-clip

取值：

CSS3多背景通過(guò)為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。

font 簡(jiǎn)寫屬性語(yǔ)法：

將所有字體屬性合寫為一行，其中font-family是復(fù)合屬性中必不可少的屬性。

可以不設(shè)置其中的某個(gè)值，如果省略值地話，就使用屬性的默認(rèn)值。

②文本屬性：

（2）CSS3文本陰影屬性：

屬性：text-shadow

作用：產(chǎn)生陰影和模糊主體

語(yǔ)法：

作用：定義列表的編號(hào)樣式

屬性：list-style-type

作用：用于設(shè)置列表項(xiàng)的圖像屬性

語(yǔ)法：

圖像URL地址：圖像的相對(duì)路徑或絕對(duì)路徑

none：默認(rèn)值，不指定圖像

注意：圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的，因此，一般情況下不采用這種方式來(lái)設(shè)置列表的圖片樣式。

通過(guò)設(shè)置li的背景圖片的方式來(lái)設(shè)置列表圖片基本步驟：

設(shè)置list-style-type屬性值為none

設(shè)置li標(biāo)記的背景屬性backgruond

作用：用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置

語(yǔ)法：

作用：可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。

語(yǔ)法：

注意：

可以不設(shè)置其中的某個(gè)值，未設(shè)置的屬性采用默認(rèn)值

同時(shí)指定list-style-image和list-style-type時(shí)，list-style-image優(yōu)先顯示，除非list-style-image設(shè)置為none，或圖片路徑錯(cuò)誤無(wú)法顯示

當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí)，列表項(xiàng)目的樣式優(yōu)先顯示

特點(diǎn)：

可以設(shè)置寬度和高度

默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行

作用：

塊級(jí)元素主要用于頁(yè)面布局

常用塊級(jí)元素：

div、p、h1~h6、ol、ul等

特點(diǎn)：

不可以設(shè)置寬度和高度，其寬度就是自身文字或圖片的寬度

默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示，遇父元素邊界時(shí)會(huì)自動(dòng)換行

作用：

行內(nèi)元素主要用于設(shè)置文樣式

常用行內(nèi)元素：

a、span、em、b、i、strong、img、input等

作用：控制頁(yè)面元素脫離原有文檔流，實(shí)現(xiàn)向左或向右移動(dòng)，直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止，標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。

屬性： float

取值：

浮動(dòng)元素不會(huì)相互重疊；

浮動(dòng)元素不會(huì)上下浮動(dòng)，如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示，而且會(huì)超出容納塊，則它下降到低于先前任何浮動(dòng)元素的位置。

作用：規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。

取值：

作用：控制頁(yè)面元素在頁(yè)面中的位置。

屬性：position

取值：static/relative/absolute/fiexed

默認(rèn)屬性值，元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列，塊級(jí)元素獨(dú)占一行， 行內(nèi)元素位于一行內(nèi)顯示，一行顯示不下，自動(dòng)換行。

特點(diǎn)：

相對(duì)于自身原有位置進(jìn)行偏移

仍處于標(biāo)準(zhǔn)文檔流中

隨即擁有偏移屬性和z-idex屬性

偏移屬性:

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊，不設(shè)置z-index屬性時(shí)，默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。

特點(diǎn)：

建立了以包含塊為基準(zhǔn)的定位

絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素（設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種），如果元素沒(méi)有已定位的祖先元素，則該元素的位置相對(duì)于瀏覽器窗口。

完全脫離了標(biāo)準(zhǔn)文檔流

隨即擁有偏移屬性和z-idex屬性

偏移屬性：

left:數(shù)值px;

right:數(shù)值px;

top:數(shù)值px;

bottom:數(shù)值px;

絕對(duì)定位未設(shè)置偏移量的特點(diǎn)：

無(wú)論是否存在已經(jīng)定位的祖先元素，都保持在元素的初始位置

脫離了標(biāo)準(zhǔn)文檔流

設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute，不過(guò)其包含塊是瀏覽器窗口本身。

在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向，CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。

作用：用于控制元素的層疊次序，使得某個(gè)元素浮于其他元素之上。

語(yǔ)法：

auto：遵循其父元素的定位

number：整數(shù)，可負(fù)，值大者疊加在上層

注意：使用z-index屬性時(shí)，要求該元素的position屬性值為absolute、relative或fixed。

作用：用于定義建立布局時(shí)元素生成的顯示框類型

語(yǔ)法：dispaly:值;

作用：用于定義建立布局時(shí)元素生成的顯示框類型

語(yǔ)法：visibility:值;

2020版dw的css樣式屬性在哪

1. 打開“CSS樣式”面板。

2. 在“所選內(nèi)容的摘要”窗格中雙擊某一個(gè)屬性，打開“CSS 規(guī)則定義”對(duì)話框。如下圖所示：

一、定義CSS的類型屬性

在“CSS 規(guī)則定義”對(duì)話框中，在“分類”下拉框中選擇“類型”，然后可以在右邊“類型”部分設(shè)置屬性：

Font-family：設(shè)置字體系列。在下拉菜單中選擇字體。

Font-size：定義文字的字體大小。

Font-weight：對(duì)字體應(yīng)用特定或相對(duì)的粗體量。

Font-style：指定“正?！?、“斜體”或“偏斜體”作為字體樣式。

Font-variant：設(shè)置文本的小型大寫字母變體。

Line-height：設(shè)置文本所在行的高度。

Text-transform：將所選內(nèi)容中的每個(gè)單詞的首字母大寫或?qū)⑽谋驹O(shè)置為全部大寫或小寫。

Text-decoration：向文本中添加下劃線、上劃線或刪除線，或使文本閃爍。

Color：設(shè)置文本的顏色。

提示：如果某一個(gè)屬性不需要設(shè)置，可以將其保留為空。

CSS設(shè)置文本樣式的屬性有哪些

1、文本縮進(jìn)：text-indent

2、文本對(duì)齊：text-align

3、字間隔：word-spacing

4、字母間隔：letter-spacing

5、字母轉(zhuǎn)換：text-transform

6、文本裝飾：text-decoration

7、處理空白符：white-space

8、文本方向：decoration

9、文本顏色：color

10、背景顏色：background-color

11、文本陰影：text-shadow

還有一些屬性，不是很常用，就沒(méi)有列舉了，了解每個(gè)具體的使用方法，可以到百度 "w3cschool "了解！

希望對(duì)你有所幫助。

編輯修改CSS樣式在什么地方設(shè)置,寫出關(guān)鍵詞

在js中修改css樣式，必須通過(guò)關(guān)鍵詞style。在編輯修改CSS直接設(shè)置樣式(內(nèi)聯(lián)樣式)使用JavaScript設(shè)置元素樣式的最簡(jiǎn)單方法是使用style屬性，在我們通過(guò)JavaScript訪問(wèn)的每個(gè)HTML元素時(shí)都有一個(gè)style對(duì)象。