CSS基础及常用的一些标签
CSS 是一種描述 HTML 文檔樣式的語言。?
一、CSS選擇器(在這里只列舉幾種最常用的)
1、CSS元素選擇器
元素選擇器根據元素名稱來選擇 HTML 元素。
例如：頁面上的所有 <p> 元素都將居中對齊，并帶有紅色文本顏色：
p {text-align: center;color: red; }2、CSS id 選擇器
id 選擇器使用 HTML 元素的 id 屬性來選擇特定元素。
元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇一個唯一的元素！
要選擇具有特定 id 的元素，請寫一個井號（＃），后跟該元素的 id。
例如：這條 CSS 規則將應用于 id="para1" 的 HTML 元素：
#para1 {text-align: center;color: red; }注意：id 名稱不能以數字開頭。
3、CSS類選擇器
類選擇器選擇有特定 class 屬性的 HTML 元素。
如需選擇擁有特定 class 的元素，請寫一個句點（.）字符，后面跟類名。
例如：在此例中，所有帶有 class="center" 的 HTML 元素將為紅色且居中對齊：
.center {text-align: center;color: red; }4、通用選擇器
通用選擇器（*）選擇頁面上的所有的 HTML 元素。
例如：下面的 CSS 規則會影響頁面上的每個 HTML 元素
* {text-align: center;color: blue; }選擇器優先級：id>class>tag(標簽)
二、CSS標簽
1、塊標簽
? ? ? ? div、h1~h6、p、ul、ol、li、article、section、aside、nav、header、footer
? ? ? ? 特點：獨占一行，默認寬度占滿父級，高度為0，子級內容撐開高度。
2、行標簽
? ??span、a、i、b、sub、sup、em、strong
? ? ? ? 特點：同排序跟顯示，遇到父級邊界換行；不支持寬高，內容撐開寬高；不支持上下外邊距；不正常顯示上下內邊距；換行被解析。
3、行塊標簽
?????????img
? ? ? ? 特點：同排序跟顯示，遇到父級邊界換行；沒有寬高的時候內容撐開寬高；換行被解析。
三、三種使用CSS的方式
有三種插入樣式表的方法：
- 外部 CSS
- 內部 CSS
- 行內 CSS
1、外部 CSS
通過使用外部樣式表，您只需修改一個文件即可改變整個網站的外觀！
每張 HTML 頁面必須在 head 部分的 <link> 元素內包含對外部樣式表文件的引用。
實例
外部樣式在 HTML 頁面 <head> 部分內的 <link> 元素中進行定義：
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body><h1>This is an apple.</h1> <p>This is a pen.</p></body> </html>2、內部 CSS
如果一張 HTML 頁面擁有唯一的樣式，那么可以使用內部樣式表。
內部樣式是在 head 部分的 <style> 元素中進行定義。
實例
內部樣式在 HTML 頁面的 <head> 部分內的 <style> 元素中進行定義：
<!DOCTYPE html> <html> <head> <style> body {background-color: linen; }h1 {color: maroon;margin-left: 40px; } </style> </head> <body><h1>This is an apple.</h1> <p>This is a pen.</p></body> </html>3、行內 CSS
行內樣式（也稱內聯樣式）可用于為單個元素應用唯一的樣式。
如需使用行內樣式，請將 style 屬性添加到相關元素。style 屬性可包含任何 CSS 屬性。
實例
行內樣式在相關元素的 "style" 屬性中定義：
<!DOCTYPE html> <html> <body><h1 style="color:blue;text-align:center;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p></body> </html>最后，奉上思維導圖
?
總結
以上是生活随笔為你收集整理的CSS基础及常用的一些标签的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 轻量级锁_并发编程实战05：锁的状态
- 下一篇： CSS 阴影效果