什么是CSS

CSS(Cascading Style Sheet):層疊樣式表語言。

CSS的作用是：

修飾HTML頁面，設(shè)置HTML頁面中的某些元素的樣式，讓HTML頁面更好看。

在HTML頁面中嵌套使用CSS的兩種方式

第一種方式：在標(biāo)簽內(nèi)部使用style屬性來設(shè)置元素的CSS樣式，這種方式稱為內(nèi)聯(lián)定義方式。語法格式：

標(biāo)簽 style=“樣式名:樣式值;樣式名:樣式值;樣式名:樣式值;…”>/標(biāo)簽>

第二種方式：鏈入外部樣式表文件，這種方式最常用。（將樣式寫到一個獨立的xxx.css文件當(dāng)中，在需要的網(wǎng)頁上直接引入css文件，樣式就引入了）語法格式：

這種方式易維護(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>
		!--樣式還可以這樣寫
			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;
			}
			/*
				類選擇器
				.類名{
					樣式名: 樣式值;
					樣式名: 樣式值;
					樣式名: 樣式值;
				}
			*/
			.myclass{
				border: 2px double blue;
				width: 400px;
				height: 30px
			}
		/style>
	/head>
	body>
		!--
			設(shè)置樣式字體大小12px,顏色為紅色
		-->
		!--span id="usernameErrorMsg" style="font-size: 12px;color: red">對不起，用戶名不能為空！/span>-->
		span id="usernameErrorMsg"">對不起，用戶名不能為空！/span>
		div>/div>
		div>/div>
		div>/div>
		!--class相同的可以認(rèn)為是同一類標(biāo)簽。-->
		br>br>br>br>
		input type="text" class="myclass"/>
		br>br>br>br>br>
		select class="myclass">
			option>專科/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">點擊我鏈接百度/span>
	/body>
/html>

以下是常用的樣式

邊框

（1）

div{ border : 1px solid red; }

（2）

div{ border-width : 1px; border-style : solid; border-color : red; }

隱藏

div{ display : none; }

字體

div{ font-size : 12px; color : red; }

文本裝飾

a{ text-decoration : none; }

a{ text-decoration : underline; }

列表

ul{ list-style-type : none; }

設(shè)置鼠標(biāo)懸停效果

:hover

定位

div{ position : absolute; left : 100px; top : 100px; }

鼠標(biāo)小手

div{ cursor : pointer; }

總結(jié)

本篇文章就到這里了，希望能夠給你帶來幫助，也希望你能夠多多關(guān)注腳本之家的更多內(nèi)容！

您可能感興趣的文章:

vue頁面引入three.js實現(xiàn)3d動畫場景操作
jQuery插件slicebox實現(xiàn)3D動畫圖片輪播切換特效
CSS自定義滾動條樣式案例詳解
利用CSS制作3D動畫

標(biāo)簽：上海樂山長治沈陽河南新疆紅河滄州

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《帶你了解CSS基礎(chǔ)知識,樣式》，本文關(guān)鍵詞；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。