CSS層疊樣式有哪些

這篇文章主要講解了“CSS層疊樣式有哪些”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“CSS層疊樣式有哪些”吧！

CSS Cascading Style Sheet 層疊樣式表

設置html頁面的樣式

html負責顯示 css 負責樣式 顯示和樣式分離

編寫css的位置：

1 標簽內部

<div style="屬性:值;屬性:值">

2 頁面中 <style>

選擇器{

屬性:值;

屬性:值;

}

</style>

3 外部css文件(.css) 在html中通過 <link />導入css文件 ------最常用

選擇器{

屬性:值;

屬性:值;

}

選擇器： 作用？ 用來選擇到頁面上標簽

css的選擇器種類有很多

最常用的三種：

1 標簽選擇器 標簽名{} div{} 選擇到頁面上的所有div標簽 p{}

2 id選擇器 同一個頁面中所有標簽id屬性的值 都不要相同

#標簽id屬性值{

}

3 class選擇器(類選擇器) 先定義 再引用

.aaa{} <div class="aaa">AAA</div>

css中常用的屬性：

color 顏色

font-size 字體大小

font-family 字體

font-weight 字體粗細

font-style 字體樣式 italic(斜體) <i></i>

font:粗細 樣式 大小 字體

line-height （行高）

text-align （對齊）

letter-spacing （字符間距）

text-decoration （文本修飾 ）

cursor:pointer 手型圖標 (當然可以指定其他形狀圖標)

width 寬度

height 高度

background-color:#FF0;

background-image:url(flower4.jpg);

background-repeat:no-repeat;

background-position:300px 300px

background:#3FF url(flower4.jpg) no-repeat 400px 400px

關于列表的css

list-style: decimal/lower-latin/ lower-roman/lower-greek

circle/square/disc

none

浮動布局: 打破 html中塊級標簽獨占一行的特征

float:left/right

---------------------------------------------------------------------------------------

盒模型：

邊框 每個html標簽都有邊框 border

外邊距 margin

設置某個標簽的margin-left:100px

距離這個標簽的左邊框100px內不能有其他標簽

margin-left

margin-right

margin-top

margin-bottom

margin: 1個值 上下左右4個方向

margin： 2個值 上下 左右

margin： 3個值 上 左右 下

margin: 4個值 上 右 下 左

margin:100px auto; 上下 100 左右居中

內邊距 padding

設置標簽的內邊距 padding-left:100px

調整的是這個標簽中包含的元素具體它左側邊框的距離 (不是調整為設置的值，而是在原來的基礎上加上設置的值)

超鏈接樣式的四種狀態

未訪問狀態（a:link ）

已訪問狀態（a:visited ）

鼠標移上狀態（a:hover ）

激活選定狀態（a:active ）

圖片的css：

img{filter:gray} 只有ie有效

圖片旋轉： transform:rotate(60deg) firefox

關于隱藏和顯示的css

display:none 隱藏

:inline 不會獨占一行

:block 獨占一行

CSS中的選擇器：

1 標簽選擇器

2 ID選擇器

3 class選擇器

4 * 通用選擇器 選擇到的是頁面上的所有標簽

5 E F 后代選擇器 選擇到的是F標簽 F標簽是E 標簽的后代

6 E>F 父子關系選擇器 選擇到的是F標簽 F標簽是E標簽的子標簽

7 E+F 直接后兄弟選擇器 選擇的是F F要是E的兄弟

8 E~F 一般后兄弟

9 E[foo] 選擇到有 foo屬性的E標簽

10 E[foo="xxx"] 選擇到 foo屬性值是xxx的E標簽

11 E[foo^="xxx"] 選擇到 foo屬性值是以xxx開頭的E標簽

12 E[foo$="xxx"] 選擇到 foo屬性值是以xxx結尾的E標簽

13 E,F,G 選擇到頁面上所有 E 和 F 和 G標簽

14 偽類選擇器：

E:first-child

E:link

E:visited

E:active

E:hover

E:focus

感謝各位的閱讀，以上就是“CSS層疊樣式有哪些”的內容了，經過本文的學習后，相信大家對CSS層疊樣式有哪些這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！