CSS簡介

層疊樣式表 (英文全稱：Cascading Style Sheets) 是一種用來表現 HTML（標準通用標記語言的一個應用）或 XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS 不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化。
CSS 可以對網頁中元素位置的排版進行像素級精確控制，支持幾乎全部的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力。css

選擇器 {
     聲明1;
     聲明2;
    }

複製代碼

詳細樣例：html

h1 {
    font-size:12px;
    color:#F00;
}

複製代碼

CSS 的最後一條聲明後的「;」可寫可不寫，可是，基於 W3C 標準規範考慮，建議最後一條聲明的結束「;」都要寫上。markdown

基本用法——給元素添加樣式

行內樣式

經過直接在元素上寫個 style 屬性字體

<h1>改變標題顏色</h1>

複製代碼

這個語句的效果就是調整標題的顏色spa

運行效果：
3d

內部樣式

經過選擇器，選擇當前的文檔中的元素，統一添加樣式code

<style type="text/css">
  選擇器{
    樣式的屬性名：屬性值;
  }
  h1{
      color:red;
  }
</style>

<h1>內容</h1>

複製代碼

完整樣例代碼：orm

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			h1{
			    color: red;
			  }
		</style>
		<title></title>
	</head>
	<body>
		<h1>內容</h1>
	</body>
</html>

複製代碼

效果截圖：
htm

這樣咱們就經過內部樣式的方式來修飾了 h1。對象

外部樣式

單獨將 style 標籤中的內容統必定義在一個 css 文件中，css 文件中，不須要寫 style 標記，直接寫樣式便可。

定義樣式 css 文件

CSS 代碼保存在擴展名爲. css 的樣式表中. HTML 文件引用擴展名爲. css 的樣式表

h1{
   color:red;
}

複製代碼

在 html 中引入 css 文檔

<head>
  ……
<link href="css文件的位置" rel="stylesheet" type="text/css" />
……
</head>


複製代碼

<h1>須要樣式的標記</h1>

複製代碼

樣例：

↓這個是 css 文件

↓這個是 html 代碼

05.html 文件經過 <link href="css/h1red.css" rel="stylesheet" type="text/css" />這句代碼調用同級文件夾 css 中的 h1red.css 的 css 文件，來對 h1 標題進行顏色修改

完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<link href="css/h1red.css" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<h1>須要樣式的標記</h1>
	</body>
</html>

複製代碼

效果截圖：

標籤選擇

<h1>一級標題</h1>

複製代碼

h1{
    color: cornflowerblue;
}

複製代碼

完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			h1{
				color: blue;
			}
		</style>
	</head>
	<body>
		<h1>一級標題</h1>
		<h1>一級標題</h1>
		<h2>二級標題</h2>
		<h2>二級標題</h2>
		<h2>二級標題</h2>
	</body>
</html>

複製代碼

效果截圖：

從上面的效果截圖咱們能夠全部的一級標題都變成了藍色，由於咱們對全部的 h1 標籤都進行了設置顏色，這就是標籤選擇。

類選擇

<h1>一級標題</h1>
<h2>二級標題</h2>

複製代碼

.colorblue{
    color: cornflowerblue;
}

複製代碼

完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.colorblue{
			    color: cornflowerblue;
			} 
		</style>
	</head>
	<body>
		<h1>一級標題</h1>
		<h2>二級標題</h2>
		<h2>二級標題</h2>
		<h2>二級標題</h2>
		<h3>三級標題</h3>
	</body>
</html>

複製代碼

效果截圖：

從上圖咱們能夠發現全部的 class=「colorblue」的標題都是藍色，不管是幾級標題，而其餘的非 colorblue 類都沒有變顏色，這就是對類進行選擇。

id 選擇

<h2>二級標題</h2>

複製代碼

#idh2{
    color: red;
}

複製代碼

完整代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#aa{
			    color: red;
			}
		</style>
	</head>
	<body>
		<h1>一級標題</h1>
		<h2>二級標題</h2>
		<h3>三級標題</h3>
		<h2>二級標題</h2>
	</body>
</html>


複製代碼

運行效果截圖：

經過上面的截圖，咱們不難發現只有只有 id=「aa」的標題變了顏色，與是幾級標題無關，只看是否是 id=「aa」，這就是 id 選擇

寫做不易，若是看完對你有幫助，感謝點贊支持！

加油！

共同努力！

Keafmd

CSS入門基礎（樣式，css文件，選擇器）

CSS簡介

基本用法——給元素添加樣式

行內樣式

內部樣式

外部樣式

定義樣式 css 文件

在 html 中引入 css 文檔

標籤選擇

類選擇

id 選擇