Css基礎
CSS語法規則：選擇器 { key1: value1; key2:value2; }
注意：CSS代碼中空格是不被解析的，花括號和分號前後的空格可有可無。
如對h2標籤的控制：h2 { font-size:20px;color:red;}
CSS註釋：/* */ 和java的多行註釋差不多。
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-fV0FT5rE-1589427716044)(C:\Users\JUN\AppData\Roaming\Typora\typora-user-images\image-20200514103844663.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200514114249676.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjE0NjI2OQ==,size_16,color_FFFFFF,t_70)
如何引入CSS樣式？
行內式： 直接在標籤里加入style屬性來設置樣式。
<p style="color:sienna;margin-left:20px">這是一個段落。</p>
內嵌式： 在html文檔的<head>頭部中,使用<style>定義。
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
鏈入式： 所有樣式在.css文件裏，通過引用.css文件到HTML文檔中。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
CSS基礎選擇器
1.標記選擇器：
標記名{ key1: value1; key2:value2; }
如：p{font-size:12px; color:#666;}
2.類選擇器： 通過引用class達到效果
.類名{ key1: value1; key2:value2; }
.center {text-align: center}
<h1 class="center">這個文本將居中</h1>
3.id選擇器： 通過引用id達到效果
#id名 { key1: value1; key2:value2; }
如：#red {color:red;}
<p id="red">這個段落是紅色。</p>
4.通配符選擇器： 所標籤都應用此樣式。
* { key1: value1; key2:value2; }
如：*{ margin:0; padding:0;}
5.標籤指定式選擇器： 由兩個選擇器構成（選擇器間不得有空格）。
選擇器1,選擇器2 { key1: value1; key2:value2; }
如： div.class01{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
注意點：
如：p.class01{color:blue;} /* 這個指定了只能在p標籤下引用了class01纔有效果 */
6.後代選擇器： 標記間使用空格隔開。
外層標記 內層標記 { key1: value1; key2:value2; }
如： div strong{
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
應用：<div><strong>div標籤id01</strong></div>/* 當<strong>嵌套在div裏才能夠使用 */
7.並集選擇器： 向多個選擇器應用指定的樣式。
選擇器1,選擇器2，選擇器3 { key1: value1; key2:value2; }
如： #id01,.class01,div {
color: blue;
font-size: 20px;
border: yellow 1px solid;
}
文本樣式屬性
1.font-size1:字號大小設置字號大小
div{
font-size: 14px;
}
2.font-family:字體 設置文本字體
div{
font-family: 微軟雅黑;
}
3.font-weight:字體粗細 設置字體粗細
div{
font-weight: bold;
}
4.font-style:字體風格 定義字體的風格
div{
font-style: normal;
}
5.font:綜合設置字體樣式 綜合的設置字體樣式
語法：選擇器{ font: font-style font-weight font-size/line-height font-family;}
如：
div{
font:italic small-caps bold 3px/40px Arial,"宋體";
}
相當於：
div {
font-family: Arial, "宋體";
font-size: 3px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
line-height: 40px;
}
6.@font-face css3的屬性，可以選擇指定的服務器字體
@font-face {
font-family: 字體名稱;
src: url("字體鏈接");
}
7.選擇器{word-wap:屬性值} 實現內部換行
div {
word-wrap: normal;
}
文本外觀屬性
div {
color: #3d6cb0; "設置文本顏色"
initial-letter: normal; "設置字間距"
word-spacing: 12px; "設置單詞間距"
line-height: normal; "設置行間距"
text-transform: capitalize; "控制英文字符的大小寫"
text-decoration: #3d6cb0; "設置文本的裝飾，下劃線等等"
text-align: center; "文本內容的水平對齊方式"
text-indent: each-line; "設置文本首行縮進"
white-space: normal; "空白符處理 "
text-shadow: #3d6cb0; "設置文本陰影效果"
text-overflow: clip; "設置文本標示對象內溢出的文本"
}
優先級順序
下列是一份優先級逐級增加的選擇器列表：
- 通用選擇器（*）
- 元素(類型)選擇器
- 類選擇器
- 屬性選擇器
- 僞類
- ID 選擇器
- 內聯樣式
表格樣式
設置表格樣式：
table, th, td
{
border: 1px solid black;
}
lip; "設置文本標示對象內溢出的文本"
}
優先級順序
下列是一份優先級逐級增加的選擇器列表：
- 通用選擇器（*）
- 元素(類型)選擇器
- 類選擇器
- 屬性選擇器
- 僞類
- ID 選擇器
- 內聯樣式
表格樣式
設置表格樣式：
table, th, td
{
border: 1px solid black;
}