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