psd模板 html樣式 css樣式

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

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

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

XHTML+CSS=PAGE

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

1. 代碼更少,更容易維護.

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

3. 排版更加方便.

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

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

HTML中CSS外部樣式表

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

2、我們編寫一個html5的聲明標簽— !DOCTYPE html, 以使瀏覽器能認識到我們的文檔是一個html5的文件，這樣就可以快速的正確解讀，以提高瀏覽的體驗。

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

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

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

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

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

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

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

10、我們鼠標右擊在彈出的下拉菜單中，我們選擇“在瀏覽器中打開”這一項。

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

HTML中怎么導入css？

參考以下html導入css的方式：

HTML 中引入 CSS 的方式

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

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

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

示例：

div style="background: red"/div

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

嵌入方式

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

示例：

head

style

.content {

background: red;

}

/style

/head

嵌入方式的 CSS 只對當前的網(wǎng)頁有效。因為 CSS 代碼是在 HTML 文件中，所以會使得代碼比較集中，當我們寫模板網(wǎng)頁時這通常比較有利。因為查看模板代碼的人可以一目了然地查看 HTML 結(jié)構(gòu)和 CSS 樣式。因為嵌入的 CSS 只對當前頁面有效，所以當多個頁面需要引入相同的 CSS 代碼時，這樣寫會導致代碼冗余，也不利于維護。

鏈接方式

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

示例：

head

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

/head

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

導入方式

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

示例：

style

@import url(style.css);

/style

比較鏈接方式和導入方式

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

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

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

當 HTML 文件被加載時，link 引用的文件會同時被加載，而 @import 引用的文件則會等頁面全部下載完畢再被加載；

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

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

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

廣告

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