標籤：class agent :focus 之間 集中 sky a標籤 屬性選取器 http
一、CSS文法
1、CSS執行個體
每個CSS樣式由兩個組成部分：選取器和聲明。聲明又包括屬性和屬性值。每個聲明之後用分號結束。
2、CSS注釋
/*這是注釋*/
二、CSS的幾種引入方式
1、行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
2、內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> p { background-color: greenyellow; } </style></head><body> <p>海燕呐</p></body></html>
3、外部樣式
外部樣式就是CSS寫在一個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式。
<link rel="stylesheet" href="style.css" type="text/css">
#href中的內容是匯入的檔案名稱，寫在body中。
三、CSS選取器
1、基本選取器
<1>元素選取器
<!--p為選擇的標籤-->p {color:"red";}
<2>ID選取器
<head> <meta charset="UTF-8"> <title>Title</title> <style> #c1 { color: red; } </style></head><body> <div id="c1">海燕</div></body>
<3>類別選取器
/*用類別選取器來設定文本的大小*/.c1 { font-size: 14px;}/*設定p標籤並且含有類名為c1的文本顏色為紅色*/p.c1 { color: red;}
<4>通用選取器
/*給所有的標籤中內容都設定為白色*/* { color: white;}
2、組合選取器
1、後代選取器
/*給div內部的a標籤設定字型顏色*/div a { color: green;}
/*給div內部的a標籤設定字型顏色*/div a { color: green;}
2、兒子選取器
/*選擇所有父級是<div>的元素<p>元素*/div>p { font-family:Arial Black, arial-black, cursive;}
3、毗鄰選取器
/*選擇所有緊接著<div>元素之後的<p>元素*/div+p { margin: 10px; color: deeppink; font-weight: bold;}
4、弟弟選取器
/*選擇div後面所有的兄弟div標籤，設定邊界線/邊框，solid是指邊框為實線，後面為邊框的顏色*/div~div { border: 5px solid royalblue;}
3、屬性選取器
/*用於選取帶有指定屬性的元素*/p[title] { color: red;}/*用於選取帶有指定屬性和值的元素*/p[title="t1"] { color: mediumspringgreen;}
4、分組和嵌套
1、分組
當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，我們可以通過在多個選取器之間使用逗號分隔的分組選取器來統一設定元素樣式。
/*將代碼為div標籤和p標籤統一設定字型為紅色*/div,p { color: red;}
2、嵌套
/*多種選取器可以混合起來使用，比如：將含有c1類的標籤內部的所有p標籤內容的字型顏色設定為紅色。*/.c1 p { color: red;}
5、偽類別選取器
/*未訪問的連結*/a:link { color:red}/*已訪問的連結--訪問過的連結會變色*/a:visited { color: #eee;}/*滑鼠移動到連結上，當移動到上面時會變成設定的顏色*/a:hover { color: #fff;}/*選定的連結--滑鼠選中以後會變成設定的顏色*/a:active { color: green;}/*input輸入框擷取焦點時樣式*/input:focus { outline: none; background-color: darkmagenta;}
6、虛擬元素選取器
1、first-letter 常用的給首字母設定特殊樣式：
p:first-letter { font-size: 16px; color: blueviolet;}
2、before 在每個<p>元素之前插入內容
p:before { content: ‘***‘; color: lawngreen;}
3、after 在每個<p>元素之後插入內容
p:after { content:"1149102771"; color:skyblue;}
補充：before和after多用於清除浮動。
7、選取器的優先順序
1、CSS繼承
繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的後代。例如一個body定義了的字型顏色值也會應用到段落的文本中。（也有一些屬性不能被繼承，如：border，margin，padding，background等。）
2、選取器的優先順序
內聯樣式 + ID選取器 + 類別選取器 + 元素選取器
1000 100 10 1
繼承的優先順序權重為0
除此之外還可以通過添加！import方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用！import會使樣式檔案混亂不易維護。（不到萬不得已不要使用！import）
8、CSS屬性相關
1、width屬性可以為元素設定寬度。
height屬性可以為元素設定高度。
塊級標籤才能設定寬度，內聯標籤的寬度由內容來決定。
2、字型屬性
<1>文字字型
font-family可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型，則會嘗試下一個。瀏覽器會使用它識別的第一個值。
前端基礎之CSS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
