黑馬程式員css知識點總結
- 1、css基礎選擇器
- 1.1、標簽選擇器
- 1.2、類選擇器
- 1.3、多類名選擇器
- 1.5、id選擇器
- id選擇器和類選擇器的區別：
- 1.6、通配符選擇器：
- 2、css字體屬性
- 2.1、字體粗細
- 2.2、字體樣式
- 2.3、字體的綜合寫法
- 3、css文本屬性
- 3.1、文本顏色
- 3.2、文本對齊
- 3.3、修飾文本
- 3.4、文本縮進
- 3.5、行間距
- 4、css樣式表
- 5、Chrome除錯工具
每天持續更新，，，
1、css基礎選擇器
基礎選擇器又包括：標簽選擇器、類選擇器、id 選擇器和通配符選擇器
1.1、標簽選擇器
標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式，
語法：
標簽選擇器{
屬性：屬性值
...
}
作用：
標簽選擇器（元素選擇器）是指用 HTML 標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的 CSS 樣式，
1.2、類選擇器
如果想要差異化選擇不同的標簽，單獨選一個或者某幾個標簽，可以使用類選擇器.
語法：
.類名 {
屬性1: 屬性值1;
...
}
結構需要用class屬性來呼叫 class 類的意思
<div class="類名"> 變紅色 </div>
命名規范：見 Web 前端開發規范手冊.doc
1.3、多類名選擇器
我們可以給一個標簽指定多個類名，從而達到更多的選擇目的， 這些類名都可以選出這個標簽，
簡單理解就是一個標簽有多個名字，
多類名的具體使用：
<div class="red font20">亞瑟</div>
注意：
- 在標簽class 屬性中寫 多個類名，多個類名中間必須用空格分開
1.5、id選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式，
HTML 元素以 id 屬性來設定 id 選擇器，CSS 中 id 選擇器以“#" 來定義，
語法：
#id名 {
屬性1: 屬性值1;
...
}
注意：id 屬性只能在每個 HTML 檔案中出現一次
id選擇器和類選擇器的區別：
- 類選擇器（class）好比人的名字，一個人可以有多個名字，同時一個名字也可以被多個人使用，
- id 選擇器好比人的身份證號碼，全中國是唯一的，不得重復，
- id 選擇器和類選擇器最大的不同在于使用次數上，
- 類選擇器在修改樣式中用的最多，id 選擇器一般用于頁面唯一性的元素上，經常和 JavaScript 搭配使用，
1.6、通配符選擇器：
語法：
* {
屬性1: 屬性值1;
...
}
通配符選擇器不需要呼叫， 自動就給所有的元素使用樣式，特殊情況才使用
清除所有的元素標簽的內外邊距：
* {
argin: 0;
padding: 0;
}
2、css字體屬性
2.1、字體粗細
font-weight :
2.2、字體樣式
font-style :
2.3、字體的綜合寫法
字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節約代碼:
body {
font: font-style
font-weight
font-size/line-height
font-family;
}
使用 font 屬性時，必須按上面語法格式中的順序書寫，不能更換順序，并且各個屬性間以空格隔開 不需要設定的屬性可以省略（取默認值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用
3、css文本屬性
3.1、文本顏色
color 屬性用于定義文本的顏色，
語法：
div {
color: red;
}
開發中最常用的是十六進制
3.2、文本對齊
text-align 屬性用于設定元素內文本內容的水平對齊方式，
語法：
div {
text-align: center;
}
3.3、修飾文本
語法：
div {
text-decoration：underline；
}
重點：
- 如何添加下劃線
- 如何洗掉下劃線
3.4、文本縮進
語法：
div {
text-indent：20px；
}
div {
text-indent：2em；
}
em 是一個相對單位，就是當前元素（font-size) 1 個文字的大小, 如果當前元素沒有設定大小，則會按照父元素的 1 個文字大小，
3.5、行間距
line-height 屬性用于設定行間的距離（行高），可以控制文字行與行之間的距離
語法：
p {
line-height: 26px;
}
行高的文本分為 上間距 文本高度 下間距 = 行間距
4、css樣式表
? 按照 CSS 樣式書寫的位置（或者引入的方式），CSS 樣式表可以分為三大類：
5、Chrome除錯工具
- Ctrl+滾輪 可以放大開發者工具代碼大小，
- 左邊是 HTML 元素結構，右邊是 CSS 樣式，
- 右邊 CSS 樣式可以改動數值（左右箭頭或者直接輸入）和查看顏色，
- Ctrl + 0 復原瀏覽器大小，
- 如果點擊元素，發現右側沒有樣式引入，極有可能是類名或者樣式引入錯誤，
- 如果有樣式，但是樣式前面有黃色嘆號提示，則是樣式屬性書寫錯誤，
持續更新中，，，，，，，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/321105.html
標籤：其他