目錄
- 什么是CSS
- 在HTML頁(yè)面中嵌套使用CSS的兩種方式
- 三種方式代碼展示
- 鏈入外部樣式表文件
- 以下是常用的樣式
- 總結(jié)
什么是CSS
CSS(Cascading Style Sheet):層疊樣式表語(yǔ)言。
CSS的作用是：
修飾HTML頁(yè)面，設(shè)置HTML頁(yè)面中的某些元素的樣式，讓HTML頁(yè)面更好看。
在HTML頁(yè)面中嵌套使用CSS的兩種方式
第一種方式：在標(biāo)簽內(nèi)部使用style屬性來(lái)設(shè)置元素的CSS樣式，這種方式稱(chēng)為內(nèi)聯(lián)定義方式。語(yǔ)法格式：
標(biāo)簽 style=“樣式名:樣式值;樣式名:樣式值;樣式名:樣式值;…”>/標(biāo)簽>
第二種方式：鏈入外部樣式表文件，這種方式最常用。（將樣式寫(xiě)到一個(gè)獨(dú)立的xxx.css文件當(dāng)中，在需要的網(wǎng)頁(yè)上直接引入css文件，樣式就引入了）語(yǔ)法格式：
這種方式易維護(hù)，維護(hù)成本較低。
xxx.css文件
1.html中引入了
2.html中引入了
3.html中引入了
4.html中引入了
三種方式代碼展示
內(nèi)聯(lián)定義方式
!doctype html>
html>
head>
title>HTML中引入CSS樣式的第一種方式：內(nèi)聯(lián)定義方式/title>
head>
body>
!--
width 寬度樣式
heght 高度樣式
background-color 背景顏色樣式
display 布局樣式（none表示隱藏，block表示顯示）
-->
div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: 3px;border-style: solid">/div>
!--樣式還可以這樣寫(xiě)
border: width style color
-->
div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border: thick double yellow; ">/div>
/body>
/html>
樣式塊方式
!doctype html>
html>
head>
title>HTML中引入樣式的第二種方式：樣式塊方式/title>
style type="text/css">
/*
這是CSS的注釋
*/
/*
id選擇器
#id{
樣式名: 樣式值；
樣式名: 樣式值；
樣式名: 樣式值；
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
標(biāo)簽選擇器
標(biāo)簽名{
樣式名: 樣式值;
樣式名: 樣式值;
樣式名: 樣式值;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
類(lèi)選擇器
.類(lèi)名{
樣式名: 樣式值;
樣式名: 樣式值;
樣式名: 樣式值;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
/style>
/head>
body>
!--
設(shè)置樣式字體大小12px,顏色為紅色
-->
!--span id="usernameErrorMsg" style="font-size: 12px;color: red">對(duì)不起，用戶(hù)名不能為空！/span>-->
span id="usernameErrorMsg"">對(duì)不起，用戶(hù)名不能為空！/span>
div>/div>
div>/div>
div>/div>
!--class相同的可以認(rèn)為是同一類(lèi)標(biāo)簽。-->
br>br>br>br>
input type="text" class="myclass"/>
br>br>br>br>br>
select class="myclass">
option>專(zhuān)科/option>
option>本科/option>
option>碩士/option>
/select>
/body>
/html>
鏈入外部樣式表文件
css文件
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
!DOCTYPE html>
html>
head>
meta charset="utf-8">
title>HTML中引入CSS樣式的第三種方式：鏈入外部樣式表文件/title>
!--引入css-->
link type="text/css" rel="stylesheet" href="css/1.css"/>
/head>
body>
a >百度/a>
span id="baiduSpan">點(diǎn)擊我鏈接百度/span>
/body>
/html>
以下是常用的樣式
邊框
（1）
div{ border : 1px solid red; }
（2）
div{ border-width : 1px; border-style : solid; border-color : red; }
隱藏
字體
div{ font-size : 12px; color : red; }
文本裝飾
a{ text-decoration : none; }
a{ text-decoration : underline; }
列表
ul{ list-style-type : none; }
設(shè)置鼠標(biāo)懸停效果
定位
div{ position : absolute; left : 100px; top : 100px; }
鼠標(biāo)小手
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望你能夠多多關(guān)注腳本之家的更多內(nèi)容！
您可能感興趣的文章:- vue頁(yè)面引入three.js實(shí)現(xiàn)3d動(dòng)畫(huà)場(chǎng)景操作
- jQuery插件slicebox實(shí)現(xiàn)3D動(dòng)畫(huà)圖片輪播切換特效
- CSS自定義滾動(dòng)條樣式案例詳解
- 利用CSS制作3D動(dòng)畫(huà)
