CSS基礎和選擇器

時間 2019-11-30

標籤 css 基礎選擇器欄目 CSS 简体版

原文原文鏈接

什麼是CSS?

CSS是指層疊樣式表(Cascading Style Sheets)，樣式定義如何顯示HTML元素，樣式一般又會存在於樣式表中。也就是說把HTML元素的樣式都統一收集起來寫在一個地方或一個CSS文件裏。css

css的優點

1.內容與表現分離html

2.網頁的表現統一，容易修改瀏覽器

3.豐富的樣式，使頁面佈局更加靈活網絡

4.減小網頁的代碼量，增長網頁瀏覽器速度，節省網絡帶寬佈局

5.運用獨立頁面的css,有利於網頁被搜索引擎收錄字體

CSS語法

CSS基礎語法

CSS語法能夠分爲兩部分：搜索引擎

選擇器
聲明

聲明由屬性和值組成，多個聲明之間用分號分隔。spa

CSS註釋

註釋是代碼之母。code

/*這是註釋*/

網頁中引用CSS樣式

內聯樣式
行內樣式表
外部樣式表

內嵌方式

style標籤htm

<html>
    <head>
        <meta charset="utf8">
        <style>
            p {
                color: red;
            }
        </style>
    </head>
    <body>
        <p>這是一個p標籤！</p>
    </body>
</html>

行內樣式

<html>
<head>
<meta charset="utf8">
</head>
<body>
<p style="color: blue;">這是一個p標籤！</p>
</body>
</html>

外聯樣式表-連接式

link標籤

index.css

p {
  color: green;
}

而後在HTML文件中經過link標籤引入：

<html>
    <head>
        <meta charset="utf8">
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <p>這是一個p標籤！</p>
    </body>
</html>

基礎選擇器

在一個HTML頁面中會有不少不少的元素，不一樣的元素可能會有不一樣的樣式，某些元素又須要設置相同的樣式，

選擇器就是用來從HTML頁面中查找特定元素的，找到元素以後就能夠爲它們設置樣式了。選擇器爲樣式規則指定一個做用範圍。

基礎選擇器包括：

標籤選擇器
類選擇器
ID選擇器
通用選擇器

標籤選擇器

經過標籤名來選擇元素：

示例：

p {
  color: red;
}

將全部的p標籤設置字體顏色爲紅色。

ID選擇器

經過元素的ID值選擇元素：

示例：

#i1 {
  color: red;
}

將id值爲i1的元素字體顏色設置爲紅色。

類選擇器

經過樣式類選擇元素：

示例：

.c1 {
  color: red;
}

將全部樣式類含.c1的元素設置字體顏色爲紅色。

通用選擇器

使用*選擇全部元素：

* {
  color: black;
}

`組合選擇器`

後代選擇器

由於HTML元素能夠嵌套，因此咱們能夠從某個元素的後代查找特定元素，並設置樣式：

div p {
  color: red;
}

從div的全部後代中找p標籤，設置字體顏色爲紅色。

兒子選擇器

div>p {
  color: red;
}

從div的直接子元素中找到p標籤，設置字體顏色爲紅色。

毗鄰選擇器

div+p {
  color: red;
}

找到全部緊挨在div後面的第一個p標籤，設置字體顏色爲紅色。

兄弟選擇器

div~p {
  color: red;
}

找到全部div標籤後面同級的p標籤，設置字體顏色爲紅色。

並集選擇器

div,p{

　　color:red;

}

選擇全部<div>元素和<p>元素標籤，設置字體顏色爲紅色。

屬性選擇器

除了HTML元素的id屬性和class屬性外，還能夠根據HTML元素的特定屬性選擇元素。

根據屬性查找

[title] {
  color: red;
}

根據屬性和值查找

找到全部title屬性等於hello的元素：

[title="hello"] {
  color: red;
}

找到全部title屬性以hello開頭的元素：

[title^="hello"] {
  color: red;
}

找到全部title屬性以hello結尾的元素：

[title$="hello"] {
  color: red;
}

找到全部title屬性中包含（字符串包含）hello的元素：

[title*="hello"] {
  color: red;
}

找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：

[title~="hello"] {
  color: red;
}

表單經常使用

input[type="text"] {
  backgroundcolor: red;
}

僞類選擇器

a:link（沒有接觸過的連接）,用於定義了連接的常規狀態。

        a:hover（鼠標放在連接上的狀態）,用於產生視覺效果。
        
        a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接。
        
        a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態。
        
        僞類選擇器 : 僞類指的是標籤的不一樣狀態:
        
                   a ==> 點過狀態 沒有點過的狀態 鼠標懸浮狀態 激活狀態
        
        a:link {color: #FF0000} /* 未訪問的連接 */
        
        a:visited {color: #00FF00} /* 已訪問的連接 */
        
        a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
        
        a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

before after僞類

 :before    p:before       在每一個<p>元素以前插入內容     
 :after     p:after        在每一個<p>元素以後插入內容

例子

<html>
	<head>

<meta charset="utf-8">

<title>PHP中文網</title>

<style type="text/css">

 /*沒訪問以前*/
        a:link{
            color: red;
        }
        /*鼠標放在連接上的狀態*/
        a:hover{
            color: green;
        }
        /*訪問事後*/
        a:visited{
            color:black;
        }
        /*鼠標點擊的時候*/
        a:active{
            color: blue;
        }

        /*在p標籤屬性爲c2的後面加上內容*/
        p.c2:after{
            content: 'hello';
            color: pink;
        }

        /*在全部的p標籤的前面加上內容*/
        p:before{
            content: '僞類';
            color: green;
        }
</style>

</head>

<body>

<a href="#">css中文網</a>
<p>你hao</p>
<p class="c2">你好</p>
</body>
</html>

css優先級和繼承

css的繼承

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。

例如一個BODY定義了的顏色值也會應用到段落的文本中。

body{color:red;}       <p>hello</p>

這段文字都繼承了由body {color:red;}樣式定義的顏色。

然而CSS繼承性的權重是很是低的，是比普通元素的權重還要低的0。

p{color:green}

css的優先級

所謂CSS優先級，便是指CSS樣式在瀏覽器中被解析的前後順序。

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：

1 內聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100

3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

4 統計選擇符中的HTML標籤名個數。 p －－－－－－－－－－－－－-－1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較。

一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。
   
二、有!important聲明的規則高於一切。

三、若是!important聲明衝突，則比較優先權。

四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

五、由繼承而獲得的樣式沒有specificity的計算，它低於一切其它規則(好比全局選擇符*定義的規則)。

`demo`

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>層疊性</title>
	<style type="text/css">
		/*1  0  0*/
		#box{
			color: red;
		}
		/*0  1  0*/
		.container{
			color: yellow;
		}
		/*0  0  1*/
		p{
			color: purple;
		}
	</style>
</head>
<body>
	
	<!-- 
		層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了
		權重： 誰的權重大，瀏覽器就會顯示誰的屬性
		
		誰的權重大？  很是簡單   數數
				
		id的數量  class的數量  標籤的數量


	 -->
	<p id="box" class="container">
		猜猜我是什麼顏色
	</p>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。