css样式表

技術 > css樣式

·No. 1	·No. 2	·什麽是樣式
·如何將樣式加入您的網頁	·根分辨率不同，調用不同的css文件	·更多结果...

No. 1

No. 2

什麽是樣式
　　css是cascading style sheet 的縮寫。譯作「層疊樣式單」。是用於（增強）控網頁樣式允許將樣式信息與網頁內容分離的一種標記性語言。
　　如何將樣式加入您的網頁
　　你可以用以下三方式將樣式加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱important聲明。
　　鏈入外部樣式文件 (linking to a style sheet)
　　你可以先建立外部樣式文件（.css），然使用html的link對象。示例如下：
　　<head>
　　<title>title of article</title>
　　<link rel=stylesheet href="http://www.dhtmlet.com/rainer.css" type="text/css">
　　</head>
　　而在xml中，你應該如下例所示在聲明區中加入：
　　<? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/rainer.css" ?>>
　　定義內部樣式塊對象 (embedding a style block)
　　你可以在你的html文檔的<html>和<body>標記之間插入一個<style>...</style>塊對象。定義方式請參閱樣式語法。示例如下：
　　<html>
　　<style type="text/css">
　　
　　</style>
　　<body>
　　請註意，這裏將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式單。
　　內聯定義 (inline styles)
　　內聯定義即是在對象的標記內使用對象的style屬性定義適用其的樣式屬性。示例如下：
　　<p style="margin-left: 0.5in; margin-right:0.5in">這一行被增加左右的外補丁<p>
　　樣式語法 (css syntax)
　　_select_or { property: value }
　　參數說明：
　　_select_or -- 選擇符
　　property : value -- 樣式定義。屬性和屬性值之間用冒號(:)隔開。定義之間用分號(;)隔開
　　繼承的值 (the ' inherit ' value)
　　每個屬性都有一個指定的值：inherit。它的意思是：將父對象的值等同為計算機值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強調。
　　選擇符說明：
　　#示選擇id
　　.示選擇class
　　比如我有個<div id="test"></div>這時就得用#test{屬性}來給id為test的div來定樣式
　　而<div class="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">
　　
　　</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提議，編如下代碼。實現根瀏覽器類型自動調用不同css。
　　代碼：
　　<script language="javascript">
　　
　　</script>
　　解釋：
　　如果瀏覽器為ie，則調用default.css
　　如果瀏覽器為firefox，則調用default2.css
　　如果瀏覽器為其他，則調用newsky.css
　　用法：放在<head></head>中即可。

什麽是樣式

　　CSS是Cascading Style Sheet 的縮寫。譯作「層疊樣式單」。是用於（增強）控網頁樣式允許將樣式信息與網頁內容分離的一種標記性語言。
　　樣式(CSS：Cascading Style Sheets)學習
　　http://www.cssplay.org.cn/css-tutorial/20080324/319.html

如何將樣式加入您的網頁

