開始走進CSS世界

時間 2019-11-20

標籤開始走進 css 世界欄目 CSS 简体版

原文原文鏈接

一. 認識CSScss

1、CSS (Cascading Style Sheets) 層疊樣式表 html

CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增長了不少強大的新功能。 目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支持了CSS3大部分功能了，IE10之後也開始全面支持CSS3了。前端

不一樣的瀏覽器可能須要不一樣的前綴。它表示該CSS屬性或規則還沒有成爲W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不須要前綴的，但爲了更好的向前兼容前綴仍是少不了的。 web

前綴 chrome	瀏覽器瀏覽器
-webkit 佈局	chrome和safari動畫
-moz編碼	firefoxspa
-ms	IE
-o	opera

2、CSS能作什麼？

a. CSS把不少之前須要使用圖片和腳原本實現的效果、甚至動畫效果，只須要短短几行代碼就能搞定。好比圓角，圖片邊框，文字陰影和盒陰影，過渡、動畫等。

b. CSS簡化了前端開發工做人員的設計過程，更靈活的頁面佈局，更快的頁面加載速度。

c. 能夠將站點上全部的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的代碼，那麼整個站點的全部頁面都會隨之發生變更。

d. CSS能夠支持多種設備,好比手機,PDA,打印機,電視機,遊戲機等。

e. 目的：將表現與結構分離。

3、CSS語法結構

CSS 語法由三部分構成：選擇符、屬性和值

屬性（property）是您但願設置的樣式屬性（style attribute）。每一個屬性有一個值。屬性和值被冒號分開。

Selector { Property : Value; }

↓ ↓ ↓

選擇符屬性值

例：

1      <style type="text/css">
2         body { background-color:#cccccc;}
3      </style>

2、如何引入CSS

三種引入方式：

1.行內引用

行內引用是指將CSS樣式編碼直接寫在HTML 標籤中的style屬性裏。

注意這種方式的引入CSS，是不須要寫選擇器的。

例：

1　　 <body style="background-color:#ccccc;">
2     <h1 style="font-size:12px; color:#ff0000;">這是一個標題</h1>

2. 頁內引用

頁內引用做爲頁面中的一個單獨部分，由<style></style>標籤訂位在<head></head>之中。

<head>
	<style type="text/css">
		body {
		       	background-color:#cccccc;
		      }
	</style>
</head>

3.外部樣式表（經常使用的，體現分離思想）

外部樣式表是CSS應用中最好的一種形式，它將CSS樣式代碼單獨

放在一個外部文件中，再由網頁進行調用。

如：

首先建立一個style.css 文件，裏面編寫：

body {
	       background-color:#cccccc;
　　　}

而後在同一個目錄下建立一個index.html文件，裏面編寫：

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

3、三種引入方式的優先級對比

優先級依次是：就近原則

行內引用> 頁內引用> 頁外引用

4、CSS代碼註釋

css 代碼註釋，以 /* 開始 */ 結束

如：

/*註釋頁面頭部*/
/*body{background-color: #ccc}*/
/*標籤*/
h1{color: blue;text-align:center;}
/*段落*/
p{font-size: 24px;text-indent: 2em; color: red;}

5、CSS的選擇符

1.通配選擇符 *

* 號表示全部的對象

所謂通配選擇符，就是指能夠使用模糊指定的方式來對對象進行選擇，指定樣式。

例：

*{
		font-size: 20px;
		font-family: "微軟雅黑";
		color:#000;
　}

2.元素選擇符

所謂元素選擇符，指以網頁中已有的標籤名做爲名稱的選擇符。

例：

body{background-color: #ccc}
h1{color: blue;text-align:center;}
p{font-size: 24px;text-indent: 2em; color: red;}

3.羣組選擇符

除了能夠對單個標籤進行樣式指定外，還能夠對一組標籤進行相同的樣式定義。

例：

	h1,p{

		font-family: "微軟雅黑";
		font-size: 30px;
		color:red;
	}

使用逗號對選擇符進行分隔。對頁面中須要使用相一樣式的地方，只需寫一次樣式。

6、4.關係選擇符

例：

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

			color: red;
			font-size: 50px;
			font-family:"微軟雅黑";
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>
		<a href="#">我是h1中的a標籤</a>
	</h1>
	<p>
		<a href="#">我是p標籤中a標籤</a>
	</p>
</body>
</html>

　此例子中CSS樣式只對h1標籤中的a標籤起做用。　

相關標籤/搜索

每日一句

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