HTML5学习笔记（五）：CSS基础
CSS 指層疊樣式表 (Cascading Style Sheets)，在網頁中用來定義網頁的元素如何進行顯示。
CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
書寫格式
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明：
selector {declaration1; declaration2; ... declarationN }聲明的寫法按照冒號分隔屬性名及屬性值：
selector {property: value}如果有多個聲明使用分號隔開：
h1 {color:red; font-size:14px;}如果屬性值有多個單詞需要使用引號包括：
p {font-family: "sans serif";}定義位置
CSS在網頁中可以在多個地方進行定義：
內聯樣式
直接在標簽之上編寫：
<h1 style="color: brown">Hello</h1>內部樣式表
編寫在<head>標簽內：
<head><meta charset="UTF-8"><title>Hello</title><style type="text/css">h1{color: brown}</style> </head>外部樣式表
存儲在外部test.css的文件內：
h1{color: brown}網頁引入：
<head><meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="test.css"/><title>Hello</title> </head>使用次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的順序進行設置：
分組
我們可以通過分組將多個標簽的樣式進行統一的定義，如下：
<style type="text/css">h1,h2,a {color: crimson;} </style>繼承
子元素從父元素繼承屬性。
<style type="text/css">body {color: crimson;} </style>因為所有可視元素都會放在body元素下，所以這么做將改變所有元素的顏色。
選擇器
派生選擇器
通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔。
我們直接來看一個例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello</title> 6 <style type="text/css"> 7 strong {color: green;} 8 li strong {color: crimson;} 9 </style> 10 </head> 11 <body> 12 <p>這是一個<strong>重要的</strong>例子</p> 13 <dl> 14 <li>這是一個<strong>重要的</strong>例子</li> 15 </dl> 16 </body> 17 </html>派生選擇器使用空格進行分隔，可以指定一個嵌套關系進行樣式的定義。
id選擇器
指定id元素進行樣式定義：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello</title> 6 <style type="text/css"> 7 #mydiv {color: green;} 8 #mydiv p {color: crimson;} 9 </style> 10 </head> 11 <body> 12 <div id="mydiv"> 13 這是<p>一個</p>測試 14 </div> 15 </body> 16 </html>id選擇器可以配合派生選擇器使用。
類選擇器
指定對應類名稱的元素進行樣式定義：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello</title> 6 <style type="text/css"> 7 .mydiv {color: green;} 8 .mydiv p {color: crimson;} 9 </style> 10 </head> 11 <body> 12 <div class="mydiv"> 13 這是<p>一個</p>測試 14 </div> 15 </body> 16 </html>同樣，可以配合派生選擇器使用。
大家這里會不會有一個疑問：既然有了id選擇器為啥還需要類選擇器，這兩個選擇器看上去基本上是一致的？這是因為，一個文檔中的元素id應該是唯一的，同時一個元素也只能定義一個id，而一個元素可以定義多個類，同時多個元素可以使用同一個類名。
屬性選擇器
可以為擁有指定屬性的 HTML 元素設置樣式，而不僅限于 class 和 id 屬性。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Hello</title> 6 <style type="text/css"> 7 [title] {color: crimson;} 8 [title=a] {color: green;} 9 [title~=b] {color: yellow;} 10 [title|=c] {color: blue;} 11 </style> 12 </head> 13 <body> 14 <p>這是一個測試</p> 15 <p title="">這是一個測試</p> 16 <p title="a">這是一個測試</p> 17 <p title="c-b">這是一個測試</p> 18 <p title="b c">這是一個測試</p> 19 </body> 20 </html>屬性選擇器在為不帶有 class 或 id 的表單設置樣式時特別有用：
1 input[type="text"] 2 { 3 width:150px; 4 display:block; 5 margin-bottom:10px; 6 background-color:yellow; 7 font-family: Verdana, Arial; 8 } 9 10 input[type="button"] 11 { 12 width:120px; 13 margin-left:35px; 14 display:block; 15 font-family: Verdana, Arial; 16 }?
轉載于:https://www.cnblogs.com/hammerc/p/6375479.html
總結
以上是生活随笔為你收集整理的HTML5学习笔记（五）：CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： YII2 服务器验证码不显示
- 下一篇： HTML5网络视频webm格式制作