css書寫位置、選擇器、字型、外觀屬性、標籤的顯示模式(display)
內部樣式表
將
css
<head> <style type="text/CSS"> 選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;} </style> </head>
行內式（內聯樣式）
通過style屬性設定
<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>
外部樣式表（外鏈式）
樣式放在一個或多個以
.CSS為副檔名的外部樣式表文件中通過link標籤將外部樣式表文件連結到HTML文件中
link屬性
href
定義所連結外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type
定義所連結文件的型別，在這裡需要指定為“
text/css”，表示連結的外部檔案為CSS樣式表。
rel
定義當前文件與被連結文件之間的關係，在這裡需要指定為
stylesheet表示被連結的文件是一個樣式表文件。
<head> <link href="CSS檔案的路徑" rel="stylesheet" type="text/css"/> </head>
選擇器
多類名選擇器
樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關
各個類名中間用空格隔開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .red { color: red; } .font20 { font-size: 20px; color: blue; } </style> </head> <body> <div class="font20 red">多類名</div> </body> </html>
ID選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #last { color: pink; } </style> </head> <body> <div id="last" class="red">id選擇器</div> </body> </html>
萬用字元選擇器
能匹配頁面中所有的標籤 - 一般不使用
* {
margin: 0; /* 定義外邊距*/
padding: 0; /* 定義內邊距*/
}
後代選擇器
把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔
所有的後代都會出現css效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div p { /*div下的所有p 都變為粉色*/ color: pink; } .jianlin p { /*中間用空格隔開*/ color: purple; } </style> </head> <body> <div> <p>王思聰</p> </div> <div> <p>王思聰</p> </div> <div class="jianlin"> <p>王思聰</p> </div> </body> </html>
子代選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father > li > a { color: red; } </style> </head> <body> <ul class="father"> <li> <a href="#">123</a> <ul> <li> <a href="#">abc</a> </li> </ul> </li> </ul> </body> </html>
交集選擇器
交集選擇器由兩個選擇器構成
其中第一個為標籤選擇器，第二個為class選擇器 / id選擇器
兩個選擇器之間不能有空格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div.red { /*交集選擇器 既是 div 又 叫 red 滿足條件 用的較少 特殊情況使用 瞭解 */ color: red; } </style> </head> <body> <div class="red">交集選擇器</div> <p class="red">交集選擇器</p> </body> </html>
並集選擇器
各個選擇器通過逗號連線而成的
包括標籤選擇器、class類選擇器id選擇器等
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*1. 需求 吧 div p span 改為紅色*/ div, p, span { /*並集選擇器 用逗號隔開 , 代表 和 集體宣告 適合於相同樣式 */ color: red; } </style> </head> <body> <div>並集選擇器</div> <div>並集選擇器</div> <p>並集選擇器</p> <p>並集選擇器</p> <span>並集選擇器</span> <span>並集選擇器</span> <h1>並集選擇器</h1> <a href="#">並集選擇器</a> </body> </html>
連結偽類選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a:link { /* 未訪問過的連線狀態*/ color: #3c3c3c; font-size: 25px; text-decoration: none; /*取消下劃線*/ font-weight: 700; } a:visited { /*這個連結我們已經點過的樣子 已訪問過連結*/ color: orange; } a:hover { /*滑鼠經過連線時候的樣子*/ color: #f10215; } a:active { /*滑鼠按下時候的樣子*/ color: green; } </style> </head> <body> <a href="http://www.asdf12312312312312.com">秒殺</a> </body> </html>
開發中常用方式
a {
color: #333;
text-decoration: none;
font-size: 25px;
font-weight: 700;
}
a:hover { /*滑鼠經過*/
color: #f10215;
}
字型
字型相關樣式
font-style 字型風格
比如：斜體、傾斜或正常字型
font-weight 字型粗細
font-size 字號大小
font-family 字型
常用的字型有宋體、微軟雅黑、黑體等
如果設定多個字型，則從第一個字型開始查詢，知道找到系統中存在的字型，則直接顯示該字型
font:綜合設定字型樣式
選擇器
{font: font-style font-weight font-size/line-height font-family;}font-size 和 font-family 必須保留
外觀屬性
color 文字顏色
三種取值方式
預定義的取值
如red，green，blue等十六進位制
如#FF0000，#FF6600，#29D794等RGB程式碼
rgb(255,0,0) 或 rgb(100%,0%,0%)
line-height 行間距
行與行之間的距離，即字元的垂直距離
屬性單位有三種
px、em、%
text-align 水平對齊方式
是將盒子中的內容水平對其，而不是將盒子水平對齊
屬性
left左對齊
right右對齊
center居中對齊
text-indent:首行縮排
首行縮排
1em為一個漢字的寬度
text-decoration 文字的裝飾
屬性
none預設，定義標準的文字
underline文字下劃線
overline文字上劃線
line-through文字刪除線(穿過文字)
標籤的顯示模式(display)
塊級元素(block)
每個塊元素通常都會獨自佔據一整行或多整行
可以設定寬度、高度、對齊等屬性
常見塊元素
<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等其中
<div>標籤是最典型的塊元素
行內元素(inline)
和相鄰行內元素在一行上
高、寬無效
但水平方向的padding和margin可以設定，垂直方向的無效
行內元素只能容納文字或則其他行內元素（a 特殊）
常見行內元素
<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。
行內塊元素（inline-block）
和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。 預設寬度就是它本身內容的寬度。 高度，行高、外邊距以及內邊距都可以控制。