css中文名稱：層疊樣式表。

英文全稱： Cascading Style Sheets,簡稱css。

css的作用：

在網頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加精確的控制

目錄

?

1.css選擇器

（1）標簽選擇器

（2）類（class）選擇器

（3）id選擇器

（4）三種選擇器的優先級：

2.網頁中引入css樣式

（1）：內聯（行內）樣式

（2）：內部樣式表

（3）：外部樣式表

(4)三種css樣式優先級

3.基礎樣式

(1):字體樣式

（2）.文本樣式

(3).鼠標樣式（cursor）

(4).背景樣式?

（5）.列表樣式

4.css偽類

5.css高級選擇器

6.邊框樣式

（1）

（2）邊框顏色：

?（3）邊框粗細：

（4）邊框簡寫：

7.盒子模型

（1）內邊距（padding）

（2)外邊距（margin）

8.display屬性

9.overflow屬性

10.動畫

11.css浮動

12.css定位

補充

---

?

1.css選擇器

（1）標簽選擇器

html中的所有標簽都可以作為選擇器

例如：

h1{}
h2{}

（2）類（class）選擇器

body內的所有標簽都有class屬性。

注：class名稱可以重復使用

類選擇器使用標志符（句點）開頭，后面寫上類的名稱

例如：

<style>
    .nav{
    }
</style>
<h1 class = "nav"><h1>

bod?

（3）id選擇器

body內所有元素都有id屬性。

注：一個頁面中只能使用一個id名，id名必須是唯一。

id選擇器使用散列符號（#）開頭，后面寫上id的名稱

<style>
    #nav{
    }
</style>
<h1 id= "nav"><h1>

（4）三種選擇器的優先級：

id選擇器>類選擇器>標簽選擇器

2.網頁中引入css樣式

（1）：內聯（行內）樣式

html中的所有標簽都有style屬性，在style屬性中直接寫入css樣式。

例如：

<div style=“color:red;font-size:20px;”>
         這是內聯樣式
</div

（2）：內部樣式表

將html代碼和css樣式做簡單分離，在網頁頭部創建style標簽，在其中寫入css樣式。

（3）：外部樣式表

將css樣式單獨寫入到一個 xxx.css外部文件中。

（1）使用link標簽引入外部css文件。

<link ? type="text/css" href="style.css"/>

（2）使用@import導入外部css文件

(4)三種css樣式優先級

內聯樣式>內部樣式表>外部樣式表

注：同一個標簽中使用三種方式引入CSS樣式，瀏覽器會優先執行內聯樣式。

3.基礎樣式

(1):字體樣式

font-family	字體類型；例如："宋體"
font-size	字體大小；例如："20px"
font-style	字體風格；例如："italic"（傾斜）
font-weight	字體粗細；例如："300"(100-900)

（2）.文本樣式

屬性	屬性值	舉例
color	設置文本顏色	*red *#362596 *rgb(32,250,50)
text-aligin	設置元素水平對齊方式	*left *center *right
text-indent	設置首行文本縮進	*20px
line-height	設置文本的行高	*30px
text-decoration	設置文本裝飾	none,標準文本 underline：定義文本下劃線 overline：定義文本上劃線 line-through:定義穿過文本的一條線

(3).鼠標樣式（cursor）

defalut	默認光標
pointer	超鏈接指針
wait	等待狀態
help	指示可用的幫助
text	指示文檔
crosshair	鼠標呈十字狀

例如：cursor：pointer;

(4).背景樣式?

background-color	背景顏色	*red *#362596 *rgb(32,250,50)
background-image:url(圖片路徑)	背景圖片地址	*絕對路徑 *相對路徑
background-repeat	背景重復樣式	*no-repeat? 不重復 *repeat-x? ?水平重復 *repeat-y? ?垂直重復 *repeat? ? ? 默認重復
background-position? ? ? ? ? ? ? ? ? ?	背景定位	*像素：px *水平方向：left、center、bottom

?背景樣式簡寫：

? background:背景地址，圖片重復方式，背景顏色，背景定位

*? 網頁開發中比較常用

*? 屬性值之間沒有先后順序

（5）.列表樣式

list-style-type(無序列表)	*disc實體圓心（默認） *circle空心圓 *square實體圓心 *none無列表標記
list-style-image	自定義列表標記為圖片 url(圖片路徑)
list-style-position	列表標記定位 outside inside
list-style-type(有序列表)	1/a/A/i/I

列表樣式簡寫：

? ? ? ? ? ? ? ? list-style: 1.列表標記屬性 2.自定義列表標記圖片 3.列表標記定位

4.css偽類

link	單機訪問前
visited	單機訪問后
hover	鼠標懸浮其上
active	單擊未釋放

    div.op a:hover{
        color: #be1111;
    }

5.css高級選擇器

