CSS（Cascading Style Sheets）層疊樣式表，又叫級聯樣式表，簡稱樣式表

CSS文件后綴名為.css

CSS用于HTML文檔中元素樣式的定義

為什么需要CSS

使用css的唯一目的就是讓網頁具有美觀一致的頁面

語法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（樣式）

選擇器通常是您需要改變樣式的 HTML 元素

每條聲明由一個屬性和一個值組成

屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h3 {
            color: red;
            font-size: 50px;
        }
    </style>
</head>

<body>

    <h3>標題標簽</h3>
    
</body>

</html>

CSS的引入方式

內聯樣式（行內樣式）

要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性

溫馨提示

缺乏整體性和規劃性，不利于維護，維護成本高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p style="color: red;font-size: 30px;">我是P標簽</p>
</body>
</html>

內部樣式

當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表

溫馨提示

單個頁面內的CSS代碼具有統一性和規劃性，便于維護，但是在多個頁面之間容易混亂

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>我是第一個P標簽</p>
    <p>我是第二個P標簽</p>
</body>
</html>

外部樣式（推薦）

當樣式需要應用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標簽鏈接到樣式表。 <link> 標簽在（文檔的）頭部

<link rel="stylesheet" type="text/css" href="xxx.css">

選擇器一

CSS語法規則由兩個主要的部分構成：選擇器，以及一條或多條聲明（樣式）

全局選擇器

可以與任何元素匹配，優先級最低，一般做樣式初始化

<style>
       *{
   			margin: 0;
   			padding: 0;
 		}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            color: red;
        }
    </style>
</head>

<body>
    
    <p>第一個p標簽</p>
    <p>第二個p標簽</p>
    <p>第三個p標簽</p>
    <p>第四個p標簽</p>
    <p>第五個p標簽</p>
    <h1>一級標題</h1>
    <ul>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
    </ul>

    <ul>
        <li>我</li>
        <li>是</li>
        <li>郭</li>
        <li>家</li>
        <li>旗</li>
    </ul>

</body>
</html>

元素選擇器

HTML文檔中的元素，p、b、div、a、img、body等。

標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經常描述“共性”，無法描述某一個元素的“個性”

<style>
       p{
  		font-size:14px;
		}
</style>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: red;
        }
    </style>
</head>
<body>
    <p>第一個P標簽</p>
    <p>第二個P標簽</p>
    <p>第三個P標簽</p>
    <p>第四個P標簽</p>
    <h3>三級標題</h3>
</body>
</html>

再比如說，我想讓“學完前端，繼續學Java”這句話中的“前端”兩個變為紅色字體，那么我可以用<span>標簽把“前端”這兩個字圍起來，然后給<span>標簽加一個標簽選擇器

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

<p>學完了<span>前端</span>，繼續學Java</p>
span{
    color: red;
}

溫馨提示

所有的標簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等
無論這個標簽藏的多深，一定能夠被選擇上
選擇的所有，而不是一個

類選擇器

規定用圓點 . 來定義，針對你想要的所有標簽使用

優點

靈活

<h2 class="oneclass">你好</h2>
/*定義類選擇器*/
.oneclass{
    width:800px;
}

class屬性的特點

類選擇器可以被多種標簽使用
類名不能以數字開頭
同一個標簽可以使用多個類選擇器。用空格隔開

<h3 class="classone  classtwo">我是一個h3啊</h3>
<h3 class="teshu" class="zhongyao">我是一個h3啊</h3>  // 錯誤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
            .red{
                color: red;
            }
            .green{
                color: green;
            }
            .size{
                font-size: 50px;
            }

    </style>
</head>
<body>
    
    <p class="red size">第一個P標簽</p>
    <p class="green">第二個P標簽</p>
    <p>第三個P標簽</p>
    
</body>
</html>

選擇器二

ID選擇器

針對某一個特定的標簽來使用，只能使用一次。css中的ID選擇器以 # 來定義

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            color: red;
        }
    </style>
</head>
<body>
    <p id="one">第一個P標簽</p>
    <p>第二個P標簽</p>
    <p>第三個P標簽</p>
</body>
</html>

<h2 id="mytitle">你好</h2>

<style>
        #mytitle{
            color: red;
        }
</style>

特別強調

ID是唯一的
ID不能以數字開頭

合并選擇器

語法：選擇器1,選擇器2,...{ }

作用：提取共同的樣式，減少重復代碼

<style>
        .p,.san{
            color: red;
        }
    </style>

