CSS簡介 1.CSS介紹 層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。 2.C ...
CSS簡介
1.CSS介紹
層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)
或XML(標準通用標記語言的一個子集)等文件樣式的電腦語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
2.CSS語法
選擇器 {屬性:屬性值;}
3.CSS使用方式
內部樣式表 | <style type="text/css"> /*css語句*/ </style> |
外部樣式表 |
<link rel="stylesheet" type="text/css" href="目標文件的路徑及文件名全稱" /> <style type="text/css"> 差別3:相容性的差別:@import是CSS2.1提出的,所以老的瀏覽器不支持,@import只有在IE5以上的才能識別,而link標簽無此問題。 差別4:使用dom(document object model文檔對象模型 )控制樣式時的差別:當使用javascript控制dom去改變樣式的時候,只能使用link標簽,因為@import不是dom可以控制的. |
內聯樣式表 | <div style="width:500px; height:200px;"></div> |
4.CSS不同使用方式的優先順序
A、內聯樣式表的優先順序別最高
B、內部樣式表與外部樣式表的優先順序和書寫的順序有關,後書寫的優先順序別高。
5.樣式表的作用域
作用域:內聯樣式的作用域最小,只能應用於當前元素,其次是內部樣式表,能應用於當前HTML文件,最後是外部樣式表,能應用於所有鏈接的HTML文件。
6.CSS選擇器
什麼是選擇器?
幫助我們在css中找到html的元素並且定位到指定元素的身上。
三大基礎選擇器
id
class
html
高級選擇器
* 通配符
.d1,.d2{} 群組選擇器
.d1 .d3{} 後代選擇器
.d1>.d2{} 子元素選擇器
偽類選擇器
a:link{屬性:屬性值;}超鏈接的初始狀態;
a:visited{屬性:屬性值;}超鏈接被訪問後的狀態;
a:hover{屬性:屬性值;}滑鼠懸停,即滑鼠划過超鏈接時的狀態;
a:active{屬性:屬性值;}超鏈接被激活時的狀態,即滑鼠按下時超鏈接的狀態;
link--visited--hover--active。
選擇器權重比較
三大基礎選擇器 | id>class>html |
權重比較 | id、class、html選擇器數量 |
是否直接選中目標 |
|
!important |
7.CSS基本樣式
width
height
background
8.CSS註釋
/* 註釋內容 */