CSS個別記憶力不熟的標籤:
1.scrolling="no" 取消滾動條
2.frameborder=“no” 取消邊框
3.line-height:" px"上下間距
4.text-align:center 文字居中
5.class是類選擇器代表標點:點
6.id是id選擇器代表標點:#
7.font-weight:bold; css加粗
8.font-font-style:italic; css 斜體
9.a:hover 僞元素
課堂上的CSS複習:
由於樣式和html內容寫在一起,導致代碼特別紊亂,於是提出思想:
Html內容 和 顯示 相分離
Html 只負責寫內容,搭建框架
CSS只負責裝飾內容,裝飾框架
舉例子:html 比喻房子 css比喻修飾、裝飾房子(掛一幅畫、粉刷顏色...)
Css---- cascade style sheet 層疊樣式表
1,CSS的基本語法
(1)CSS是由 選擇器 和 聲明來組成的
(2)每一條聲明裏面 有屬性、值
選擇器{屬性:值;屬性:值....}
選擇器:找到某個標籤的一種方法/機器
Css屬性的單位:
顏色值:
大小值:
瀏覽器默認的字體大小,16px
Px----像素(pixel)-----
電腦的分辨率:1366x768像素
整個屏幕 是由 1366像素點組成 縱向是由 768個像素點組成,像素點 一個一個的顏色值
16px 是什麼意思?
所以像素 是一個相對的長度,和瀏覽器的分辨率相關
他是分辨的百分比 16/瀏覽器所佔的大小
2,CSS的四種樣式表
(1)內聯樣式表
缺點是如果給很多元素設置樣式太繁瑣
(2)嵌套樣式表
缺點:如果其他文件也需要這種樣式的話,需要反覆再去寫同樣的樣式
(3)外部樣式表
最常用的
多個文件需要同一種樣式的時候,我們可以將共同的樣式 封裝起來,保存成一個css文件
通過link標籤 加載的
<link rel=”stylesheet” type=”text/css” href=”layout.css”/>
(4)輸入樣式表
(1)在CSS文件中通過 @import 加載
(2)在html文件<style>標籤中嵌套:
CSS樣式的優先級:
1,就近原則,
2,加載順序,後加載的會修改之前的樣式
<link rel="stylesheet" href="css/border.css"/>
<style>
p{
border:2px solid green;
}
</style>
2,CSS選擇器
分類:
1,類選擇器,就是通過class屬性找到某個標籤的方法
任何html的標籤至少會有 class屬性、id、name、style
Class屬性的xxx標籤
2,id選擇器,通過id屬性來找到某個標籤的方法
3,關聯選擇器,又稱上下文關係選擇器。通過上下文關係來確定標籤的位置
意思:找到ul標籤裏面 class 爲 vegetable的li標籤
4,組合選擇器
就是組合 多個 html 標籤,來設置樣式
需求:
給 class='vegetable',id="div1", class="p1"設置樣式,讓其字體爲 30px,顏色爲藍色
注意:
同一個標籤,只能有一個 id屬性,因爲id是唯一的
Class屬性可以有多個,爲了區別其他的,建議這樣寫:標籤名.class屬性名 p.p1
5,僞元素選擇器
僞元素,就是 同一個html標籤,在不同的狀態下,有不同的效果,這樣的元素稱爲僞元素
目前,支持僞元素的,只有 a標籤 和 p標籤
僞元素的狀態:
超鏈接:
A:hover 鼠標移上去的時候
A:link 默認狀態
A:visited 訪問過之後
A:active
由於僞元素選擇器 兼容性不好,不建議大家使用,可以以後通過javascript來實現