當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS学习总结

發布時間：2024/9/30 CSS 77 豆豆

生活随笔收集整理的這篇文章主要介紹了 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文件

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="1.css"> </head> <body><div>文本</div> </body> </html>

實現結果：

CSS語法
外部樣式表

選擇器 {
屬性名稱：屬性值；
}

css注釋方法： /*注釋*/

顏色
rgb色彩模式：
R 紅色由淺到深 0—255
G 綠色
b 藍色

例如：

div {width: 100px;height: 100px；color: rgb(225,0,0)； }

同樣也可以用百分比進行替換
如：

div {width: 100px;height: 100px；color: rgb(100%,0%,0%)； }

第二種:用顏色名稱
除此之外，還可以用十六進制代表顏色

例如：

實現結果：

CSS基本選擇器

選擇器的作用：
通過選擇器可以找到HTML的元素并且把選擇器后面樣式傳遞給元素。
四大類選擇器：
基本選擇器
組合選擇器
屬性選擇器
偽元素選擇器

基本選擇器
一通配符選擇器
二標簽選擇器比如div
三 id 選擇器
四 class選擇器

一：通配符選擇器

*{border: 1px solid balck; }

例如：
在CSS.html文件中

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="2.css" </head> <body><div>div1<div>div2</div><p>p1</p> </body> </html>

在2.CSS文件里

*{border: 1px solid black;}

這是外部樣式表
實現結果為：

二：標簽選擇器
例如：我只選擇

標簽
在2.CSS文件中

p{border: 1px solid black;}

實現結果：

三：id選擇器
在CSS.html中

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="2.css" </head> <body><div>div1<div>div2</div><p id="wo">p1</p></div> </body> </html>

在2.CSS中

#wo {font-size: 60px;}  注意事項：

實現結果：

四：class標簽

在CSS.html中 <p class="wo">p2</p> 在2.CSS中 .wo {font-size: 60px;}

實現結果：

在CSS.html中 <p class="wo wo2">p2</p> 在2.CSS中 .wo {font-size: 60px;} .wo2 {color: red; }

CSS原理

優先原則
后解析的內容會覆蓋掉之前解析的內容

1.對于同一個選擇器：文件執行的順序是從上往下執行。
例如：

div{color：red;color: green; }

最終文本的顏色是綠色

2.同一類型的選擇器：從上往下
例如：

在創建html文件中 <body><div>div1</div> </body> 在創建CSS文件中 div {background-color: red; } div {background-color: green; }

最終的背景色顯示是綠色

在創建的html文件中 <body><div class="bg1 bg2">div1</div> </body> 在創建CSS文件中 .bg1{background-color: yellow; } .bg2{background-color: green; }

最終顯示的背景色是綠色

3.不同類型的選擇器：選擇器本身具有優先級
如：*<div<class<id
規則：
先解析低優先級的再解析高優先級的

在創建的html文件中 <body><div class="bg1">div1</div> </body> 在創建的CSS文件中 .bg1{background-color: green; } div{background-color:red; }

最終div1的背景色是綠色
4.外部樣式內部樣式合并之后一起解析
先外部樣式再內部解析
例如：

例如在html文件中 <style> div {background-color: red; } </style> 在CSS文件中 div{background-color:yellow; } div {background-color: green; }

先合并起來
在按照同一類型的選擇器：從上往下執行。
最終顯示的背景色是紅色

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組合選擇器

把基本選擇器通過特殊的符號串在一起，形成一定的意義。

分組選擇器
用逗號將標簽隔開

在html中 <body><div>div1</div><p>p1</p> </body> 在CSS中 div {background: green; } p {background: green;color: red;font-size: 50px; }

為了節省代碼量，可以使用分組選擇器，實現相同的效果

div,p {background：green;color: red; } p {font-size: 50px; }

嵌套選擇器
空格隔開
例如 : p是嵌套在div里面

在html中 <body> <div>div1<p>p2</p><ul><li><p>p3</p></li> </div><p>p1</p></body> 在CSS中 div p{background: green;color: red;font-size: 50px; }

