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

CSS是Cascading Style Sheet 的縮寫。譯作「層疊樣式表單」。是用于（增強(qiáng)）控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言。鏈入外部樣式表文件 (Linking to a Style Sheet) 你可以先建立外部樣式表文件（.css），然后使用HTML的link對象。示例如下： head titletitle of article/title link rel=stylesheet href=" " type="text/css"/head 而在XML中，你應(yīng)該如下例所示在聲明區(qū)中加入： ? xml-stylesheet type="text/css" href=" " ?定義內(nèi)部樣式塊對象 (Embedding a Style Block) 你可以在你的HTML文檔的HTML和BODY標(biāo)記之間插入一個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屬性設(shè)置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式表單。 內(nèi)聯(lián)定義 (Inline Styles) 內(nèi)聯(lián)定義即是在對象的標(biāo)記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。示例如下： 這一行被增加了左右的外補(bǔ)丁 樣式表語法 (CSS Syntax) Selector { property: value } 參數(shù)說明： Selector -- 選擇符 property : value -- 樣式表定義。屬性和屬性值之間用冒號(:)隔開。定義之間用分號(;)隔開 繼承的值 (The ' Inherit ' Value) 每個屬性都有一個指定的值：Inherit。它的意思是：將父對象的值等同為計算機(jī)值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強(qiáng)調(diào)。 選擇符說明： #表示選擇id .表示選擇class 比如我有個 這時就得用#test{屬性}來給id為test的div來制定樣式 而 則應(yīng)該用.test{屬性}來給其指定樣式。 編輯本段根據(jù)分辨率不同，調(diào)用不同的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文件名. 不判斷分辨率，只判斷瀏覽器 應(yīng)E.Qiang提議，編如下代碼。實(shí)現(xiàn)根據(jù)瀏覽器類型自動調(diào)用不同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，則調(diào)用default.css 如果瀏覽器為Firefox，則調(diào)用default2.css 如果瀏覽器為其他，則調(diào)用newsky.css 用法：放在head/head中即可。 中國專業(yè)css標(biāo)準(zhǔn)化推廣網(wǎng)站 【Div之家】 css 層疊樣式表 引入層疊樣式表的方法包括： 1，外聯(lián)式樣式表 2，內(nèi)嵌樣式表 3，元素內(nèi)定 4，導(dǎo)入樣式表 外聯(lián)式樣式表 例：head link rel="stylesheet" href="/css/default.css" /head body .... /body /html 屬性：rel 用來說明link元素在這里要完成的任務(wù)是連接一個獨(dú)立的css文件。而href屬性給出了所要連接css文件的url地址 內(nèi)嵌式樣式表： 例：html head style type="text/css" !-- td{font:9pt;color:red} .font105{font:10.5pt;color:blue} -- /style /head body..../body /html 元素內(nèi)定 格式： 導(dǎo)入式樣式表 〈html head style type="text/css" !-- @import url(css/home.css); -- /style body .... /body /html

成都創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括梁山網(wǎng)站建設(shè)、梁山網(wǎng)站制作、梁山網(wǎng)頁制作以及梁山網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，梁山網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到梁山省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

簡述 css列表樣式屬性及取值情況

ulli/li/ul有序

ullo/lo/ul無序

屬性：list-style

list-style-type：設(shè)置列表項(xiàng)標(biāo)志的類型（none就是前面沒有小圓點(diǎn)）

list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志。

list-style-position：設(shè)置列表中列表項(xiàng)標(biāo)志的位置 ?

CSS樣式表的定義

我不知道你是剛學(xué)css還是在想知道css怎樣命名，給出下面給你參考一下，如果還有不明白的地方可以跟帖回答。

定義LI前面的小點(diǎn)樣式

view plaincopy to clipboardprint?

語法：

list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

這些語法就是定義LI前面小點(diǎn)的樣式所用到的,當(dāng)然,前面使用小圖標(biāo),效果更是千變?nèi)f化,具體的實(shí)施,就是個人的愛好了

view plaincopy to clipboardprint?

語法：

list-style-image : none | url ( url )

取值：

none :

名詞解釋“CSS樣式”

CSS在英文中有如下幾種常見的縮寫：

1，Cascading Style Sheets 層疊樣式表

2，Content Scrambling System DVD電影的加密系統(tǒng)

3，Cast Semi-Steel 半鑄鋼, 鋼性鑄鐵

4，College Scholarship Service 大學(xué)獎學(xué)金處

其中在網(wǎng)絡(luò)上最常見的是Cascading Style Sheets（層疊樣式表）

什么是Cascading Style Sheets（層疊樣式表）

* CSS是Cascading Style Sheets(層疊樣式表)的簡稱.

* CSS語言是一種標(biāo)記語言,它不需要編譯,可以直接由瀏覽器執(zhí)行(屬于瀏覽器解釋型語言).

