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 選擇器和類選擇器. 一直以來,許多開發人員經常將 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.gxlcms.com/">
<link rel=”stylesheet” type=”text/css” href="http://www.gxlcms.com/">
<link rel=”stylesheet” type=”text/css” href="http://www.gxlcms.com/">
(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;
/*選中所有行*/
}聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
