資訊專欄INFORMATION COLUMN
摘要：是也是一種標(biāo)記語(yǔ)言主要用于設(shè)置頁(yè)面中的文本內(nèi)容字體大小對(duì)齊方式等圖片的外形寬高邊框樣式邊距等以及版面的布局和外觀顯示樣式。規(guī)則由兩個(gè)主要的部分構(gòu)成選擇器以及一條或多條聲明。選擇器和類選擇器最大的不同在于使用次數(shù)上。
CSS 是層疊樣式表 ( Cascading Style Sheets ) 的簡(jiǎn)稱.
有時(shí)我們也會(huì)稱之為 CSS 樣式表或級(jí)聯(lián)樣式表。
CSS 是也是一種標(biāo)記語(yǔ)言
CSS 主要用于設(shè)置 HTML 頁(yè)面中的文本內(nèi)容（字體、大小、對(duì)齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局和外觀顯示樣式。
CSS 讓我們的網(wǎng)頁(yè)更加豐富多彩，布局更加靈活自如。簡(jiǎn)單理解：CSS 可以美化 HTML , 讓 HTML 更漂亮， 讓頁(yè)面布局更簡(jiǎn)單。
CSS 最大價(jià)值: 由 HTML 專注去做結(jié)構(gòu)呈現(xiàn)，樣式交給 CSS，即 結(jié)構(gòu) ( HTML ) 與樣式( CSS ) 相分離
1.使用 HTML 時(shí)，需要遵從一定的規(guī)范，CSS 也是如此。要想熟練地使用 CSS 對(duì)網(wǎng)頁(yè)進(jìn)行修飾，首先需要了解CSS 樣式規(guī)則。
2.CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器以及一條或多條聲明。
1.選擇器是用于指定 CSS 樣式的 HTML 標(biāo)簽，花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式
2.屬性和屬性值以“鍵值對(duì)”的形式出現(xiàn)
3.屬性是對(duì)指定的對(duì)象設(shè)置的樣式屬性，例如字體大小、文本顏色等
4.屬性和屬性值之間用英文“:”分開(kāi)
5.多個(gè)“鍵值對(duì)”之間用英文“;”進(jìn)行區(qū)分
例如：
所有的樣式，都包含在 <style> 標(biāo)簽內(nèi)，表示是樣式表。<style> 一般寫(xiě)到 </head> 上方
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head> 1. 樣式格式書(shū)寫(xiě)
1.緊湊格式
h3 { color: deeppink;font-size: 20px;}
2.展開(kāi)格式
h3 {
color: pink;
font-size: 20px;
}
強(qiáng)烈推薦第二種格式， 因?yàn)楦庇^。
2. 樣式大小寫(xiě)風(fēng)格
1.小寫(xiě)格式
h3 {
color: pink;
}
2.大寫(xiě)格式
H3 {
COLOR: PINK;
}
強(qiáng)烈推薦樣式選擇器，屬性名，屬性值關(guān)鍵字全部使用小寫(xiě)字母，特殊情況除外。
3. 樣式空格風(fēng)格
1. h3 {
color: pink;
}
屬性值前面，冒號(hào)后面，保留一個(gè)空格
選擇器（標(biāo)簽）和大括號(hào)中間保留空格答：選擇器(選擇符)就是根據(jù)不同需求把不同的標(biāo)簽選出來(lái)這就是選擇器的作用。 簡(jiǎn)單來(lái)說(shuō)，就是選擇標(biāo)簽用的。
找到所有的 h1 標(biāo)簽。 選擇器（選對(duì)人） 設(shè)置這些標(biāo)簽的樣式，比如顏色為紅色（做對(duì)事）。
基礎(chǔ)選擇器又包括：標(biāo)簽選擇器、類選擇器、id 選擇器和通配符選擇器
標(biāo)簽選擇器：
標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式。
標(biāo)簽選擇器（元素選擇器）是指用 HTML 標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類，為頁(yè)面中某一類標(biāo)簽指定統(tǒng)一的 CSS 樣式。
類選擇器：
如果想要差異化選擇不同的標(biāo)簽，多帶帶選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器.
語(yǔ)法：
.類名 {
屬性1: 屬性值1;
...
}
結(jié)構(gòu)需要用class屬性來(lái)調(diào)用 class 類的意思
<div class="類名"> 變紅色 </div>1.如果想要差異化選擇不同的標(biāo)簽，多帶帶選一個(gè)或者某幾個(gè)標(biāo)簽，可以使用類選擇器。
2.類選擇器在 HTML 中以 class 屬性表示，在 CSS 中，類選擇器以一個(gè)點(diǎn)“.”號(hào)顯示。
3.類選擇器使用“.”（英文點(diǎn)號(hào)）進(jìn)行標(biāo)識(shí)，后面緊跟類名（自定義，我們自己命名的）。
4.可以理解為給這個(gè)標(biāo)簽起了一個(gè)名字，來(lái)表示。
5.長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名。
6.不要使用純數(shù)字、中文等命名，盡量使用英文字母來(lái)表示。
7.命名要有意義，盡量使別人一眼就知道這個(gè)類名的目的。
8.命名規(guī)范：見(jiàn)附件（ Web 前端開(kāi)發(fā)規(guī)范手冊(cè).doc）
我們可以給一個(gè)標(biāo)簽指定多個(gè)類名，從而達(dá)到更多的選擇目的。 這些類名都可以選出這個(gè)標(biāo)簽.
簡(jiǎn)單理解就是一個(gè)標(biāo)簽有多個(gè)名字.
多類名的具體使用： 1. <div class="red font20">亞瑟</div> 注意： 1.在標(biāo)簽class 屬性中寫(xiě) 多個(gè)類名 2.多個(gè)類名中間必須用空格分開(kāi) 3.這個(gè)標(biāo)簽就可以分別具有這些類名的樣式
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。
HTML 元素以 id 屬性來(lái)設(shè)置 id 選擇器，CSS 中 id 選擇器以“#" 來(lái)定義。
語(yǔ)法：
#id名 {
屬性1: 屬性值1;
...
}注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次
id選擇器和類選擇器的區(qū)別：
1.類選擇器（class）好比人的名字，一個(gè)人可以有多個(gè)名字，同時(shí)一個(gè)名字也可以被多個(gè)人使用。
2.id 選擇器好比人的身份證號(hào)碼，全中國(guó)是唯一的，不得重復(fù)。
3.id 選擇器和類選擇器最大的不同在于使用次數(shù)上。
4.類選擇器在修改樣式中用的最多，id 選擇器一般用于頁(yè)面唯一性的元素上，經(jīng)常和 JavaScript 搭配使用。
* {
屬性1: 屬性值1;
...
}
通配符選擇器不需要調(diào)用， 自動(dòng)就給所有的元素使用樣式
特殊情況才使用，后面講解使用場(chǎng)景(以下是清除所有的元素標(biāo)簽的內(nèi)外邊距,后期講)
* {
margin: 0;
padding: 0;
}CSS 使用 font-size 屬性定義字體大小。
語(yǔ)法：
p {
font-size: 20px;
}1.px（像素）大小是我們網(wǎng)頁(yè)的最常用的單位
2.谷歌瀏覽器默認(rèn)的文字大小為16px
3.不同瀏覽器可能默認(rèn)顯示的字號(hào)大小不一致，我們盡量給一個(gè)明確值大小，不要默認(rèn)大小
4.可以給 body 指定整個(gè)頁(yè)面文字的大小
CSS 使用 font-weight 屬性設(shè)置文本字體的粗細(xì)。
語(yǔ)法：
p {
font-weight: bold;
}CSS 使用 font-style 屬性設(shè)置文本的風(fēng)格。
p {
font-style: normal;
}body { font: font-style font-weight font-size/line-height font-family;}使用 font 屬性時(shí)，必須按上面語(yǔ)法格式中的順序書(shū)寫(xiě)，不能更換順序，并且各個(gè)屬性間以空格隔開(kāi) 不需要設(shè)置的屬性可以省略（取默認(rèn)值），但必須保留 font-size 和 font-family 屬性，否則 font 屬性將不起作用。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1378.html
摘要：注本文首發(fā)于個(gè)人博客學(xué)習(xí)筆記。最近看了下變量，又名自定義屬性，跟大家分享一下我的學(xué)習(xí)筆記。使用自定義屬性來(lái)設(shè)置變量名，并使用特定的來(lái)訪問(wèn)。二學(xué)習(xí)筆記聲明調(diào)用聲明方式變量聲明的方式非常簡(jiǎn)單，如下，聲明了一個(gè)名叫的變量。 注：本文首發(fā)于個(gè)人博客 《CSS Variables學(xué)習(xí)筆記》。 最近看了下CSS Variables（CSS變量，又名CSS自定義屬性），跟大家分享一下我的學(xué)習(xí)筆記。 ...
摘要：中添加同樣起作用。說(shuō)明提供的命令，打包時(shí)模塊綁定的加載器為命令，監(jiān)聽(tīng)打包的文件，只要改變自動(dòng)會(huì)打包命令窗口顯示打包進(jìn)度命令窗口列出引入的所有模塊命令窗口顯示打包引入模塊的原因 標(biāo)注：本筆記來(lái)自 imooc-qbaty老師-webpack深入與實(shí)戰(zhàn)gitbash（or CMD）進(jìn)行命令操作 一、準(zhǔn)備工作 lenovo@lenovo-PC MINGW64 ~ $ cd /d/imooc/ ...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
摘要：指普通的規(guī)則，由選擇器和屬性指定構(gòu)成的規(guī)則。用于跟命名空間配合的一個(gè)規(guī)則，表示內(nèi)部的選擇器全都帶上特定命名空間。注意屬性不允許使用連續(xù)的兩個(gè)中劃線開(kāi)頭，否則會(huì)被認(rèn)為是變量。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【原文有...
閱讀 727·2023-04-25 19:43
閱讀 3971·2021-11-30 14:52
閱讀 3796·2021-11-30 14:52
閱讀 3861·2021-11-29 11:00
閱讀 3791·2021-11-29 11:00
閱讀 3887·2021-11-29 11:00
閱讀 3568·2021-11-29 11:00
閱讀 6142·2021-11-29 11:00
