CSS基礎知識

南風阿帥發表於2021-01-10
CSS

css層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。

1. CSS的應用形式

       CSS有三種應用形式，分別是——單獨的CSS檔案；html頭部head標籤中定義；標籤屬性。

1.1 單獨的CSS檔案

         首先建立單獨的CSS檔案，然後其他頁面就能夠引入該檔案，並使用在CSS檔案中定義的一些屬性

  • 建立demo.css檔案
1 div{
2 
3     background-color: aquamarine;
4 
5     color: rgb(42, 145, 21);
6 
7 }

 

  • 建立demo.html檔案，並引入“demo.css”檔案
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <link rel="stylesheet" href="common.css">
 7 </head>
 8 <body>
 9     <div>效果</div>
10 </body>
11 </html>

 

1.2 html頭部head標籤中定義

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7         /*給所有的div設定樣式*/
 8         div {
 9             color: black;
10             background-color: cadetblue;
11         }
12     </style>
13 </head>
14 <body>
15     <div>111</div>
16     <div>222</div>
17 </body>
18 </html>

 

1.3 標籤屬性

 1 <div style="color:green;">000</div> 

2. CSS選擇器

CSS選擇器用於選擇你想要的元素的樣式的模式。

2.1 標籤選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7        /* 標籤選擇器，所有div標籤全部使用下面的屬性 */
 8              div{
 9                 background-color: cadetblue;
10                 color: black;
11             }
12     </style>
13 </head>
14 <body>
15     <div>000</div>
16 </body>
17 </html>

 

2.2 id選擇器

 1 DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7        /* id選擇器 ，所有的id為i1的a標籤使用下面的屬性*/
 8             #i1{
 9             font-size:32px;
10             color: rgb(255, 217, 0);
11             }
12     </style>
13 </head>
14 <body>
15     <a id="i1">hello</a>
16 </body>
17 </html>

 

2.3 class選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7         /* class選擇器 */
 8             .c1{
 9                 font-size: 50px;
10                 color: blueviolet;
11                 background-color: chartreuse;
12             }
13     </style>
14 </head>
15 <body>
16     <span class="c1">你好，你好！</span>
17 </body>
18 </html>

 

2.4 層級選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7         /* 層級選擇器 */
 8             .c2 div p .c3{
 9                 background-color: crimson;
10             }
11     </style>
12 </head>
13 <body>
14          <div>
15             <div>
16                 <p>
17                     <span>000</span>
18                     <a href="" class="c3">111</a>
19                 </p>
20             </div>
21         </div>
22 </body>
23 </html>

 

2.5 組合選擇器

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7        /* 組合選擇器 */
 8             .c4,.c5,.c6{
 9                 background-color: crimson;
10                 color: black;
11             }
12     </style>
13 </head>
14 <body>
15         <div>
16             <p class="c4">333</p>
17             <p class="c5">666</p>
18             <p class="c6">999</p>
19         </div>
20 </body>
21 </html>

 

3. CSS樣式

3.1 width與heigth

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 標籤屬性 -->
 9         <title name="alex">南風阿帥</title>
10         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
11         <style>
12             .c1{
13                 color: black;
14                 background-color: cadetblue;
15                 font-size: 32px;
16                 height: 150px;
17                 width: 500px;
18             }
19             .img{
20                 background-image: url("https://s3.ax1x.com/2021/01/01/rze3xP.png");
21                 width: 100%;
22                 height: 500px;
23                 background-repeat: no-repeat;
24             }
25             .img2{
26                 background-image: url("https://s3.ax1x.com/2021/01/01/rze3xP.png");
27                 width: 200px;
28                 height: 200px;
29                 background-position: left;
30 
31             }
32         </style>
33     </head>
34     <body>
35         <div class="img">500px</div>
36         <div class="img2">position</div>
37         <div style="width: 500px;"></div>
38     </body>
39 </html>

 