并集選擇器	多個選擇器通過逗號連接	div,span,.one,#hello{}
交集選擇器	? 由兩個選擇器連接構成，選中二者范圍的交集，兩個選擇器之間不能有空格 ? 第一個必須是標簽選擇器，第二個必須是類選擇器或者 ID 選擇器	div.codeup{ ????????? color:red; ????????? font-size:20px; ??? } ? ??? div#codeup{ ????????? color:red; ????????? font-size:20px; ??? }
后代選擇器	外層寫在前面，內層寫在后面	???? div? .codeup{ ???????? color:red; ???????? font-size:20px; ???? }
子集選擇器	通過>連接在一起 僅僅作用于子元素	???? div>.codeup{ ???????? color:red; ???????? font-size:20px; ???? }
屬性選擇器	選取帶有指定屬性和值得元素	?? input[name]{ ???????? border:1px soild red; ??? } ??? input[type=”text”]{ ???????? border:1px soild red; ??? } ??? div[ class=“codeup”]{ ???????? color:red; ??? }

6.邊框樣式

（1）

屬性	說明	樣式值
border-top-style	上邊框樣式	*none:無邊框 *solid：實線邊框 *dashed：虛線邊框 *dotted:雙線邊框 *hidden:與none相同，應用于解決邊框沖突
border-right-style	右邊框樣式
border-bottom-style	下邊框樣式
border-left-style	左邊框樣式
border-style	設置四個邊框樣式

（2）邊框顏色：

? ? ? ? border-left-color,border-top-color,border-right-color,border-bottom-color。

? ? ? ? border-color：同時設置四個邊框顏色

?（3）邊框粗細：

????????

border-top-width	上邊框
border-right-width	右邊框
border-bottom-width	下邊框
border-left-width	左邊框
border-width	簡寫

（4）邊框簡寫：

? ? ?border-top,border-right,border-bottom,border-left.同時設置各個邊框的粗細，顏色，樣式

? ? ? ? border：同時設置四個邊框的粗細，顏色，樣式

7.盒子模型

（1）內邊距（padding）

padding-top	頂部內邊距
padding-right	右側內邊距
padding-bottom	底部內邊距
padding-left	左側內邊距

? ? ? ? box-sizing屬性：

????????content-box:?盒子的實際寬度和高度僅應用于元素內容，不包括內邊距和邊框

? ? ? ? *默認，撐大容器以改變內邊距

? ? ? ? border-box:?盒子的實際高度和寬度包括元素內容、邊框和內邊距

? ? ? ? *大小不變，改變元素位置以改變內邊距

（2)外邊距（margin）

????????

margin-top	頂部外邊距
margin-left	左側外邊距
margin-right	右側外邊距
margin-bottom	底部外邊距

8.display屬性

*控制元素顯示和隱藏

*塊級元素和內聯元素的轉變

none	元素不被顯示
inline	元素顯示為內聯元素
block	元素顯示為塊級元素
inline-block	元素顯示為行內塊元素

9.overflow屬性

*超出容器的內容

overflow:auto;? 自適應，如果內容超出容器，會以滾動條的形式

overflow：hidden;超出內容被隱藏

注：word-break:break-all;? ?容器中英文與數字不會自動換行，該屬性能使之換行

10.動畫

transition ：過度動畫； 例如：transition: linear? 0.5s all;? linear(勻速)

transform：將元素轉為2d或3d；transform：scale(1.2); 縮放1.2倍

11.css浮動

float:left;左浮動

float:right;右浮動

clear屬性：

*clear屬性規定了在元素那一側不允許有浮動元素

both	左右兩側不允許浮動元素
left	左側不允許浮動元素
right	右側不允許浮動元素

12.css定位

position屬性：

????????

static	默認值，沒有定位
relative	相對定位 *不會脫離標準文本流 *基于自身原來的位置進行偏移 *元素基于top,left,right,bottom四個方位進行偏移
absolute	絕對定位 *會脫離標準文本流 *以最近的一個已經定位的祖先元素為基準進行偏移 *元素基于top,left,right,bottom四個方位進行偏移
fixed	固定定位 *相對于瀏覽器窗口進行定位，不會根據滾動條移動 *會脫離標準文本流 *元素基于top,left,right,bottom四個方位進行偏移

z-index屬性：

*調整元素定位時重疊層的上下位置

*默認為0，值大的在值小的之上

css偽元素：

例：.one::after{content:""}? ? ? ? 在類名為one的內容之后加內容

補充：

1.-wekit-appearance:none;? 去掉瀏覽器提供的默認樣式

2. outline:none;? ?去掉標簽默認邊框

3. box-shadow: 水平陰影距離，垂直陰影距離，陰影模糊距離，陰影顏色;

4.rgba(0,0,0,0.3)? 調整透明度