前端基礎_CSS

weixin_33807284發表於2019-03-02
前端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;     // 文字居中使用  取值可以是%，數值，畫素

CSS 佈局

  • html標籤分類
塊級元素（block）
1、可以設定寬、高，不設定寬度，預設100%
2、獨佔一行
3、塊級元素可以巢狀塊級元素和行內元素

行內元素（inline）
1、行內元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裡，直到一行排列不下，才會新換一行
2、不支援設定寬、高，其寬和高隨元素的內容而變化
3、行內元素只能巢狀行內元素，不能巢狀塊級元素和行內塊元素

行內塊元素（inline-block）
1、可以設定寬、高
2、行內元素不會獨佔一行
3、塊級元素可以巢狀塊級元素和行內元素
  • 佈局種類
1、table 表格佈局
2、float 浮動佈局 （重點）
3、inline-block佈局
4、flexbox 佈局  （現在佈局方式）
  • float 浮動佈局
容器需要清浮動，子元素需要浮動（float: left/right;）
/*清除浮動程式碼*/
.clearfloat:after{display:block;clear:both;content:"";}
.clearfloat{zoom:1}    /*可解決ie6,ie7浮動問題*/

相關文章