CSS

記得大一下學期那會參加基地後就開始跟師兄師姐接觸前端了，利用業餘時間在站看各種視訊。由於初次認知並且時間也能不固定集中，也存在跳躍式學習等等原因，這就導致了好多知識點要麼漏掉要麼沒記全，只能懂個表面意思，具體怎麼個用法怎麼個原理也說不上來。再因後面複習考試了，於是它們就被遺忘了。在這個暑假終於有時間回來回顧了，跟著視訊完整的過了一遍，只能說一個完整的體系學習十分重要，以下是個人結合視訊和JavaWeb部分CSS的一些總結歸納。

1.什麼是CSS

CSS：層疊樣式（樣式可以疊加）

2.CSS的作用

雖然HTML的某些標籤的屬性可以設定樣式效果，但細節處理起來遠遠不夠。

HTML實現的樣式效果會出現大量重複程式碼，維護成本低。

CSS作用：

能夠做到內容與網頁分離，對網頁中元素的位置排版等效果進行畫素級的精準控制。
用來美化頁面，需要依賴HTML。

3.CSS的基本使用

3.1CSS基本語法

【格式】

 選擇器 {
     屬性: 屬性值;
     .....
 }

【示例】樣式設在<style>標籤中：type="text/css"

     <style type="text/css">
     body {
         background-color: aqua; /*背景顏色*/
         color: blue; /*字型顏色*/
         font-size: 20px; /*字型大小*/
     }
     </style>

注意：

CSS宣告要以分號結尾，宣告要用{ }括起來
建議一行寫一個宣告
如果屬性值有多個單片語成，要給值加上引號

CSS註釋：

/* 註釋的內容 */

4.CSS的使用

4.1行內樣式

樣式定義在HTML標籤上的style屬性中:

一行一行的寫，以行內壓樣式寫的CSS耦合度較高

【參考程式碼】

 <body>
     <!-- 1. 行內樣式:耦合度高 -->
     <p style="color: blue;font-family: 楷體;font-size: 20px;">我是段落噢</p>
     <p style="color: blue;font-family: 楷體;font-size: 20px;">我是段落噢</p>
     <p style="color: blue;font-family: 楷體;font-size: 20px;">我是段落噢</p>
     <p style="color: blue;font-family: 楷體;font-size: 20px;">我是段落噢</p>
      
 </body>

4.2內部樣式

定義在html<head>標籤中的<style>標籤中

     <style>
         /* p標籤 */
         p {
             color: blue;
             font-family: 楷體;
             font-size: 20px;
          }
     </style>

4.3外部樣式

在實際開發中，很多時候都引入外部樣式檔案，這種形式可以html頁面更加清晰，而且可以達到更好的重用效果

1.在CSS資料夾中建一個xxx.css檔案然後直接寫樣式：

2.在html中通過<link>標籤引入外部的css檔案，例如：<link rel="stylesheet" style="text/css" href="css/style.css">

rel：當前檔案與引入檔案的關係

style：型別：css型別

href：引入資源的路徑

注：CSS的優先順序——就近原則

5.CSS選擇器

在css中，選擇器是一種模式，用於選擇需要新增樣式的元素。

css選擇器非常多，掌握常用的幾種即可。

5.1基本選擇器

5.1.1通用選擇器

特點：選擇所有元素

定義格式：

 * {
     屬性：屬性值;
     ....
   }

         * {
             color: red;
             background-color: aqua;
             font-size: large;
             font-family: "宋體";
         }

5.1.2元素/標籤選擇器

特點：選擇指定標籤，對其樣式進行修改(指定標籤可以為多個，樣式一樣，如多個div標籤)

定義格式：

 標籤名 {
         屬性：屬性值;
         ....
       }

        div {
               height: 100px; /* div的高度 */
               width: 100px; /* div的高度 */
               background-color: aqua; /*背景顏色*/ 
             }

5.1.3id選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

HTML元素以id屬性來設定id選擇器,CSS 中 id 選擇器以 "#" 來定義。

格式：

 選擇指定id屬性值的元素 #
 
 #id屬性值 {
     屬性名: 屬性值;
     ....
 }

【示例】<div id="div1">我是div1</div>

        #div1 {
                 height: 100px; /* div的高度 */
                 width: 100px; /* div的高度 */
                 background-color: aqua; /*背景顏色*/ 
               }

注：

id值最好保持唯一性!

id定義規則：以字母、數字、下劃線組成，不能以數字開頭

定義格式：

 #para1 {    
          text-align:center;
          color:red;
         }