選擇器的優先級

CSS中,權重用數字衡量

元素選擇器的權重為: 1

class選擇器的權重為: 10

id選擇器的權重為: 100

內聯樣式的權重為: 1000

優先級從高到低: 行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器

字體屬性

CSS字體屬性定義字體，顏色、大小，加粗，文字樣式

color文本的顏色

規定文本的顏色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size文本的大小

設置文本的大小

能否管理文字的大小，在網頁設計中是非常重要的。但是，你不能通過調整字體大小使段落看上去像標題，或者使標題看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

溫馨提示

chrome瀏覽器接受最小字體是12px

font-weight文本的粗細

設置文本的粗細

值	描述
bold	定義粗體字符
bolder	定義更粗的字符
lighter	定義更細的字符
100~900	定義由細到粗 400等同默認，而700等同于bold

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style文本的字體樣式

指定文本的字體樣式

值	描述
normal	默認值
italic	定義斜體字

font-family字體

font-family屬性指定一個元素的字體

溫馨提示

每個值用逗號分開

如果字體名稱包含空格，它必須加上引號

font-family:"Microsoft YaHei","Simsun","SimHei";

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: #ff0000;
            font-size: 30px;
            font-weight: 700;
            font-style: italic;
            font-family: "微軟雅黑";
        }
    </style>
</head>
<body>
    <p>我是P標簽</p>
</body>
</html>

背景屬性

CSS背景屬性主要有以下幾個

屬性	描述
background-color	設置背景顏色
background-image	設置背景圖片
background-position	設置背景圖片顯示位置
background-repeat	設置背景圖片如何填充
background-size	設置背景圖片大小屬性

background-color背景顏色

該屬性設置背景顏色

<div class="box"></div>
.box{
  width: 300px;
  height: 300px;
  background-color: palevioletred;
}

background-image背景圖像

設置元素的背景圖像

元素的背景是元素的總大小，包括填充和邊界（不包括外邊距）。默認情況下background-image屬性放置在元素的左上角，如果圖像不夠大的話會在垂直和水平方向平鋪圖像，如果圖像大小超過元素大小從圖像的左上角顯示元素大小的那部分

<div class="box"></div>
.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
}

background-repeat設置如何平鋪背景圖像

該屬性設置如何平鋪背景圖像

值	說明
repeat	默認值
repeat-x	只向水平方向平鋪
repeat-y	只向垂直方向平鋪
no-repeat	不平鋪

.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
}

background-size設置背景圖像的大小

該屬性設置背景圖像的大小

值	說明
length	設置背景圖片的寬度和高度，第一個值寬度，第二個值高度，如果只是設置一個，第二個值auto
percentage	計算相對位置區域的百分比，第一個值寬度，第二個值高度，如果只是設置一個，第二個值auto
cover	保持圖片縱橫比并將圖片縮放成完全覆蓋背景區域的最小大小
contain	保持圖片縱橫比并將圖像縮放成適合背景定位區域的最大大小