p2 p3都會顯示出這些屬性，而p1不會,因為p1沒有嵌套在div標簽內。

子選擇器
標簽>標簽
例如：

在html中 <body> <div>div1<p>p2</p><ul><li><p>p3</p></li> </div><p>p1</p></body> 在CSS中 div>p{background: green;color: red;font-size: 50px; }

因為p2的父標簽是div，所以CSS的屬性可以實現，p3,p1的父標簽不是

,所以不能實現CSS中的屬性。

相鄰同級選擇器
例如：

在html中 <body> <div>div1<p>p2</p><ul><li><p>p3</p></li> </div><p>p1</p></body> 在CSS中 div+p{background: green;color: red;font-size: 50px; }

可以看到div和最下面的p標簽同級，因此只有p1這個p標簽會生效

CSS屬性選擇器
基本選擇器【屬性】

在html文件中 <body><div>div1<p>p2</p><ul><li><p>p3</p></li></ul></div><p title="wo">p1</p> </body> 在CSS文件中 P[title=wo]{background: green;color: red;font-size: 50px; }

實現結果：
只有p1顯示出CSS的屬性

屬性里面的值可以放多個
【屬性~=值】代表多個值

在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的就生效。
因此只有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

在HTML文件中 <body><p title="wo cc">隱藏的p1</p> </body> 在CSS文件中可以改變內容，添加樣式 p::before {content: "before"; } p::after {content: "after"; }

實現的結果為：
before p1 after

塊元素第一個字母 first-letter 第一行： first-line

在html文件中 <body><p>這是一段文字</p> </body> 在CSS文件中 p::first::letter {color: red;font-size: 100px; }

實現結果:
第一個字變紅放大

同理 p::first::line{color: red;font-size: 100px; }

實現結果:
這一段文字變紅放大

CSS背景

在CSS文件中 body {background-color: red;//添加背景顏色background-image: url('圖片地址')；//添加背景圖片 }

實現結果：
一個圖片是重復鋪滿整個網頁
也可以設置平鋪的方向

body {background-color: red;background-image: url('');background-repeat: repeat-x//圖片沿著X方向平鋪background-repeat: repeat-y//圖片沿著T方向平鋪background-repeat: no-repeat;// 只有一張圖片，不會進行平鋪 }

在網頁中移動圖片

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

按照這樣的順序，就可以節省很多代碼量
例如：

background: red url('') repeat-y;

CSS字體
設置字體
在CSS文件中

body {font-family: "黑體"，" 宋體"；//多個字體的話用逗號隔開font-size: 30px;//設置字體大小，如果不設置系統默認是16px的font-weight: 100~900//設置字體粗細<!--一般情況下是不會寫數字的，用三個單詞代替，分別為normal\lighter（字號更細）\bold(字號更粗)font-style: normal;(正常的字體) italic(斜體) }

上面的代碼也可以用一行代碼進行表示

body {font: style weight size/line-height font-family } 例如; body {font: italic bold 30px/150px "微軟雅黑"，"黑體"； } line-height：字體的行高

CSS文本
設置字符的間距

<body><p class="txt">hello world 這是第一段字</p></body> 在CSS文件中 .txt {letter-spacing: 0px; }

這樣就可以設置字符的間距

設置空格的距離``

在html文件中 <body><p class="txt">hello world 這是第一段字</p></body> 在CSS文件中 .txt {word-spacing: 0px; }

這樣就可以設置空格的距離
還有一個方法設置字符的間距

direction: ltr;

在CSS文件中

p {text-decoration: line-through; overline;underline; }

例如;

p {text-decoration: line-through; }

文字對齊方式 center(居中對齊) left(左對齊) right(右對齊) justify(兩端對齊)
默認狀態下就是左對齊
例如：

在CSS文件中 p {text-align: left; }

這樣html文件中p標簽的內容便會左對齊

縮進設置

p {text-indent: 60px; }

英語大小寫字母設置

p {text-transform: uppercase;text-transform: lowercase;text-transform: capitalize; }

總結

以上是生活随笔為你收集整理的CSS学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： hexo+githup搭建属于自己的博客
下一篇： CTF隐写总结