0、CSS介紹

1、CSS語句組成

2、CSS選擇器的選擇方式

1）CSS選擇器的方式和選擇器大全：

2）常見的三種方式：

3、添加CSS方式

?1）外部樣式表

?html調用css代碼

css文件

html文件

展示

2）內部樣式表

?3）內聯樣式表——不推薦使用

4、CSS選擇顏色的方法(六種)

0)CSS顏色查詢網址

?1）HSL和RGB值轉換網址

2)六種方法

3）HSL模型介紹

4)常見顏色展示

修改樣式前

修改樣式后

5、CSS字體

1)CSS常用字體格式

?2）字體參考網站

3）常見字體屬性設置

6、CSS盒子模型（box）

1)單個盒子的模型

?2）多個盒子的布局情況

①錯誤布局

②正確情況

?3）margin指定（padding指定一樣）

?7、CSS無序列表

?8、CSS給按鈕添加屬性（點擊時，按下時，訪問過時）

9、CSS布局類型

1）三聯文字進行布局

2）兩聯進行布局

3）刪除多聯布局格式

10、CSS定位

為初學者準備的：CSS 速成_嗶哩嗶哩_bilibili這是一個為初學者準備的 CSS 速成教程，視頻中會介紹使用 CSS 為 HTML 添加樣式，使用 CSS 布局網頁。在學習 CSS 之前必須學過 HTML。如果你已經在使用 CSS 制作網頁，那這個視頻并不會給你帶來更多新的知識，當然你也可以把它當做回顧使用。JavaScript 的內容在下一期。MDN HTML文檔：https://developer.mozilla.org/en-US/docshttps://www.bilibili.com/video/BV1bW411R7hg/?spm_id_from=333.788.recommend_more_video.-1

0、CSS介紹

注意：

HTML：只負責編寫代碼，將控件等顯示，不負責顯示格式和網頁業務邏輯處理

CSS：負責網頁格式處理，使得網頁顯示更加地美化，如布局、格式等

業務邏輯一般是用Java/Python/js等語言編寫然后在后臺進行顯示

1、CSS語句組成

注：

1）上面圖像的意思：將tag為p的文本的顏色屬性設置為red值即紅色

2、CSS選擇器的選擇方式

1）CSS選擇器的方式和選擇器大全：

CSS selectors - Learn web development | MDNhttps://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors

2）常見的三種方式：

?三者區別：

p:標簽，多個

class:類名，類似于一個盒子，多個

id:一般每一個id值都是唯一的

3、添加CSS方式

?1）外部樣式表

新建css文件，定義style
在HTML文件對應位置調用css文件即可
調用html文件主要是利用標簽link在標簽head中進行調用，指明css文件的位置

?html調用css代碼

css文件

/*定義類名為contener的格式,顯示寬度為80%*/
.conteners {margin: auto;width: 80%;
}/*定義類名為box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字顏色*/color: blueviolet;
}

html文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8">
<!--調用css文件--><link rel="stylesheet" type="text/css" href="externel_css.css"><title>CSS 外聯樣式表學習</title>
</head><body>
<div class="conteners"><div class="box1"><h1>Hello World</h1><p>今天是2021年12月26日</p></div>
</div></body></html>

展示

2）內部樣式表

在Html文件的head標簽中添加style標簽，設置不同選擇器的屬性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS 樣式表學習</title><!--在head中設置樣式：添加CSS方式內部樣式表--><style>h1{color: blueviolet;}</style>
</head><body>
<h1>Hello World</h1>
<p>今天是2021年12月26日</p>
</body></html>

?3）內聯樣式表——不推薦使用

核心代碼

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>CSS 樣式表學習</title><!--在head中設置樣式：添加CSS方式內部樣式表-->
</head><body>
<h1 style="color: blueviolet">Hello World</h1>
<p>今天是2021年12月26日</p>
</body></html>

4、CSS選擇顏色的方法(六種)

0)CSS顏色查詢網址

- CSS（層疊樣式表） | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/color_value

?1）HSL和RGB值轉換網址

HSL to RGB | RGB to HSL | Colour Calculator | Hex Color Converterhttps://serennu.com/colour/hsltorgb.php

2)六種方法

3）HSL模型介紹

4)常見顏色展示

body背景色：#f4f4f4

body文字：#555555

修改樣式前

/*定義類名為contener的格式,顯示寬度為80%*/
.conteners {margin: auto;width: 80%;
}/*定義類名為box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字顏色*/color: blueviolet;
}

修改樣式后

/*定義body背景色*/
body{background-color:#f4f4f4;color:#555555;
}/*定義類名為contener的格式,顯示寬度為80%*/
.conteners {margin: auto;width: 80%;
}/*定義類名為box1的格式*/
.box1 {/*背景色*/background-color: antiquewhite;/*文字顏色*/color: blueviolet;
}

5、CSS字體

1)CSS常用字體格式

?2）字體參考網站

基本文本和字體樣式 - 學習 Web 開發 | MDNhttps://developer.mozilla.org/zh-CN/docs/Learn/CSS/Styling_text/Fundamentalshttps://font.google.com/https://font.google.com/