ID屬性不要以數字開頭，數字開頭的ID在 Mozilla/Firefox 瀏覽器中不起作用。

5.1.4類選擇器

class 選擇器用於描述一組元素的樣式，class 選擇器有別於id選擇器，class可以在多個元素中使用。

類選擇器以一個點"."號顯示：

定義格式：

 選擇指定class屬性的元素
 .class屬性值 {
     屬性名: 屬性值;
     ....
 }

【示例】<div class="cls1">我是div</div>

    .cls1 {
             font-weight: bold; /* 字型粗細 */
             font-size: 100px; /* 字型大小 */
           }

5.1.5分組選擇器(瞭解)

 選擇指定選擇器選中的元素
 
 選擇器1,選擇器2,選擇器3，...{
     屬性名: 屬性值;
     ....    
 }

【示例】

<div id="div1">我是div1</div>

<div class="cls1">我是div</div>

<p>我是段落噢</p>

 #div1,.cls1,p{
    /* 邊框 邊框的粗細  邊框的風格  邊框的顏色
     border: 20px solid #0000FF;
 }

選擇器優先順序：（權重值）

id選擇器 100 > 類選擇器 10 > 元素選擇器 1 > 通用選擇器

行內樣式 style屬性中權重是1000

5.2.組合選擇器

css中組合選擇器說明了兩個選擇器之間的關係。css組合選擇器包括各種簡單選擇符的組合方式

在css包含四種組合方式：後代選擇器(以空格分隔)，子元素選擇器(以大於號分隔)，相鄰兄弟選擇器(以加號分隔)，普通兄弟選擇器(以波浪線分隔)

5.2.1後代選擇器(派生選擇器)

定義格式：

 後代選擇器(以空格分隔)
 
     指定元素 指定後代元素{
         屬性值: 屬性名
         ....
     }

【參考示例】

     .food li {
         border: 10px solid red;
     }

     <h1>食物</h1>
     <ul class="food"> /* 只要在我的標籤裡面，滿足條件的都是後代 */
         <li>水果
             <ol>
                 <li>蘋果</li>
                 <li>西瓜</li>
                 <li>香蕉</li>         
             </ol>
         </li>
         <li>蔬菜
             <ol>
                 <li>白菜</li>
                 <li>捲心菜</li>
                 <li>茄子</li>         
             </ol>
         </li>
     </ul>

顯示圖：

5.2.2子元素選擇器

用於選擇指定標籤元素的所有第一代子元素，以大於號分隔

定義格式：

     選擇器1 > 選擇器2 {
         屬性名:屬性值;
         ....
     }

【參考示例】

         .food > li {
             border: 10px solid red;
         }

 <h1>食物</h1>
 <ul class="food"> /* 子代選擇器：只會找第一代滿足條件的元素 */
     <li>水果
         <ol>
             <li>蘋果</li>
             <li>西瓜</li>
             <li>香蕉</li>         
         </ol>
     </li>
     <li>蔬菜
         <ol>
             <li>白菜</li>
             <li>捲心菜</li>
             <li>茄子</li>         
         </ol>
     </li>
 </ul>

顯示圖：

5.2.3相鄰兄弟選擇器

找某一個元素挨著的下一個元素，下一個元素必須是同級標籤，且二者具有相同的父元素。以加號分隔

定義格式：

     選擇器1 + 選擇器2 {
         屬性名:屬性值;
         ....
     }

示例：

             #d + div {  /* 相鄰兄弟選擇器:挨著我的，且是指定的div標籤 */
                 color: red;
                 border: aqua;
             }

     <div id="d">
         相鄰兄弟選擇器1
         <ul>
             <li>小明</li>
             <li>小藍</li>
             <li>小紅</li>
         </ul>
     </div>
         
     <div>相鄰兄弟選擇器2</div>
     <div>相鄰兄弟選擇器3   </div>      
     <p>相鄰兄弟選擇器4</p>

顯示圖：

5.2.4普通兄弟選擇器

選擇緊接在另一元素後所有的元素，且二者具有相同的父元素。以波浪線分隔

定義格式

 選擇器1 ~ 選擇器2 {
     屬性名:屬性值;
     ....
 }

示例：

     #tt ~ li {
         color: red;
         border: aqua;
     }

 <div>
     普通兄弟選擇器1 /* 普通兄弟選擇器: 滿足條件的往後找
     <ul>
         <li>小林</li>
         <li id="tt">小明</li>
         <li>小藍</li>
         <li>小紅</li>
         <li>小綠</li>
     </ul>
 </div>

顯示圖：

注：後代選擇器和子代選擇器用的比較多

6.CSS常用屬性設定

6.1背景

CSS背景屬性用於定義HTML元素的背景效果

6.1.1.background-color

設定元素的背景顏色

             /* 通過元素選擇器獲取body元素 */
             body {
                 /* 設定元素背景顏色 */
                 background-color: #00FFFF;
             }

