CSS学习总结
CSS學習總結
CSS定義及三種引入方式
CSS是一種層疊樣式表
直接放在div標簽里面
第一種：內斂樣式表
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS</title> </head> <body><div style="color:red;width:100px;height:100px;">文本</div> </body> </html>第二種：內部樣式表
在里面引用標簽
要建立聯系 需要一個選擇器
第三種：外部樣式表
用一個文件 將這些屬性放在文件里面
例如：建立一個1.css文件
在新建的文件中放入：
div { color: red; width: 100px; height: 100px; }把這些放入這個文件中
在原來的文件里
引用標簽 href屬性填入新建的CSS文件
實現結果：
CSS語法
外部樣式表
選擇器 {
屬性名稱：屬性值；
}
顏色
rgb色彩模式：
R 紅色 由淺到深 0—255
G 綠色
b 藍色
例如：
div {width: 100px;height: 100px；color: rgb(225,0,0)； }同樣也可以用百分比進行替換
如：
第二種:用顏色名稱
除此之外，還可以用十六進制代表顏色
例如：
實現結果：
CSS基本選擇器
選擇器的作用：
通過選擇器 可以找到HTML的元素 并且把選擇器后面樣式傳遞給元素。
四大類選擇器：
基本選擇器
組合選擇器
屬性選擇器
偽元素選擇器
基本選擇器
一 通配符選擇器
二 標簽選擇器 比如div
三 id 選擇器
四 class選擇器
一：通配符選擇器
*{border: 1px solid balck; } <!--* 可以選擇所有的html標簽-->例如：
在CSS.html文件中
在2.CSS文件里
*{border: 1px solid black;}這是外部樣式表
實現結果為：
二：標簽選擇器
例如：我只選擇
標簽
在2.CSS文件中
實現結果：
三：id選擇器
在CSS.html中
在2.CSS中
#wo {font-size: 60px;} <!--#加上名稱就會選擇對應的標簽，一一對應--> 注意事項： <!--id名稱不要在一個文件里重復出現-->實現結果：
四：class標簽
實現結果：
CSS原理
優先原則
后解析的內容 會覆蓋掉之前解析的內容
1.對于同一個選擇器：文件執行的順序是從上往下執行。
例如：
最終文本的顏色是綠色
2.同一類型的選擇器：從上往下
例如：
最終的背景色顯示是綠色
在創建的html文件中 <body><div class="bg1 bg2">div1</div> </body> 在創建CSS文件中 .bg1{background-color: yellow; } .bg2{background-color: green; }最終顯示的背景色是綠色
3.不同類型的選擇器：選擇器本身具有優先級
如：*<div<class<id
規則：
先解析 低優先級的再解析高優先級的
最終div1的背景色是綠色
4.外部樣式 內部樣式 合并之后一起解析
先外部樣式 再內部解析
例如：
先合并起來
在按照同一類型的選擇器：從上往下執行。
最終顯示的背景色是紅色
5.加了important 字段的，最后再執行.
div{background-color: green! important; } 最后再執行。 div {background-color: yellow;font-size: 30px; }繼承原則
嵌套里面的標簽 擁有外部標簽的某些樣式
跟文字、文本相關的樣式是可以被繼承
<body><div class="txt">div1<div>div2<p>p2</p></div></div> </body> 在CSS文件中 div.txt {color: red;/* 文字的顏色*/ }<!--跟文本 文字相關的內容會繼承CSS文件中的顏色-->CSS組合選擇器
把基本選擇器通過特殊的符號串在一起，形成一定的意義。
分組選擇器
用逗號將標簽隔開
為了節省代碼量，可以使用分組選擇器，實現相同的效果
div,p {background：green;color: red; } p {font-size: 50px; }嵌套選擇器
空格隔開
例如 : p是嵌套在div里面
p2 p3都會顯示出這些屬性，而p1不會,因為p1沒有嵌套在div標簽內。
子選擇器
標簽>標簽
例如：
因為p2的父標簽是div，所以CSS的屬性可以實現，p3,p1的父標簽不是
,所以不能實現CSS中的屬性。相鄰同級選擇器
例如：
可以看到div和 最下面的p標簽同級，因此只有p1這個p標簽會生效
CSS屬性選擇器
基本選擇器【屬性】
實現結果：
只有p1顯示出CSS的屬性
屬性里面的值可以放多個
【屬性~=值】代表多個值
只要title包含有wo的就生效。
因此只有p1生效
【屬性^=值】 開始
在html文件中 <body><div>div1<p>p2</p><ul><li><p title="wo2 cc">p3</p></li></ul></div><p title="wo cc">p1</p> </body> 在CSS中 P[title^=wo]{background: green;color: red;font-size: 50px; }實現結果：
title的值是以wo開頭的，所以p3 p1都會生效
【屬性$=值】 結束
在html文件中 <body><div>div1<p>p2</p><ul><li><p title="wo2 cc">p3</p></li></ul></div><p title="wo cc">p1</p> </body> 在CSS中 P[title$=cc]{background: green;color: red;font-size: 50px; }實現結果：因為p3 p1 title屬性的結尾都是CC，故p3和p1都會實現CSS中的屬性
偽元素選擇器
不是自己寫的
HTML文件中自帶
開始：before
結束：after
實現的結果為：
before p1 after
塊元素 第一個字母 first-letter 第一行： first-line
在html文件中 <body><p>這是一段文字</p> </body> 在CSS文件中 p::first::letter {color: red;font-size: 100px; }實現結果:
第一個字變紅放大
實現結果:
這一段文字變紅放大
CSS背景
在CSS文件中 body {background-color: red;//添加背景顏色background-image: url('圖片地址')；//添加背景圖片 }實現結果：
一個圖片是重復鋪滿整個網頁
也可以設置平鋪的方向
在網頁中移動圖片
body { x 軸 y軸background-position: 100px 100px; 也可以表示為background-position: 50% 0%； }同樣也可以這樣
x軸： left center right y軸： top center bottom body { background-position: center top; }設置圖片不滾動
body {background-attachement: fixed; }這樣背景圖片就會保持不動，如果不設置則默認為滾動。
也可以寫成這樣
background: color image repeat attachment position按照這樣的順序，就可以節省很多代碼量
例如：
CSS字體
設置字體
在CSS文件中
上面的代碼也可以用一行代碼進行表示
body {font: style weight size/line-height font-family } 例如; body {font: italic bold 30px/150px "微軟雅黑"，"黑體"； } line-height：字體的行高CSS文本
設置字符的間距
這樣就可以設置字符的間距
設置空格的距離``
在html文件中 <body><p class="txt">hello world 這是第一段字</p></body> 在CSS文件中 .txt {word-spacing: 0px;<!-- 像素也可以設置為負的--> }這樣就可以設置空格的距離
還有一個方法設置字符的間距
在CSS文件中
p {text-decoration: line-through; <!--線穿過文字-->overline;<!--線在文字上方-->underline;<!--線在文字下方--> }例如;
p {text-decoration: line-through; }文字對齊方式 center(居中對齊) left(左對齊) right(右對齊) justify(兩端對齊)
默認狀態下就是左對齊
例如：
這樣html文件中p標簽的內容便會左對齊
縮進設置
p {text-indent: 60px; }英語大小寫字母設置
p {text-transform: uppercase;<!--uppercase是改為全大寫-->text-transform: lowercase;<!--lowercase是改為全小寫-->text-transform: capitalize;<!--capitalize是改為首字母大寫--> }總結
- 上一篇： hexo+githup搭建属于自己的博客
- 下一篇： CTF隐写总结