三十六、前端基础 CSS
CSS相關
- 一 CSS簡介
- 二 CSS選擇器
- 2.1 基本選擇器
- 2.2 組合選擇器
- 2.3 屬性選擇器
- 2.4 分組與嵌套
- 2.5 偽類選擇器
- 2.6 偽元素選擇器
- 2.7 選擇器優先級
- 三 字體樣式
- 3.1 寬和高
- 3.2 文字字體
- 3.3 文本顏色
- 3.4 文字屬性
- 四 背景屬性
- 五 邊框屬性
- 六 display屬性
- 七 盒子模型
- 八 浮動
- 九 溢出屬性
- 十 定位
- 十一 z-index
一 CSS簡介
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素
語法結構：
選擇器 {
? 屬性名:屬性值;
? 屬性名:屬性值;
}
注釋語法
/**/
三種編寫CSS的方式
二 CSS選擇器
2.1 基本選擇器
標簽選擇器
<style>div {color:red;} </style>id選擇器
<style>#d1 {color: red;} </style>類選擇器
<style>.c {color: red;} </style>通用選擇器
<style>* {color: red;} </style>2.2 組合選擇器
后代選擇器
兩個選擇器之間空格隔開，前面的選擇器取到的標簽內部所有符合空格后面的選擇器要求的標簽
<head><meta charset="UTF-8"><title>Title</title><style>div span {color: red;}</style> </head> <body><p id="3">p</p><div>div<p id="5">div里的p<span id="d1">div里的p里的span</span></p><span id="2">div里的span</span></div><p id="4">p</p> </body>兒子選擇器
兩個選擇器之間用 > 隔開，前面的選擇器獲取到的標簽內部第一層符合 > 后邊的選擇器要求的標簽
<style>div>span {color: red;} </style>毗鄰選擇器
兩個選擇器之間用+號隔開，前面選擇器獲取的標簽下面緊挨著的 + 號后的標簽
<style>div+p {color: red;} </style>弟弟選擇器
查找前面標簽同級別下的符合后面的所有標簽
<style>div~p {color: red;} </style>2.3 屬性選擇器
所有的標簽不僅有默認屬性(id和class)，還可以自定義屬性(x,y)。
<head><meta charset="UTF-8"><title>Title</title><style>/*查找有name屬性的并修改*/[name] {background-color: red;}/*查找有name屬性并且屬性值為p1的修改*/[name="p1"] {background-color: red;}/*查找span標簽里由屬性name的標簽并且屬性值為span1的標簽修改*/span[name="span1"] {background-color: red;}</style> </head> <body><div>div<p name="p1">div>p<span name="span1">div>p>span</span></p><span name="span2">div>span</span></div><p>p</p><span name="123">span</span> </body>2.4 分組與嵌套
當多個選擇器查找的標簽需要調整為相同的樣式，那么就可以合并
<style>[name=span1],span {background-color: red;} </style>合并的選擇器彼此之間不干擾也沒有類型的限制，還可以在選擇器基礎上添加額外的選擇使得查找更精確。
2.5 偽類選擇器
a標簽默認的顏色有兩種，紫色和藍色，當瀏覽器從來沒有訪問過該地址就是藍色，被訪問過就是紫色。
<head><meta charset="UTF-8"><title>Title</title><style>a:hover {color: red;}</style> </head> <body> <a href="https://www.4399.com">點我進4399</a> </body>當鼠標懸停到a標簽上時，會產生變化。
2.6 偽元素選擇器
<head><meta charset="UTF-8"><title>Title</title><style>/*給首字母設置特殊的樣式*/p:first-letter {font-size: 50px;color: red;}/*后面插入內容*/p:after {content: "命運如同手中的掌紋，無論多曲折，終掌握在自己手中。";color: blueviolet;}/*前面插入內容*/p:before {content: "沒有什么不可能，只看你去不去做。";color: chartreuse;}</style> </head> <body><p> 穿透石頭的水滴，它的力量來源于日積月累。</p> </body>2.7 選擇器優先級
選擇器相同，引入位置不同
就近原則
選擇器不同
行內 > id選擇器 > 類選擇器 > 標簽選擇器 (精確度越高的優先級越高)
三 字體樣式
3.1 寬和高
width屬性可以為元素調整寬度。
height屬性可以為元素調整高度。
塊級標簽才可以調整寬度，行內標簽的高度由自身內容決定。
3.2 文字字體
font-family
body {font-family: "微軟雅黑", sans-serif;}font-size 字體大小
p {font-size: 50px;}font-weight 設置字體粗細
| normal | 正常值 |
| bold | 粗體 |
| bolder | 更粗 |
| lighter | 更細 |
| 100~900 | 設置具體粗細 |
| inherit | 繼承父類字體的粗細 |
3.3 文本顏色
顏色屬性被用來設置文字的顏色。
設置顏色的三種方式：
rgba第四個值為alpha，指定色彩的透明度，范圍在0.0~1.0之間
3.4 文字屬性
文字對齊
text-align 規定元素中文本對齊方式
| left | 左對齊，默認 |
| right | 右對齊 |
| center | 居中 |
| justify | 兩端對齊 |
文字裝飾
text-decorration 屬性用來給文字添加特殊效果
| none | 默認，沒有任何裝飾 |
| underline | 定義文本下的一條線 |
| overline | 定義文本上的一條線 |
| line-through | 定義穿過文本下的一條線 |
| inherit | 繼承父類的屬性 |
常用：為a標簽去除下劃線
首行縮進
p {text-indent: 32px;}四 背景屬性
<style>div {height: 400px;width: 400px;/*背景顏色*//*background-color: gold;*//*背景圖片*/background-image: url("https://img1.baidu.com/it/u=3720572290,2769763744&fm=253&fmt=auto&app=138&f=JPEG?w=507&h=500");/*背景重復repeat：默認，背景圖片平鋪整個網頁repeat-x：背景圖片只在水平方向上平鋪repeat-y：背景圖片只在垂直方向上平鋪no-repeat：背景圖片不平鋪*//*background-repeat: no-repeat;*//*背景位置*/background-position: left top;}</style>/*支持簡寫*/ background:#336699 url('1.png') no-repeat left top;五 邊框屬性
<style>/*i {*//* border-width: 2px;*//* border-style: solid;*//* border-color: red;*//*}*//*簡寫*/i {border: 2px solid red;} </style>邊框樣式
| none | 無邊框 |
| dotted | 點狀虛線邊框 |
| dashed | 矩形虛線邊框 |
| solid | 實線邊框 |
還可以單獨為每個邊框設置樣式
i {border-top: 2px solid yellow;border-right: 2px solid red;border-bottom: 2px solid blue;border-left: 2px solid salmon;}border-radius
div {width: 500px;height: 500px;background: red;border-radius: 250px;}六 display屬性
用于控制HTML元素的顯示效果
display:“none”
HTML文檔中元素存在，但是在瀏覽器中不顯示，一般用于配合JavaScript使用。
<body><p><input type="text" style="display: none"></p><p>password:<input type="password"></p><p><input type="date" style="display: none"></p> </body>display:"none"與visibility:hidden的區別：
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none: 可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
七 盒子模型
- margin：用于控制元素與元素之間的距離
- border(邊框)：圍繞在內邊距和內容外的邊框
- padding：用于控制內容與邊框之間的距離
- content：盒子的內容，顯示文本和圖像
掌握操作:
body標簽自帶8px外邊距
body {margin: 0; /*作用與上下左右*/margin: 10px 10px; /*上下 左右*/margin: 10px 10px 10px; /*上 左右 下*/margin: 10px 10px 10px 10px; /*上 右 下 左*/ }margin還可以讓內部標簽居中展示
margin:100px auto; /*僅限水平居中*/八 浮動
在css中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動會造成父標簽塌陷，解決方法是偽元素清楚法。
瀏覽器針對文本是優先顯示的。
九 溢出屬性
| visible | 默認值，內容不會被修剪，會呈現在元素框外 |
| hidden | 內容會被修剪，并且其余的內容不可見。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余內容 |
| auto | 被修剪后以滾動條展示 |
| inherit | 規定應該從父元素繼承overfull屬性 |
圓形頭像
div {height: 50px;width: 50px;border: 5px solid red;border-redius: 50%;overfull: hidden; }img {max-width: 100%; }十 定位
十一 z-index
瀏覽器其實是一個三維的坐標系，z軸指向用戶。
總結
以上是生活随笔為你收集整理的三十六、前端基础 CSS的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 重新认识受控和非受控组件
- 下一篇： 学术会议将变革？Hinton 呼吁 AI