你可以用以下三方式將樣式加入您的網頁。而最接近目標的樣式定義優先權越高。高優先權樣式將繼承低優先權樣式的未重疊定義但覆蓋重疊的定義。例外請參閱important聲明。
　　將樣式加入到HTML中
　　http://www.cssplay.org.cn/css-tutorial/20080128/2.html
　　鏈入外部樣式文件 (Linking to a Style Sheet)
　　你可以先建立外部樣式文件（.css），然使用HTML的link對象。示例如下：
　　<head>
　　<title>title of article</title>
　　<link rel=stylesheet href="http://baike.baidu.com/css/font.css" type="text/css">
　　</head>
　　而在XML中，你應該如下例所示在聲明區中加入：
　　<? xml-stylesheet type="text/css" href="http://baike.baidu.com/css/font.css" ?>>
　　定義內部樣式塊對象 (Embedding a Style Block)
　　你可以在你的HTML文檔的<HTML>和<BODY>標記之間插入一個<STYLE>...</STYLE>塊對象。定義方式請參閱樣式語法。示例如下：
　　<html>
　　<style type="text/css">
　　
　　</style>
　　<body>
　　請註意，這裏將style對象的type屬性設置為"text/css"，是允許不支持這類型的瀏覽器忽略樣式單。
　　內聯定義 (Inline Styles)
　　內聯定義即是在對象的標記內使用對象的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">
　　
　　</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提議，編如下代碼。實現根瀏覽器類型自動調用不同CSS。
　　代碼：
　　<SCRIPT LANGUAGE="javascript">
　　
　　</SCRIPT>
　　解釋：
　　如果瀏覽器為IE，則調用default.css
　　如果瀏覽器為Firefox，則調用default2.css
　　如果瀏覽器為其他，則調用newsky.css
　　用法：放在<head></head>中即可。
　　中國專業css標化推網站【Div之】 www.divhome.com
　　=======================================================================
　　css 層疊樣式
　　引入層疊樣式的方法包括：
　　1，外聯式樣式
　　2，內嵌樣式
　　3，元素內定
　　4，導入樣式
　　外聯式樣式
　　例：<head>
　　<link rel="stylesheet" href="/css/default.css">
　　</head>
　　<body>
　　....
　　</body>
　　</html>
　　屬性：rel 用來說明<link>元素在這裏要完成的任務是連接一個獨立的css文件。而href屬性給出所要連接css文件的url地址
　　內嵌式樣式：
　　例：<html>
　　<head>
　　<style type="text/css">
　　
　　</style>
　　</head>
　　<body>....</body>
　　</html>
　　元素內定
　　格式：
　　導入式樣式
　　〈html>
　　<head>
　　<style type="text/css">
　　
　　</style>
　　<body>
　　....
　　</body>
　　</html>
　　css樣式-參數說明
　　Selector -- 選擇符
　　property : value -- 樣式定義。屬性和屬性值之間用冒號(:)隔開。定義之間用分號(;)隔開
　　繼承的值 (The ' Inherit ' Value)
　　每個屬性都有一個指定的值：Inherit。它的意思是：將父對象的值等同為計算機值得到。這個值通常僅僅是備用的。顯式的聲明它可用來強調。
　　css 樣式的命名
　　div+css樣式的id和class的區:就一句來概括, class可以定義多個值且可以應用到多個標簽上，但id能是一個。所以就開始查一些相關的div+css樣式id和class的常用命名規則，請大參考一下：
　　首先講一下div+css樣式的id的常用命名規則
　　頁頭：header 登錄條：loginBar 標志：logo 側欄：sideBar 告：banner導航：nav 子導航：subNav菜單：menu 子菜單：subMenu搜索：search滾動：scroll頁主：main內容：content標簽頁：tab 文章列：list提示信息：msg小技巧：tips欄目標題：title加入：joinus指南：guild服務：service熱點：hot新聞：news下載：download註册：regsiter狀態：status按鈕：btn投票：vote作伴：partner友情鏈接：friendLink頁腳：footer版權：copyRight
　　實際上上的div+css樣式的id命名也會經常用大小寫和_來區分，比如主導航就是MainNav,如果還有必要在區分就是MainNav_1,MainNav_2等等。也可以使用"類型+變量名稱"的規則來命名，比如寫一個紅色字的class,可以.f_red {}(f是font 字的縮寫)。總之原則是：大小寫、_、縮寫，大大增強代碼的可讀性。
　　再講一下div+css樣式的class的常用命名規則
　　外套：wrap 主導航：mainNav 子導航：subnav 頁　腳：footer整個頁：content頁　眉：header 頁　腳：footer 商　標：label 標　題：title 主導航：mainNav（globalNav）邊導航：sidebar 左導航：leftsideBar 右導航：rightsideBar 旗　志：logo 標　語：banner菜單內容：menu1Content 菜單容量：menuContainer 子菜單：submenu 邊導航圖標：sidebarIcon 註釋：note 包屑：breadCrumb(即頁所處位置導航提示）容器：container內容：content搜索：search 登陸：login 功能區：shop(如購物車，收銀) 當前的：current
　　當然像div+css樣式的id和class的命名遠遠不止這些,可能還會有更多的命名,你可以用一些通俗的易懂.容易理解的一些來命名,如果您有更好的div+css樣式的id和class的命名規則的話,請留言，多多指教.