CSS基礎 和 font字型、背景屬性連寫 與 清除浮動方法
1.偽類
1. :link
2. :visited
3. :hover(重要)
4. :active
5. :focus(input標籤獲取游標焦點)
2.偽元素
1.:first-letter
2.:before(重要在內部前面新增)
3.:after(重要 在內部後面新增)
一、CSS
1.css屬性
1.字型
字型居中:
.font-dv { font-size: 20px; font-family: "微軟雅黑"; font-weight: 700; font-style: italic; border: 1px solid red; height: 100px; line-height: 100px; text-align: center; }
font字型連寫
- 語法:font:font-styel font-weight font-size/line-height font-family;
- PS: 框高=行高 字型垂直居中
- 程式碼:font連寫:font: italic 700 20px/100px "微軟雅黑";
1 .font-dv{ 2 height:100px 3 font: italic 700 20px/100px "微軟雅黑"; 4 border:1px solid red; 5 text-align: center; 6 }
2.文字屬性
1.text-align 對齊(重要)
2.text-decoration裝飾(去除a標籤的下劃線(text-decoration:none)
3.text-indent 首行縮排
3.背景屬性
1.background-color 背景顏色
2.background-image 背景圖片(XXX) url() no-repeat 50% 50%
background-color
背景顏色
background-image
背景圖片
background-image:url(圖片地址)
background-repeat
背景平鋪
值:repeat(預設) | no-repeat | repeat-x | repeat-y
background-position
背景定位
值:left | right | center | top | bottom
background-position-x: left | right | center
background-position-y: center | top | bottom
★方位值只寫一個的時候,另外一個值預設居中。
background-position:right center;
background-position:center; --> center center;
★寫2個方位值的時候,順序沒有要求。
background-position:20px 30px;
★寫2個具體值的時候,第一個值代表水平方向,第二個值代表垂直方向。
background-position:right center;
background-attachment
定義:設定背景影象是否固定或者隨著頁面的其餘部分滾動。
值:scroll | fixed
背景屬性連寫:
background: url("../content/images/top.jpg") no-repeat center top;
4.color
1.red
2.#FF0000
3.rgb(255,0,0) -->rgb(255,0,0,0.5)
5.邊框屬性 border
1.border-width(邊框寬度)
2.border-style(邊框樣式)
3.border-color(邊框顏色)
簡寫:
border:1px solid red;
6.css盒子模型
1.content(內容)
2.padding(內填充) 調整內容和邊框之間距離時使用這個屬性
3.border(邊框)
4.margin(外邊框) 多用於調整標籤之間的 距離
注意:要習慣看瀏覽器console視窗那個盒子模型
7.display(標籤的展現形式)
1.inline
2.block 選單裡面的a標籤可以設定成block
3.inline-block
4.none(不讓標籤顯示,不佔位)
8.float(浮動)
1.多用於實現佈局效果
1.頂部的導航條
2.頁面左右分欄(部落格頁面:左邊20% 右邊80%)
2.float
1.任何標籤都可以浮動,浮動之後都會變成塊級 a標籤float之後就可以設定高寬
3.float取值:
1.left
2.right
3.none
9.clear清除浮動--》清除浮動的副作用(內容飛出,父標籤撐不起來)
1.結合偽元素來實現
.clearfix:after{ content:""; display:"block"; clear:both; }
2.clear取值:
1.left
2.right
3.both
10.overflow
1.標籤的內容放不下(溢位)
2.取值:
1.hidden-->隱藏
2.scroll-->出現滾動條
3.auto
4.scroll-x scroll-y
列子:
圓形頭像的列子
1.overflow:hidden
2.border-radius:50%(圓角)
當父盒子沒有定義高度,巢狀的盒子浮動之後,下邊的元素髮生位置錯誤。
總結:哪個容器的子元素有浮動,那麼父容器必須要清浮動!
◆清除浮動不是不用浮動,清除浮動產生的不利影響。
◆清除浮動的方法
語法:clear: left | right | both
工作裡用的最多的是clear:both;
★額外標籤法
在最後一個浮動元素後新增標籤,然後標籤中加clear:both;。
★給父集元素使用overflow:hidden;(如果有內容出了盒子,不能使用這個方法)
★偽元素清除浮動 推薦使用<ul class="nav-ul clearfix">
clearfix:after { content: " "; /*both:left+right*/ clear: both; height: 0px; display: block; visibility: hidden; } <ul class="u1 clearfix" style="overflow:hidden"> <li class="nav-cell">秒殺</li> <li class="nav-cell">優惠券</li> <li class="nav-cell">PLUS會員</li> <li class="nav-cell">閃購</li> <!-- 第一種:使用而外標籤 --> <!-- <li style="clear:left;"></li> --> </ul>
11.定位position
1.static(預設)
2.relative(相對定位-->相對於原來的位置)
3.absolute(絕對定位-->相對於定位過的前輩標籤)
4.fixed(固定-->返回頂部按鈕例項)
補充:
脫離文件列的3中方式
float
absolute
fixed
12.opacity(不透明度)
1.取值0~1
2.和rgba()的區別:
1.opacity 改變元素\子元素的透明度效果
2.rgba()只改變北京顏色的透明度效果
13.z-index
1.數值越大,越靠近你
2.只能作用於定位過的元素