CSS樣式（1）
時間：2023-09-19 07:24:01 | 來源：網站運營
時間：2023-09-19 07:24:01 來源：網站運營
CSS樣式（1）：css注釋代碼
/*注釋代碼*/
內聯式css樣式
把css代碼直接寫進Html標簽內
<p style="color:red;font-size:12px">xxx</p>
嵌入式css樣式
把css代碼寫在<style type="text/css"></style>標簽之內，一般嵌入式css樣式寫在<head></head>之間
<style type="text/css">
span{
color:red;
}
</style>
外部式css樣式
把css代碼寫一個單獨的外部文件中，使用<link>標簽將css文件鏈接到Html文件內
<link href="base.css" rel="stylesheet" type="text/css"/>
<link>標簽一般寫在<head>標簽內
rel="stylesheet" type="text/css"是固定寫法
選擇器
標簽選擇器p{font-size:12px;line-height:16em;}
類選擇器<span class="stress">xxx</span>
.stress{color:red;}
ID選擇器<span id="set">xxx</span>
#set{color:red;}
子選擇器 用于選擇指定標簽元素的第一代子元素
.food>li{border:1px solid:red;}
這行代碼會使class名為food下的子元素li加入紅色實線邊框。
包含(后代選擇器)：后代選擇器是作用于所有子后代元素。
.first span{color:red;}
>作用于元素的第一代后代，空格作用于元素的所有后代。
通用選擇器 使用(*)號指定，作用是匹配Html中所有的標簽元素。
分組選擇符 為Htl中多個標簽元素設置同一個樣式，使用分組選擇符(,)
h1,span{color:red;}相當于h1{color:red;}
span{color:red;}
偽類選擇符 它允許給Html不存在的標簽設置樣式(標簽的某種狀態(tài))
比如給Html中一個元素的鼠標滑過狀態(tài)設置字體顏色：
a:hover{color:red;}
權值
標簽使用哪種css樣式是瀏覽器根據權值來判斷的，標簽等等權值為1 類選擇符的權值為10 ID選擇符的權值是100
為某些樣式設置最高權值
p{color:red!important;}
p{color:green;}
<p class="first">xxx<span>xxx</span>
這里的文字將會顯示為紅色。
文字排版
---字體
span{font-family:"Microsoft Yahei";}
---字號，顏色
span{font-size:12px;color:#666}
---下劃線
span{text-decoration:underline;}
---刪除線
span{text-decoration:line_though;}
---粗體
span{font-weight:bold;}
---斜體
span{font-style:italic;}
段落排版
---縮進
span{text-indent:2em;}
---行間距(行高)
span{line-height:i.5em;}
---中文字間距，字母間距
文字間隔或字母間隔用letter-spacing；用在英文單詞時，是設置字母之間的間距。
h1{letter-spacing:50px;}
<h1>xxx</h1>
單詞與單詞之間的間距：word-spacing
h1{word-spacing:50px;}
<h1>welcome to china!</h1>
---對齊
text-align:center;居中
text-align:left;居左
text-align:right;居右
在線咨詢
