CSS练习记录
css引入方式
內聯引入
<body> <div style="color:red;width:100px;heigh:100px;">蘋果</div><div style="color:green;width:100px;heigh:100px;">蘋果</div><div style="color:gray;width:100px;heigh:100px;">核桃</div><div style="color:yellow;width:100px;heigh:100px;">香蕉</div> </body>內部引入 <style> div{color:red; width:100px; height:100px; } </style> </head> <body> <div>蘋果</div> </body>
外部引入
css選擇器
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明:
選擇器通常是您需要改變樣式的 HTML 元素。
選擇器主要由有四大類：
- 基本選擇器
- 組合選擇器
- 屬性選擇器
- 偽元素選擇器
基本選擇器：
通配符:全部都被標注！
標簽div：
div{
}只有對應的div才被標注
id選擇器：
class：
**css原理**
1.優先原理：后解析的內容會覆蓋掉之前的內容
2.繼承原則：嵌套里面的標簽擁有外部標簽的某些樣式；子元素可以繼承父元素的屬性。
優先原則：-》選擇器
1.同一個選擇器：從上往下執行。
效果如下
3.不同類型的選擇器：優先級
先解析低優先級；
div<class<id
原理同上
4.外部樣式 內部樣式合并之后再一起解析
先外部樣式再內部。
其他原理同上。
5.內聯樣式：外部和內部解析完之后再解析內聯。
6.加了important字段的 最后執行。
繼承原則
1.文字 文本 樣式 可被繼承
div.txt{color:red;}<body> <div class="txt">蘋果<p> 香蕉 </p></div></body>其中蘋果和香蕉屬性相同。
2.塊級元素 寬度不被設置時則會繼承父級元素的寬，高由內容決定。
組合選擇器
把基本選擇器 通過特殊字符串在一起
分組選擇器
用逗號隔開：div,p 代表兩個選擇器內容共同
嵌套選擇器
用空格隔開：div p 嵌套在div里的p才能生效
子選擇器
div>p 必須是上一級的div才能生效。
相鄰選擇器；同級別的
div+p
屬性選擇器
css背景
CSS 屬性定義背景效果:
background-color屬性定義了元素的背景顏色.
background-image屬性描述了元素的背景圖像.
默認情況下，背景圖像進行平鋪重復顯示
background-repeat：
background-repeat:repeat-x;水平方向平鋪
background-repeat:repeat-y;垂直方向平鋪
background-repeat:no-repeat;不平鋪
background-attachment：
scroll
背景圖片隨頁面的其余部分滾動。這是默認
fixed
背景圖像是固定的
使用簡寫屬性時，屬性值的順序為：:
background-color
background-image
background-repeat
background-attachment
background-position
css字體
font
在一個聲明中設置所有的字體屬性
font-family
指定文本的字體系列
font-size
指定文本的字體大小
font-style
指定文本的字體樣式
font-variant
以小型大寫字體或者正常字體顯示文本。
font-weight
指定字體的粗細。
css鏈接和列表
鏈接的樣式，可以用任何CSS屬性（如顏色，字體，背景等）。
特別的鏈接，可以有不同的樣式，這取決于他們是什么狀態。
這四個鏈接狀態是：
a:link - 正常，未訪問過的鏈接
a:visited - 用戶已訪問過的鏈接
a:hover - 當用戶鼠標放在鏈接上時
a:active - 鏈接被點擊的那一刻
css盒子模型
Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
Border(邊框) - 圍繞在內邊距和內容外的邊框。
Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
Content(內容) - 盒子的內容，顯示文本和圖像。
css布局
清除浮動在下一個div中添加
div{
clean :both;
}就可以將恢復浮動
css定位
position 屬性的五個值：
static:HTML 元素的默認值，即沒有定位,遵循正常的文檔流對象。
relative:相對定位元素的定位是相對其正常位置。
fixed:元素的位置相對于瀏覽器窗口是固定位置。
即使窗口是滾動的它也不會移動：
absolute:絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:
sticky:這個有點魔性，就不寫了。。。
總結
