在HTML頁面中嵌套使用CSS的方法有哪些

這篇“在HTML頁面中嵌套使用CSS的方法有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“在HTML頁面中嵌套使用CSS的方法有哪些”文章吧。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站設計、網(wǎng)站建設、江口網(wǎng)絡推廣、微信小程序、江口網(wǎng)絡營銷、江口企業(yè)策劃、江口品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供江口建站搭建服務，24小時服務熱線：028-86922220，官方網(wǎng)址：muchs.cn

    什么是CSS

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

    CSS的作用是：

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

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

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

    <標簽 style=“樣式名:樣式值;樣式名:樣式值;樣式名:樣式值;…”></標簽>

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

    這種方式易維護，維護成本較低。
		xxx.css文件
			1.html中引入了
			2.html中引入了
			3.html中引入了
			4.html中引入了

    三種方式代碼展示

    內聯(lián)定義方式

    <!doctype html>
<html>
	<head>
		<title>HTML中引入CSS樣式的第一種方式：內聯(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;
			}

			/*
				標簽選擇器
				標簽名{
					樣式名: 樣式值;
					樣式名: 樣式值;
					樣式名: 樣式值;
				}
			*/
			div{
				background-color: black;
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			/*
				類選擇器
				.類名{
					樣式名: 樣式值;
					樣式名: 樣式值;
					樣式名: 樣式值;
				}
			*/
			.myclass{
				border: 2px double blue;
				width: 400px;
				height: 30px
			}
		</style>
	</head>
	<body>
		<!--
			設置樣式字體大小12px,顏色為紅色
		-->
		<!--<span id="usernameErrorMsg" style="font-size: 12px;color: red">對不起，用戶名不能為空！</span>-->
		<span id="usernameErrorMsg"">對不起，用戶名不能為空！</span>
		<div></div>
		<div></div>
		<div></div>
		<!--class相同的可以認為是同一類標簽。-->
		<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 href="http://www.baidu.com">百度</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; }

    設置鼠標懸停效果

    :hover

    定位

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

    鼠標小手

    div{ cursor : pointer; }

    以上就是關于“在HTML頁面中嵌套使用CSS的方法有哪些”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

    當前題目：在HTML頁面中嵌套使用CSS的方法有哪些
    文章轉載：http://muchs.cn/article46/jogjeg.html

    成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)頁設計公司、網(wǎng)站導航、外貿網(wǎng)站建設、網(wǎng)站維護、品牌網(wǎng)站建設

    廣告

    聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經(jīng)允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)

    h5響應式網(wǎng)站建設