CSS樣式
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML等文件樣式的計算機語言
樣式編寫位置
@內聯樣式
- style屬性
@內部樣式
- style標籤
@外部樣式
- link標籤
href: css文件路徑
- rel: stylesheet
選擇器
CSS選擇器用於選擇你想要的元素,並設置相應樣式
格式: 選擇器{}- id選擇器
- class選擇器
- 標籤選擇器
- 屬性選擇器
- 僞類選擇器
- 僞元素選擇器
- 複合選擇器
#box{}
.box{}
a{}
[type=text]{}
:hover{}
::before{}
div,p{}選擇器權重
/*
選擇器：
* 後代選擇器：空格
* 子選擇器： >
選擇器權重
* 使用權重高的樣式
* 如果權重一樣，後面覆蓋前面
* 列表
選擇器 權重（內聯,id,類/屬性,標籤）
1,1,1,1
img 0,0,0,1
a>img 0,0,0,2
#link img 0,1,0,1
#link img[src] 0,1,1,1
* 權重爲0的選擇器：
* 繼承：某些css屬性默認具有繼承特性
* 可繼承的屬性
* color
* font
* 沒有權重的選擇器：
* > 子選擇器
* + 下一個兄弟選擇器
* ~ 後面所有兄弟選擇器
* CSS屬性
* 字體font
* font-size
* font-weight
* font-family 設置本地字體
* font-style
* font-face：服務器字體（）
*/css屬性與值
格式: 選擇器{屬性:值}
字體font
font-size
font-weight
normal
bold
bolder
100-900
font-family
font-style
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
文本text
水平對齊:text-align
首行縮進:text-indent
字符轉換:text-transform
none 默認不轉換
uppercase 所有字符轉成大寫
lowercase 所有字符轉成小寫
capitalize 所有單詞首字母大寫
文本裝飾：text-decoration
none
underline
背景:background
background-color
16進制
rgb()
rgba()
background-image
url(path)
background-repeat
repeat 水平垂直平鋪(默認)
no-repeat 不平鋪
repeat-x 水平平鋪
repeat-y 垂直平鋪
background-position
水平:left,center,right
垂直;top,center,bottom盒模型
- 頁面上的每個元素都被當成一個矩形盒子,佔據一定的頁面空間。這個盒子由內容（content）、內邊距（padding）、邊框（border）和外邊界（margin）組成
盒模型組成部分
- 標準盒模型
- 瀏覽器調試工具中的盒模型
寬高: width/height
邊框: border
border-width:邊框寬度
border-style:邊框類型
solid 實線
dashed 虛線
dotted 點線
double 雙線(寬度爲border-width的大小,超3px纔有效果)
border-color:邊框顏色
/*border:border-width border-style border-color*/
.box{border:1px solid #ddd;}
/*可單獨設置某一方向邊框*/
.box{border-left:1px dotted #f00;}內邊距: padding
- 作用:設定內容到元素的邊緣的間距,四個方向,值爲整數
padding:10px; 所有四個填充都是 10px
padding:10px 5px; 上下填充是 10px，右左填充是 5px
padding:10px 5px 15px; 上10px， 右左填充是5px，下15px
padding:10px 5px 15px 20px; 順時針原則:上 右 下 左外邊距: margin
- 作用:用於設置元素之間的間距,值可以爲負數,其他用法同padding
- 垂直外邊距合併
- 內外容器垂直邊距塌陷
溢出處理
容器溢出overflow
- visible 溢出可見(默認)
scroll 顯示滾動條
auto 當內容超出容器時才顯示滾動條
文本溢出text-overflow
- clip 無省略號
- ellipsis 省略號
- 一般配合width和overflow:hidden和white-space:nowrap一塊使用
浮動float
- 塊元素默認獨佔一行,通過設置浮動讓其脫離這種限制
屬性
- none
- left
- right
清除浮動
- clear:both
- overflow:hidden
定位position
相對定位: relative
- 相對與元素初始位置定位
- 一般不單獨使用，而是配合絕對定位
絕對定位: absolute
- 相對於《定位父級》而定位
如果無定位父級，則相對與根元素（html）定位
定位父級：具有relative,absolute,fixed三者之一的父級元素
固定定位: fixed
屬性
- top
- left
- bottom
- right
轉自老謝