* 在標(biāo)準(zhǔn)網(wǎng)頁設(shè)計中CSS負(fù)責(zé)網(wǎng)頁內(nèi)容(XHTML)的表現(xiàn).

* CSS文件也可以說是一個文本文件,它包含了一些CSS標(biāo)記,CSS文件必須使用css為文件名后綴.

* 可以通過簡單的更改CSS文件,改變網(wǎng)頁的整體表現(xiàn)形式,可以減少我們的工作量,所以她是每一個網(wǎng)頁設(shè)計人員的必修課.

* CSS是由W3C的CSS工作組產(chǎn)生和維護(hù)的.

Cascading Style Sheets（層疊樣式表）的歷史

* 1996年W3C正式推出了CSS1.

* 1998年W3C正式推出了CSS2.

* CSS2.1是W3C現(xiàn)在正在推薦使用的.

* CSS3現(xiàn)在還處于開發(fā)中.

網(wǎng)頁設(shè)計中常用的CSS屬性

文字或元素的顏色 color

背景顏色 background-color

背景圖像 background-image

字體 font-family

文字大小 font-size

列表樣式 list

鼠標(biāo)樣式 cursor

邊框樣式 border

內(nèi)補(bǔ)白 padding

外邊距 margin

等...

css可以用任何寫文本的工具進(jìn)行開發(fā),如文本工具,dreamweaver開發(fā)

css也是一種語言,這種語言要和html或者xhtml語言相結(jié)合才起作用,

css簡單來說就是用來美化網(wǎng)頁用的,用css語言來控制網(wǎng)頁的外觀

舉個例子

xhtml部分:

ul

lia href="#"主頁/a/li

lia href="#"留言/a/li

lia href="#"論壇/a/li

/ul

此時在頁面上的表達(dá)形式是一個豎向列表,這樣不夠美觀,

可以css來改善這個列表為一個橫向?qū)Ш綏l和超鏈接

css部分:

ul{list-style:none;margin:0px;padding:0px}

ul li{margin:0px;padding:0px;float:left;}

ul li a{display:block;width:100px;height:30px;background:#efefef;color:#333;text-decoration:none}

ul li a:hover{background:#333;color:#fff;}

添加上css后,這個列表變成橫向的導(dǎo)航條了,超級鏈接是淡色背景,灰色字體,沒有下劃線,高度是30像素,寬度是100像素

當(dāng)我們鼠標(biāo)經(jīng)過這個超級鏈接時候,變成灰色背景,白色字體

如何定義css樣式

有三條途徑可以把CSS應(yīng)用到HTML中去。

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

內(nèi)聯(lián)樣式通過style屬性直接套進(jìn)HTML中去。

看起來像這樣：

p style="color: red"text/p

這將會是指定的段落變成紅色。

我們的建議是，HTML應(yīng)該是獨(dú)立的、樣式自由的文檔，所以內(nèi)聯(lián)樣式無論在什么情況下都應(yīng)該盡量避免。

內(nèi)部

內(nèi)部樣式服務(wù)于整個當(dāng)前頁面。在頭標(biāo)簽head里面，樣式標(biāo)簽style里包含當(dāng)前頁面的所有樣式。

看起來像這樣：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" html head titleCSS Example/title style type="text/css" p { color: red; } a { color: blue; } /style ...

這將使這個頁面的所有段落都是紅色的，所有的連接都是藍(lán)色的。

與內(nèi)聯(lián)樣式類似，你應(yīng)該是HTML文檔和CSS文檔分離開來，下面，我們的救世來了……

外部

外部樣式為整個網(wǎng)站的多個頁面服務(wù)。這是一個獨(dú)立的CSS文檔，簡單的一個范例如下：

p { color: red; } a { color: blue; }

如果這個文檔存為“web.css”的話，它可以這樣跟HTML文檔連接起來：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""

html

head

titleCSS Example/title

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

在CSS高級指南中，我們還將看到其他連接外部樣式表的方法，但到目前，這已經(jīng)足夠了。

想從本指南中收獲更多，嘗試著在你的文本編輯器中新建一個文檔，在HTML文檔相同的目錄中，把這些代碼保存為“web.css”。

現(xiàn)在像下面一樣改進(jìn)你的HTML文檔：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "" html head titleMy first web page/title link rel="stylesheet" type="text/css" href="web.css" / /head ...

保存HTML文檔?，F(xiàn)在已經(jīng)把HTML和CSS連接起來了，但還是空白一片，沒有改變什么東西。隨著進(jìn)一步學(xué)習(xí)CSS初級指南，你可以增添或者改變CSS文檔，通過刷新瀏覽器里的HTML文檔，方便地看到效果，像我們以前做的一樣。

我的個人博客：