玩轉CSS的前生今生與基礎語法，選擇器的使用

1.爲什麼需要CSS?

HTML 標籤原本被設計爲用於定義文檔內容。通過使用 <h1>、<p>、<table> 這樣的標籤，HTML 的初衷是表達“這是標題”、“這是段落”、“這是表格”之類的信息。同時文檔佈局(比如字體啥顏色，是否縮進等樣式)由瀏覽器來完成，而不使用任何的格式化標籤。由於兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標籤和樣式（如字體標籤和顏色屬性）添加到 HTML 規範中，創建文檔內容清晰地獨立於文檔表現層的站點變得越來越困難。

爲了解決這個問題，萬維網聯盟（W3C），這個非營利的標準化聯盟，肩負起了 HTML 標準化的使命，並在 HTML 4.0 之外創造出樣式（Style）。目前所有的主流瀏覽器均支持層疊樣式表。爲了讓網頁元素的樣式更加豐富，也爲了讓網頁的內容和樣式能拆分開，CSS由此思想而誕生，CSS是 Cascading Style Sheets 的首字母縮寫，意思是層疊樣式表。有了CSS，html中大部分表現樣式的標籤就廢棄不用了，html只負責文檔的結構和內容，表現形式完全交給CSS，html文檔變得更加簡潔,也將文檔的顯示樣式和結構內容實現瞭解耦，開發起來更加靈活。

樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標籤和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個簡單的 CSS 文檔，外部樣式表使你有能力同時改變站點中所有頁面的佈局和外觀。由於允許同時控制多重頁面的樣式和佈局，CSS 可以稱得上 WEB 設計領域的一個突破。作爲網站開發者，你能夠爲每個 HTML 元素定義樣式，並將之應用於你希望的任意多的頁面中。如需進行全局的更新，只需簡單地改變樣式，然後網站中的所有元素均會自動地更新。

2.什麼是CSS

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素，比如字體顏色，大小，是否加粗，縮進等樣式。
樣式通常存儲在樣式表中，這樣文檔的樣式實現了與內容解耦開發。
把樣式添加到 HTML 4.0 中，是爲了解決內容與表現分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲在 CSS 文件中
多個樣式定義可層疊爲一混合使用，一個樣式表也可以渲染多個文檔內容模塊

3.CSS的使用

3.1 css基本語法

