css——層疊樣式表，作為網頁排版神器不斷被web前端學者們推崇著。。。
接下來就讓我們來會會這個吧。。
1、CSS的特點
HTML 排版時的缺點:
設定麻煩,修改麻煩,功能嚴重不足.
CSS 樣式排版的優點:
排版屬性功能完整,排版檔案可以獨立存在,可以共用排版檔案
CSS 樣式排版的分類:
內聯排版樣式,內嵌式排版樣式,外鏈排版
2、CSS的排版樣式
行內排版樣式:
格式:<標記名稱 style=”屬性 1:屬性值 1;屬性 2:屬性值 2”>…</標記名稱>
例:<p style=”font-size:20pt;color:red;text-align:center”>排版樣式</p>
內嵌排版樣式：
內嵌式排版中所有的樣式定義都必須在<style>..</style>之間,而<style>..</style>又 必須在<head>..</head>之間.
與其功能,又可以分為三種,
1.標記定義型
2.class 定義型
3.id 定義型
標記定義型格式:
<head> <style type=”text/css”> 標記名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} 標記名稱{屬性 1:屬性值 2;屬性 2:屬性值 2;} </style> </head> <body> <標記名稱>…</標記名稱> </body> class 定義型格式: <head> <style type=”text/css”> .定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} .定義名稱 1,.定義名稱 2{屬性 1:屬性值 1;屬性 2:屬性值 2;} </style> </head> <body> <標記名稱 class=”定義名稱”>…</標記名稱> </body> id 定義型格式: <head> <style> #定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} #定義名稱 1,#定義名稱 2{屬性 1:屬性值 1;屬性 2:屬性值 2;} </style> </head> <body> <標記名稱 id=”定義名稱”>…</標記名稱> </body> 外部排版樣式定義: 獨立的樣式排版: 標記名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} .定義名稱{屬性 1:屬性值 1;屬性 2:屬性值 2;} 在<head>…</head>之間使用<link> 格式: <head> <link rel=”stylesheet” type=”text/css” href="http://www.php1.cn/"> </head> 在<head>…</head>之間使用 import 格式： <head> <style type="text/css"> @import "style.css" </style> </head>
介紹完CSS排版樣式之後。。。。接下來就讓我們來看看CSS中那些個強大的選取器吧
1、萬用字元選取器，也叫全體選取器——（作用於整個網頁）
*{ font-size:13px; font-family:"微軟雅黑","華文楷體"; }
2、元素選取器
p,h1,h2,h3,a{ font-size:13px; }
3、ID與類
選取器是用於控制頁面設計的樣式.包含 識別碼選取器和類別選取器. 一直以來,許多開發人員經常將 ID 與類混淆,或者不能正確的使用這兩種選取器,或者簡 單的認為是一個代替另一個.這種認知是及其錯誤的.
(1).應用ID
每個 ID 在一個頁面中只能使用一次,作為某個元素的唯一識別碼.一般情況下,ID 只 用於頁面的唯一元素,如頁首,主導航條,布局區塊等.
樣本:<p id=”hightlight”>This paragraph has red text.</p>
相應的 CSS 代碼:
#hightlight{ color:#FFFFFF; }
(2).將 ID與選取器結合
/*適合所有 h2 標題*/
h2{ color:#333; font-size:16px; }
/*只適合 title 的 h2 標題*/
h2#title { color:#eee; }
相應的 HTML 程式碼:
<h2>Title Of My Article</h2> <h2 id=”title”>Title Of My Article</h2>
(3).ID的使用場合
對於每個 ID,每個頁面只能有一個元素使用該樣式,因此 ID 應該為每個頁面唯一存 在並僅使用一次的元素不保留,
(4).避免使用 ID的場合 當一個以上的地方需要使用同一 CSS 規則時,不應該使用 ID.
(5).應用類 類可以無限次的使用,因此它是應用 CSS 的非常靈活的方法.
<p class=”hightlight”>his paragraph has red text.</p>
相關 CSS 代碼:
.hightlight {color:FFFFFF; }
(6).結合多個類和 ID 範例:
<ul id=”drinks”> <li class=”mix”>Beer</li> <li class=”mix”>Spirtis</li> <li class=”hot”>Cola</li> <li class=”hot”>Lemonade</li> </ul>
相應的 CSS 代碼:
ul#drinks { color:FF6600; } .mix { Color:#999999; } .hot { Color:#333333; } (7).利用類改寫基本樣式: p{Color:#ff6600; } .bleached {Color:#ccc; }
相應的 HTML 程式碼:
<p>This paragraph has red text.</p> <p class=”bleached”>This paragraph has red text.</p>
(8).直接將類連結到元素上
p.bleached {color:red; }
相應的 HTML 程式碼:
<p class=”bleached”>This paragraph has red text.</p>
(9).對於 class,如果多次重複使用或者使用子類別選取器，那麼就選擇 class，如果是定義 唯一性的標記，比如布局，那麼用 id。
4、 層疊
(1).外部連結實現層疊
<link rel=”stylesheet” type=”text/css” href="http://www.php.cn/">
<link rel=”stylesheet” type=”text/css” href="http://www.php.cn/">
<link rel=”stylesheet” type=”text/css” href="http://www.php.cn/">
(2).匯入樣式實現層疊
@import url(“one.css”)
@import url(“two.css”)
@import url(“three.css”)
注意點:必須牢記一個規則,越晚給的規則越重要.
5、 分組
h1{ Font-family:隸書,宋體,楷體; Line-height: 140%; Color:#333; } h2{ Font-family:隸書,宋體,楷體; Line-height: 140%; Color:#333; } h3{ Font-family:隸書,宋體,楷體; Line-height: 140%; Color:#333; } /*分組後*/ h1,h2.h3{ Font-family:隸書,宋體,楷體; Line-height: 140%; Color:#333; } /*分組例外*/ h1{ Font-style:italic; }
6、 繼承
h1 { Color:#333; } <h1>This is thegreatest heading <i>in the world</i></h1> 從 BODY 繼承 Body { Margin:10px; Font-family:隸書; Background:#000; Color:#fff; }
7、 上下文選取器
h1{ Color: #ccc; } I { Color:#000; } /*使用上下文選取器*/ h1 I { Color:#000; }
8、 子類別選取器
.box { color:red; } .box1 { font-weight:bold; } .box2 { font-style:italic; } <div class="box">Box</div> <div class="box box1">Box1</div> <div class="box box2">Box2</div>
9、 其他選取器
(1).元素選取器
p{color:black;}
a{text-decoration:underline;}
h1{font-weight:bold;}
(2).後代選取器
h2 i{color:red; }
li a{text-decoration:none;}
#main h1{Color:red;}
(3).偽類
a:link{color:blue;}
a:visited{color:green;}
a:hover,a:active{color:red;}
input:focus{background-color:yellow;}
(4).進階選取器
進階選取器,目前支援還不太完善,所以,對於網站功能很重要的任何元素上,應該避 免使用這些進階選取器.
10、子選取器和相鄰同胞選取器
子選取器
#nav > li { background:url(bg.gif) no-repeat left top; } <ul id="nav"> <li>Home</li> <li> <ul> <li>Development</li> <li>Consultancy</li> </ul> </li> <li>Contact Us</li> </ul>
相鄰同胞選取器:
h1+p{font-weight:bold;} <h1>Main Heading</h1> <p>First Paragraph</p> <p>Second Paragraph</p>
11、屬性選取器
<strong title=”Cascading Style Sheets”>CSS</strong> strong[title] {border-bottom: 1px dotted #999;} strong[title]:hover {cursor:help;background:#ccc} 12、針對清單項目特別好用的兩個偽類別選取器： ol li:first-child{ /*選中ol下面的第一個li*/ } ol li:last-child{ /*選中ol下面的一最後一個li*/ } CSS3選取器新特性 a[href$='.jsp']{ /*所有a標籤中href屬性為.jsp結尾的被選中*/ } a[href^='asd]{ /*所有a標籤中href屬性為asd開頭的被選中*/ } a[href*='asd]{ /*所有a標籤中href屬性中包含asd的被選中*/ }
選擇表中的行：
tr:nth-of-type(even){ background-color:red; /*選中偶數行*/ } tr:nth-of-type(odd){ background-color:red; /*選中奇數行*/ } tr:nth-of-child(n){ background-color:red; /*選中所有行*/ }
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