6.1.2.background-image

設定元素的背景影象。預設情況下，背景影象進行平鋪重複顯示，以覆蓋整個元素實體。

             /* 通過元素選擇器獲取body元素 */
             body {
                 /* 設定元素的背景圖片，預設圖片重複顯示 */
                 background-image: url(imgs/3.jpg);
             }

6.1.3.background-repeat

設定是否及如何重複背景影象

 /* 通過元素選擇器獲取body元素 */
 body {
 
     background-image: url(imgs/3.jpg);
     /* 設定元素的背景圖片是否重複 no-repeat：表示不重複  repeat-x:橫向重複 repeat-y:縱向重複 repeat:橫向縱向重複*/
     background-repeat: no-repeat;
     /* 設定元素背景圖片的大小 */
     background-size: 400px 400px;
 }

6.1.3.background-size

設定及調整背景圖片的大小

 /* 通過元素選擇器獲取body元素 */
     body {
         background-image: url(imgs/3.jpg);
         /* 設定元素背景圖片的大小 */
         background-size: 400px 400px;
     }

6.2文字

6.2.1.color

 body {
     color:blue;
 }
 h1 {
     color: #0000FF;
 }
 h2 {
     color: rgb(255,0,0);
 }

6.2.2text-align

設定文字對齊方式，center(居中)，left(左對齊)，right(右對齊)

 h2 {
         /* text-align: right; */ /* 右對齊 */
         /* text-align: left; */ /* 左對齊 */
         text-align: center; /* 居中對齊 */
 }

6.2.3text-decoration

文字修飾，overline(上劃線)，underline(下劃線)，line-though(中劃線)

 #d3 {
             
     /* 設定上劃線 */
     text-decoration: overline;
     /* 設定下劃線 */
     text-decoration: underline;
     /* 設定中劃線 */
     text-decoration: line-through;
     /* 同時設定 上中下劃線 */
     text-decoration: overline underline line-through;
 }

去除文字修飾如：超連結標籤預設帶有的下劃線

 a {
     /* 去除文字修飾 */
     text-decoration: none;
 }

6.2.4.text-indent

設定文字首行縮排(縮排兩個文字)： 1em表示一個文字高度

 #p1 {
     /* 設定首行縮排 */
     text-indent: 2em
 }

6.3字型

6.3.1.font-family

文字字型，該屬性設定文字的字型風格

font-family屬性應該設定幾個字型名稱作為一種“後備”機制，如果瀏覽器不支援第一種字型，它將嘗試下一種字型，所以儘量將不常見的字型靠前，常見字型放到後面，作為替補。

注意：

1）只有字型名中含有空格或#、$之類的符合時，才需要font-family宣告中加引號。

         #d1 {           
             /* 設定字型 */
             font-family: 楷體;
             font-family: "agency fb";
         }

2）多個字體系列是用一個逗號分隔指明

     /* 靠前的字型先生效 */
         #d1 {           
             /* 設定字型 */
             font-family: "agency fb",楷體,宋體;
         }

6.3.2.font-size

文字大小

     
         #d1 {           
             font-size: 100px;
         }

6.3.3.font-style

設定字型風格：normal：正常體，italic：斜體，oblique：強制斜體

         #d1 {           
             /* 設定字型風格 */
             font-style: normal;
             font-style: italic;
             font-style: oblique;
         }

6.3.4.font-weight

設定字型的粗細：blod:粗體。100~900值越大字型越粗：400：正常字型，700：粗體

         #d1 {           
             /* 設定字型粗細 */
             font-weight: 100;
 
         }

6.4對齊方式

設定元素中字型的水平對齊方式text-align:

left
right
center
justify 左右對齊（兩端對齊）

             p {
                 text-align: justify;
             }

6.5display屬性

display屬性：規定元素生成框的型別

block 元素會被顯示，且元素會變成塊級元素，元素前後會有換行符
none 元素會被隱藏，但真實存在
inline 元素會被顯示為行內元素，元素前後沒有換行符
inline-block 行內塊級元素

塊級元素：可以設定元素的寬高和邊距，元素會自動換行

行內元素：不可以設定元素的寬高和邊距，元素不會自動換行

