前端開發之CSS篇一
阿新 • • 發佈：2018-07-08
重要 utf import 無效 nbsp 出現 bsp 示例 減少
一、CSS介紹和語法
二、CSS引入方式
三、基本選擇器
四、高級選擇器
五、偽類選擇器
六、偽元素選擇器
1?? CSS介紹和語法
1、 CSS的介紹
（1）為什麽需要CSS？
使用css的目的就是讓網頁具有美觀一致的頁面，另外一個最重要的原因是內容與格式分離 在沒有CSS之前，
我們想要修改HTML元素的樣式需要為每個HTML元素單獨定義樣式屬性，當HTML內容非常多時，就會定義很多重復的樣式屬性，
並且修改的時候需要逐個修改，費心費力。而此時CSS就出現了。
CSS的出現解決了以下問題：
首先，將HTML頁面的內容與樣式的分離；其次，提高了Web開發的效率。
（2）什麽是CSS？
CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式通常又會存在於樣式表中。
也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。
（3）CSS的優勢
一是內容與表現分離；二事網頁的表現統一，容易修改；三是豐富的樣式，使頁面布局更加靈活；
四是減少網頁的代碼；五是運用獨立頁面的CSS，有利於網頁被搜索引擎收錄。
（4）如何使用CSS？
通常會把樣式規則的內容都保存在CSS文件中，此時該CSS文件被稱為外部樣式表，然後在HTML文件中
通過link標簽引用該CSS文件即可。這樣瀏覽器在解析到該link標簽的時候就會加載該CSS文件，並按照該
文件中的樣式規則渲染HTML文件。
2、CSS語法
（1）CSS基礎語法
CSS語法分為兩部分：
選擇器和聲明
聲明由屬性和值組成，多個聲明之間用分號隔開。
語法：
選擇器｛
聲明1；
聲明2；
聲明3；
｝
例如：
h2{
color:green;
font-size:20px;
}
（2）代碼註釋
方法：/*代碼註釋寫在這裏*/
2?? CSS引入方式
網頁中引入CSS樣式有三種：
1、內聯樣式
2、行內樣式表
3、外部樣式表
①鏈入式
②導入式
（1）內嵌方式
style 標簽
例如： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入方式1</title>
<!--CSS引入的方式一--> <style> h2{ color:green; /*這是註釋*/ font-size: 20px; } </style> </head> <body> <div> <h2>這是二號標題</h2> </div> </body> </html>
（2）行內樣式
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的引入方式2</title> </head> <body> <div> <p style="font-size: 30px;color:red">這是一個段落標簽</p> </div> </body> </html>
（3）外聯樣式表--鏈接式
link 標簽
例如：index.css為css樣式表文件
index.css文件如下
p{
color:pink;
font-size:30px;
}
然後在HTML文件中通過link標簽引入，語法：index.css"/>
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <link rel="stylesheet" type="text/css" href="index.css"> </head> <body> <div> <p >這是一個段落標簽</p> </div> </body> </html>
（4）外聯樣式表--@import url()方式 導入式
同樣導入index.css
語法如下：
<style> @import url(index.css); </style> 註意：@import url() 必須寫在文件最開始的位置
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css_1</title> <style> @import "index.css"; </style> </head> <body> <div> <p >這是一個段落標簽</p> </div> </body> </html>
鏈接式與導入式的區別：
1、<link/>標簽屬於XHTML,@import是屬性css2.1 2、使用<link/>鏈接的css文件先加載到網頁當中，再進行編譯顯示 3、使用@import導入的css文件，客戶端顯示HTML結構，再把CSS文件加載到網頁當中 4、@import是屬於CSS2.1特有的，對於不兼容CSS2.1的瀏覽器來說就是無效的
前端開發之CSS篇一