CSS簡單總結

1.導入格式

• 内部樣式：在head中使用style标簽，在style中直接編寫css代碼

<style>
        h1{
            color: green;
        }
    </style>
           

• 外部樣式（推薦使用）:在head中用link标簽，link标簽中的href中填寫css檔案的位址

<link rel="stylesheet" href="css/style.css">
           

• 行内樣式：在标簽元素中，編寫一個style屬性，編寫樣式即可

<h1 style="color: red">我是标題</h1>
           

優先級：就近原則，誰離代碼最近，誰的優先級最高（即行内樣式最高，外部樣式和内部樣式誰在下面誰優先）

2.選擇器

基本選擇器

1. 标簽選擇器：選擇頁面上所有的這個标簽的元素

h1{}
p{}
           

1. 類選擇器:選中所有該類的标簽

.class{}
           

1. id選擇器:選中該id的标簽(id必須全局唯一)

#id{}
           

優先級：不遵循就近原則！id選擇器>類選擇器>标簽選擇器

層次選擇器

1. 後代選擇器：父級元素下所有的該标簽

div div{}
body p{}
           

1. 子選擇器:父級元素下的第一代标簽元素（隻有一代）

body>p{}
           

1. 相鄰兄弟選擇器:隻選中一個，為該元素同級向下的第一個元素

.active+p{}
           

1. 通用選擇器:選中該元素同級向下的所有元素

.active~p{}
           

結構僞類選擇器

ul的第一個元素

ul li:first-child{
                  background: cornflowerblue;
        }
           

ul的最後一個元素

ul li:last-child{
            background: #cb7b1c;
       }
           

選中p元素，定位到其父元素，若父元素下的第一個子元素為p，則這個p元素的背景元素為紅色

p:nth-child(1){
            background:red
}
           

選中父元素下的p元素的第二個

p:nth-of-type(2){
           background: darkgray;
       }
           

屬性選擇器

/*選中class中含有links的元素*/
        a[class*="links"]{
            background: green;
        }
        /*選中有id的元素*/
        a[id]{
            background: yellow;
        }
        /*選中href中以/開頭的元素*/
        a[href^="/"]{
            background: #cb7b1c;
        }
        /*選中href中以.doc結尾的元素*/
        a[href$=".doc"]{
            background: deeppink;
        }
           

• =：絕對等于
• *=：包含
• ^=：以……開頭
• $=：以……結尾

3.美化網頁元素

span标簽

span元素是無語義的行内元素，它可以對元素進行分組，使它們以不同的樣式顯示

字型樣式

• font-size：字型大小
• font-weight：字型粗細

• font-family：字型選擇（楷體、宋體等）

  可以将所有樣式寫在一起：

  字型風格（斜體等） 字型粗細 字型大小 字型選擇

p{
            font: oblique bolder 50px "楷體";
        }
           

文本樣式

text-align                              排版（center居中）
    text-indent                             首行縮進（機關為em）
    行高(line-height)和框的高度(height)       一緻即可上下居中
    text-decoration: underline              下劃線
    text-decoration: line-through           中劃線
    text-decoration: overline               上劃線
    text-decoration: none                   超連結去下劃線
           

文字與圖檔水準對齊（用span标簽将文字選中）

img,span{
    vertical-align: middle;
}
           

超連結僞類

• 滑鼠懸浮的狀态

a:hover{}
           

• 滑鼠按住未釋放的狀态

a:active{}
           

• 陰影

text-shadow:陰影顔色 水準偏移 垂直偏移 陰影半徑
           

清單

• list-style：none 去掉圓點
• list-style：circle 空心圓
• list-style：square 正方形
• list-style：decimal 數字

背景

• 背景加圖檔

  background-image: url("圖檔位址");

• 圖檔平鋪方式

  background-repeat: repeat-x;

  background-repeat: repeat-y;

  background-repeat: no-repeat;

• 寫在一起為：

  background: 背景顔色 url("圖檔位址") 圖檔位置（eg：10px 5px） 平鋪方式;

漸變

漸變css源碼網址

點選跳轉

4.盒子模型

• 外邊距：margin
• 内邊距：padding

• 邊框：border

  外邊距的妙用：居中元素（前提：1. 塊元素 2. 有固定的寬度）

  margin：0 auto

邊框圓角

border-radius

當border-radius、width、height相同時，可變成圓形

5.display

• display：none 此元素不會顯示
• display：block 此元素将顯示為塊級元素，此元素前後會帶有換行符
• display：inline 預設。此元素會被顯示為内聯元素，元素前後沒有換行符
• display：inline-block 行内塊元素，是塊元素，但可以内聯，在同一行

6.浮動

float：left/right/none

清除浮動

clear:right  右側不允許有浮動
       left   左側不允許有浮動
       both   兩側不允許有浮動
           

父級邊框塌陷問題解決

1. 增加一個新的空标簽，清除浮動

<div class="clear1"></div>
           

.clear1{
    margin: 0;
    padding: 0;
    clear: both;
}
           

1. 在父級元素中增加一個overflow：hidden
2. 父類添加一個僞類after

#father:after{
    content: '';
    display: block;
    clear: both;
}
           

7.定位

相對定位

position：relative

生成相對定位的元素，相對于其正常位置進行定位(仍然在标準文檔流中，原來的位置會被保留)

絕對定位

固定定位

z-index