僞元素選擇器
# 首字調整>>>:也是一種文檔布局的方式
p:first-letter {
font-size: 48px; /*字型大小*/
color: red;
}
# 在文本的前面通過css動态渲染文本>>>:特殊文本無法選中
p:before {
content: '嘿嘿';
color: red;
}
<p>::before言而有信 品行端正 光明磊落 待人以誠</p>
# 在文本的後面通過css動态渲染文本>>>:特殊文本無法選中
p:after {
content: '呵呵';
color: greenyellow;
}
<p>言而有信 品行端正 光明磊落 待人以誠::after</p>
"""
以後我們在編寫爬蟲程式爬取頁面内容的時候如果沒有正常文本
那麼可能是因為僞元素選擇器的問題
"""
選擇器的優先級
"""
我們學習了三種css引入方式并且學習了很多選擇器
那麼如果出現多個選擇器修改同一個标簽樣式 會優先參考誰的
研究基本選擇器即可
标簽選擇器 類選擇器 id選擇器 行内選擇器
"""
# 相同選擇器不同導入方式
選擇器系統遵循就進原則 從上往下誰離标簽更近誰說了算
# 不同選擇器不遵循就近原則>>>:優先級
行内選擇器 > id選擇器 > 類選擇器 > 标簽選擇器
字型相關
1.寬和高
隻有塊兒級标簽可以設定 行内标簽無法設定
p {
height: 1000px;
width: 50px;
}
2.字型大小
font-size: 99px; # 字型大小一般有固定的大小參考(肉眼适應)
3.粗細
font-weight: bolder;
font-weight: lighter;
4.文本顔色
color:red; # 第一種
color:#4e4e4e; # 第二種
color:rgb(88,88,88) # 第三種
color:rgba(88,88,88,0.2) # 最後一個參數調整透明度(0-1)
5.文字對齊
text-align: center; # 居中展示
6.文字裝飾(很常用!!!)
text-decoration: none; # 主要用于去除a标簽預設的下劃線
7.首行縮進
text-indent: 32px; # 預設文字大小是16px
背景屬性
background-color: orange; # 背景顔色
background-image: url('url'); # 背景圖檔
background-repeat: no-repeat; # 是否鋪滿
background-position:左右 上下; # 圖檔位置
"""多個屬性名字首相同 那麼可以簡寫"""
background:orange url('url'); # 一個個編寫即可 不寫就預設
# 如何實時修改圖檔位置
浏覽器找到标簽的css代碼 然後方向鍵上下按住即可動态調整
邊框屬性
p {
/*border-left-color: red;*/
/*border-left-style: solid;*/
/*border-left-width: 3px;*/
/*多個屬性有相同的字首 一般都可以簡寫*/
/*border-left: 5px red solid; !*沒有順序*!*/
/*border-top:orange 10px dotted;*/
/*border-right: black dashed 5px;*/
/*border-bottom: deeppink 8px solid;*/
/*多個屬性有相同的字首 一般都可以簡寫*/
border: 5px red solid; /*上下左右一緻*/
}
div {
height: 500px;
width: 500px;
border: 5px solid red;
/*畫圓*/
border-radius: 50%;
}
display屬性
div {
display: inline; /*行内*/
}
span {
/*display: block; !*塊級*!*/
display: none;
/*
隐藏标簽 頁面上看不見也不再占用頁面位置
但是通過浏覽器查找标簽是可以看到的
到後面學習django會講跨站請求僞造(釣魚網站)
*/
}
p {
display: inline-block;
/*
具備塊級标簽可以修改長寬的特性
也具備行内标标簽文本多大就占多大的特性
*/
}
盒子模型
"""
以快遞盒為例
1.快遞盒與快遞盒之間的距離 外邊距(标簽之間的距離)
2.快遞盒的厚度 邊框
3.内部物品到盒子的距離 内邊距(文本内容到邊框的距離)
4.物品本身的大小 文本大小
"""
# body标簽預設自帶8px的外邊距 在編寫的時候應該提前去掉
body {
margin: 0;
}
1.外邊距(标簽之間的距離)
margin簡寫
margin:0px; # 上下左右都一緻
margin:10px 10px; # 第一個控制上下 第二個控制左右
margin:20px 10px 20px; # 上 左右 下
margin:10px 2px 3px 5px; # 上 右 下 左
2.内邊距(文本内容到邊框的距離)
padding簡寫
padding:0px; # 上下左右都一緻
padding:10px 10px; # 第一個控制上下 第二個控制左右
padding:20px 10px 20px; # 上 左右 下
padding:10px 2px 3px 5px; # 上 右 下 左
