CSS的引入方式及CSS選擇器
一 CSS介紹
如今的互聯網前端分三層：css
a.HTML：超文本標記語言。從語義的角度描述頁面結構。html
b.CSS：層疊樣式表。從審美的角度負責頁面樣式。前端
c.JS：JavaScript 。從交互的角度描述頁面行爲python
CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。css3
css的最新版本是css3，咱們目前學習的是css2.1瀏覽器
接下來咱們要講一下爲何要使用CSS：網絡
HTML的缺陷：
1.不可以適應多種設備前端工程師
2.要求瀏覽器必須智能化足夠龐大佈局
3.數據和顯示沒有分開學習
4.功能不夠強大
CSS 優勢：
1.使數據和顯示分開
2.下降網絡流量
3.使整個網站視覺效果一致
4.使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）
好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。
二 行內樣式
|
1
2
3
|
<div>
<p style
=
"color: green"
>我是一個段落<
/
p>
<
/
div>
|
三 內接樣式
|
1
2
3
4
5
6
7
8
|
<style
type
=
"text/css"
>
/
*
寫咱們的css代碼
*
/
span{
color: yellow;
}
<
/
style>
|
四 外接樣式
|
1
|
<link rel
=
"stylesheet"
href
=
"./index.css"
>
|
外接樣式之導入式
|
1
2
3
|
<style
type
=
"text/css"
>
@import
url(
'./index.css'
);
<
/
style>
|
五 CSS選擇器
css的選擇器：1.基本選擇器 2.高級選擇器
基本選擇器包含：
1.標籤選擇器
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是 」特性「
|
1
2
3
4
5
6
7
8
9
10
11
12
|
body{
color:gray;
font
-
size:
12px
;
}
/
*
標籤選擇器
*
/
p{
color: red;
font
-
size:
20px
;
}
span{
color: yellow;
}
|
2.id選擇器
# 選中id
同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範 要以字母 能夠有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值
|
1
2
3
4
5
6
7
8
9
10
11
|
#box{
background:green;
}
#s1{
color: red;
}
#s2{
font
-
size:
30px
;
}
|
3.類選擇器
所謂類：就是class . class與id很是類似 任何的標籤均可以加類，可是類是能夠重複,屬於歸類的概念。同一個標籤中能夠攜帶多個類，用空格隔開
類的使用，可以決定前端工程師的css水平到底有多牛逼？
玩類了，必定要有」公共類「的概念。
|
1
2
3
4
5
6
7
8
9
10
11
|
.lv{
color: green;
}
.big{
font
-
size:
40px
;
}
.line{
text
-
decoration: underline;
}
|
|
1
2
3
4
5
6
|
<!
-
-
公共類 共有的屬性
-
-
>
<div>
<p
class
=
"lv big"
>段落
1
<
/
p>
<p
class
=
"lv line"
>段落
2
<
/
p>
<p
class
=
"line big"
>段落
3
<
/
p>
<
/
div>
|
總結：
1.不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
2.每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用
到底使用id仍是用class？
|
1
2
3
|
答案：儘量的用
class
。除非一些特殊狀況能夠用
id
緣由：
id
通常是用在js的。也就是說 js是經過
id
來獲取到標籤
|
六 CSS的高級選擇器
-
後代選擇器
-
子代選擇器
-
並集選擇器
-
交集選擇器
後代選擇器
使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）
|
1
2
3
|
.container>p{
color: yellowgreen;
}
|
子代選擇器
使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。
|
1
2
3
|
.container>p{
color: yellowgreen;
}
|
並集選擇器
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器
|
1
2
3
4
5
6
|
/
*
並集選擇器
*
/
h3,a{
color:
#008000;
text
-
decoration: none;
}
|
好比像百度首頁使用並集選擇器。
|
1
2
3
4
5
|
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,
input
,textarea,th,td {
margin:
0
;
padding:
0
}
/
*
使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用
*
/
|
交集選擇器
使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器 語法：div.active
好比有一個<h4 class='active'></h4>這樣的標籤。
那麼
|
1
2
3
4
5
6
7
8
9
10
11
12
|
h4{
width:
100px
;
font
-
size:
14px
;
}
.active{
color: red;
text
-
decoration: underline;
}
/
*
交集選擇器
*
/
h4.active{
background:
#00BFFF;
}
|
它表示二者選中以後元素共有的特性。
七 CSS的屬性選擇器
屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。
語法：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
1
/
*
根據屬性查找
*
/
2
/
*
[
for
]{
3
color: red;
4
}
*
/
5
6
/
*
找到
for
屬性的等於username的元素 字體顏色設爲紅色
*
/
7
/
*
[
for
=
'username'
]{
8
color: yellow;
9
}
*
/
10
11
/
*
以....開頭 ^
*
/
12
/
*
[
for
^
=
'user'
]{
13
color:
#008000;
14
}
*
/
15
16
/
*
以....結尾 $
*
/
17
/
*
[
for
$
=
'vvip'
]{
18
color: red;
19
}
*
/
20
21
/
*
包含某元素的標籤
*
/
22
/
*
[
for
*
=
"vip"
]{
23
color:
#00BFFF;
24
}
*
/
25
26
/
*
*
/
27
28
/
*
指定單詞的屬性
*
/
29
label[
for
~
=
'user1'
]{
30
color: red;
31
}
32
33
input
[
type
=
'text'
]{
34
background: red;
35
}
|
八 CSS的僞類選擇器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
1
/
*
沒有被訪問的a標籤的樣式
*
/
2
.box ul li.item1 a:link{
3
4
color:
#666;
5
}
6
/
*
訪問事後的a標籤的樣式
*
/
7
.box ul li.item2 a:visited{
8
9
color: yellow;
10
}
11
/
*
鼠標懸停時a標籤的樣式
*
/
12
.box ul li.item3 a:hover{
13
14
color: green;
15
}
16
/
*
鼠標摁住的時候a標籤的樣式
*
/
17
.box ul li.item4 a:active{
18
19
color: yellowgreen;
20
}
|
再給你們介紹一種css3的選擇器nth-child()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
/
*
選中第一個元素
*
/
div ul li:first
-
child{
font
-
size:
20px
;
color: red;
}
/
*
選中最後一個元素
*
/
div ul li:last
-
child{
font
-
size:
20px
;
color: yellow;
}
/
*
選中當前指定的元素 數值從
1
開始
*
/
div ul li:nth
-
child(
3
){
font
-
size:
30px
;
color: purple;
}
/
*
n表示選中全部,這裏面必須是n, 從
0
開始的
0
的時候表示沒有選中
*
/
div ul li:nth
-
child(n){
font
-
size:
40px
;
color: red;
}
/
*
偶數
*
/
div ul li:nth
-
child(
2n
){
font
-
size:
50px
;
color: gold;
}
/
*
奇數
*
/
div ul li:nth
-
child(
2n
-
1
){
font
-
size:
50px
;
color: yellow;
}
/
*
隔幾換色 隔行換色
隔
4
換色 就是
5n
+
1
,隔
3
換色就是
4n
+
1
*
/
div ul li:nth
-
child(
5n
+
1
){
font
-
size:
50px
;
color: red;
}
|
九 CSS的僞元素選擇器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
/
*
設置第一個首字母的樣式
*
/
p:first
-
letter{
color: red;
font
-
size:
30px
;
}
/
*
在....以前 添加內容 這個屬性使用不是很頻繁 瞭解 使用此僞元素選擇器必定要結合content屬性
*
/
p:before{
content:
'alex'
;
}
/
*
在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）
*
/
p:after{
content:
'&'
;
color: red;
font
-
size:
40px
;
}
|
- 1. css-1,css的三種引入方式 基本選擇器
- 2. 表單控件 css的三中引入方式css選擇器
- 3. css引入方式、css選擇器、css語法、css基礎樣式
- 4. CSS引入方式 選擇符詳解
- 5. css的導入方式 基礎選擇器 高級選擇器
- 6. day0820(css概述、css語法分析、選擇器、css引入方式)
- 7. CSS的引入與選擇器
- 8. CSS 選擇器及各樣式引用方式
- 9. 網頁前端 --(CSS選擇器+CSS樣式+CSS盒子模型+CSS引入)
- 10. css -- css選擇器
- 更多相關文章...
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • CSS 指南 - 網站建設指南
- • 常用的分佈式事務解決方案
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。