CSS必知必會-有解無憂

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;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <p>B</p>
        <p>C</p>
    </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;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <p>B</p>
        <p>C</p>
    </div>
</body>
</html>

盒子模型

css的盒子包括外邊距（margin），邊框（border），內邊距（padding），實際內容（content）

<!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{
            width: 100px;
            height: 100px;
            background-color: yellow;
            padding: 50px 10px;
            border: 5px solid red;
            margin: 80px;
        }
    </style>
</head>
<body>
    <div>
        content
    </div>
</body>
</html>

彈性盒子模型

彈性盒子是由彈性容器和彈性子元素組成，彈性容器通過設定display屬性值為flex來定義彈性容器，彈性盒子只對彈性子元素生效

通過flex-direction來設定子元素在容器中的位置（默認水平排列）row左對齊；row-reverse翻轉右對齊；column縱向排列；column-reverse翻轉縱向排列

子元素可以通過flex來分配空間

<!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>
        .container{
            width: 500px;
            height: 500px;
            background-color: black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1,.box2,.box3{
            width: 100px;
            height: 100px;
        }
        .box1{
            background-color: red;
            flex: 10%;
        }
        .box2{
            background-color: yellow;
            flex: 30%;
        }
        .box3{
            background-color: blue;
            flex: 60%;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

浮動

增加一個浮層來放置內容

float的值	值描述
left	向左浮動
right	向右浮動

浮動以后相當于在頁面增加一個浮層來放置內容

<!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{
            width: 100px;
            height: 100px;
            background-color: red;
            float: left;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</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>
        .box1{
            width: 200px;
            background-color: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

解決方案可以設定父元素的高度，也可以通過清除浮動，通過在父標簽加overflow：fidden

.box1{
    width: 200px;
    background-color: red;
    overflow: hidden;
    clear: both;
}

除了造成父元素塌陷，同樣也會影響后續元素，例子如下，我們同樣無法看到box3，因為被浮動的box2遮擋

<!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{
            width: 200px;
            background-color: red;
            overflow: hidden;
            clear: both;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
        <div class="box3"></div>
    </div>
</body>
</html>

解決方法就是，在需要處理的地方加上clear:both

.box3{
    width: 100px;
    height: 100px;
    background-color: black;
    clear: both;
}

定位

position的值	值描述
relative	相對定位
absolute	絕對定位
fixed	固定定位

設定后可以通過left、top、right、bottom來調整，每用一個position就會增加一個浮層：

固定定位是不會隨著頁面移動變動位置的，永遠在固定位置

相對定位和絕對定位是根據具有定位的父元素進行定位的，如果父級沒有定位就會根據頁面來定位

相對定位是不脫離檔案流的，絕對定位和固定定位都是脫離檔案流的

<!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{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;
        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 100px;
            top: 300px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box1"></div>
</body>
</html>

調整位置順序通過z-index，如下方例子，原本是黑色遮蓋紅色，如果想調整為紅色在上，只需要增加z-index

<!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{
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
            left: 100px;
            top: 100px;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: black;
            position: absolute;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <div></div>
    <div class="box1"></div>
</body>
</html>

z-index大的值在上方

div{
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    left: 100px;
    top: 100px;
    z-index: 2;

}
.box1{
    width: 100px;
    height: 100px;
    background-color: black;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 1;
}

作者： yetangjian

出處： https://www.cnblogs.com/yetangjian/p/17229658.html

關于作者： yetangjian

本文著作權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段宣告，且在文章頁面明顯位置給出, 原文鏈接如有問題，可郵件（[email protected]）咨詢.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/547370.html

標籤：其他

上一篇：前端：頁面安全問題，從前端角度使用js禁止用戶修改頁面代碼

下一篇：JS校驗銀行卡號以及通過銀行卡號自動帶出所屬銀行資訊