溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS基礎(chǔ)使用方法有哪些

發(fā)布時(shí)間：2022-12-13 09:58:00 來(lái)源：億速云 閱讀：86 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“CSS基礎(chǔ)使用方法有哪些”，在日常操作中，相信很多人在CSS基礎(chǔ)使用方法有哪些問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”CSS基礎(chǔ)使用方法有哪些”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

什么是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 href="http://www.baidu.com">百度</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{ 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; }

到此，關(guān)于“CSS基礎(chǔ)使用方法有哪些”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

css
AI
助
手