前端三劍客-04css

一丶什麼是css

​ 層疊樣式表

二丶css註釋

CSS註釋:/**/
前端語言的註釋在使用的時候一般遵循成雙成對出現

/*導航條樣式開始*/
    /*導航條樣式結束*/

web框架也有針對html頁面的註釋
該註釋瀏覽器檢查也是看不到的
稱之爲模板語法的註釋
jinja2模塊: {# 模板語法註釋 #}

三丶css語法結構

​ 選擇器 {屬性1:值;屬性2:值;屬性3:值}

3.1基本選擇器

元素/標籤選擇器 直接寫標籤名
類選擇器 點 + 類名
id選擇器 # + id值
通用選擇器 *

3.2組合選擇器

1. 後代選擇器 空格
2. 兒子選擇器 >
3. 毗鄰選擇器 +
4. 弟弟選擇器 ~

3.3屬性選擇器

標籤均可以設置自定義屬性
[hobby]
[hobby="jdb"]
input[hobby='xxx']

3.4分組和嵌套

同時選擇修改多個標籤樣式
div, span, p {color:red}
嵌套選擇不一樣類型的標籤
#id, .cl, span {color:red}

3.5僞類選擇器

1. a:link
2. a:hover 鼠標懸浮
3. a:active
4. a:visited
5. input:focus input框獲取焦點(被點擊選中)

3.6僞元素選擇器

p:first-letter
p:before
p:after

四丶選擇器優先級

1. 選擇器相同的狀況下:就近原則
2. 選擇器不一樣的狀況下:
   行內>id選擇器>類選擇器>標籤選擇器

五丶盒子模型

兩個快遞盒之間的距離(標籤與標籤之間的距離) 稱之爲 外邊距(margin)
紙盒的厚度(邊框) 稱之爲邊框(border)
內部的物品到盒子的距離(內部文本與邊框的距離) 稱之爲 內邊距(padding)
物品自己的大小(文本大小) 稱之爲內容(content)

六丶css屬性相關

width 屬性能夠爲元素設置寬度

height 屬性能夠爲元素設置高度

塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

七丶字體樣式

1. font-family 字體格式
2. font-size 字體大小
3. font-weight 字重
4. rgb(255,255,255) 顏色
5. rgba(255,0,0,0.5) 顏色加上並指定色彩透明度

八丶字體屬性

1. text-align: center/ left/ right/ justify
2. text-decoration: none/underline/overline/line-through
3. text-indent: 32px

九丶背景屬性

1. 顏色：
   red
   #4e4e4e
   rgb(128,128,128)
   rgba(128,128,128,0.5)
2. backgroud-color
3. backgroud-image
   默認是平鋪滿這個區域
   瀏覽器窗口能夠把它當成一個三維座標系
   橫X
   豎Y
   指向用戶的Z
4. backgroud-repeat: repeat/ no-repeat/ repeat-x/ repeat-y
5. backgroud-position: center center 第一個上下 第二個左右

支持簡寫

​ backgroud:red url('') no-repeat center center

背景圖片應用場景

​ 全部瀏覽器你可以看到的都是走網路請求傳輸過來的
​ 當你的網站須要用到不少小圖標的時候，能夠將全部的小圖片放在一張
​ 圖片上，而後經過背景圖片的位置來控制顯示哪個小圖片
​ 從而節省加載資源

十丶邊框屬性

1. ​ border-style:solid/dotted/dashed

2. ​ border-color:red

3. ​ border-width:5px
   ​
   ​ 支持簡寫

4. ​ border:3px solid red;

5. ​ border-top/left/right/bottom

十一丶浮動

float

​ 浮動是脫離文檔流的 也再也不遵循塊兒級獨佔一行的特色
​ 浮動主要用於頁面佈局
​

浮動的問題:

​ 浮動會帶來父標籤塌陷的問題

解決辦法:

​ clear 清除浮動帶來的影響
​ clear: left/ right/ both
​
​ .clearfix:after {
​ content:''
​ display:block;
​ clear:both
​ }

​ 哪裏塌陷 就給誰加一個clearfix類屬性便可
​ 若是給當前標籤加沒有效果 那麼你能夠考慮給目標標籤外層
​ 再套一個div 而後給這個新的div加

十二丶是否脫離文檔流

脫離

​ 1.浮動
​ 2.絕對定位
​ 3.固定定位
​

不脫離

​ 1.相對定位

十三丶定位

全部的標籤默認都是靜態的static 沒有定位一說
要想改變標籤位置 須要先改變標籤位置狀態
默認: position:static

1.相對定位 relative
2.絕對定位 absolute
3.固定定位 fixed

溢出屬性

overflow:hidden,scroll,auto

十四丶設定z-index

z-index 最大值:1000 最小值:0

十五丶透明度

​ opacity 範圍:0~1

十六丶display

用於控制HTML元素的顯示效果。

值	意義
display:"none"	HTML文檔中元素存在，可是在瀏覽器中不顯示。用於隱藏
display:"block"	默認佔滿整個頁面寬度
display:"inline"	按行內元素顯示
display:"inline-block"	大白話:再也不佔一行的塊級標籤

十七丶怎麼去除ul樣式

ul {
    list-style-type: none;
    padding-left: 0;
}