HTML第四章
第四章 初識CSS
1.什么是CSS：
??? CSS全稱（Cascading Style Sheet）風(fēng)格樣式表(Style Sheet)它是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。
2.CSS的優(yōu)勢：
（1）內(nèi)容與表現(xiàn)分離，也就是使用前面學(xué)習(xí)的HTML語言制作網(wǎng)頁，使用CSS設(shè)置網(wǎng)頁的樣式風(fēng)格，并且CSS單獨(dú)存放一個(gè)文件中。
??? （2）表現(xiàn)的統(tǒng)一，可以使網(wǎng)頁的表現(xiàn)非常統(tǒng)一并且容易修改。
??? （3）豐富的樣式，使得頁面更加靈活。
??? （4）減少網(wǎng)頁的代碼量，增加網(wǎng)頁的瀏覽速度，節(jié)省網(wǎng)絡(luò)寬帶。
??? （5）運(yùn)用獨(dú)立于頁面的CSS，還有利于網(wǎng)頁被搜索引擎收錄。
3.CSS的基本語法：
??? CSS規(guī)則由兩部分構(gòu)成：選擇器和聲名。聲名必須放在大括號{}中，
并且聲名是一條或者多條，每一條聲名由一個(gè)屬性和值組成，屬性和值
用冒號分開，每條語句以英文分號結(jié)尾。
4.<style>標(biāo)簽：在HTML中通過使用<style>標(biāo)簽引入CSS樣式。<style>標(biāo)簽用于為HTML文檔定義樣式信息。<style>標(biāo)簽位于<head>標(biāo)簽中，它規(guī)定瀏覽器中如何呈現(xiàn)HTML文檔。<style>標(biāo)簽中type屬性是必須的，它用來定義style元素內(nèi)容，唯一的值是“text/css”。
5.CSS選擇器：
| 選擇器的種類 | 例 |
| 1.標(biāo)簽選擇器 | P{font-size:16px;} |
| 2.類選擇器 | ? ? .class{font-size:16px;} |
| 3.ID選擇器 | ? ? #id{font-size:16px;} |
?
6.id選擇器與類選擇器的不同之處：ID選擇器只能在HTML中使用一次，因此它的針對性很強(qiáng)。
?
選擇器優(yōu)先級：ID選擇 器：>類選擇器>標(biāo)簽選擇器
?
?
?
7.引入CSS樣式:
| 引入樣式 | 定義 | 例 | 利與弊 |
| 行內(nèi)樣式表就是在html中直接使用style屬性設(shè)置CSS樣式 | <pstyle=”font-size:14px; color:green;”> | 這種使用style屬性的設(shè)置CSS樣式僅對當(dāng)前的HTML標(biāo)簽起作用，并且是寫在HTML標(biāo)簽中的，因此這種方式不能使內(nèi)容和表現(xiàn)相分離，本質(zhì)上沒有體現(xiàn)出css的優(yōu)勢。 | |
| 2.內(nèi)部樣式 | 內(nèi)部樣式就是把css樣式代碼寫在<head>的<style>標(biāo)簽中，與HTML內(nèi)容位于同一個(gè)HTML文件中。 | <head> <style> ????? .green{ ???????? font-size:20px; ???????? color:red; } </style> </head> | 這種樣式方便在同一頁面中修改樣式，但不利于在多頁面間共享復(fù)用代碼及維護(hù)，對內(nèi)容與樣式分離也不夠徹底。 |
| 3.外部樣式 | 外部術(shù)樣式表就是把CSS代碼保存為一個(gè)單獨(dú)的樣式表文件，文件擴(kuò)展名為.CSS在頁面中引用外部樣式表。 ? | ①鏈接外部樣式表： <head> <link href=”style.css”rel=”stylesheet” type=”text/css”/> </head> | 外部樣式實(shí)現(xiàn)了樣式和結(jié)構(gòu)的徹底的分離，一個(gè)外部樣式表文件可應(yīng)用于多個(gè)頁面。當(dāng)改變這個(gè)樣式文件時(shí)，所有頁面的樣式都會隨之改變。這在制作大量相同樣式頁面的網(wǎng)站時(shí)，非常有用，不僅減少了重復(fù)的工作量，利于保持網(wǎng)站的統(tǒng)一樣式和網(wǎng)站維護(hù)，同時(shí)用戶在瀏覽網(wǎng)頁時(shí)也減少了重復(fù)下載代碼，提高了網(wǎng)站的速度。 |
| ②導(dǎo)入外部樣式表: <head> <style type=”text/css” <!— ????? @import url(“style.csss”) ??? --> </head> ? |
樣式優(yōu)先級：行內(nèi)樣式>內(nèi)部樣式>外部樣式。
8.CSS復(fù)合選擇器:
| 復(fù)合選擇器的種類 | 定義 |
| 1.后代選擇器 | 在HTML中經(jīng)常有標(biāo)簽的嵌套使用，那么在CSS選擇器中，就可以通過嵌套的方式，對特殊位置的HTML標(biāo)簽進(jìn)行聲名。 例：p? . txt{ color:blue; font-size:36px;} |
| 2.交集選擇器 | 交集選擇器是由兩個(gè)直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。其中第一個(gè)必須是標(biāo)簽選擇器，第二個(gè)必須是類選擇器域者ID選擇器。這兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。 例：p.txt{color:blue; line-height:28px} |
| 3.并集選擇器 | 同時(shí)選中各個(gè)基本選擇器所選擇的范圍。任何形式的選擇器（包括標(biāo)簽選擇器，類選擇器，ID選擇器材等）都可以作為并集選擇器的一部分。 例：H3, .first, #end{ font-size:16px; color:green;} |
?
9.css繼承特性：
?? 繼承的概念：在CSS語言中繼承就是將各個(gè)HTML標(biāo)簽看作一個(gè)容器，其中被包含的小容器會繼承包含它的大容器的風(fēng)格樣式，也稱包含與被包含的標(biāo)簽為父子關(guān)系。
??? 繼承的應(yīng)用：
Css繼承指的是子標(biāo)簽的所有樣式風(fēng)格，可以在父標(biāo)簽樣式風(fēng)格的基礎(chǔ)上再加以修改，產(chǎn)生新的樣式，而子標(biāo)簽的樣式風(fēng)格完全不會影響父標(biāo)簽。
例：<style type=”text/css>
??? Li{
??????? Color:blue;
??????? font-size:12px;
}
ul li ul li ul li{ color:red;}
ul li ol li{color:green;}
</style>
轉(zhuǎn)載于:https://www.cnblogs.com/ppdpp/p/7635539.html
總結(jié)
- 上一篇： scrt远程连接工具怎么切换窗口
- 下一篇： js处理富文本编辑器转义、去除转义、去除