行內塊元素：可以設定元素的寬高和邊距，元素不會自動換行

【示例參考】

             #span1 {
                 /* 隱藏元素 */
                 display: none;
             }
             
             /* 變 塊級元素 display: block */
             #span2 {
                 background-color: #00FFFF;
                 /* 行內元素無法設定寬高 */
                 width: 100px;
                 height: 100px;
                 /* 把行內元素span轉成塊級元素就可以顯示寬高了 */
                 display: block;
             }
             
             /* 變 行內元素 display: inline */
             div {
                 /* 將div塊級元素轉成了行內元素，就不可以設定元素的寬高和邊距，元素不會自動換行 */
                 display: inline;
                 /* 把塊級元素div轉成行內元素就不可以顯示寬高了 */
                 height: 100px;
             }
             
             /* 變行內塊級元素 inline-block  */
             p {
                 background-color: #00FFFF;
                 width: 200px;
                 height: 200px;
                 /* 可以設定元素的寬高和邊距，元素不會自動換行 */
                 display: inline-block;  
             }

【總結】

行內元素變塊級元素：display: block

元素會被顯示，可以設定元素的寬高和邊距，元素會自動換行

             #span2 {
                 background-color: #00FFFF;              
                 width: 100px;
                 /* 行內元素無法設定顯示寬高 */
                 height: 100px;
                 display: block;/* 把行內元素span轉成塊級元素就可以顯示寬高了 */
             }

塊級元素變行內元素：display: inline

元素會被顯示為行內元素，元素前後沒有換行符，不可以在設定元素的寬高和邊距了

         div {           
             display: inline;/* 將div塊級元素轉成了行內元素，就不可以設定元素的寬高和邊距，元素不會自動換行          
             height: 100px;/* 把塊級元素div轉成行內元素就不可以顯示寬高了 */
         }

塊級元素變行內塊級元素：display: inline-block

還可以設定元素的寬高和邊距，但元素不會自動換行來

         p {
             background-color: #00FFFF;
             width: 200px;
             height: 200px;
             /* 還可以設定元素的寬高和邊距，但元素不會自動換行來 */
             display: inline-block;  
         }

6.6浮動

float的屬性值有none，left，right。

1.只有橫向浮動，並沒有縱向浮動。

2.會將元素的display屬性變更為block。

3.浮動元素的前一個元素不會受到任何影響（如果你想讓兩個塊元素並排顯示，必須讓兩個塊級元素都應用float）

4.浮動元素的後一個元素會圍繞著浮動元素(典型應用是文字圍繞圖片)

【兩個塊元素並排顯示】

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
         
             #div1 {
                 width: 100px;
                 height: 100px;
                 background-color: #00FFFF;
                 float: left;
             }
             #div2 {
                 width: 100px;
                 height: 100px;
                 background-color: red;
                 float: left;
             }
         </style>
     </head> 
     <body>
         
         <div id="div1"></div>
         <div id="div2"></div>
         
     </body>
 </html>

檢視顯示：

【文字圍繞圖片】

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css">
         
             #div1 {
                 width: 100px;
                 height: 100px;
                 background-color: #00FFFF;
                 float: left;
             }
             #div2 {
                 width: 100px;
                 height: 100px;
                 background-color: red;
                 float: left;
             }
             img {
                 width: 300px;
                 float: left;
             }
         </style>
     </head>
     
     <body>
         
         <div id="div1"></div>
         <div id="div2"></div>
         <!-- 浮動的後一個元素會受到影響 -->
         
         <!-- 清除浮動 -->
         <div style="clear: both;"></div>
         
         <p>
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
             <img src="imgs/3.jpg" />
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈吼吼吼吼吼吼吼吼吼吼吼吼吼吼吼哈哈哈哈哈
             哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈           
         </p>
         
     </body>
 </html>

檢視顯示：

注：  <div style="clear: both;"></div>

6.7盒子模型

border、padding、margin三個屬性構成盒子模型。

Padding(內邊距) 內容距離邊框的距離，叫padding。

Border(邊框) 圍繞在內邊距和內容外的邊框，框是有寬度的。

Margin(外邊距) 邊框距離外面空白的間隙，叫margin。

6.7.1.border

設定所有的邊框屬性。

1）可同時設定邊框的寬度、顏色、樣式。

  /* 設定邊框的 寬度、顏色、樣式。 */
 table,th,td {
     border: 10px #0000FF solid;
 }

2）單獨設定邊框的寬度、顏色、型別:border-width、border-color、border-style。

         #div1 {
             border-width: 10px;
             border-color: #0000FF;
             border-style: dotted;
         }

