CSS知識點整理

寫在前面：這是一篇學習CSS的筆記。重點在于羅列CSS的知識點。

CSS

㈠ CSS入門

  1. 什么是CSS？

    CSS 指層疊樣式表 (Cascading Style Sheets)

  2. 作用：
    定義如何顯示 HTML 元素，修改和美化網頁！

  3. CSS的書寫形式：內聯(lián)樣式、內部樣式表、外鏈樣式表

    樣式表的優(yōu)先級：

    一般，所有的樣式會根據下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數字 4 擁有最高的優(yōu)先權。

    • 1.瀏覽器缺省設置
    • 2.外鏈樣式表
    • 3.內部樣式表（位于 <head> 標簽內部）
    • 4.內聯(lián)樣式（在 HTML 元素內部）

    因此，內聯(lián)樣式（在 HTML 元素內部）擁有最高的優(yōu)先權。

4.1 外部加載的形式（最常用）
      //新建css文件：style.css
    <link rel="stylesheet" type="text/css" href="style.css" />

4.2 頭部形式（寫在HTML頭部區(qū)域） 
    <style type="text/css">
        //CSS樣式語法
        p{color: blue; text-align: center;}
        h1{color: #999999; font-size: 12px}
    </style>

4.3 內聯(lián)形式（寫在HTML標簽中） 
     style="color: blue; text-align: center;"

e.g.
<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link rel="stylesheet" type="text/css" href="style.css" /> //第一種：外部文件加載

    <style type="text/css">   //第二種：寫在頭部文件
        //CSS樣式語法
        p{color: blue; text-align: center;}
        h1{color: #999999; font-size: 12px}
    </style>
</head>
<body>
    <p>頭部CSS樣式</p>

    <p style="color: blue; text-align: center;">內聯(lián)CSS樣式</p>  //第三種：內聯(lián)方式 style屬性

    <h1>我是標題</h1>

</body>
</html>

㈡ CSS語法

CSS的語法結構：
選擇器{屬性：值; 屬性：值; 屬性：值; …}

CSS 基礎語法

  • 花括號：{}

  • 冒號：屬性和值被冒號(:)分開

  • 分號：用分號(;)將每個聲明分

    ?

1. CSS選擇器

常用的9個選擇器！

1. 通配選擇器

   <style type="text/css">
        *{color: red;}
   </style>


2. 標簽選擇器
//直接用標簽名
   <style type="text/css">
        h1{width: 200px; height: 300px;border: 1px solid red;text-align: center;}
   </style>


3. id選擇器
類似于類選擇，但具有唯一性！
   <style type="text/css">
        //先給標簽起一個名字:id="tag_01"
        #tag_01{color: red;border: 1px solid red;width: 100px;height: 200px;}
   </style>

</head> 
<body> 
   <p id="tag_01"></p>
</body> 


4. 類選擇器(最常用)
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>制作我的第一個網頁</title> 

   <style type="text/css">
     //先給標簽起一個名字:class =“tag01”
        .tag01{color: red;border: 1px solid red;width: 100px;height: 200px;}
        .tag02{list-style-type: none;}
      
     //結合標簽選擇器
        li.tag01 {color:red;}
   </style>

</head> 
<body> 
   <p class="tag01"></p>  //先給標簽起一個名字:class =“tag01”
   <ul>
    <li class="tag01 tag02"></li>
    <li class="tag01 tag02"></li>
   </ul>
</body> 

注意：tag命名規(guī)則：必須以字母開頭，字母數字下劃線組成！



5. 屬性選擇器

   <style type="text/css">
    <!--屬性-->
        [title]{border: 1px solid red;width: 200px;height: 20px;}
    <!--指定標簽的屬性-->
         img[title][id]{color: cyan;}
    <!--指定限定條件的標簽的屬性-->
         img[title][id="tag_01"]{color: cyan;}           
   </style>

</head> 
<body> 
    <img src="" title="image01" id="tag_01" />
    <img src="" title="image02" class="tag01" />
    <p>我是段落</p>
</body> 


<= === ===== ======= ==========>

6. 后代選擇器<也很常用>

   <style type="text/css">
        <!--嵌套標簽呈現后代關系-->
        table tr th a{text-decoration: none;color: red;font-size: 5cm;} 
        table a{text-decoration: none;color: red;font-size: 5cm;} //也可以跳躍代數
   </style>

</head> 
<body> 
    <table>
        <tr> <!--嵌套標簽呈現后代關系-->
            <th></th>
                <a href="">刪除下劃線</a>
            <td></td>
        </tr>
    </table>
</body> 


7. 子代選擇器

   <style type="text/css">
        tr > td{color: red;background-color: yellow;}
   </style>

</head> 
<body> 
    <table>
        <tr> 
            <td>子代選擇器</td>
        </tr>
    </table>
</body> 

注意：只能兩代。


8. 相鄰兄弟選擇器

   <style type="text/css">
       td + td{color: red;}   
   <!--限制范圍-->
       .tag01 + .tag02{color: green;}
   </style>

</head> 
<body> 
    <table>
        <tr>
            <td>我是TD1</td> 
            <td>我是TD2</td> <!--被修改的相鄰兄弟-->
            <td>我是TD5</td> <!--被修改的相鄰兄弟-->
        </tr>
        <tr>
            <td>我是TD3</td>
            <td>我是TD4</td>
            <td>我是TD6</td> <!--被修改的相鄰兄弟-->
        </tr>
        <tr>
            <td class="tag01">我是TD3</td>
            <td class="tag02">我是TD4</td> <!--被修改的相鄰兄弟-->
            <td>我是TD6</td> 
        </tr>
    </table>
</body> 


9. 群組選擇器

   <style type="text/css">
        //用逗號隔開
        li,td,.tag01,#tag_01{color: red;font-size: 12px;}
   </style>

CSS中的偽類

偽類的語法： selector : pseudo-class {property: value}
CSS 類與偽類搭配使用: selector.class : pseudo-class {property: value}

//超鏈接<a></a>的偽類
a:link{}    /* 沒有訪問鏈接的表現樣式*/
a:visited{} /* 已經訪問鏈接的表現樣式*/
a:hover{}   /* 鼠標懸停鏈接時的表現的樣式*/
a:active{}  /* 鼠標點擊鏈接時的表現的樣式*/

注意：必須按順序寫！
<head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
   <title>CSS中的偽類</title> 

   <style type="text/css">
        a:link{color: red;} /* 點擊之前表現的樣式*/
        a:visited{color: #999999;} /* 點擊之后表現的樣式*/
        a:hover{color: green; text-decoration: none;} /* 鼠標懸停的表現的樣式*/
        a:active{color: yellow;} /* 鼠標點擊時的表現的樣式*/
   </style>
</head> 
<body> 
    <a >進入網頁首頁</a>
</body> 
</html>

2. CSS常用屬性

詳細屬性：參考鏈接：http://wenku.baidu.com/view/f51f5d3710661ed9ad51f336.html

⑴ 樣式屬性

  • ?
  • CSS 文字
  • CSS 文本
  • CSS 前景色
  • CSS 背景
  • CSS 列表
//CSS描述長度的單位：
cm 厘米
mm 毫米
em 當前字體m字母的寬度（代指一個字母的寬度）
ex 當前字體x字母的寬度（代指一個字母的寬度）

in 英寸，1in = 2.54cm 
pt 點，1pt = 1/72in
pc 皮卡，1pc = 12pt
px 像素

百分比(%)  相對值


//CSS中顏色表示方法：
英文單詞：red blue ...
十六進制：#999 #FFF  #rrgggbb
RGB格式：rgb(x,y,z) 范圍0~255之間整數
         rgb(x%,y%,z%)  范圍0~100之間的整數




//字體設置
*{
font-family: "Arial","宋體"，"黑體"，"楷體"; //瀏覽器會依次查找字體是否安裝
font-size: 30pt; //5種表示方式：長度值：30pt；相對默認的百分比：200%;絕對大小：large;相對上一元素：larger;增大值：+5pt
font-weight: normal; //值是100~900之間整百數：normal(400)：正常;blod(700):粗體;border：比上一級增加100；lighter：比上一級減少100
font-style: italic; //italic斜體；oblique:傾斜; normal正常
font-variant: normal; //normal正常；small-caps：小寫字母都變成小型的大寫字母
}


//文本設置
*{
    text-decoration: underline,blink; //（underline:下劃線;overline:上劃線;line-through:刪除線；blink：閃爍；none：無);
    text-align: left,center; //水平對齊：(left | right | center | justify(兩邊對齊))
    vertical-align: middle; //垂直對齊：(baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分比)
    text-indent: 20pt;  //首行縮進:(20pt | 100%)
    text-transform: uppercase; //文本轉換:(none | capitalize:首字母大寫 | uppercase 字母大寫 | lowercase 字母小寫;
}


//文字布局：字間距&行間距
*{
    letter-spacing: normal; //字符間距：15px
    word-spacing: 15px; //字間距
    line-height: 20pt;  //行高&行間距：20pt | 120% | 2.0
}


//前景色
*{
    color: blue; //前景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
}


//背景色
*{
    background-color: red; //背景色:(red | #0000FF | rgb(0,0,255) | rgb(0,0,100%) )
    background-image: url(images/abc.jpg); 
    background-attachment: scroll; //圖像的滾動方式:(scroll:滾動 | fixed:固定);
    background-repeat: repeat; //設置圖片重復方式(repeat | no-repeat | repeat-x | repeat-y)
    background-position: left center; //設置圖片擺放位置

    background: red url(images/abc.png) repeat-y; //一次設置，必須按照順序
}
  
  

//列表屬性
*{
    list-style-type: disc; //(none | disc 實心黑點 | circle 空心圓點 | square 黑方塊 | decimal 十進制123 | lower-roman 小寫羅馬數字 | upper-roman 大寫羅馬 | lower-alpha 小寫字母 | upper-alpha 大寫字母)
    list-style-image: url(); //設置圖片為項目符號
    list-style-position: inside; //設置項目符號的位置（outside | inside）

    //一次性設置
    list-style: url() disc outside; //不限順序，image優(yōu)先于type
}

⑵ 盒子模型

  • CSS 內邊距
  • CSS 邊框
  • CSS 外邊距

盒子模型：

盒子模型
盒子模型
//邊框
*{
    border-color: red yellow blue green; //可以接受1~4個值:(1個值：四個邊框同色，2個值：上下 左右；3個值：上 左右 下；4個值：上 右 下 左);
    border-top-color:red;
    border-right-color:red;
    border-bottom-color: red;
    border-left-color:red;

    border-width: 1pt thin 100%; //寬度：可以接受1~4個長度值，還可以接受3個關鍵詞(thin | medium | thick)
    border-top-width: thick;
    border-right-width: 20pt;
    border-bottom-width: 100%;
    border-left-width: medium;

    border-style: none; //邊框樣式:(none: 無邊框 | dotted：小點 | dashed 虛線 | solid 實線 | double 雙線 | groove 四進線 | ridge 凸線 | inset 元素內凹 | outset 元素外凹)
    border-top-style: solid;
    border-right-style: dashed;
    border-bottom-style: double;
    border-left-style:none;


    //縮略設置方式:順序不限;
    border: solid 15px red;
    border-top: 5pt red dashed;
    border-left: dashed red red;
    border-bottom: inset green;
    border-left: dashed;
}


//外邊距margin
*{
    margin: 1pt auto 200% auto;//接受1~4長度值和百分數 和 auto 
    margin-top: auto;
    margin-right: 20pt;
    margin-bottom: 20%;
    margin-right: auto auto;
}


//內邊距padding
*{
    padding: 3pt; ////接受1~4長度值和百分數
    padding-top: 200%;
    padding-right: 3pt 4pt;
    padding-bottom: 3pt 3pt 5pt;
    padding-left:3pt 3pt 5pt 6pt;
}

⑶ 定位和浮動

  • CSS 相對定位
  • CSS 絕對定位
  • CSS 浮動

內聯(lián)元素與塊級元素

//內聯(lián)元素與塊級元素

區(qū)別：塊級元素獨占一行；可以設置行高，內外邊距等；
     內聯(lián)元素只顯示在一行！只能設置左右，不能設置寬高和上下內外邊距！

塊級元素：
<body></body>
<div></div>
<h1></h1>...<h6></h6>
<ol></ol>
<ul></ul>
<li></li>
<p></p>
<table></table>
<tr></tr>
<td></td>


內聯(lián)元素：
<a href=""></a>
<i></i>
<u></u>
<b></b>
<span></span>  //文本標簽
<font></font>

相對定位與絕對定位

1. 相對定位

相對于自己原來的位置發(fā)生改變，并且保留原有的位置空間。

   <style type="text/css">
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{border: 3px dashed cyan;width: 200px;height: 100px;
            position: relative; /*相對定位*/
            top: -30px;
            left: 50px;}
   </style>



2. 絕對定位

相對于擁有position屬性的父級元素的位置發(fā)生改變（如果父級元素沒有position屬性，就會查找父級的父級，直到body），并釋放原有的位置空間！

   <style type="text/css">
        .div01{border: 1px solid red;width: 200px;height: 100px;}
        .div02{border: 3px dashed cyan;width: 200px;height: 100px;
            position: absolute; /*絕對定位*/
            top: 30px;
            left: 50px;}
        .div03{border: 1px solid green;width: 200px;height: 100px;}
   </style>



普通流定位：默認定位：
   塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
   行內框在一行中水平布置，可以使用水平內邊距、邊框和外邊距調整它們的間距

CSS 定位屬性
position    設置定位方式
top     定義了定位元素上外邊距邊界與其包含塊上邊界之間的偏移。
right   定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom  定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left    定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

overflow  設置當元素的內容溢出其區(qū)域時發(fā)生的事情。
z-index   設置元素的堆疊順序。


//定位
*{
    position: relative; //設置定位方式:(static 常規(guī) | relative 相對定位 | absolute 絕對定位)

    //元素上下左右的位置
    top: 10%;
    right: 2pt;
    bottom: 200%;
    left: 45pt;

    //元素所占空間
    width: 20%;
    height: 30pt;
}


//z-index(Z軸位置)
*{
    z-index: -1; //大于-1的自然數：-1最底層 值越大越靠近瀏覽者
}


//溢出
*{
    overflow: scroll; //內容大于元素指定空間產生溢出：(visible 溢出可見 | hidden 溢出隱藏 | scroll 滾動顯示 | auto 自動判斷)
}

浮動

浮動效果：使豎列的盒子可以橫向排版。
         浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

屬性：float

//浮動
*{
    float: left; //元素浮動到頁面的左邊緣或右邊緣:(left | right | none)
    clear: both; //元素旁邊是否允許其他元素浮動:(left | right | both | none)
}





浮動的負效果:導致父級元素無法撐開。

清除負效果：(三種方法)

1.添加空盒子：

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear{clear：both;} <!--空盒子類-->
   </style>

</head> 
<body> 
    <div class="box">
        <div class="box01"> 我是二個盒子！</div>
        <div class="box02"> 我是三個盒子！</div>
        <div class="clear"></div>  <!--添加空盒子：在被浮動元素的后面(同級元素)添加一個空盒子，并且定義一個clear類-->
    </div>
</body> 

優(yōu)點：便捷 代碼量少
缺點：增加很多空盒子


2..clear{display: block;overflow: hidden;}

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear{display: block;overflow: hidden;}
   </style>

</head> 
<body> 
    <div class="box clear"> <!--定義一個clear類,賦給浮動元素的父級元素-->
        <div class="box01"> 我是二個盒子！</div>
        <div class="box02"> 我是三個盒子！</div>
    </div>
</body> 


3. 最流行 最常用 兼容所有瀏覽器
缺點：代碼量多

   <style type="text/css">
        .box{border: 1px solid red;}
        .box01{border: 3px dashed cyan;width: 150px;height: 100px;float: left;}
        .box02{border: 2px solid blue;width: 200px;height: 100px;float: left;}
        .clear.after{display: block;clear: both;content: "." visibility: hidden;height: 0}
        .clear{zoom:"1";}
   </style>

</head> 
<body> 
    <div class="box clear"> <!--定義一個clear類,賦給浮動元素的父級元素-->
        <div class="box01"> 我是二個盒子！</div>
        <div class="box02"> 我是三個盒子！</div>
    </div>
</body>

⑷ 其他

//鼠標的屬性
*{
    cursor: auto; //設置鼠標形狀：(auto | hand 手型 | text 文本I型 | ....)
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容