點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

關于css選擇器的那些事

來源：懂視網責編：小采時間：2020-11-27 18:53:49

關于css選擇器的那些事

關于css選擇器的那些事:介紹css選擇器之前，首先讓我們來認識一下css css——層疊樣式表，作為網頁排版神器不斷被web前端學者們推崇著。接下來就讓我們來會會這個吧。1、CSS的特點 HTML 排版時的缺點: 設置麻煩,修改麻煩,功能嚴重不足. CSS 樣式排版的優點: 排版

推薦度：

點擊下載本文 文檔為doc格式

導讀關于css選擇器的那些事:介紹css選擇器之前，首先讓我們來認識一下css css——層疊樣式表，作為網頁排版神器不斷被web前端學者們推崇著。接下來就讓我們來會會這個吧。1、CSS的特點 HTML 排版時的缺點: 設置麻煩,修改麻煩,功能嚴重不足. CSS 樣式排版的優點: 排版

介紹css選擇器之前，首先讓我們來認識一下css

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).外部鏈接實現層疊

(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

關于css選擇器的那些事

推薦度：

點擊下載本文 文檔為doc格式

標簽： css 的那些事那些事

熱門焦點

關于css選擇器的那些事

關于css選擇器的那些事

關于css選擇器的那些事

最新推薦

猜你喜歡

熱門推薦