CSS必知必會_ZenDei技術網路在線

CSS概念 css的使用是讓網頁具有統一美觀的頁面，css層疊樣式表，簡稱樣式表，文件尾碼名.css css的規則由兩部分構成：選擇器以及一條或者多條聲明選擇器：通常是需要改變的HTML元素聲明：由一個屬性和一個值組成，每個屬性有一個值，屬性和值使用類似key：value的形式（如下方h1就是選 ...

CSS概念

css的使用是讓網頁具有統一美觀的頁面，css層疊樣式表，簡稱樣式表，文件尾碼名.css

css的規則由兩部分構成：選擇器以及一條或者多條聲明

選擇器：通常是需要改變的HTML元素

聲明：由一個屬性和一個值組成，每個屬性有一個值，屬性和值使用類似key：value的形式（如下方h1就是選擇器，color就是屬性，rebeccapurple就是值，屬性和值成為一條聲明）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            color: rebeccapurple;
            font-size: 10px;
        }
    </style>
</head>
<body>
    <h1>Welcome CSS</h1>
</body>
</html>

CSS的引入

行內樣式：在需要改變的標簽內使用style屬性，讓style屬性包含任何css的屬性

註：缺點是缺乏整體統一性，不利於維護

 <h1 style="background-color: blueviolet; font-size: 20px;">Welcome CSS</h1>

內部樣式，在單個文檔需要的特殊樣式，如上方css概念中的例子，在文檔頭部使用style標簽增加樣式

註：可以讓單個頁面css代碼具有統一性，但多個頁面容易混亂

外部樣式：當樣式應用於多個頁面，外部樣式在每個需要使用的頁面通過link標簽鏈接到樣式表。link標簽在文檔頭部

建立一個public.css文件，寫外部樣式

p{
    color: aquamarine;
    font-size: 20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./public.css">
</head>
<body>
    <p>產品</p>
</body>
</html>

選擇器

全局選擇器：優先順序最低，一般做初始化樣式

*{
    color: blue;
}

用通配符 *

元素選擇器：選擇頁面所有相同類型標簽，用於描述這些類型的共性，無論這個標簽藏的多深都能被選擇上

HTML文檔中的p、div、img等等標簽

p{
    color: blue;
}

類選擇器：用圓點.來定義，針對相同類的標簽，類名不能用數字開頭，同一個標簽可以使用多個類選擇器，用空格隔開

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .classone{
            color: red;
            font-size: 30px;
        }
        .classtwo{
            background-color: black;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1 class="classone classtwo">標題</h1>
</body>
</html>

ID選擇器：針對特定id標簽來使用，只能使用一次，用#來定義，不能用數字開頭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mytext{
            color: red;
        }
    </style>
</head>
<body>
    <p id="mytext">文本</p>
</body>
</html>

合併選擇器：多個標簽提取共同樣式，減少重覆代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #mytext,.mytitle{
            color: red;
        }
        .mytitle{
            background-color: black;
        }
    </style>
</head>
<body>
    <p id="mytext">文本</p>
    <h1 class="mytitle">標題</h1>
</body>
</html>

選擇器優先順序：行內樣式 > ID選擇器 > 類選擇器 > 元素選擇器

字體屬性

包括顏色、大小、加粗、文字樣式

顏色

<p style="color: red;">字體顏色</p>
<p style="color: #fff000;">字體顏色</p>
<p style="color: rgb(0,0,0);">字體顏色</p>
<p style="color: rgba(0, 0, 0, 1);">字體顏色</p>

大小

<p style="color: red;font-size: 30px;">字體顏色</p>

粗細

數值範圍100-900，400是預設值，700等同於bold

<p style="font-weight: bold;">字體顏色</p>
<p style="font-weight: bolder;">字體顏色</p>
<p style="font-weight: lighter;">字體顏色</p>
<p style="font-weight: 900;">字體顏色</p>

文字樣式

<p style="font-style: normal;">字體顏色</p>
<p style="font-style: italic;">字體顏色</p>
<p style="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">字體顏色</p>

背景屬性

屬性	值
background-color	背景顏色
background-image	背景圖片
background-positio	圖片位置
background-repeat	圖片填充
background-size	圖片大小

background-repeat

屬性	值
repeat	預設值
repeat-x	水平方向平鋪
repeat-y	垂直方向平鋪
no-repeat	不平鋪

background-size ：可以使用數值設置寬度和高度，也可以使用百分比，最常用的是兩個值cover（保持圖片橫縱比將圖片覆蓋背景最小大小），contain（保持圖片橫縱比將圖片覆蓋背景最大大小）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1,.box2{
            width: 600px;
            height: 600px;
        }
        .box1{
            background-image: url(./u=1175012548\,1449685026&fm=253&fmt=auto&app=138&f=JPEG.webp);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .box2{
            background-color:rebeccapurple;
            background-position: left top;
        }
    </style>

</head>
<body>
    <div class="box1">背景1</div>
    <div class="box2">背景2</div>
</body>
</html>

文本屬性

文本對齊方式：居中、靠左、靠右

<h1 style="text-align: center;">h1</h1>
<h2 style="text-align: left;">h2</h2>
<h3 style="text-align: right;">h3</h3>

文本添加下劃線、上劃線和刪除線

<h1 style="text-decoration: underline;">h1</h1>
<h2 style="text-decoration: overline;">h2</h2>
<h3 style="text-decoration: line-through;">h3</h3>

文本大小寫

<h1 style="text-transform: capitalize;">h1</h1>
<h2 style="text-transform: uppercase;">h2</h2>
<h3 style="text-transform: lowercase;">h3</h3>

首行文本縮進

<h1 style="text-transform: capitalize; text-indent: 100px;">h1</h1>

表格邊框、顏色、邊框摺疊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid red;
        }
        table{
            border-collapse: collapse<!-- 摺疊邊框 -->; 
            padding: 20px;
        }
    </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>

關係選擇器

後代選擇器：所有所有被A包含的B元素，用空格分開A B{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul li{
            color: #fff000;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
    </ul>
</body>
</html>

子代選擇器：只對所有A標簽的直接子標簽B起作用，A>B{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>span{
            color: #fff000;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <h1><span>B</span></h1>
        <span>C</span>
    </div>
</body>
</html>

相鄰兄弟選擇器：選擇緊跟A標簽後的B元素，選擇向下相鄰的第一個兄弟元素， A+B{ }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span+p{
            color: #fff000