欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css的樣式有哪些

這篇文章將為大家詳細(xì)講解有關(guān)css的樣式有哪些，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對相關(guān)知識(shí)有一定的了解。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供克山網(wǎng)站建設(shè)、克山做網(wǎng)站、克山網(wǎng)站設(shè)計(jì)、克山網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、克山企業(yè)網(wǎng)站模板建站服務(wù)，十載克山做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

css中有3種樣式：1、行內(nèi)樣式，將css樣式代碼寫在HTML標(biāo)簽的style屬性中；2、內(nèi)部樣式，將css樣式代碼寫HTML文檔head部分的“<style>”標(biāo)簽對中；3、外部樣式，將css樣式代碼寫在外部的“.css”文件中。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言，是一種標(biāo)準(zhǔn)的樣式表語言，用于描述網(wǎng)頁的表現(xiàn)(即布局和格式)。

CSS樣式主要包含以下三種類型：

1、行內(nèi)樣式

行內(nèi)樣式就是把 CSS 樣式直接放在代碼行內(nèi)的標(biāo)簽中，一般都是放入標(biāo)簽的style屬性中。語法：

<標(biāo)記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"></標(biāo)記>

由于行內(nèi)樣式直接插入標(biāo)簽中，故是最直接的一種方式，同時(shí)也是修改最不方便的樣式。

示例：針對段落、<h3> 標(biāo)簽、<em> 標(biāo)簽、<strong>標(biāo)簽以及 <div> 標(biāo)簽，分別應(yīng)用 CSS 行內(nèi)樣式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行內(nèi)樣式</title>
	</head>
	<body>
		<p style="background-color: #999900">行內(nèi)元素，控制段落-1</p>
		<h3 style="background-color: #FF6633">行內(nèi)元素，h3 標(biāo)題元素</h3>
		<p style="background-color: #999900">行內(nèi)元素，控制段落-2</p>
		<strong style="font-size:30px;">行內(nèi)元素，strong 比 em 效果要強(qiáng)</strong>
		<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行內(nèi)元素，div 塊級元素</div>
		<em style="font-size:2em;">行內(nèi)元素，em 強(qiáng)調(diào)</em>
	</body>
</html>

效果圖：

css的樣式有哪些

可以看出：兩個(gè)段落 <p> 標(biāo)簽，雖內(nèi)容不同，但使用一樣的背景色設(shè)置，卻添加兩次 CSS 行內(nèi)屬性設(shè)置背景色 background-color: #999900。這樣即增加了頁面體積，也不方便后期的修改。

行內(nèi)元素雖然編寫簡單，但存在以下缺陷：

  • 每一個(gè)標(biāo)簽要設(shè)置樣式都需要添加 style 屬性。

  • 與過去網(wǎng)頁制作者將 HTML 的標(biāo)簽和樣式糅雜在一起的效果，不同的是現(xiàn)在是通過 CSS 編寫行內(nèi)樣式，過去釆用的是 HTML 標(biāo)簽屬性實(shí)現(xiàn)的樣式效果，雖方式不同但結(jié)果是一致的：后期維護(hù)成本高，即當(dāng)修改頁面時(shí)需要逐個(gè)打開網(wǎng)站每個(gè)頁面一一修改，根本看不到 CSS 所起到的作用。

  • 添加如此多的行內(nèi)樣式，頁面體積大，門戶網(wǎng)站若釆用這種方式編寫，那將浪費(fèi)服務(wù)器帶寬和流量。

2、內(nèi)部樣式

將 CSS 寫在網(wǎng)頁源文件的頭部，即在 <head> 和 <head> 之間，通過使用 HTML 標(biāo)簽中的 <style> 標(biāo)簽將其包圍，其特點(diǎn)是該樣式只能在此頁使用，解決行內(nèi)樣式多次書寫的弊端。

<style>
選擇器 {屬性名：屬性值；屬性名：屬性值；......}
</style>

示例：為段落設(shè)置內(nèi)嵌式樣式書寫方法，減少代碼量。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>內(nèi)部樣式</title>
		<style type="text/css">
			p {
				text-align: left;/*文本左對齊*/
				font-size: 18px;/*字體大小 18 像素*/
				line-height: 25px;/*行高 25 像素*/
				text-indent: 2em;/*首行縮進(jìn)2個(gè)文字大小空間*/
				width: 500px;/*段落寬度 500 像素*/
				margin: 0 auto;/*瀏覽器下居中*/
				margin-bottom: 20px;/*段落下邊距 20 像素*/
			}
		</style>
	</head>
	<body>
		<p>測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！</p>
		<p>測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！</p>
		<p>測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！測試文本！</p>
	</body>
</html>

效果圖：

css的樣式有哪些

3、外部樣式

如果 CSS 樣式被放置在網(wǎng)頁文檔外部的文件中，則稱為外部樣式表，一個(gè) CSS 樣式表文檔就表示一個(gè)外部樣式表。

實(shí)際上，外部樣式表也就是一個(gè)文本文件，擴(kuò)展名為.css。當(dāng)把CSS樣式代碼復(fù)制到一個(gè)文本文件中后，另存為.css文件，則它就是一個(gè)外部樣式表。

如下圖所示：

css的樣式有哪些

外部樣式表可以通過HTML 的 <link> 標(biāo)簽或者@import 命令導(dǎo)入到 HTML 文檔中。

語法：

<link type="text/css" rel="stylesheet" href=".css文件url" />

@import css文件;
@import 'css文件';
@import "css文件";
@import url(css文件);

示例1：使用<link> 標(biāo)簽

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="lianjie.css" type="text/css" rel="stylesheet" />
		<link href="lianjie-2.css" type="text/css" rel="stylesheet" />
	</head>
	<body>
		<p>我是被 lianjie-2.css 文件控制的，樓下的你呢？？</p>
		<h4>樓上的，<span>lianjie.css</span> 文件給我穿的花衣服。</h4>
	</body>
</html>

css的樣式有哪些

示例2：使用@import 命令

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
    @import url(lianjie.css);
    @import url(daoru.css);
    body { background-color: #e4e929; }
</style>
</head>
<body>
    <div>
        <p>我是被 lianjie-2.css 文件控制的，樓下的你呢？？</p>
        <h4>褸上的，<span>lianjie.css</span>文件給我穿的花衣服。</h4>
    </div>
</body>
</html>

css的樣式有哪些

關(guān)于css的樣式有哪些就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文標(biāo)題：css的樣式有哪些
文章出自：http://chinadenli.net/article28/iighcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供、網(wǎng)站策劃、服務(wù)器托管、全網(wǎng)營銷推廣、企業(yè)建站、做網(wǎng)站

廣告

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

h5響應(yīng)式網(wǎng)站建設(shè)