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