學會怎樣給html標簽定義css樣式

H5edu教育html5開發(fā)為您解答：

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：主機域名、雅安服務器托管、營銷軟件、網站建設、牙克石網站維護、網站推廣。

在HTML中常用以下3種方式定義CSS：Embedding（嵌入式）、Linking（引用式）、Inline（內聯(lián)式）

一、嵌入式：使用HTML的style元素，在文檔中定義CSS樣式

head

style type="text/css"

h1{color:red}

p{color:blue}

/style

head

二、內聯(lián)式 ：每一個HTML元素都包含一個style屬性，可以直接定義樣式。該樣式僅能用于該元素的內容，對于另一個同名的元素則不起作用。

p style="color:#FFF;font-weight:bold;"內聯(lián)樣式/p

三、外部引用式：外部引用指HTML文檔本身不含有CSS樣式，而是動態(tài)引用外部的CSS文件定義文檔的表現(xiàn)形式。

1、使用樣式表的處理指令語句-在HTML文檔的開頭部分寫一個關于樣式表的指令處理語句

?xml-stylesheet type="text/css" href="mystyle.css" ?

html

指令語句

/html

不過只有使用xml語法格式編寫的html文檔才支持使用該指令，大多數瀏覽器僅當被保存為xhtml或xml格式才有效，且JS不能處理這種CSS，所以不建議使用。

2、使用@import命令 -在style元素之間使用@import命令導入外部的css文件

head

style type="text/css"

!--下面兩行代碼效果一樣

@import "mystyle.css";

@import url("mystyle.css");

--

/style

/head

任何@import規(guī)則必須出現(xiàn)在所有規(guī)則之前。參數是一個css文件的URL地址。在一個css文件中也可以用@import指令將另一個css文件導入。

3、使用link元素

head

link rel="stylesheet" href="css的url" type="text/css"

/head

這也是最常用的方式。

4、使用HTTP消息報頭鏈接到樣式表 -可以使用HTTP消息報頭的link字段鏈接一個外部樣式表。 link:mystyle.css;rel=stylesheet;

//等同于link rel="stylesheet" href="css的url" type="text/css"

HTTP報頭中可以使用多個link，從而鏈接多個樣式表，且HTTP報頭中的link比HTML文檔中的link（head元素中）具有優(yōu)先級。

什么是CSS樣式,以及CSS樣式包含那幾種類型?

CSS即層疊樣式表（Cascading Style Sheets），是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言。

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

1、行內樣式（內嵌樣式）：結構的內部，即寫在標簽內的樣式；寫在標簽的開始部分內部，style屬性當中。

例：標記 style="樣式的屬性名1：樣式的屬性值1；屬性名2：屬性值2；......"/標記

2、內部樣式（內聯(lián)樣式）：寫在HTML頁面內部，存放于head標記當中，樣式寫在style標記內。

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

3、外部樣式（外聯(lián)樣式）：寫在css文件內。

例：link type="text/css" rel="stylesheet" href="css/main.css" /

擴展資料：

使用CSS樣式的優(yōu)點：

CSS有助于實現(xiàn)負責任的Web設計。CSS對開發(fā)者構建Web站點的影響很大，并且這種影響可能是無止境的。將網頁的大部分甚至是全部的表示信息從HTML或XML文件中移出，并將它們保留在一個樣式表中有諸多優(yōu)點，如降低文件大小、節(jié)省網絡帶寬以及易于維護等。

此外，站點的表現(xiàn)信息和核心內容相分離，使得站點的設計人員能夠在短暫的時間內對整個網站進行各種各樣的修改。

CSS簡化了網頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數量（因為重復設置的格式將被只保存一次）。

只要修改保存著網站格式的CSS樣式表文件就可以改變整個站點的風格特色，在修改頁面數量龐大的站點時，顯得格外有用。這就避免了一個個網頁的修改，大大減少了工作量。

參考資料來源：百度百科-CSS

怎么定義css？

定義css分三類：

第一類：標簽元素

body,ul,li等，直接定義 ，格式：標簽名{屬性：樣式}

body{font-size:12px;}

第二類：類定義 在前面都是要加點

.top{margin-top:20px;}

第三類：id定義，id定義是樣式里做高的，一般不建議用。id定義用#

#footer{ margin-top:20px;}

什么是CSS樣式，怎樣定義和使用它？

