前端基礎_CSS

CSS 書寫語法

• 內部與外部樣式

選擇器 {
    樣式1;  // 屬性: 值; width: 300px
    樣式2;
}

• 內聯樣式

<div style="樣式1;樣式2"></div>   // width: 300px

CSS 基礎選擇器

• ID選擇器

#id{ }

• class選擇器

.cls{ }

• 元素選擇器

div{ }
div.cls{ }

以上三種基本選擇器能夠拼接在一塊兒，匹配更 準確 例如：div.cls{ }
選擇器的做用：匹配HTML元素

CSS 高級選擇器

• 組合選擇器

element,element{ }

• 通配符選擇器

*{ }

• 後代選擇器

pElement subElement{ }

• 子元素選擇器

pElem > subElem{ }

• 相鄰兄弟選擇器

div + a{ }    // 選擇div後面相鄰的a標籤

• 屬性選擇器

[attribute]{ }
element[attribute]{ }
element[attribute=value]{ }

• 僞類選擇器

a:link {color: #FF0000}        /* 未訪問的連接 */
a:visited {color: #00FF00}    /* 已訪問的連接 */
a:hover {color: #FF00FF}    /* 鼠標移動到連接上 */
a:active {color: #0000FF}    /* 選定的連接 */
p:first-child { }

• 僞元素選擇器

div::after{ content:"" }
div::before{ content:"" }

CSS 優先級

內部樣式和外部樣式合併

!important > 行間樣式 > ID選擇器 > 類選擇器/屬性選擇器/僞類選擇器 > 元素選擇器/僞元素選擇器 > 通配符選擇器

.cls{}      //0-0-0-1-0
#id{}       //0-0-1-0-0
div.cls{}   //0-0-0-1-1

CSS 經常使用樣式

• 文字

字體：font-family: "Times New Roman", Times, serif;
顏色：color: red;
字體大小：font-size: 40px;
字體粗細：font-weight: 900;
字體樣式：font-style：italic;

• 盒子

外邊距：margin：15px;
內邊距：padding: 20px;
邊框： border: 1px solid #999;
寬： width: 500px;
高： height: 400px;

• 背景

集成屬性寫法：
background: #0079D2 url(img/jt.jpg) no-repeat fixed 50% 20%;

單個屬性寫法：
背景圖大小：background-size:80px 60px; 
背景顏色：background-color:yellow;
背景圖位置：background-position:center; 
背景圖重複：background-repeat：no-repeat;
背景圖：background-image:url('paper.gif');

• 行高

line-height: 30px;     // 文字居中使用  取值能夠是%，數值，像素

• 顯示與隱藏

一、display
隱藏樣式：display:none;
顯示樣式：display:非none的其它值

二、visibility
隱藏：visibility:hidden;
顯示：visibility:visible;

• 定位

position

取值：absolute、relative、fixed

一、絕對定位

CSS 佈局

• html標籤分類

塊級元素（block）
一、能夠設置寬、高，不設置寬度，默認100%
二、獨佔一行
三、塊級元素能夠嵌套塊級元素和行內元素

行內元素（inline）
一、行內元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
二、不支持設置寬、高，其寬和高隨元素的內容而變化
三、行內元素只能嵌套行內元素，不能嵌套塊級元素和行內塊元素

行內塊元素（inline-block）
一、能夠設置寬、高
二、行內元素不會獨佔一行
三、塊級元素能夠嵌套塊級元素和行內元素

• 佈局種類

一、table 表格佈局
二、float 浮動佈局 （重點）
三、inline-block佈局
四、flexbox 佈局  （如今佈局方式）

• float 浮動佈局

容器須要清浮動，子元素須要浮動（float: left/right;）

/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解決ie6,ie7浮動問題*/