選擇器是將樣式和頁面元素關聯起來的名稱(如標籤名），屬性是希望設置的樣式屬性每個屬性有一個或多個值

選擇器 { 屬性:值; 屬性:值; 屬性:值;}

3.2CSS頁面引入的方法

1、外聯式：通過link標籤，鏈接到外部樣式表到頁面中

<link rel="stylesheet" type="text/css" href="css/main.css">

一般HTML文檔內容和渲染其的樣式表分開文件存儲，如下，在當前文件夾CSS下，新建一個main.css文件，在裏面寫上對div模塊文檔樣式的渲染語法如下:

div{
	font-size:20px;
	color:red;
}

2、嵌入式：通過style標籤，在網頁上創建嵌入的樣式表

這種用法一般可以在網站的首頁中使用，將樣式表直接嵌入到HTML,有利於性能的優化，這樣用戶在訪問網頁首頁的時候可以快速進行加載，比如淘寶網首頁就是如此使用。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、內聯式：通過標籤的style屬性，在標籤上直接寫樣式

這種方式不需要選擇器，直接通過屬性的方式實現樣式內嵌。

<div style="width:100px; height:100px; color:red ">......</div>

下面演示3種CSS頁面引入方法的使用，這樣CSS的使用，將文檔的內容與樣式解耦了，HTML只負責了文檔的結構和內容，CSS負責文檔內容的樣式渲染。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <!-- 第一種插入樣式的方式 外鏈式  -->
	<link rel="stylesheet" type="text/css" href="css/main.css">

	 <!-- 第二種插入樣式的方式 內嵌式  -->
	<style type="text/css">		
		h1{ <!--這裏選擇器h1表示對所有h1標籤進行渲染。-->
			font-size:20px;
			color:gold;
		}

	</style>

</head>
<body>

	<h1>頁面標題</h1>
	<div>這是一個div標籤</div>

	<!-- 第三種插入樣式的方式 行內樣式   -->
	<a href="http://www.baidu.com" style="font-size:20px;color:pink">百度一下</a>
</body>
</html>

3.3 常用的應用文本的css樣式

color 設置文字的顏色，如： color:red;
css顏色值主要有三種表示方法：

1、顏色名錶示，比如：red 紅色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示紅色

3、16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
font-size 設置文字的大小，如：font-size:12px;默認大小是16px.
font-family 設置文字的字體，如：font-family:'微軟雅黑';
font-style 設置字體是否傾斜，如：font-style:'normal'; 設置不傾斜，font-style:'italic';設置文字傾斜
font-weight 設置文字是否加粗，如：font-weight:bold; 設置加粗 font-weight:normal 設置不加粗
line-height 設置文字的行高，設置行高相當於在每行文字的上下同時加間距，如：line-height:24px;

font 同時設置文字的幾個屬性，寫的順序有兼容問題，建議按照如下順序寫： font：是否加粗字號/行高字體；如： font:normal 12px/36px '微軟雅黑';
text-decoration 設置文字的下劃線，如：text-decoration:none; 將文字下劃線去掉
text-indent 設置文字首行縮進，如：text-indent:24px; 設置文字首行縮進24pxtext-align 設置文字水平對齊方式，如text-align:center 設置文字水平居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>常用文本樣式</title>
	<style type="text/css">
		div{  <!--多所有div標籤進行格式渲染-->
			
			color:green;

			/* font-size:20px;
			font-family:'Microsoft Yahei';	
			line-height:40px; */

			font:normal 20px/40px 'Microsoft Yahei';

			/* text-decoration:underline; */

			text-indent:40px;

		}
		em{   <!--對所有em標籤進行格式渲染-->
			font-style:normal;
			color:gold;
		}
		span{   <!--對所有span標籤進行格式渲染-->
			color:red;
			font-size:30px;
		}
		h1{   <!--對所有h1標籤進行格式渲染-->
			font-weight:normal;
            color:#ffff00;
		}
		a{   <!--對所有a標籤進行格式渲染-->
			text-decoration:none;
			text-align:center;
		}

		p{
			text-align:center;
		}

	</style>
</head>
<body>
	<h1>樣式演示</h1>
    <h1>樣式演示1</h1>
	<div>
		<span>HTML</span>是 <em>HyperText Mark-up Language</em> 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標籤，是一種用來製作網頁的語言，這種語言由一個個的標籤組成，用這種語言製作的文件保存的是一個文本文件，文件的擴展名爲html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標籤描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
	</div>

	<p>這是一個p標籤1</p>
    <p>這是一個p標籤2</p>

	<a href="http://www.baidu.com">百度網的鏈接</a>


</body>
</html>

3.4 css選擇器的使用詳解

上面使用我們大致知道了，CSS樣式嵌入頁面的3種方式，其中嵌入式使用的就是選擇器進行樣式嵌入。所謂的選擇器就是一個我們指定的的需要渲染模塊的名稱，上面一般使用的選擇器名稱就是HTML標籤名稱，基於HTML的標籤模塊進行格式渲染，但是實際效果來說，範圍還是太大，比如div選擇器，會對所有的div模塊進行統一格式樣式，那就有點過了。

1、標籤選擇器

標籤選擇器，此種選擇器影響範圍大，建議儘量應用在層級選擇器中。
舉例：

*{margin:0;padding:0}
div{color:red}   


<div>....</div>   <!-- 對應以上兩條樣式 -->
<div class="box">....</div>   <!-- 對應以上兩條樣式 -->

2、id選擇器

通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設置項只能對應於頁面上一個元素，不能複用，id名一般給程序使用，所以不推薦使用id作爲選擇器。
舉例：

#box{color:red} 

<div id="box">....</div>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 -->

3、類選擇器

通過類名來選擇元素，一個類可應用於多個元素，一個元素上也可以使用多個類，應用靈活，可複用，是css中應用最多的一種選擇器。
舉例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

下面就籤選擇器，id選擇器和類選擇器的綜合使用案例如下：注意如果同一個內容通過標籤選擇器，id選擇器，類選擇器同時修飾，後者會覆蓋前者的樣式。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css選擇器</title>
	<style type="text/css">
		*{  /* 表示渲染所有的標籤格式*/
			font-size:30px;
		}
		div{
			color:red;
		}
		#div1{ 
			color:blue;
		}
		#div2{   /* #div1表示id選擇器的id是div*/
			color:blue;
		}

		.green{  		/* 注意類選擇器是通過.類名的形式表現的,嵌入是通過標籤class屬性的形式引入的 */
			color:pink;
		}
		.big{
			font-size:40px;
		}
	</style>