3）常見字體屬性設置

/*類名為box1中的h1標簽中的屬性設置*/
.box1 h1{color: #555555 ;/*字體類型*/font-family: "Times New Roman",serif;/*字體大小，默認16piex*/font-size: 30px;/*字體加粗*/font-weight: bold;/*下劃線，顏色*/text-decoration: underline;/*字間距*/letter-spacing: 1em;/*詞間距*/word-spacing: 2em;
}

/*定義類名為box2的格式*/
.box2 {
/*    行距*/line-height: 1.5em;
}

6、CSS盒子模型（box）

盒子其實就是可以理解為是一個容器，我們將一個類稱之為一個盒子

1)單個盒子的模型

?2）多個盒子的布局情況

①錯誤布局

②正確情況

兩盒子重疊時，取最大外邊距，而不是兩個margin的和

?3）margin指定（padding指定一樣）

/*定義類名為box2的格式*/
.box2 {
/*    行距*/line-height: 1.5em;/*border*/border: 5px aqua solid; /*邊粗5px,顏色，為實線*/padding-left: 10px ;padding-right: 10px ;padding-top: 10px ;
}

?注：這里padding\border\margin用法一致，不再重復

?7、CSS無序列表

HTML

<div class="list1"><ul><li>list1</li><li>list2</li><li>list3</li><li>list4</li></ul>
</div>

css

/*修改無序列表前面的符號，默認為點*/
.list1{margin: auto;width: 80%;list-style-image: url("yjtp.png");
}

?8、CSS給按鈕添加屬性（點擊時，按下時，訪問過時）

<div class="bottun" style="width: 80%;margin: auto"><button>submit</button>
</div>

/*按鈕添加屬性*/
/*鼠標在上面時改變顏色*/
button:hover{background-color: red;
}
/*鼠標在按下時改變顏色*/
button:active{background-color: #555555;
}
/*鼠標在訪問后*/
button:visited{background-color: blueviolet;
}

9、CSS布局類型

多個板塊進行布局

1）三聯文字進行布局

html

<div class="block"><p>簡樸點拿其它項目舉例說就是在九秒內跑完百米跑的程度...花滑男單從3A到附近再到現在的4A，就是這樣前無古人后無來者的跳躍在今天被羽生結弦跳成了，完全可以說就是人類體育史上的一個大事件。但也許許多人不知道，羽生結弦近兩年時間沒有教練在身邊，一個人鉆研著前人從未涉足的領域。他甚至沒有專門的練習冰場，往往只能趁凌晨公共冰場沒人時練習。外界媒體的紛擾、本國冰協的打壓、惡劣的打分環境……羽生在極其難題的外部前提中始終堅守理想，沖擊著附近半這一人類極限的跳躍。</p>
</div>
<div class="block"><p>簡樸點拿其它項目舉例說就是在九秒內跑完百米跑的程度...花滑男單從3A到附近再到現在的4A，就是這樣前無古人后無來者的跳躍在今天被羽生結弦跳成了，完全可以說就是人類體育史上的一個大事件。但也許許多人不知道，羽生結弦近兩年時間沒有教練在身邊，一個人鉆研著前人從未涉足的領域。他甚至沒有專門的練習冰場，往往只能趁凌晨公共冰場沒人時練習。外界媒體的紛擾、本國冰協的打壓、惡劣的打分環境……羽生在極其難題的外部前提中始終堅守理想，沖擊著附近半這一人類極限的跳躍。</p>
</div>
<div class="block"><p>簡樸點拿其它項目舉例說就是在九秒內跑完百米跑的程度...花滑男單從3A到附近再到現在的4A，就是這樣前無古人后無來者的跳躍在今天被羽生結弦跳成了，完全可以說就是人類體育史上的一個大事件。但也許許多人不知道，羽生結弦近兩年時間沒有教練在身邊，一個人鉆研著前人從未涉足的領域。他甚至沒有專門的練習冰場，往往只能趁凌晨公共冰場沒人時練習。外界媒體的紛擾、本國冰協的打壓、惡劣的打分環境……羽生在極其難題的外部前提中始終堅守理想，沖擊著附近半這一人類極限的跳躍。</p>
</div>
<div style="margin-top: 1000px"></div>

?css


.block{/*設置盒子對齊的方式*/float: left;/*三聯的寬度比例*/width: 33.3%;/*設置邊框屬性*/
}

看不出三聯，加個邊距

.block{/*設置盒子對齊的方式*/float: left;/*三聯的寬度比例*/width: 33.3%;/*設置邊框屬性*/border: blueviolet 1px solid;}

但是發現出問題了，原因是因為我們設置了1px的邊框厚度，這樣就導致了每一聯占比33.3%加上邊框就超過了頁面寬度，因此會無法容下三聯。

修改如下：

.block{/*設置盒子對齊的方式*/float: left;/*三聯的寬度比例*/width: 33.3%;/*設置邊框屬性*/border: blueviolet 1px solid;/*使得邊框粗細不會占據網頁大小，這樣就不會因為邊框的原因而導致三聯不正常顯示*/box-sizing: border-box;
}