一.CSS簡介
1.什麼是CSS？
CSS 指層疊樣式表 (Cascading Style Sheets)。
樣式定義如何顯示 HTML 元素
樣式通常存儲在樣式表中
外部樣式表可以極大提高工作效率，通常存儲在CSS文件中
多個樣式定義可層疊為一個
p{color:red;text-align:center;}
二.CSS語法< /h1>1.語法規則
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
選擇器通常是您需要改變樣式的 HTML 元素。
每條聲明由一個屬性和一個值組成。
2.註釋
CSS註釋以 /* 開始, 以 */ 結束,註釋是為了提高代碼的可讀性！
- < /ul>
/*註釋*/p{text-align :center;/*註釋*/color:red;}
三.CSS選擇器
如果要在HTML元素中使用CSS樣式，則需要在元素中使用選擇器！
1.CSS的id選擇器
id 選擇器可以為標有特定id 的HTML 元素指定特定的樣式，HTML元素以id屬性來設置id選擇器,CSS 中id 選擇器以“#” 來定義。
- < li>
<html>
< head> <meta charset='utf-8' > <title>橙子前端教程!</title> <style > #p1 { color: red; }</style></head>
<p id='p1'>通過id選擇器把這一段文字設置為紅色！ </p> <p>這一段文字不受上面的影響！ </p></body>
</html>
2.CSS的class選擇器
class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用，class 選擇器在HTML中以class屬性表示, 在CSS 中，類選擇器以一個點'.'號顯示。
- < li>
<html>
< head> <meta charset='utf-8' > <title>橙子前端教程！ </title> <style>< span class='code-snippet_outer'> .center { < span class='code-snippet__attribute'>text-align: center; }< code></style> </head>
<body> <h1 class='center'>標題居中</h1> <p class='center'>段落居中</p></body>
</html< /span>>
同時也可以指定特定的HTML元素使用class。
p.center {text-align:center;}四.CSS創建
< p >瀏覽器會根據樣式表格式化HTML文檔！有三種方法可以插入樣式表：1.外部樣式表
當樣式需要應用於很多界面的時候，通常使用外部樣式表，使用外部樣式表的優點是可以通過改變一個文件來改變整個HTML文檔的樣式佈局，每個頁面使用 <link> 標籤鏈接到樣式表。 <link> 標籤在文檔的頭部。
<head>< link rel='stylesheet' type< /span>='text/css' href=' mystyle.css'><!-- rel 屬性是必須的，規定當前文檔與被鏈接文檔/資源之間的關係。 --></head>
2.內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。使用 <style> 標籤在文檔頭部定義內部樣式表。
- < li>
<style>hr {color: sienna;}p {color: red;}body {background-color: aqua;}</style>
3.內聯樣式
當樣式只需要在元素上應用一次時可以使用內聯樣式，但是由於內聯樣式把表現和內容混在一起，所以不建議使用！
<p style='color:red'>內聯樣式不建議使用! </p>4.多重樣式
如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來。
內部樣式表和外部樣式表中存在重複的部分，內部樣式表將取代外部樣式表中的部分！
外部樣式表：
h3{ color:red; font-size:12px;}內部樣式表：
h3< code>{font-size:20pt;}
最終效果：
h3{ color:red; font-size:20px;}顏色屬性繼承自外部樣式表，字體大小屬性將取代外部樣式表中的部分。
5.多重樣式的優先級
樣式表允許以多種方式規定樣式信息。樣式可以規定在單個的 HTML 元素中，在 HTML 頁的頭元素中，或在一個外部的 CSS 文件中。甚至可以在同一個 HTML 文檔內部引用多個外部樣式表。
優先級：（內聯樣式）Inline style > （內部樣式）Internal style sheet >（外部樣式）External style sheet > 瀏覽器默認樣式
五.CSS 背景
CSS 背景屬性用於定義HTML元素的背景。 CSS背景有以下的效果：
1.背景顏色
background-color 屬性定義了元素的背景顏色，在body選擇器中使用！
body {background-color :grey;}CSS中的顏色通常有以下三種定義方式：
十六進制 - 如：“#ff0000”
RGB - 如：“rgb(255,0,0)”
顏色名稱- 如：“red”
2.背景圖像
background-image 屬性描述了元素的背景圖像，默認情況下，背景圖像進行平鋪重複顯示，以覆蓋整個元素實體。
3.背景圖像 - 水平或垂直平鋪
background-image屬性默認會在頁面的水平或者垂直方向平鋪。但是有時候圖片在水平和垂直方向平鋪不能達到想要的效果，可以選擇只在某一方向平鋪。
4.背景圖像- 設置定位與不平鋪
為了讓背景圖片不影響文本的排版可以使用 background-repeat屬性讓圖片不平鋪，以達到預期的效果！
同時可以通過background-position屬性設置圖片顯示的位置，讓文本達到最佳的顯示效果！
body{background-image:url('images/pai.jpg');background-repeat:no-repeat;background-position:right top;/*設置背景圖像的起始位置。 */}
5.背景- 簡寫屬性
為了簡化頁面背景屬性的代碼，可以將這些屬性合併在同一個屬性中。背景顏色的簡寫屬性為 'background'。
body {background:grey url('images/pai.jpg') no-repeat right top;}< /code>六.CSS文本
1.文本顏色
顏色屬性用來設置文字的顏色。
body {color:red ;}2.文本的對齊方式
文本排列屬性是用來設置文本的水平對齊方式。
文本的水平排列方式有居中，對齊到左，對齊到右，兩端對其。
h1 {text-align< /span>:center;}p {text-align:justify;/*兩端對齊*/}
3.文本修飾
text-decoration 屬性用來設置或刪除文本的裝飾。
a {text-decoration :none;/*用來刪除鏈接的下劃線*/}同時，還可以使用text-decoration 屬性來增強文章的閱讀效果。
<style >h1 {< span class='code-snippet__attribute'>text-decoration: overline;}h2 {text-decoration: line-through;}h3 {text-decoration: underline;}</style>
4.文本轉換
文本轉換屬性是用來指定在一個文本中的大寫和小寫字母。可用於所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。
<style >p.uppercase {text-transform:uppercase;}/*大寫*/p.lowercase {text-transform:lowercase;}/*小寫*/p.capitalize {text-transform:capitalize;}/*首字母大寫*/< /span></style>
5.文本縮進
文本縮進屬性是用來指定文本的第一行的縮進。
p {text-indent< /span>:14px;}
< /code>
七.CSS文字
CSS字體屬性定義字體，加粗，大小，文字樣式。
1.CSS字體類型
在CSS中，有兩種類型的字體系列名稱：
< ol class='list-paddingleft-1' >通用字體系列 - 擁有相似外觀的字體系統組合（如 “Serif” 或 “Monospace”）
特定字體系列 - 一個特定的字體系列（如 “Times” 或 “Courier”）
2.字體系列
font-family 屬性設置文本的字體系列。
font-family 屬性應該設置幾個字體名稱作為一種'後備'機制，如果瀏覽器不支持第一種字體，他將嘗試下一種字體。如果字體系列的名稱超過一個字，它必須用引號，如Font Family：“宋體”。
3.字體樣式
我們可以通過字體樣式設置正常或者斜體！
p.normal< /span> {font-style:normal;}p.italic {font-style: italic;}
4.字體大小
font-size 屬性設置文本的大小， 字體大小的值可以是絕對或相對的大小。
絕對大小：
設置一個指定大小的文本
不允許用戶在所有瀏覽器中改變文本大小
確定了輸出的物理尺寸時絕對大小很有用
相對大小：
相對於周圍的元素來設置大小
允許用戶在瀏覽器中改變文字大小
4.1設置字體的大小像素
為了控製字體的大小，可以設置字體的大小像素。
p {font-size :14px;}可以通過縮放瀏覽器來調整字體的大小，但是實際調整的是頁面的大小。
4.2用em來設置字體大小
1em和當前字體大小相等。在瀏覽器中默認的文字大小是16px。因此，1em的默認大小是16px。可以通過下面這個公式將像素轉換為em=px/16=em。
p {font-size :0.875em;} /* 14px/16=0.875em */4.3使用百分比和EM組合
在所有瀏覽器的解決方案中，設置元素的默認字體大小的是百分比。
body {font-size< /span>:100%;}p {font-size:0.875em;}
在所有瀏覽器中，可以顯示相同的文本大小，並允許所有瀏覽器縮放文本的大小。
八.CSS鏈接
鏈接樣式
不同的鏈接可以有不同的樣式，鏈接的不同狀態也可以有不同的樣式。
鏈接的四種狀態：
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
a:link {color:black;} /* 未訪問鏈接*/a:visited {color:greenyellow;} /* 已訪問鏈接*/< code>a:hover {color:red;} /* 鼠標移動到鏈接上*/a:active {color:blue ;} /* 鼠標點擊時 */
a: hover 必須跟在a:link 和a:visited後面,a:active 必須跟在a:hover後面。
2.文本修飾
text-decoration 屬性主要用於刪除鏈接中的下劃線：
a:link {text-decoration:none;}a:visited {text- decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}
3.背景顏色
背景顏色屬性指定鏈接背景色：
a:link {background-color:a:visited {background-color:a:hover {background-color:a:active {background-color:
九.CSS列表
CSS中可以使用不同的列表項標記來實現列表。
1.無序列表和有序列表
list-style-type屬性指定列表項標記的類型。
- < li>
<style>ul.a {list-style-type: circle;}ul.b {< /span>list-style-type: square;}< span class='code-snippet_outer'> ol.c {< /code>list-style-type: decimal;< span class='code-snippet_outer'> }ol.d {< code> list-style-type: lower-alpha;}</style>
2.標記為圖像的列表
<style>ul {list-style-image< /span>: url('images/1.png');}</< span class='code-snippet__name'>style>
3.列表屬性值簡寫
在單個屬性中可以指定所有的列表屬性，但是指定時必須按照一定的順序！
例如按照以下順序指定列表屬性：
list-style-type
list-style-position
list-style-image
ul < /span>{list-style:square url('images/3.png');}
list-style-type: none;設置列表類型為沒有列表項標記！
更多前端資料可添加：
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Web%20front%20end%20This%20article%20will%20take%20you%20through%20CSS.html
支付宝扫一扫 
评论列表（196条）
测试