詳解css基礎樣式表分類、選擇器分類區別
- 高洛峰原創
- 2017-03-16 11:17:241610瀏覽
1 . 樣式表 Cascading Style Sheet
css優點：
內容與表現分離
網頁的表現統一，容易修正
豐富的樣式，讓網頁佈局更有彈性
減少網頁程式碼量，增加網頁的瀏覽速度，節省網路頻寬
# 使用獨立於網頁的CSS，有利於網頁被搜尋索引擎收錄
嵌入ID>外部ID>嵌入class>外部class>嵌入標籤>外部標籤
1.1 引入方式
四種
行內樣式表
- # 行內樣式表
- 導入方式， 盡量不要使用！ ！ ！
-
##行內>內部>外部>導入
1.3 連結式與導入式的差異：
# 標籤屬於XHTML，@import屬於CSS2.1；
使用連結的CSS文件先載入到網頁當中，再進行編譯顯示；
使用@import導入的CSS文件，客戶端顯示HTML結構，再把CSS檔案載入到網頁中；
@import是CSS2.1特有的，對於不相容CSS2.1的瀏覽器來說就是無效的；
2. 選擇器
2.1 哪幾種選擇器與它的優先權
ID選擇器
# 一個###HTML文件###中只能有一個相同名字的ID########### 器 . 可以有多個############ 元素 p ############ ## ############ ## 2.2 選擇器的優先順序############ ID > CLASS > 元素 > *#######3 . 基本的幾個樣式（常用於文本，圖片，列表）
background背景
1.background-color 背景色 （16进制数 rgb rgba 英文名）
2.background-image 背景图
3.background-size 背景大小 （像素、百分比）
4.background-repeat （repeat-x repeat-y no-repeat）
5.background-position (通过方向值来指定，通过百分比指定，通过确切的像素值指定)
6.background-attachment 是否随着浏览器滚动，使用它图片会相对浏览器固定住（bg-position和bg-attachment不要一起使用）
7.background复合属性 可以把之前的属性定义在这一个里面，【一般书写顺序：颜色、图片、是否重复、是否固定、位置】
#color顏色
color 規定文字的顏色
opacity 設定元素的透明度 ，1不透明 0完全透明
font字體
font- style 指定文字的字體樣式（正常、斜體）
font-variant 指定文字是否為小的大寫字母（對英文起作用）
#font-weight 指定文字的粗細（只有兩種樣式） bold 粗體
#font-size 指定文字字體大小
#font-family 定義文字使用某個字體
#中文字體font-family常用清單http://www.php.cn/ xiazai/sucai/ziti
font 複合屬性
## 一般順序：字體樣式、是否為小號大寫字、字體粗細、字號、字體
# text文字屬性
##############################################################################。 ## color , text-align , ###line-height### , ###letter-spacing### , ###vertical-align### ，###text-indent### ,###vertical-align### ，###text-indent###### #text-decoration### ;############-----【vertical-align----->1. 常用於文字方塊input ，2. 結合{## #display###：table-cell;}可用來將圖片垂直置中】#############-----【valign----->只適用於table中的單元格,例如
,例如：
;############
文字相對於圖片頂部顯示 ;########### ·····等等，不再一## ##以上是詳解css基礎樣式表分類、選擇器分類區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn