CSS全稱為 Cascading Style Sheets,譯為層疊樣式表。CSS有三種樣式:內(nèi)聯(lián)樣式,內(nèi)嵌樣式,外聯(lián)樣式。
內(nèi)聯(lián)樣式通過HTML元素的style屬性來設(shè)置CSS樣式,語法如下:
style="CSS屬性:CSS屬性值";
示例代碼:
<!DOCTYPE html>
<html>
<head>
<title>內(nèi)聯(lián)樣式</title>
<meta charset="UTF-8">
</head>
<body>
<!-- style="css屬性:css屬性值;" -->
<div style="color:red;">啟嘉班</div>
</body>
</html>
* 內(nèi)聯(lián)樣式的缺點(diǎn): 只對(duì)當(dāng)前元素有效, 導(dǎo)致CSS代碼可能出現(xiàn)冗余
通過HTML元素的style屬性來設(shè)置CSS樣式,語法如下:
<style>
選擇器{
屬性名:屬性值;
}
</style>
示例代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>內(nèi)嵌樣式</title>
<style>
p{
color: chartreuse;
font-size: 50px;
}
</style>
</head>
<body>
<p>19級(jí)啟嘉班</p>
</body>
</html>
優(yōu)點(diǎn): 相對(duì)于內(nèi)聯(lián)樣式
*通過CSS選擇器定位HTML頁面中一個(gè)或一類元素
缺點(diǎn):相對(duì)于內(nèi)聯(lián)樣式
* 將CSS代碼嵌入到HTML頁面中,只能對(duì)當(dāng)前HTML頁面有效
* 編碼的風(fēng)格不符合編碼原則中的低耦合
* 導(dǎo)致CSS代碼可能出現(xiàn)冗余
通過HTML元素的<link>元素來設(shè)置CSS樣式表
1.創(chuàng)建一個(gè)CSS文件,用來存儲(chǔ)CSS樣式內(nèi)容
2.在HTML頁面中通過<link>元素引入外部指定的CSS文件
<link>元素:
* 作用: 用來引入HTML頁面外部的資源
屬性:
* rel屬性: 用來設(shè)置外部資源與當(dāng)前HTML頁面的關(guān)系
* href屬性: 用來設(shè)置引入外部資源的路徑(相對(duì)路徑和絕對(duì)路徑)
語法結(jié)構(gòu)如下:
<link rel="stylesheet" href="CSS文件路徑">
示例代碼:
<link rel="stylesheet" href="style.css">
優(yōu)點(diǎn): 相對(duì)于內(nèi)嵌樣式表和內(nèi)聯(lián)樣式
* 將CSS樣式與HTML頁面進(jìn)行分離(低耦合)
* 不會(huì)出現(xiàn)內(nèi)嵌樣式表或內(nèi)聯(lián)樣式產(chǎn)生的代碼冗余
缺點(diǎn): 可能對(duì)HTML頁面的加載造成負(fù)擔(dān),導(dǎo)致性能下降
下一節(jié)更新CSS選擇器
、//火狐
@-moz-document url-prefix() {
div {
margin-left:15px;
}
}
background:-moz-linear-gradient(top,#15A216,#fafafa);/*火狐*/
2、//谷歌
@media screen and (-webkit-min-device-pixel-ratio:0) {
div{
margin-left:360px;
}
}
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#15A216), to(#fafafa));/*谷歌*/
3、//聲名兼容ie下的瀏覽器 IE8 IE9
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> //兼容IE7
ss是一種用來為Html文檔添加樣式(字體、間距、位置、顏色、角度等顯示效果)的計(jì)算機(jī)語言。學(xué)習(xí)網(wǎng)站W(wǎng)3school。
css的引用樣式:
一:style標(biāo)簽(內(nèi)聯(lián)樣式)
通過在head標(biāo)簽中間新建一個(gè)style標(biāo)簽,該標(biāo)簽內(nèi)部存放的就是網(wǎng)頁文件中的css代碼。
二:外部引用css文件(外聯(lián)樣式)
新建一個(gè)css文件
在head標(biāo)簽中間新建一個(gè)link標(biāo)簽,通過href屬性設(shè)置外部的css文件地址。rel=“stylesheet”表示我們引用的一個(gè)樣式表(css文件)。
三:標(biāo)簽內(nèi)部style屬性(行內(nèi)樣式)
在開始標(biāo)簽的內(nèi)部可以設(shè)置一個(gè)叫做style的屬性,屬性的雙引號(hào)存放該元素代碼的css樣式(不推薦使用)。
一般用的就是通過link標(biāo)簽來引入外部css文件來修改樣式,一般修改樣式有字體,顏色,大小,文本居中,間距等。
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。