CSS
CSS.層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。
1.如何使用CSS
四中方式:
1.外鏈式:使用link標籤引入指定的CSS文件
<link href=”css的地址” rel=”stylesheet” type=”text/css”>
2.導入式:使用style標籤配合@import 語法引入指定的CSS文件
<style>
@import url(“css文件地址”);
</style>
3.嵌入式:將CSS代碼直接書寫在HTML文件的STYLE標籤
<style>
Body{color:cyan;}
</style>
4.內聯式:直接在標籤內部以style屬性的方式引入CSS屬性
<標籤 style=”CSS屬性”></標籤>
2.選擇器
現在css2.0中一共有七種選擇器:
HTML元素選擇器:
頁面中任何一個存在的標籤都是一個已經存在的選擇器,可以選中頁面中的所有同名標籤,進行樣式設定。
類(class)選擇器:
在指定的元素中添加class屬性,並且指定一個值,那麼所有帶有當前屬性和值得元素會被歸結爲一類當中,在CSS中可以使用.class值得方式選中所有帶有class屬性和值得元素。
ID選擇器:
在指定的元素中添加ID屬性,並且指定一個值,#+ID值得方式來選中元素。
組合選擇器:
多個選擇器使用同一組樣式時,可以使用所有選擇器用逗號分隔的方式,只寫一份CSS樣式。
關係選擇器或者後代選擇器:
具有嵌套關係的標籤可以使用外部標籤的選擇器 內部標籤的選擇器的方式選定指定部分。
通用選擇器:
選中頁面中的所有元素
*{margin:0;padding:0;list-style:none;}
僞元素選擇器:
選中的不是某個標籤,而是標籤的具體狀態。
正常連接(正常狀態) :link
鼠標經過 :hover
鼠標點擊 :active
訪問過後 :visited
只有超鏈接標籤有這四種狀態,其他標籤只有:hover
3.字體相關屬性
Font-size 設置字體的大小,可以無限大,但是不能無限小
值爲長度單位:
Px 像素
Em 一個漢字的大小
Ex 一個英文x的大小
% 百分比
Color 設置字體的顏色
顏色值:
1.英文單詞:red,green,blue
2.Rgb模式
3.HEX模式,如果三種顏色的每兩位值都相同,例如:#FFAAFF,就可以簡寫成#FAF。
Font-weight 設置字體的粗細
Normal 正常字體
Bold 加粗
800 加粗
Font-style 是否斜體
Normal 正常字體
Italic 斜體
Oblique 沒人用的斜體
Font-variant 設置字母的大小寫
Normal 正常字體
Small-caps 設置爲小型的大寫字母
Font-family 設置字體的類型
一般情況下不要設置
4.文本屬性
Text-decoration 文本修飾屬性
None 沒有修飾或者說去掉下劃線
Underline 下劃線
Overline 上劃線
Line-through 中橫線
Text-indent 設置內容的首行縮進
值爲長度單位
一般建議用em
Line-height 設置單行的文本高度
值爲長度單位,作用:單行文本垂直居中
Text-align 設置內容的水平對齊方式
Left 左對齊
Center 居中對齊
Right 右對齊
1.div和span
Div 無意義標籤,在頁面佈局中標識塊狀
Span 無意義標籤,在頁面佈局中標識行內標籤
2.背景屬性
Background-color 設置元素的背景顏色
值爲顏色值
Background-p_w_picpath 設置元素的背景圖片
格式:background-p_w_picpath:url(圖片地址);
Background-repeat 設置背景圖片的重複方式
Repeat 所有方向重複,默認值
Repeat-x 橫向重複
Repeat-y 縱向重複
No-repeat 不重複
Background-position 背景圖片位置屬性
格式:background-position:橫向座標 縱向座標
座標值不僅可以使用長度單位,還可以使用位置單詞:
橫座標單詞:left 左邊 right 右邊 center 中間
縱向座標單詞:top 上 center 中間 bottom 下
*Background-p_w_upload 設置背景圖片的滾動方式
Scroll 背景圖片跟隨內容一起滾動,所有的默認值
Fixed 背景圖片綁定在頁面中不滾動
Background 背景綜合屬性
所有的背景屬性可以在當前屬性中直接書寫,而且沒有先後順序
3.邊框屬性
Border-width: 設置四個邊框的寬度
Border-color: 設置四個邊框的顏色
Border-style: 設置邊框的樣式
Solid 單實線
Double 雙實線
Dashed 虛線
Border:寬度 顏色 風格
上面三個屬性不可以少,可以更改順序
Border-left 設置左邊的邊框
4.列表屬性
List-style-type: 設置列表的標識類型
None 不要標識
Decimal 數字標識
Disc 實心圓
Circle 空心圓
List-style-p_w_picpath 設置列表的圖片
格式:list-style-p_w_picpath:url(“圖片地址”);
List-style-position 設置列表表示的位置
Outside 標識在內容之外 默認值
Inside 標識在內容之內
List-style 列表綜合屬性
1.外間距屬性margin
Margin-top
Margin-left
Margin-right
Margin-bottom
Margin:的使用方式
一個值的使用方式:
Margin: 上下左右
兩個值的使用方式:
Margin: 上下 左右
三個值的使用方式:
Margin:頂部 左右 底部
四個值的使用方式:
Margin:上 右 下 左
居中:margin: 上下值 auto
2.padding 內間距/內補白
Padding-left
Padding-right
Padding-top
Padding-bottom
Padding的使用方式:
四個值的使用方式:頂部 右側 底部 左側
三個值的使用方式:上 左右 下
兩個值的使用方式: 上下 左右
一個值得使用方式:上下左右
佈局屬性
float 元素浮動屬性
left 元素左浮動
right 元素右浮動
none 元素不浮動
一個元素設置了float屬性相當於一塊石頭變成了木頭,浮在水面上,水面之下是空白的,後面的元素可以再木頭之下存在。
注意:浮動之後的屬性不佔用物理空間。
所有浮動的元素,高度最好給給死。
clear 清除浮動
left 清除左浮動
right 清除右浮動
both 清除左右浮動
display 設置元素的顯示方式
none 將元素設置爲不顯示
block 將元素設置爲塊狀元素
inline 將元素設置爲行內元素
*inline-block 將元素設置爲行內塊狀元素(不要用來佈局)
overflow 設置元素的溢出方式
hidden 超出部分隱藏
scroll 超出部分出現滾動條
visible 超出部分顯示,默認值
visibility 設置元素是否顯示(極少使用)
hidden 隱藏元素
visible 顯示元素