一:偽元素選擇器
1.首字調整>>>:也是一種文檔布局的方式
p:first-letter {
font-size: 48px; /*字體大小*/
color: red;
}
2.在文本的前面通過css動態渲染文本>>>:特殊文本無法選中
p:before {
content: '嘿嘿';
color: red;
}
- 標簽
<p>::before言而有信 品行端正 光明磊落 待人以誠</p>
3.在文本的后面通過css動態渲染文本>>>:特殊文本無法選中
p:after {
content: '呵呵';
color: greenyellow;
}
<p>言而有信 品行端正 光明磊落 待人以誠::after</p>
- 注意
- 1.以后我們在編寫爬蟲程序爬取頁面內容的時候如果沒有正常文本
- 2.那么可能是因為偽元素選擇器的問題
二:選擇器的優先級
- 我們學習了三種css引入方式並且學習了很多選擇器
1.選擇器優先級
那么如果出現多個選擇器修改同一個標簽樣式 會優先參考誰的
研究基本選擇器即可
標簽選擇器 類選擇器 id選擇器 行內選擇器
2.相同選擇器不同導入方式(相同距離優先)
相同選擇器不同導入方式(相同距離優先)
選擇器系統遵循就進原則 從上往下誰離標簽更近誰說了算
3.不同選擇器不遵循就近原則>>>:優先級
不同選擇器不遵循就近原則>>>:優先級
行內選擇器 > id選擇器 > 類選擇器 > 標簽選擇器
三:字體相關
1.高度和寬度
只有塊兒級標簽可以設置 行內標簽無法設置
<style>
p {
height: 1000px; /*高度*/
width: 50px; /*寬度*/
}
</style>
2.字體大小
font-size: 99px; # 字體大小一般有固定的大小參考(肉眼適應)
3.字重(粗細)
font-weight用來設置字體的字重（粗細）。
font-weight: bolder; /*字體粗*/
font-weight: lighter; /*字體細*/
| 值 | 描述 |
|---|---|
| normal | 默認值，標准粗細 |
| bold | 粗體 |
| bolder | 更粗 |
| lighter | 更細 |
| 100~900 | 設置具體粗細，400等同於normal，而700等同於bold |
| inherit | 繼承父元素字體的粗細值 |
四:文本顏色
- 顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。
1.第一種方式
color:red;
2.第二種方式(顏色編碼)
color:#4e4e4e;
3.第三種方式(0-255)
color:rgb(88,88,88)
rgba(88,88,88,0.2) # 最后一個參數調整透明度(0-1)
五:文字屬性
text-align 屬性規定元素中的文本的水平對齊方式。
1.文字對齊
text-align: center; # 居中展示
| 值 | 描述 |
|---|---|
| left | 左邊對齊 默認值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
2.文字裝飾(很常用!!!)
text-decoration 屬性用來給文字添加特殊效果。
3.主要用於去除a標簽默認的下划線
a {
text-decoration: none;
}
| 值 | 描述 |
|---|---|
| none | 默認。定義標准的文本。 |
| underline | 定義文本下的一條線。 |
| overline | 定義文本上的一條線。 |
| line-through | 定義穿過文本下的一條線。 |
| inherit | 繼承父元素的text-decoration屬性的值。 |
4.首行縮進
默認文字大小是16px 32像素：
p {
text-indent: 32px;
}
六:背景屬性
1.背景顏色
<style>
div {
background-color: orange;
height: 1600px;
width: 1600px;
}
</style>
2.背景圖片
background-image: url('url');
3.背景重復
是否鋪滿
background-repeat: no-repeat;
repeat(默認):背景圖片平鋪排滿整個網頁
repeat-x：背景圖片只在水平方向上平鋪
repeat-y：背景圖片只在垂直方向上平鋪
no-repeat：背景圖片不平鋪
4.圖片位置
background-position:左右 上下;
5.指定位置
background-position:200px 200px;
6.左右上下居中
background-position:center center;
7.多個屬性名前綴相同 那么可以簡寫
background:orange url('url') no-repeat center center;
一個個編寫即可 不寫就默認
8.如何實時修改圖片位置
瀏覽器找到標簽的css代碼 然后方向鍵上下按住即可動態調整
七：邊框屬性
1.左側邊框
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 3px;*/
}
- /多個屬性有相同的前綴 一般都可以簡寫/
2.簡寫(左側邊框)
/*border-left: 5px red solid; !*沒有順序*!*/
3.簡寫(上下左右邊框)可自定制
h1 {
/*border-left: 5px red solid;
/*上側邊框*/
/*border-top:orange 10px dotted;*/
/*右側邊框*/
/*border-right: black dashed 5px;*/
/*下側邊框*/
/*border-bottom: deeppink 8px solid;*/
/*多個屬性有相同的前綴 一般都可以簡寫*/
}
4.簡寫集合(上下左右)不可自定制
border: 5px red solid; /*上下左右一致*/
5:邊框樣式
| 值 | 描述 |
|---|---|
| none | 無邊框。 |
| dotted | 點狀虛線邊框。 |
| dashed | 矩形虛線邊框。 |
| solid | 實線邊框。 |
6.畫圓
div {
height: 500px;
width: 500px;
border: 5px solid red;
/*畫圓*/
border-radius: 50%;
}
八:display屬性
1.用於控制HTML元素的顯示效果。
| 值 | 意義 |
|---|---|
| display:"none" | HTML文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用。 |
| display:"block" | 默認占滿整個頁面寬度，如果設置了指定寬度，則會用margin填充剩下的部分。 |
| display:"inline" | 按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什么影響。 |
| display:"inline-block" | 使元素同時具有行內元素和塊級元素的特點。 |
2.塊級變行內
div {
display: inline;
}
3.行內變塊級
span {
/*display: block;
}
4.（隱藏標簽）
-
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
-
display: none; 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
-
代碼
span {
/*display: block;
display: none;
}
5.讓行內標簽具備修改長寬特性(原本不具備)
讓行內標簽具備塊級標簽可以修改長寬的特性
也具備行內標標簽文本多大就占多大的特性
- 代碼
p {
height: 100px;
width: 100px;
display: inline-block;
}
九:盒子模型
- margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
- padding: 用於控制內容與邊框之間的距離；
- Border(邊框): 圍繞在內邊距和內容外的邊框。
- Content(內容): 盒子的內容，顯示文本和圖像。
1.抽象以快遞盒舉例
1.快遞盒與快遞盒之間的距離 外邊距(標簽之間的距離)
2.快遞盒的厚度 邊框
3.內部物品到盒子的距離 內邊距(文本內容到邊框的距離)
4.物品本身的大小 文本大小
2.盒子模型
<style>
div {
border: 5px solid black;
}
</style>
3.body標簽默認自帶8px的外邊距 在編寫的時候應該提前去掉
- 要使用margin: 0; 貼合上邊框
body {
margin: 0;
}
4.外邊距(標簽之間的距離)
margin簡寫 : 標簽與標簽之間的距離
margin:0px; # 上下左右都一致
margin:10px 10px; # 第一個控制上下 第二個控制左右
margin:20px 10px 20px; # 上 左右 下
margin:10px 2px 3px 5px; # 上 右 下 左
5.內邊距(文本內容到邊框的距離)
padding簡寫 : 內部數據與邊框的距離
padding:0px; # 上下左右都一致
padding:10px 10px; # 第一個控制上下 第二個控制左右
padding:20px 10px 20px; # 上 左右 下
padding:10px 2px 3px 5px; # 上 右 下 左