CSS3(Cascading Style Sheets 層疊樣式表)
用來給HTML標(biāo)簽增加樣式的語言
| 語言 | 功能 | |
|---|---|---|
| 結(jié)構(gòu)層 | HTML | 搭建結(jié)構(gòu)、放置部件 |
| 樣式層 | CSS | 美化頁面、實(shí)現(xiàn)布局 |
| 行為層 | JavaScript | 實(shí)現(xiàn)交互效果數(shù)據(jù)收發(fā)表單驗(yàn)證 |
HTML、CSS結(jié)合的紐帶——選擇器
一、CSS書寫位置
1、內(nèi)嵌式(常用)
在<head> </head>標(biāo)簽對中書寫<style> </style>標(biāo)簽對,里面書寫 CSS語句
2、外鏈?zhǔn)剑ǔS茫?/h4>
可將CSS單獨(dú)存為.css文件,然后使用<link>標(biāo)簽引入
引入標(biāo)簽放在<head>標(biāo)簽中
rel屬性式表明link的鏈接與HTML的關(guān)系,stylesheet即為樣式表的意思,表示link的是HTML的樣式表
href屬性,表示路徑和文件名
<link rel="stylesheet" href="css/css/css">
優(yōu)點(diǎn):多個(gè)HTML頁面可以共用一個(gè)CSS樣式文件
3、導(dǎo)入式
是最不常見的樣式表導(dǎo)入方法
<style>
@import url(css/css.css);
</style>
基本不常用的原因:使用導(dǎo)入式引入的樣式表,不會等待CSS文件加載完畢,而是立即渲染HTML文件,所以頁面會有幾秒鐘的“素面朝天”的時(shí)間
4、行內(nèi)式
樣式可以直接通過style屬性寫在標(biāo)簽上
<div style="font-size:30;color:green">
我是div中的文字,字體大小是30px,顏色是綠色
</div>
行內(nèi)式犧牲了樣式表批量設(shè)置樣式的能力,只給一個(gè)標(biāo)簽設(shè)置樣式,所以不常用
二、CSS3的基本語法
選擇器 大括號 屬性:值
h1 {
color:green;
font-weight:bold;
}
CSS3的注釋是/* */
<style>標(biāo)簽有type屬性,并且值為一(text/css)含義是指明標(biāo)簽內(nèi)的代碼是標(biāo)準(zhǔn)的CSS,可省略不寫。若不省略則一定要寫對屬性值,否則會造成瀏覽器不認(rèn)識標(biāo)簽內(nèi)的代碼。
選擇器之間,不能寫分號或者其他符號,不然會導(dǎo)致下面那個(gè)樣式不生效