CSS是Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用于（增強）控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。鏈入外部樣式表文件 (Linking to a Style Sheet) 你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下： head titletitle of article/title link rel=stylesheet href=" " type="text/css"/head 而在XML中，你應該如下例所示在聲明區(qū)中加入： ? xml-stylesheet type="text/css" href=" " ?定義內部樣式塊對象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標記之間插入一個STYLE.../STYLE塊對象。 定義方式請參閱樣式表語法。示例如下： html style type="text/css" !-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} -- /style body 請注意，這里將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。 內聯(lián)定義 (Inline Styles) 內聯(lián)定義即是在對象的標記內使用對象的style屬性定義適用其的樣式表屬性。示例如下： 這一行被增加了左右的外補丁 樣式表語法 (CSS Syntax) Selector { property: value } 參數說明： Selector -- 選擇符 property : value -- 樣式表定義。屬性和屬性值之間用冒號(:)隔開。定義之間用分號(;)隔開 繼承的值 (The ' Inherit ' Value) 每個屬性都有一個指定的值：Inherit。它的意思是：將父對象的值等同為計算機值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強調。 選擇符說明： #表示選擇id .表示選擇class 比如我有個 這時就得用#test{屬性}來給id為test的div來制定樣式 而 則應該用.test{屬性}來給其指定樣式。 編輯本段根據分辨率不同，調用不同的css文件 dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0 SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; ScreenWidth(IE1024,IE800,IE1152,IEother) }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果瀏覽器為Firefox var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; ScreenWidth(Firefox1024,Firefox800,Firefox1152,Firefoxother) }else{ file://如果瀏覽器為其他 var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; ScreenWidth(Other1024,Other800,Other1152,Otherother) } } function ScreenWidth(CSS1,CSS2,CSS3,CSS4){ if ((screen.width == 1024) (screen.height == 768)){ setActiveStyleSheet(CSS1); }else{ if ((screen.width == 800) (screen.height == 600)){ setActiveStyleSheet(CSS2); }else{ if ((screen.width == 1152) (screen.height == 864)){ setActiveStyleSheet(CSS3); }else{ setActiveStyleSheet(CSS4); }}} } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解釋： var IE1024=""; var IE800=""; var IE1152=""; var IEother=""; 引號里面分別填寫，用戶使用IE的時候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. var Firefox1024=""; var Firefox800=""; var Firefox1152=""; var Firefoxother=""; 引號里面分別填寫，用戶使用FF的時候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. var Other1024=""; var Other800=""; var Other1152=""; var Otherother=""; 引號里面分別填寫，用戶使用其他瀏覽器的時候并且分辨率為1024*768,800*600,1152*864要使用的css文件名. 不判斷分辨率，只判斷瀏覽器 應E.Qiang提議，編如下代碼。實現(xiàn)根據瀏覽器類型自動調用不同CSS。 代碼： SCRIPT LANGUAGE="javascript" !-- if (window.navigator.userAgent.indexOf("MSIE")=1) { file://如果瀏覽器為IE setActiveStyleSheet("default.css"); }else{ if (window.navigator.userAgent.indexOf("Firefox")=1) { file://如果瀏覽器為Firefox setActiveStyleSheet("default2.css"); }else{ file://如果瀏覽器為其他 setActiveStyleSheet("newsky.css"); } } function setActiveStyleSheet(title){ document.getElementsByTagName("link")[0].href="style/"+title; } ; /SCRIPT 解釋： 如果瀏覽器為IE，則調用default.css 如果瀏覽器為Firefox，則調用default2.css 如果瀏覽器為其他，則調用newsky.css 用法：放在head/head中即可。 中國專業(yè)css標準化推廣網站 【Div之家】 css 層疊樣式表 引入層疊樣式表的方法包括： 1，外聯(lián)式樣式表 2，內嵌樣式表 3，元素內定 4，導入樣式表 外聯(lián)式樣式表 例：head link rel="stylesheet" href="/css/default.css" /head body .... /body /html 屬性：rel 用來說明link元素在這里要完成的任務是連接一個獨立的css文件。而href屬性給出了所要連接css文件的url地址 內嵌式樣式表： 例：html head style type="text/css" !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html 元素內定 格式： 導入式樣式表 〈html head style type="text/css" !-- @import url(css/home.css); -- /style body .... /body /html

網站題目：css標簽樣式定義,css定義樣式的基本語法
當前地址：http://chinadenli.net/article22/dsedijc.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供營銷型網站建設、網站策劃、外貿網站建設、用戶體驗、App開發(fā)、域名注冊

廣告

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