3.2 display

  • display：none——隱藏標籤
  •         display：inline——變為行內標籤
  •         display：block——變為塊級標籤
  •         display：inline-block——行內塊級標籤

3.3 float浮動

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <title name="alex">南風阿帥</title>
 9         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
10         <style>
11            
12         </style>
13     </head>
14     <body>
15         <!-- 父 -->
16         <div style="width: 500px;">
17             <!-- 子 -->
18             <div style="width: 20%;background-color: chartreuse;float: left;">20%</div>
19             <!-- 子 -->
20             <div style="width: 80%;background-color: chocolate;float: left;">80%</div>
21         </div>
22     </body>
23 </html>

 3.4 font字型

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7         /*字型（宋體，楷體，仿宋。。。）*/
 8         .c1{
 9             font-family: "Times New Roman",Georgia,Serif;
10         }
11         .c2{
12             font-family: Arial,Verdana,Sans-serif;
13         }
14     </style>
15 </head>
16 <body>
17      /*引用字型格式*/
18     <div class="c1">你好你好！</div>
19     <div class="c2">你好你好！</div>
20     /*設定字型大小*/
21     <div style="font-size: 13px;">你好你好！</div>
22     <div style="font-size: 16px;">你好你好！</div>
23     <div style="font-size: 18px;">你好你好！</div>
24     /*字型加粗*/
25     <div style="font-weight: 100;">你好你好！</div>
26     <div style="font-weight: 300">你好你好！</div>
27     <div style="font-weight: 400">你好你好！</div>
28     /*設定字型顏色*/
29     <div style="color: red;">你好你好！</div>
30     <div style="color:#f0ad4e">你好你好！</div>
31 </body>
32 </html>

 

3.5 文字對齊方式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>南風阿帥</title>
 6     <style>
 7     
 8     </style>
 9 </head>
10 <body>
11     <h1>水平方向</h1>
12     <div  style="background-color: pink;text-align: left;">你好你好！</div>
13     <div style="background-color: darkseagreen;text-align: center;">你好你好！</div>
14     <div style="background-color: goldenrod; text-align: right;">你好你好！</div>
15     <h1>垂直方向</h1>
16     <div style="background-color: pink;">你好你好！</div>
17     <div style="background-color: darkseagreen;line-height: 100px;">你好你好！</div>
18     <div style="background-color: goldenrod;position: relative; ">
19         <span style="position: absolute;bottom: 0;">你好你好！</span>
20     </div>
21 </body>
22 </html>

 

3.6 邊距

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 標籤屬性 -->
 9         <title name="alex">南風阿帥</title>
10         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
11         <style>
12             
13         </style>
14     </head>
15     <body>
16         <div style="height: 70px;border: 1px solid red;">
17             <div style="height: 30px;background-color: green;margin-top: 20px;"></div>
18         </div>
19     </body>
20 </html>

 

3.7 定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 標籤屬性 -->
 9         <title name="alex">南風阿帥</title>
10         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
11         <style>
12             
13         </style>
14     </head>
15     <body>
16         <div style="height: 2000px;background-color: rgb(199, 199, 199);"></div>
17         <div style="position: fixed;bottom: 0;right: 1%;">返回頂部</div>
18     </body>
19 </html>

 

3.8 對話方塊

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <!-- meta,title,link,style,script -->
 5         <meta charset="UTF-8"/>
 6         <meta http-equiv="Refresh" content="100"/>
 7 
 8         <!-- 標籤屬性 -->
 9         <title name="alex">南風阿帥</title>
10         <link rel="shortcut icon" href="https://s3.ax1x.com/2021/01/01/rvTJqH.png">
11         <style>
12             .hide{
13                 display: none;
14             }
15             .modal{
16                 width:400px;
17                 height: 300px;
18                 background-color: blueviolet;
19             }
20         </style>
21     </head>
22     <body>
23         <input type="buton" value="新增" class="modal">
24         <div>對話方塊</div>
25     </body>
26 </html>

 後續補充。。。

相關文章