css基礎精解和實例分析

06-05

css基礎精解和實例分析分類： WEB編程 2004-08-19 09:02 988人閱讀評論(0) 收藏舉報 cssstylesheetdivclassurlborder css就是cascading style sheets層疊樣式表　　一、基本語法　　1、選擇符　　selector {proper: value}　　選擇符 {屬性：值}　　如：body {color: black}　　（body頁面主體部分，color控制的文字顏色屬性，black屬性的值，此例的效果是頁面文字為黑色。）　　　　如果屬性的值由多個單片語成，必須加引號，如　　p {font-family: 「sans serif「}　　　　如果一個選擇符指定多個屬性時，用分號分開，如　　p {text-align: center; color: black}　　為了便於閱讀，分行書寫　　p {text-align: center;　　 color: black;　　 font-family: arial}　　（段落居中排列，段落中文字為黑色，字體為arial）　　　　2、選擇符組　　把相同屬性和值的選擇符組合起來，用逗號分開，如　　h1,h2,h3,h4,h5,h6 {color: green}　　（以上所有標題的顏色為綠色）　　p,table {font-size: 9pt}　　（段落和表格了的文字尺寸為9號字）　　等價於p {font-size: 9pt}　　 table {font-size: 9pt}　　　　3、類選擇符　　如你想要兩個不同的段落，一個向右對齊，一個居中，你可以先定義兩個類　　p.right {text-align: right}　　p.center {text-align: center}　　然後用在不同的段落里，只要在HTML標記里加入你定義的class參數：　　<p class=「right「>段落向右對齊</p>　　<p class=「center「>段落居中對齊</p>　　類的名稱可以為任何英文單詞或英文開頭與數字的組合　　　　類選擇符的另一個用法是在選擇符中省略html標記名，這樣可以把幾個不同的元素定義成相同的樣式：　　.center {text-align: center}（定義.center為文字居中排列）　　這樣的類可以應用到任何元素，如：　　<h1 class=「center「>這個標題居中排列</h1>　　<p class=「center「>這個段落居中排列</p>　　　　4、ID選擇符　　定義ID選擇符要在ID名稱前加一「#」號，黑類選擇符一樣也有兩個方法。　　下面的例子只匹配id=「intro「的段落元素：　　p#intro　　{　　font-size: 100%;　　font-weight: bold;　　color: #0000ff　　background-color: transparent　　}　　（該段落的字體尺寸為默認尺寸的110%；粗體；蘭色，背景顏色透明）　　下面的例子，id屬性匹配所有的id=「intro「的元素：　　#intro　　{　　font-size: 100%;　　font-weight: bold;　　color: #0000ff　　background-color: transparent　　}　　　　5、包含選擇符　　可以對某元素包含關係定義，元素1包含元素2，這種方式對元素1里的元素2定義，對元素1或元素2沒有定義，如：　　table a 　　{　　font-size: 12px　　}　　在表格內的鏈接文字為12像素，而表格外的鏈接文字仍為默認大小。　　　　6、樣式表的層跌性　　層跌性就是繼承性，例如在div標記中嵌套p標記：　　div {color: red; font-size:9pt}　　...　　<div>　　<p>　　這個段落的文字為紅色9號字　　</p>　　</div>　　（p元素的內容繼承div定義的屬性）　　當樣式表的繼承有衝突時，以最後定義的為準，如：　　div {color: red; font-size:9pt}　　p {color: blue}　　...　　<div>　　<p>　　這個段落的文字為藍色9號字　　</p>　　段落里的文字繼承了div屬性，而color屬性依照最後的定義。　　　　優先順序!important > id選擇符 > 類選擇符 > 選擇符，如：　　p. {color: #FF0000 !important}　　.blue {color: #0000FF}　　#id1 {color: #FFFF00}　　我們同時對一個段落加上這個3個樣式，它最後會依照!important申明為紅色文字，如果去掉!important則依照優先權id選擇符為黃色文字。　　　　7、注釋　　注釋便於閱讀，不會在瀏覽器中顯示，如　　/* 定義段落樣式 */　　p　　{　　text-align: center; /* 文本居中排列 */　　color: black /* 文字為黑色 */　　font-family: /*字體為arial */　　}　　　　二、偽類——動態鏈接　　1、語法　　selector:pseudo-class {property: value}　　選擇符：偽類{屬性：值}　　　　類選擇符及其他選擇符可以和偽類混用　　selector.class:pseudo-class {property: value}　　選擇符.類：偽類{屬性：值}　　　　2、錨的偽類　　最常用的4中a(錨)元素的偽類　　a:link {color: #FF0000; text-decoration: none} /* 未訪問的鏈接 */　　a:visited {color: #00FF00; text-decoration: none} /* 已訪問的鏈接 */　　a:hover {color: #FF00FF; text-decoration: underline} /* 滑鼠在鏈接上 */　　a:active {color: #0000FF; text-decoration: underline} /* 激活鏈接 */　　上面的例子中，這個鏈接位訪問為紅色無下劃線，訪問時為綠色無下劃線，激活時為藍色有下劃線，滑鼠在鏈接上時為紫色有下劃線。　　　　3、偽類和類選擇符的組合　　我們定義一組連接為紅色，訪問後為蘭色，另一組為綠色，訪問後為黃色　　a.red:link {color: #FF0000}　　a.red:visited {color: #0000FF}　　a.blue:link {color: #00FF00}　　a.blue:visited {color: #FF0000}　　應用　　<a class=「red「 href=「...「>第一組連接</a>　　<a class=「blue「 href=「...「>第二組連接</a>　　　　4、其他偽類　　首字和首行（frist-letter和frist-line），ie5.5以上支持。　　<style type=「text/css「>　　p:frist-letter {font-size: 300%}　　</style>　　...　　<p>　　這個段落的首字為默認的300%　　</p>　　---------------　　<style type=「text/css「>　　div:first-line {color: red}　　</style>　　...　　<div>　　<p>　　這個段落第一行　　第二行　　第三行　　</p>　　</div>　　（段落第一行為紅色，第2，3行為默認顏色）　　　　三、如何在網頁中插入css　　1、鏈入外部樣式表，如　　<head>　　...　　<link rel=「stylesheet「 type=「text/cs「 href=「mystyle.css「>　　...　　</head>　　表示從mystyle.css文件中讀出定義的樣式表，rel=「stylesheet「指頁面中使用的是外部樣式表，type=「text/cs「指文件的類型為樣式表文本　　　　。 href=「mystyle.css「是文件所在的位置。一個外部樣式表可以應用多個頁面，樣式表文件可以用記事本編輯，擴展名為css。　　　　2、內部樣式表　　<head>　　<style type=「text/css「>　　　　</style>　　</head>　　　　3、導入外部樣式表　　<head>　　<style type=「text/css「>　　　　</style>　　</head>　　導入外部樣式表必須在其他內部樣式表的上面　　　　4、內嵌樣式　　<p style=「color: sienna; margin-left:20px「>　　...　　</p>　　這個段落顏色為土黃，左邊距為20像素　　　　5、多重樣式表疊加　　優先順序　　內嵌樣式〉內部樣式（鏈入外部樣式表，二者按最後定義確定優先順序〉導入外部樣式表　　　　四，實例分析　　1、某index.css源碼分析　　<style type=「text/css「>　　　　</style>　　　　2、某style.css源碼分析　　A　　{　　TEXT-DECORATION: none;　　}　　A:hover　　{　　COLOR: #0099FF;　　}　　A:link {　　color: #205064;　　}　　A:visited {　　color: #006699;　　}　　/* 定義4個常用錨 */　　BODY　　{　　FONT-FAMILY: 宋體;　　FONT-SIZE: 9pt;　　text-decoration: none;　　line-height: 150%;　　background-color: #FBFDFF;　　}　　TD　　{　　FONT-FAMILY:宋體;　　FONT-SIZE: 9pt;　　}　　Input　　{　　FONT-SIZE: 9pt;　　HEIGHT: 20px;　　}　　/* 定義輸入框 */　　Button　　{　　FONT-SIZE: 9pt;　　HEIGHT: 20px; 　　}　　/* 定義按鈕 */　　Select　　{　　FONT-SIZE: 9pt;　　HEIGHT: 20px;　　}　　/* 定義選擇框 */　　.border　　{　　border: 1px solid #CCCCCC;　　}　　/* 定義邊界類 */　　.border2　　{　　background:#fef8ed;　　BORDER-RIGHT: #999999 1px solid; 　　BORDER-LEFT: #999999 1px solid　　}　　.title　　{　　 background:#f6f6f6;　　　　}　　/* 定義標題類 */　　.title_left　　{　　background:url(images/left_bg.gif);　　}　　.title_right　　{　　background:url(images/right_bg.gif);　　}　　/* 定義標題類的背景圖片 */　　.title_main　　{　　background:url(Images/jiaodian_bg.gif);　　}　　.tdbg{　　background:#FFFFFF;　　line-height: 120%;　　}　　/* 定義td標記類的 */　　.tdbg_left{　　background:#fef8ed;　　line-height: 150%;　　}　　.tdbg_right{　　background:#EAF1FB;　　line-height: 150%;　　}　　.tdbg_main{　　background:#ffffff;　　line-height: 150%;　　}　　.topborder　　{　　border-right: 1px solid #6687BA;　　border-left: 1px solid #6687BA;　　border-bottom: 1px solid #6595D6;　　width: 760px;　　}　　.nav_top　　{　　background-image: url(Skin/1/topbg.gif);　　}　　.nav_bottom　　{　　background-image: url(Skin/1/bottombg.gif);　　}　　.nav_menu　　{　　background:url(Skin/1/topBar_bg.gif);　　}　　.menu　　{　　background-color: #F0F9FF;　　width:97%;　　border: 1px;　　}　　/* 定義菜單類 */　　td.MenuBody　　{　　background-color: #F0F9FF;　　}　　這個其實大都是他根據自己具體情況定義的類選擇符，注釋倒成了畫蛇添足，如果要更改某一種樣式可以根據他定義的類選擇符到標記中更改　　　　相關的類選擇符的屬性值。　　<!--　　青風劍客製作整理，保留所有權利。　　原創新動力網http://www.jalihh.com　　e-mail:jalihh@21cn.com　　--〉　　　　這個是我根據以前的筆記一個字一個字敲的，不可謂不經典，希望對大家有點幫助，如果你掌握了這些知識，別人的ccs文件大都能被你看穿和利用：）　　再結合蘇沈小雨的css中文手冊，css就沒有什麼了。我上傳了供大家下載，地址：http://www.jagl.com.cn/soft/css2.0.chm這個我常用的一個很好的編輯器TopStyle Lite2.10,附帶了幾個不錯英文注釋的css例子。　　我上傳了供大家下載，地址：http://www.jagl.com.cn/soft/TopStyle2.rar

上一篇windows系統錯誤的詳細說明(2)

下一篇ASP.NET組件編程step by step

主題推薦: 實例 css stylesheet cascading 瀏覽器

猜你在找

準備好了么？跳吧！更多職位盡在CSDN JOB: C#.net開發工程師深圳市珠寶之星科技有限公司|10-15K/月我要跳槽; .net、VB、C#研發工程師暢捷通信息技術股份有限公司|10-20K/月我要跳槽; .NET北京中微信通網路科技有限公司|5-10K/月我要跳槽; Software .NET (C#/ASP/VB) Developer上海瀚納仕人才管理諮詢有限公司|15-26K/月我要跳槽

查看評論暫無評論