CSS樣式+選擇器+字型樣式
阿新 • • 發佈：2018-12-01
行內樣式：
直接將style屬性寫在標籤裡面，不建議使用
<p style="display:inline-block;width:200px"></p>
內部樣式：
將style標籤寫在head標籤裡面
<style>
div{
display: inline-block;
width:200px;
}
</style>
引入外部樣式
<head> <link rel="stylesheet" href="main.css"/> </head>
Main.css
@charset "utf-8"
選擇器
標籤選擇器
選中所有的同類標籤
div{}
類選擇器(class)
通過 . 語法來選擇
.div{}
<div class="div"></div>
id選擇器
通過#語法來選擇
#nav{}
<div id="div"></div>
後代選擇器
通過中間空格來選擇控制所有後代，如果用>隔開，那麼就隻影 響直系。
div>span <div> <span></span> </div>
交集選擇器
同時滿足所有條件,不常用
div.c1{}
<div>
<span class="c1"></span> √
<span class="c1"></span> √
<span class="c2"></span> ×
</div>
並集選擇器
有滿足的條件即可
#img1,.img{} <div id="img1"></div> √ <div class="img1"></div> √ <div class="img1"></div> √
優先順序： id>類>標籤
字型樣式
谷歌瀏覽器預設16號字型，最小顯示12號字型
| 程式碼 | 用法 |
|---|---|
| font-weight:bold | 字型加粗 |
| text-align: center | 文字水平居中 |
| font-style: italic | 斜體 |
| line-height:10px | 通過行高進行垂直居中 |
| letter-spacing: 10px | 字元間距 |
| text-decoration: underline0 | 文字修飾下劃線 |
| text-decoration: overline | 上劃線 |
| text-decoration:line-through; | 中劃線 |
| text-decoration: none | 去掉線 |
| text-indent: | 文字縮排 |
| -webkit-text-stroke: 1px red | 文字描邊 |
| text-shadow: 10px 5px 1px black(右移動10;下移動5;字型清晰度-越小越清晰;陰影顏色) | 文字陰影 |
| border:1px soild red | 邊框粗細 實心 顏色 |