一、簡介
1、HTML局限性
HTML只關注內容的語義,但是丑!
2、CSS概要
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡稱,有時我們也會稱之為 CSS 樣式表或級聯樣式表。
CSS 是也是一種標記語言
CSS 主要用于設置 HTML 頁面中的文本內容(字體、大小、對齊方式等)、圖片的外形(寬高、邊框樣式、邊距等)以及版面的布局和外觀顯示樣式。
由 HTML 專注去做結構呈現,樣式交給 CSS,即 結構 ( HTML ) 與樣式( CSS ) 相分離
3、CSS語法規范
CSS 規則由兩個主要的部分構成:選擇器以及一條或多條聲明。
h1 {color: red;font-size: 25px;
}
- 選擇器是用于指定 CSS 樣式的 HTML 標簽,花括號內是對該對象設置的具體樣式
- 屬性和屬性值以“鍵值對”的形式出現
- 屬性是對指定的對象設置的樣式屬性,例如字體大小、文本顏色等
- 屬性和屬性值之間用英文“:”分開
- 多個“鍵值對”之間用英文“;”進行區分
所有的樣式,都包含在 <style>
標簽內,表示是樣式表。<style>
一般寫到 </head>
上方。
<head><style>h4 {color: blue;font-size: 100px;}</style>
</head>
4、CSS代碼風格
樣式格式書寫:展開格式
樣式大小寫風格:樣式選擇器,屬性名,屬性值關鍵字全部使用小寫字母
樣式空格風格:屬性值前面,冒號后面,保留一個空格、選擇器(標簽)和大括號中間保留空格
二、基礎選擇器
1、選擇器作用
區分并選擇標簽
2、選擇器分類
選擇器分為基礎選擇器和復合選擇器兩個大類
基礎選擇器是由單個選擇器組成的
3、標簽選擇器
標簽選擇器是用 HTML 標簽名稱作為選擇器,按標簽名稱分類
h1 {color: red;
}
4、類選擇器
類選擇器在 HTML 中以 class 屬性表示,在 CSS 中,類選擇器以一個點“.”號顯示。一個標簽可以有多個名字,空格隔開。
<div class=‘red’> 變紅色 </div>
.red {color: red;
}
樣式點定義,結構類調用。一個或多個,開發最常用
5、id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。HTML 元素以 id 屬性來設置 id 選擇器,CSS 中 id 選擇器以“#" 來定義。
<div id=‘red’> 變紅色 </div>
#red {color: red;
}
id 屬性只能在每個 HTML 文檔中出現一次。
樣式#定義,結構id調用,只能調用一次,別人切勿使用
6、通配符選擇器
通配符選擇器使用“*”定義,它表示選取頁面中所有元素(標簽)。
* {margin: 0;padding: 0;
}
三、字體屬性
1、字體系列
CSS 使用 font-family 屬性定義文本的字體系列
div {font-family: Arial,"Microsoft Yahei", "微軟雅黑";
}
各種字體之間必須使用英文狀態下的逗號隔開
一般情況下,如果有空格隔開的多個單詞組成的字體,加引號。
盡量使用系統默認自帶字體,保證在任何用戶的瀏覽器中都能正確顯示
2、字體大小
CSS 使用 font-size 屬性定義字體大小。
px(像素)大小是我們網頁的最常用的單位
谷歌瀏覽器默認的文字大小為16px。不同瀏覽器可能默認顯示的字號大小不一致,我們盡量給一個明確值大小,不要默認大小(可以給 body 指定整個頁面文字的大小)
3、字體粗細
CSS 使用 font-weight 屬性設置文本字體的粗細。
屬性值 | 描述 |
---|---|
normal | 默認值 |
bold | 粗體 |
100~900 | normal:400;bold:700 |
4、文字樣式
CSS 使用 font-style 屬性設置文本的風格
屬性值 | 描述 |
---|---|
normal | 默認值 |
italic | 斜體 |
很少使用斜體,反而要給em,i改為不傾斜
5、字體復合屬性
字體屬性可以把以上文字樣式綜合來寫, 這樣可以更節約代碼
body { font: [font-style] [font-weight] font-size[/line-height] font-family;
}
使用 font 屬性時,必須按上面語法格式中的順序書寫,不能更換順序,并且各個屬性間以空格隔開
不需要設置的屬性可以省略(取默認值),但必須保留 font-size 和 font-family 屬性,否則 font 屬性將不起作用。
四、文本屬性
1、文本顏色
color 屬性用于定義文本的顏色。
表示方式 | 屬性值 |
---|---|
預定義的顏色 | red、green、blue、pink |
十六進制 | #FF0000 |
RGB代碼 | rgb(255,0,0) 或者 rgb(100%,100%,100%) |
開發中最常用的是十六進制
2、對齊文本
text-align 屬性用于設置元素內文本內容的水平對齊方式。
屬性值 | 解釋 |
---|---|
left | 左對齊(默認) |
right | 右對齊 |
center | 居中對齊 |
3、裝飾文本
text-decoration 屬性規定添加到文本的修飾。可以給文本添加下劃線、刪除線、上劃線等。
屬性值 | 描述 |
---|---|
none | 無(默認) |
underline | 下劃線 |
overline | 上劃線(?) |
line-through | 刪除線 |
4、文本縮進
text-indent 屬性用來指定文本的第一行的縮進,通常是將段落的首行縮進。
em 是一個相對單位,就是當前元素(font-size)1 個文字的大小,如果當前元素沒有設置大小,則會按照父元素的 1 個文字大小
div { text-indent: 10px;
}p { text-indent: 2em;
}
5、行間距
line-height 屬性用于設置行間的距離(行高)。可以控制文字行與行之間的距離.
五、CSS引入方式
1、內部樣式表
內部樣式表(內嵌樣式表)是寫到html頁面內部. 是將所有的 CSS 代碼抽取出來,單獨放到一個 <style>
標簽中
<style>
h4 {color: blue;font-size: 100px;
}
</style>
<style>
標簽理論上可以放在 HTML 文檔的任何地方,但一般會放在文檔的<head>
標簽中。代碼結構清晰,但是并沒有實現結構與樣式完全分離
使用內部樣式表設定 CSS,通常也被稱為嵌入式引入,這種方式是練習時常用的方式
2、行內樣式表
行內樣式表(內聯樣式表)是在元素標簽內部的 style 屬性中設定 CSS 樣式。適合于修改簡單樣式
<div style="color: red; font-size: 12px;">青春不常在,抓緊談戀愛</div>
style 其實就是標簽的屬性,在雙引號中間,寫法要符合 CSS 規范
可以控制當前的標簽設置樣式
由于書寫繁瑣,并且沒有體現出結構與樣式相分離的思想,所以不推薦大量使用,只有對當前元素添加簡單樣式的時候,可以考慮使用使用行內樣式表設定 CSS,通常也被稱為行內式引入
3、外部樣式表
- 新建一個后綴名為 .css 的樣式文件,把所有 CSS 代碼都放入此文件中。
- 在 HTML 頁面中,使用
<link>
標簽引入這個文件。
<link rel="stylesheet" href="css文件路徑">
使用外部樣式表設定 CSS,通常也被稱為外鏈式或鏈接式引入,這種方式是開發中常用的方式
六、瀏覽器調試工具
Ctrl+滾輪 可以放大開發者工具代碼大小。
左邊是 HTML 元素結構,右邊是 CSS 樣式。
右邊 CSS 樣式可以改動數值(左右箭頭或者直接輸入)和查看顏色。
Ctrl + 0 復原瀏覽器大小。
如果點擊元素,發現右側沒有樣式引入,極有可能是類名或者樣式引入錯誤。
如果有樣式,但是樣式前面有黃色嘆號提示,則是樣式屬性書寫錯誤。
七、復合選擇器
1、后代選擇器
后代選擇器:選擇父元素里面子元素
寫法:把外層標簽寫在前面,內層標簽寫在后面,中間用空格分隔。當標簽發生嵌套時,內層標簽就成為外層標簽的后代。
ul li { 樣式聲明 } /* 選擇 ul 里面所有的 li標簽元素 */
- 元素1 和 元素2 中間用空格隔開
- 元素1 是父級,元素2 是子級,最終選擇的是元素2
- 元素2 可以是兒子,也可以是孫子等,只要是元素1 的后代即可
- 元素1 和 元素2 可以是任意基礎選擇器
2、子選擇器
子元素選擇器(子選擇器)只能選擇作為某元素的最近一級子元素。(親兒子元素)
div > p { 樣式聲明 } /* 選擇 div 里面所有最近一級 p 標簽元素 */
- 元素1 和 元素2 中間用 大于號 隔開
- 元素1 是父級,元素2 是子級,最終選擇的是元素2
- 元素2 必須是親兒子
3、并集選擇器
并集選擇器可以選擇多組標簽, 同時為他們定義相同的樣式。通常用于集體聲明。通過英文逗號(,)連接而成,任何形式的選擇器都可以作為并集選擇器的一部分。
ul,div { 樣式聲明 } /* 選擇 ul 和 div標簽元素 */
- 元素1 和 元素2 中間用逗號隔開
- 逗號可以理解為和的意思
- 并集選擇器通常用于集體聲明
4、鏈接偽類選擇器
偽類選擇器用于向某些選擇器添加特殊的效果
偽類選擇器書寫最大的特點是用冒號(:)表示,比如 :hover 、 :first-child 。
鏈接偽類選擇器注意事項
- 為了確保生效,請按照 LVHA 的循順序聲明 :link-:visited-:hover-:active。
- 記憶法:love hate 或者 lv 包包 hao 。
- 因為 a 鏈接在瀏覽器中具有默認樣式,所以我們實際工作中都需要給鏈接單獨指定樣式。
/* a 是標簽選擇器 所有的鏈接 */
a { color: gray;
}/* :hover 是鏈接偽類選擇器 鼠標經過 */
a:hover { color: red; /* 鼠標經過的時候,由原來的 灰色 變成了紅色 */
}
6、:focus
偽類選擇器
:focus 偽類選擇器用于選取獲得焦點的表單元素。
焦點就是光標,一般情況 <input>
類表單元素才能獲取,因此這個選擇器也主要針對于表單元素
input:focus { background-color:yellow;
}
八、元素顯示模式
1、塊元素
常見的塊元素有h1~h6、p、div、ul、ol、li等,其中 div 標簽是最典型的塊元素
特點
- 比較霸道,自己獨占一行。
- 高度,寬度、外邊距以及內邊距都可以控制。
- 寬度默認是容器(父級寬度)的100%。
- 是一個容器及盒子,里面可以放行內或者塊級元素。
注意
- 文字類的元素內不能使用塊級元素
- p 標簽主要用于存放文字,因此 p 里面不能放塊級元素,特別是不能放div
- h1~h6等都是文字類塊級標簽,里面也不能放其他塊級元素
2、行內元素
常見的行內元素有 a、strong、b、em、i、del、s、ins、u、span等,其中span標簽是最典型的行內元素。有的地方也將行內元素稱為內聯元素。
特點
- 相鄰行內元素在一行上,一行可以顯示多個。
- 高、寬直接設置是無效的。
- 默認寬度就是它本身內容的寬度。
- 行內元素只能容納文本或其他行內元素。
注意
- 鏈接里面不能再放鏈接
- 特殊情況鏈接
<a>
里面可以放塊級元素,但是給<a>
轉換一下塊級模式最安全
3、行內塊元素
在行內元素中有幾個特殊的標簽: <img />
、<input />
、<td>
,它們同時具有塊元素和行內元素的特點。稱它們為行內塊元素。
特點
- 和相鄰行內元素(行內塊)在一行上,但是他們之間會有空白縫隙。一行可以顯示多個(行內元素特點)。
- 默認寬度就是它本身內容的寬度(行內元素特點)。
- 高度,行高、外邊距以及內邊距都可以控制(塊級元素特點)
4、元素顯示模式轉換
一個模式的元素需要另外一種模式的特性
轉換為塊元素:display:block;
轉換為行內元素:display:inline;
轉換為行內塊:display: inline-block;
5、單行文字垂直居中
讓文字的行高等于盒子的高度 就可以讓文字在當前盒子內垂直居中
九、背景
1、背景顏色
一般情況下元素背景顏色默認值是 transparent(透明),我們也可以手動指定背景顏色為透明色。
p {background-color: pink;
}div {background-color: transparent;
}
2、背景圖片
background-image 屬性描述了元素的背景圖像。實際開發常見于 logo 或者一些裝飾性的小圖片或者是超大的背景圖片, 優點是非常便于控制位置
div {background-image : none;
}p {background-image : url(https://rexhao.work/medias/logo.png);
}
注意:背景圖片后面的地址,千萬不要忘記加 URL, 同時里面的路徑不要加引號。
3、背景平鋪
background-repeat: repeat | no-repeat | repeat-x | repeat-y
參數 | 作用 |
---|---|
repeat | 背景圖像在縱向和橫向上平鋪(默認) |
no-repeat | 背景圖便不平鋪 |
repeat-x | 背景圖像在橫向上平鋪 |
repeat-y | 背景圖像在縱向平鋪 |
4、背景圖片位置
利用 background-position 屬性可以改變圖片在背景中的位置
background-position: x y;
參數代表的意思是:x 坐標和 y 坐標。 可以使用 方位名詞 或者 精確單位
參數 | 說明 |
---|---|
length | 百分數 | 長度值 |
position | top | center | bottom | left |right 方位名詞 |
- 參數是方位名詞
- 如果指定的兩個值都是方位名詞,則兩個值前后順序無關,比如 left top 和 top left 效果一致
- 如果只指定了一個方位名詞,另一個值省略,則第二個值默認居中對齊
- 參數是精確單位
- 如果參數值是精確坐標,那么第一個肯定是 x 坐標,第二個一定是 y 坐標
- 如果只指定一個數值,那該數值一定是 x 坐標,另一個默認垂直居中
- 參數是混合單位
- 如果指定的兩個值是精確單位和方位名詞混合使用,則第一個值是 x 坐標,第二個值是 y
5、背景圖像固定(背景附著)
background-attachment 屬性設置背景圖像是否固定或者隨著頁面的其余部分滾動,后期可以制作視差滾動的效果
background-attachment : scroll | fixed
參數 | 作用 |
---|---|
scroll | 背景圖隨著對象滾動 |
fixed | 背景圖像固定 |
6、背景復合寫法
為了簡化背景屬性的代碼,我們可以將這些屬性合并簡寫在同一個屬性 background 中,節約代碼量。
background: 背景顏色 背景圖片地址 背景平鋪 背景圖像滾動 背景圖片位置;
background: transparent url(image.jpg) repeat-y fixed top;
7、背景色半透明
CSS3 為我們提供了背景顏色半透明的效果。
background: rgba(0, 0, 0, 0.3);
- 最后一個參數是 alpha 透明度,取值范圍在 0~1之間
- 習慣把 0.3 的 0 省略掉,寫為
background: rgba(0, 0, 0, .3);
- 背景半透明是指盒子背景半透明,盒子的內容不受影響
- CSS3 新增屬性, IE9+ 版本瀏覽器才支持的。但現在實際開發,我們不太關注兼容性寫法了,可以放心使用
十、CSS三大特性
1、層疊性
相同選擇器給設置相同的樣式,此時一個樣式就會覆蓋)另一個沖突的樣式。層疊性主要 解決樣式沖突的問題
相同優先級,后來居上
2、繼承性
子標簽會維承父標簽的某些樣式,如文本顏色和字號。(子承父業)
text-,font-,line-,color屬性
行高的繼承
body {font: 12px/1.5 Microsoft YaHei;
}
行高可以跟單位也可以不跟單位
如果子元素沒有設置行高:繼承父元素的行高為 1.5,此時子元素的行高是 :當前子元素的文字大小 * 1.5
優勢就是里面的子元素可以根據自己文字大小自動調整行高
3、優先級
選擇器 | 權重 |
---|---|
繼承、* | 0,0,0,0 |
元素選擇器 | 0,0,0,1 |
類選擇器、偽類選擇器 | 0,0,1,0 |
ID選擇器 | 0,1,0,0 |
行內元素 | 1,0,0,0 |
!important | 無窮大 |
- 權重是有4組數字組成,但是不會有進位。
- 等級判斷從左向右,如果某一位數值相同,則判斯下一位數值
- 繼承的權重是0,如果該元素沒有直接選中 ,不管父元素權重多高,子元素得到的權重都是0。