psd模板 html樣式 css樣式

html偏重于結(jié)構(gòu)和內(nèi)容，css主要起美化頁(yè)面的作用。而且 html所具有的一些動(dòng)態(tài)功能是css不具有的。

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有英山免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

內(nèi)容+表現(xiàn)=頁(yè)面

XHTML+CSS=PAGE

內(nèi)容與表現(xiàn)分開,就是內(nèi)容使用HTML,XHTML,而怎么對(duì)內(nèi)容排版,顯示使用CSS 標(biāo)準(zhǔn)網(wǎng)頁(yè)的優(yōu)點(diǎn):

1. 代碼更少,更容易維護(hù).

2. 頁(yè)面下載更快,寬帶要求更低,硬盤容量需求更少.

3. 排版更加方便.

4. 可以提高易用性與可擴(kuò)展性(可以適應(yīng)很多其它的設(shè)備:搜索蜘蛛/屏幕閱讀器/打印機(jī)/手持設(shè)備/移動(dòng)設(shè)備等)

5. 內(nèi)容與表現(xiàn)分離,使擴(kuò)展更加簡(jiǎn)單,分工協(xié)作更加簡(jiǎn)單.

HTML中CSS外部樣式表

1、首先我們我們新建一個(gè)記事本，并將記事本的名字改為“引入外部css文件和外部js文件.html”，并回車鍵確定，以使文件轉(zhuǎn)化為瀏覽器可以打開的html網(wǎng)頁(yè)文件。

2、我們編寫一個(gè)html5的聲明標(biāo)簽— !DOCTYPE html, 以使瀏覽器能認(rèn)識(shí)到我們的文檔是一個(gè)html5的文件，這樣就可以快速的正確解讀，以提高瀏覽的體驗(yàn)。

3、我們寫一個(gè)title的標(biāo)簽，將網(wǎng)頁(yè)的題目寫入進(jìn)去，讓網(wǎng)頁(yè)的標(biāo)題顯示為“引入外部css文件和外部js文件”。

4、我們用meta標(biāo)簽設(shè)置字符的編碼格式為：UTF-8，以使瀏覽器能夠正確的顯示我們的網(wǎng)頁(yè)。

5、我們寫一個(gè)body標(biāo)簽，用來包含網(wǎng)頁(yè)的主體部分。

6、我們寫幾個(gè)標(biāo)簽以便在外部css文件樣式表中，為其設(shè)置樣式。

7、我們新建一個(gè)css文件，把txt的文件后綴名改為css即可，之后打開就可以寫入css代碼了。

8、我們用標(biāo)簽選擇器為p標(biāo)簽、div標(biāo)簽和span標(biāo)簽的內(nèi)容設(shè)置樣式。

9、我們使用,link標(biāo)簽將我們編寫的css文件樣式表文件其引入到我們當(dāng)前的html文件中來。

10、我們鼠標(biāo)右擊在彈出的下拉菜單中，我們選擇“在瀏覽器中打開”這一項(xiàng)。

11、我們看到我們編寫的樣式被應(yīng)用到了標(biāo)簽中文字上，說明我們的css外部樣式表文件引入成功。

HTML中怎么導(dǎo)入css？

參考以下html導(dǎo)入css的方式：

HTML 中引入 CSS 的方式

有 4 種方式可以在 HTML 中引入 CSS。其中有 2 種方式是在 HTML 文件中直接添加 CSS 代碼，另外兩種是引入 外部 CSS 文件。下面我們就來看看這些方式和它們的優(yōu)缺點(diǎn)。

內(nèi)聯(lián)方式

內(nèi)聯(lián)方式指的是直接在 HTML 標(biāo)簽中的 style 屬性中添加 CSS。

示例：

div style="background: red"/div

這通常是個(gè)很糟糕的書寫方式，它只能改變當(dāng)前標(biāo)簽的樣式，如果想要多個(gè) div 擁有相同的樣式，你不得不重復(fù)地為每個(gè) div添加相同的樣式，如果想要修改一種樣式，又不得不修改所有的 style 中的代碼。很顯然，內(nèi)聯(lián)方式引入 CSS 代碼會(huì)導(dǎo)致 HTML 代碼變得冗長(zhǎng)，且使得網(wǎng)頁(yè)難以維護(hù)。

嵌入方式

嵌入方式指的是在 HTML 頭部中的 style 標(biāo)簽下書寫 CSS 代碼。

示例：

head

style

.content {

background: red;

}

/style

/head

嵌入方式的 CSS 只對(duì)當(dāng)前的網(wǎng)頁(yè)有效。因?yàn)?CSS 代碼是在 HTML 文件中，所以會(huì)使得代碼比較集中，當(dāng)我們寫模板網(wǎng)頁(yè)時(shí)這通常比較有利。因?yàn)椴榭茨０宕a的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因?yàn)榍度氲?CSS 只對(duì)當(dāng)前頁(yè)面有效，所以當(dāng)多個(gè)頁(yè)面需要引入相同的 CSS 代碼時(shí)，這樣寫會(huì)導(dǎo)致代碼冗余，也不利于維護(hù)。

鏈接方式

鏈接方式指的是使用 HTML 頭部的 head 標(biāo)簽引入外部的 CSS 文件。

示例：

head

link rel="stylesheet" type="text/css" href="style.css"

/head

這是最常見的也是最推薦的引入 CSS 的方式。使用這種方式，所有的 CSS 代碼只存在于單獨(dú)的 CSS 文件中，所以具有良好的可維護(hù)性。并且所有的 CSS 代碼只存在于 CSS 文件中，CSS 文件會(huì)在第一次加載時(shí)引入，以后切換頁(yè)面時(shí)只需加載 HTML 文件即可。

導(dǎo)入方式

導(dǎo)入方式指的是使用 CSS 規(guī)則引入外部 CSS 文件。

示例：

style

@import url(style.css);

/style

比較鏈接方式和導(dǎo)入方式

鏈接方式（下面用 link 代替）和導(dǎo)入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我們來比較這兩種方式，并且說明為什么不推薦使用 @import。

link 屬于 HTML，通過 link 標(biāo)簽中的 href 屬性來引入外部文件，而 @import 屬于 CSS，所以導(dǎo)入語(yǔ)句應(yīng)寫在 CSS 中，要注意的是導(dǎo)入語(yǔ)句應(yīng)寫在樣式表的開頭，否則無法正確導(dǎo)入外部文件；

@import 是 CSS2.1 才出現(xiàn)的概念，所以如果瀏覽器版本較低，無法正確導(dǎo)入外部樣式文件；

當(dāng) HTML 文件被加載時(shí)，link 引用的文件會(huì)同時(shí)被加載，而 @import 引用的文件則會(huì)等頁(yè)面全部下載完畢再被加載；

小結(jié)：我們應(yīng)盡量使用 link 標(biāo)簽導(dǎo)入外部 CSS 文件，避免或者少用使用其他三種方式。

分享文章：包含htmlcss樣式模板的詞條
本文地址：http://vcdvsql.cn/article12/dsdecdc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、域名注冊(cè)、做網(wǎng)站、建站公司、電子商務(wù)、網(wǎng)站制作

廣告

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