3）設定屬性的順序：上右下左

設定一個屬性：表示邊框思辨效果一致

設定兩個屬性：表示上下一致，左右一致

設定三個屬性：表示上、右、下不一致，左右一致。

設定三個屬性：四個都不一樣。

4）border-style的屬性：

none 預設無邊框 dotted: 定義一個點線邊框

dashed: 定義一個虛線邊框

solid: 定義實線邊框

double: 定義兩個邊框。兩個邊框的寬度和 border-width 的值相同

groove: 定義3D溝槽邊框。效果取決於邊框的顏色值

ridge: 定義3D脊邊框。效果取決於邊框的顏色值

inset:定義一個3D的嵌入邊框。效果取決於邊框的顏色值

outset: 定義一個3D突出邊框。效果取決於邊框的顏色值

5）border-collapse2

設定是否將表格邊框摺疊為單一邊框(兩層線變單層線)，

屬性值：separate（預設，單元格邊框獨立）、collapse（單元格邊框合併）

 table {
     border-collapse: collapse;
 }

6.7.2.padding

Padding(內邊距) 內容距離邊框的距離，叫padding。

【參考程式碼】

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title></title>
         <style type="text/css"> 
          
        /* 設定內邊距padding */
         td {        
             padding: 20px;
         }
         
         </style>
     </head>
     
     <body>
         <table border="1" width="500px" align="center" style="border-collapse: collapse;"> <!-- style="border-collapse: collapse;合併單元格 -->
             <tr>
                 <th>班級</th>
                 <th>學號</th>
                 <th>姓名</th>
                 <th>年齡</th>
             </tr>
             <tr align="center" align="top" bgcolor="antiquewhite" >
                 <td>104</td>
                 <td>123456789</td>
                 <td>張三</td>
                 <td>19</td>
             </tr>
         </table>
         
     </body>
 </html>

檢視顯示：

注意：設定屬性的預設順序：上右下左

padding內邊距設定內邊距設定一個值：表示四個方式相同設定兩個值：表示上下一致，左右一致設定三個值：表示上、右、下不一致，左右一致設定四個值：表示上、下、左、右都不一致

單獨設定內邊距的寬度：padding-top、padding-bottom、padding-left、padding-right

        /* 設定左邊距padding-left*/
         td {        
             padding-left: 40px;
         }

注：內邊距padding的使用會導致元素變形，內邊距要儘可能減少使用

6.7.3.margin

設定一個元素所有外邊距的寬度，或者設定個邊上外邊距的寬度。

 p.margin {
     margin: 40px;
 }

注意：設定屬性的預設順序：上右下左

margin外邊距設定內邊距設定一個值：表示四個方式相同設定兩個值：表示上下一致，左右一致設定三個值：表示上、右、下不一致，左右一致設定四個值：表示上、下、左、右都不一致

單獨設定內邊距的寬度：margin-top、margin-bottom、margin-left、margin-right

總結：

注:

以上是JavaWeb——CSS的重點知識的總結，如果文章有任何錯誤和建議，請各位大佬盡情評論留言！如果這篇文章對你有些許幫助，希望可愛親切的您點個贊推薦一手，非常感謝啦！最後，感謝各位大佬們看到了這裡！願你韶華不負，青春無悔！

JavaWeb——CSS總結

JavaWeb——CSS總結

CSS

1.什麼是CSS

2.CSS的作用

3.CSS的基本使用

3.1CSS基本語法

4.CSS的使用

4.1行內樣式

4.2內部樣式

4.3外部樣式

5.CSS選擇器

5.1基本選擇器

5.1.1通用選擇器

5.1.2元素/標籤選擇器

5.1.3id選擇器

5.1.4類選擇器

5.1.5分組選擇器(瞭解)

5.2.組合選擇器

5.2.1後代選擇器(派生選擇器)

5.2.2子元素選擇器

5.2.3相鄰兄弟選擇器

5.2.4普通兄弟選擇器

6.CSS常用屬性設定

6.1背景

6.1.1.background-color

6.1.2.background-image

6.1.3.background-repeat

6.1.3.background-size

6.2文字

6.2.1.color

6.2.2text-align

6.2.3text-decoration

6.2.4.text-indent

6.3字型

6.3.1.font-family

6.3.2.font-size

6.3.3.font-style

6.3.4.font-weight

6.4對齊方式

6.5display屬性

6.6浮動

6.7盒子模型

6.7.1.border

6.7.2.padding

6.7.3.margin

總結：

最新文章