</head>
<body>
	<div>這是第1個div</div>
	<div id="div1" >這是第2個div</div>
	<div id="div2" class="green big">這是第3個div</div>
	<div class="green big">這是第4個div</div>
	<div>這是第5個div</div>
	<p class="green">這是一個p標籤</p>
</body>
</html>

結果顯示如下：

4、層級選擇器

主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.box{
			font-size:20px;
			line-height:30px;
			text-indent:40px;
		}

		.box span{
			color:red;
			font-weight:bold;
		}

		.box em{
			font-style:normal;
			text-decoration:underline;
			font-weight:bold;
			color:pink;
		}

		.box .span02{
			color:blue;
		}

	</style>
</head>
<body>
	<div class="box">層級選擇器主要應用在選擇父元素下的<span>子元素</span>，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，<em>防止命名衝突</em>。
	層級選擇器主要應用在選擇父元素下的子元素，或者子元素下面的<span class="span02">子元素</span>，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
	層級選擇器主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
	</div>


	<div class="box2">層級選擇器主要應用在選擇父元素下的<span>子元素</span>，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
	層級選擇器主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
	層級選擇器主要應用在選擇父元素下的子元素，或者子元素下面的子元素，可與標籤元素結合使用，減少命名，同時也可以通過層級，防止命名衝突。
	</div>
</body>
</html>

5、組選擇器

多個選擇器，如果有同樣的樣式設置，可以使用組選擇器。
舉例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">


		.box01,.box02,.box03{ /*表示這三個類選擇器的的文字大小都是40px*/
			font-size:40px;
			text-indent:40px;
		}

		.box01{		
			color:red;
		}

		.box02{
			color:pink;
		}

		.box03{
			color:gold;
		}

	</style>
</head>
<body>
	<div class="box01">這是第一個div</div>
	<div class="box02">這是第二個div</div>
	<div class="box03">這是第三個div</div>
</body>
</html>

6、僞類及僞元素選擇器

常用的僞類選擇器有hover，表示鼠標懸浮在元素上時的狀態，僞元素選擇器有before和after,它們可以通過樣式在元素中插入內容。注意通過before,after插入的內容無法選中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.link{
			font-size:30px;
			text-decoration:none;
			color:green;
		}
		.link:hover{  /*鼠標懸停時字體變成金色*/
			color:gold;
			font-weight:bold;
			font-style:italic;
		}
		.box01,.box02{
			font-size:20px;
		}
		.box01:before{
			content:"· ";
			color:red;
		}
		.box02:after{
			content:" 。";
			color:red;
		}

	</style>
</head>
<body>
	<a href="http://www.baidu.com" class="link">百度一下</a>
	<div class="box01">這是第一個div</div>
	<div class="box02">這是第二個div</div>
</body>
</html>

統一聲明：關於原創博客內容，可能會有部分內容參考自互聯網，如有原創鏈接會聲明引用；如找不到原創鏈接，在此聲明如有侵權請聯繫刪除哈。關於轉載博客，如有原創鏈接會聲明；如找不到原創鏈接，在此聲明如有侵權請聯繫刪除。

玩轉CSS的前生今生與基礎語法，選擇器的使用

1.爲什麼需要CSS?

2.什麼是CSS

3.CSS的使用

3.1 css基本語法

3.2CSS頁面引入的方法

3.3 常用的應用文本的css樣式

3.4 css選擇器的使用詳解

關於遊戲付費的一點想法

我通過CKA和CKS啦！

《最新出爐》系列入門篇-Python+Playwright自動化測試-42-強大的可視化追蹤利器Trace Viewer

大數據怎麼學？對大數據開發領域及崗位的詳細解讀，完整理解大數據開發領域技術體系

windows本地安裝配置oracle客戶端完整流程（圖文版）

win10系統安裝oracle11g時遇到INS-13001環境不滿足最低要求解決辦法

真正讓你明白Hive參數調優系列2：如何控制reduce個數與參數調優

真正讓你明白Hive參數調優系列1：控制map個數與性能調優參數

玩轉CSS的前生今生與基礎語法，選擇器的使用

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結