.box{
  width: 600px;
  height: 600px;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

background-position設置背景圖像的起始位置

該屬性設置背景圖像的起始位置，其默認值是：0% 0%

值	說明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一個值是水平位置，第二個值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一個值，其他值默認是50%。默認是0% 0%
xpos ypos	單位是像素

.box{
  width: 600px;
  height: 600px;
  background-color: #fcc;
  background-image: url("images/img1.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background-color: #ffff00;
        }
        .box2{
            width: 1000px;
            height: 1000px;
            background-image: url("1.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box2"></div>
</body>
</html>

文本屬性

text-align元素文本的水平對齊方式

指定元素文本的水平對齊方式

值	描述
left	文本居左排列，默認值
right	把文本排列到右邊
center	把文本排列到中間

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration下劃線、上劃線、刪除線

text-decoration 屬性規定添加到文本的修飾，下劃線、上劃線、刪除線等

值	描述
underline	定義下劃線
overline	定義上劃線
line-through	定義刪除線

h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform控制文本的大小寫

text-transform 屬性控制文本的大小寫

值	描述
captialize	定義每個單詞開頭大寫
uppercase	定義全部大寫字母
lowercase	定義全部小寫字母

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent首行文本的縮進

text-indent 屬性規定文本塊中首行文本的縮進

p{
    text-indent:50px;
}

溫馨提示

負值是允許的。如果值是負數，將第一行左縮進

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            text-align: center;
            text-decoration: underline;
            text-transform: lowercase;
        }

        .p2{
            text-indent: 30px;
        }
    </style>
</head>
<body>
    <p class="p1">這是一個P標簽</p>

    <p class="p2">元素的背景是元素的總大小，包括填充和邊界（不包括外邊距）。
        默認情況下background-image屬性放置在元素的左上角，如果圖像不夠大的話會在垂直和水平方向平鋪圖像，
        如果圖像大小超過元素大小從圖像的左上角顯示元素大小的那部分</p>
</body>
</html>

表格屬性

使用 CSS 可以使 HTML 表格更美觀

表格邊框

指定CSS表格邊框，使用border屬性

table, td { 
  border: 1px solid black; 
}

折疊邊框

border-collapse 屬性設置表格的邊框是否被折疊成一個單一的邊框或隔開

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格寬度和高度

width和height屬性定義表格的寬度和高度

table { width:100%; } 
td { height:50px; }

表格文字對齊

表格中的文本對齊和垂直對齊屬性

text-align屬性設置水平對齊方式，向左，右，或中心

td { text-align:right; }

垂直對齊屬性設置垂直對齊

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的內容中控制空格之間的邊框，應使用td和th元素的填充屬性

td { padding:15px; }

表格顏色

下面的例子指定邊框的顏色，和th元素的文本和背景顏色

table, td, th { border:1px solid green; }  //邊框顏色
td { background-color:green; color:white; } //背景顏色  字體顏色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    table, td { 
    	border: 3px solid black; //表格邊框
    }
    table{
        border-collapse: collapse;//表格邊框折疊*
    }
    table{
        width: 500px;//表格寬度
        
    }
    td{
        text-align: center;//表格內文本對齊方式
        padding: 10px;//表格填充
    }
    td{
        background-color: aqua;color: brown;//表格背景顏色與字體顏色
    }

    </style>
</head>
<body>
   <table>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
    <tr>
        <td>文本框</td>
        <td>文本框</td>
        <td>文本框</td>
    </tr>
   </table>
</body>
</html>

關系選擇器

關系選擇器分類

后代選擇器
子代選擇器
相鄰兄弟選擇器
通用兄弟選擇器

后代選擇器

定義

選擇所有被E元素包含的F元素，中間用空格隔開

語法

E F{}

<ul>
   <li>寶馬</li>
   <li>奔馳</li>
</ul>
 <ol>
   <li>奧迪</li>
</ol>

ul li{
  color:green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: #00ff00;
        }
    </style>
</head>
<body>
    <ul>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>
            蔬菜
            <ol>
                <li>黃瓜</li>
                <li>茄子</li>
            </ol>
        </li>
    </ul>
</body>
</html>

子代選擇器

定義

選擇所有作為E元素的直接子元素F，對更深一層的元素不起作用，用>表示

語法

E>F{}

<div> 
  <a href="#">子元素1</a>
  <p> <a href="#">孫元素</a> </p>
  <a href="#">子元素2</a>
</div>

div>a{
  color:red
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a{
            color:red
            }
    </style>
</head>
<body>
    <div> 
        <a href="#">子元素1</a>
        <p> <a href="#">孫元素</a> </p>
        <a href="#">子元素2</a>
      </div>
      
</body>
</html>

相鄰兄弟選擇器

定義

選擇緊跟E元素后的F元素，用加號表示，選擇相鄰的第一個兄弟元素，只能向下選擇

語法

E+F{}

<h1>h1元素</h1> 
<p>第一個元素</p> 
<p>第二個元素</p>

h1+p{
  color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1+p{
            color:#00ffff;
        }
    </style>
</head>
<body>
    <h1>h1元素</h1> 
    <p>第一個元素</p> 
    <p>第二個元素</p>
</body>
</html>

通用兄弟選擇器

定義

選擇E元素之后的所有兄弟元素F，作用于多個元素，用~隔開，只能向下選擇

語法

E~F{}

<h1>h1元素</h1>
<p>第一個元素</p>
<p>第二個元素</p>

h1~p{
  color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1~p{
            color:#00ffff;
        }
    </style>
</head>
<body>
    <h1>h1元素</h1> 
    <p>第一個元素</p> 
    <p>第二個元素</p>
</body>
</html>

posted @ 2023-11-23 07:52 Gjq- 閱讀(92) 評論(0) 收藏舉報來源

刷新頁面返回頂部

【精選】CSS入門必看知識點大合集

CSS簡介

CSS概念