程序員HTML5培訓教程-css的引入方式和選擇器

01.引入css方式（重點掌握）

行內樣式

內接樣式

外接樣式

3.1 鏈接式

3.1 導入式

css介紹

現在的互聯網前端分三層：

HTML：超文本標記語言。從語義的角度描述頁面結構。

CSS：層疊樣式表。從審美的角度負責頁面樣式。

JS：JavaScript 。從交互的角度描述頁面行為

CSS：Cascading Style Sheet，層疊樣式表。CSS的作用就是給HTML頁面標簽添加各種樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。

css的最新版本是css3，我們目前學習的是css2.1

接下來我們要講一下為什么要使用CSS。

HTML的缺陷：

不能夠適應多種設備

要求瀏覽器必須智能化足夠龐大

數據和顯示沒有分開

功能不夠強大

CSS 優點：

使數據和顯示分開

降低網絡流量

使整個網站視覺效果一致

使開發效率提高了（耦合性降低，一個人負責寫html，一個人負責寫css）

比如說，有一個樣式需要在一百個頁面上顯示，如果是html來實現，那要寫一百遍，現在有了css，只要寫一遍。現在，html只提供數據和一些控件，完全交給css提供各種各樣的樣式。

行內樣式

1 <div>
2 <p style="color: green">我是一個段落</p>
3 </div>

內接樣式

復制代碼

<style type="text/css">
/*寫我們的css代碼*/
 
span{
color: yellow;
}
</style>

復制代碼

外接樣式-鏈接式

<link rel="stylesheet" href="./index.css">
外接樣式-導入式
<style type="text/css">
@import url('./index.css');
</style>

02.css的選擇器：

1.基本選擇器 2.高級選擇器

基本選擇器包含：

1.標簽選擇器

標簽選擇器可以選中所有的標簽元素，比如div，ul，li ，p等等，不管標簽藏的多深，都能選中，選中的是所有的，而不是某一個，所以說 “共性” 而不是 ”特性“

復制代碼

body{

color:gray;

font-size: 12px;

}

/標簽選擇器/

p{

color: red;

font-size: 20px;

}

span{

color: yellow;

}

復制代碼

2.id選擇器

選中id

同一個頁面中id不能重復。

任何的標簽都可以設置id

id命名規范 要以字母 可以有數字 下劃線 - 大小寫嚴格區分 aa和AA是兩個不一樣的屬性值

復制代碼

1 #box{
2 background:green;
3 }
4 
5 #s1{
6 color: red;
7 }
8 
9 #s2{
10 font-size: 30px;
11 }

復制代碼

3.類選擇器

所謂類：就是class . class與id非常相似 任何的標簽都可以加類，但是類是可以重復,屬于歸類的概念。同一個標簽中可以攜帶多個類，用空格隔開

類的使用，能夠決定前端工程師的css水平到底有多牛逼？

玩類了，一定要有”公共類“的概念。

復制代碼

.lv{
 color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}

復制代碼

復制代碼

<!-- 公共類 共有的屬性 -->
 <div>
 <p class="lv big">段落1</p>
 <p class="lv line">段落2</p>
 <p class="line big">段落3</p>
 </div>

復制代碼

總結：

不要去試圖用一個類將我們的頁面寫完。這個標簽要攜帶多個類，共同設置樣式

每個類要盡可能的小，有公共的概念，能夠讓更多的標簽使用

未完待續歡迎繼續關注好程序員前端教程分享!

tml如何選擇編碼，常見utf-8和gb2312編碼如何判斷選擇！

一、首先了解目前國內中文網頁常用編碼是utf-8 還是gb2313。

百度搜索 使用utf-8

騰訊新聞 使用utf-8

淘寶 使用utf-8

亞馬遜 使用utf-8

W3Cschool.cn 也使用utf-8

支付寶 使用utf-8

360搜索 使用utf-8

小米官網 使用utf-8

魅族官網 使用utf-8

可見截止2017年05月02日這些名站，均使用utf-8編碼。

二、了解常見html編碼utf-8和gb2312。

1、utf-8

UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼。由Ken Thompson于1992年創建。現在已經標準化為RFC 3629。UTF-8用1到4個字節編碼UNICODE字符。用在網頁上可以同一頁面顯示中文簡體繁體及其它語言（如日文，韓文）一般顯示簡體中文字、繁體中文字、英文、日文、韓文均支持。

2、GB2312

GB2312即信息交換用漢字編碼字符集。《信息交換用漢字編碼字符集》是由中國國家標準總局1980年發布，1981年5月1日開始實施的一套國家標準，標準號是GB 2312—1980。GB2312編碼適用于漢字處理、漢字通信等系統之間的信息交換，通行于中國大陸；新加坡等地也采用此編碼。中國大陸幾乎所有的中文系統和國際化的軟件都支持GB 2312。一般簡體中文的網站使用GB2312比較多。

3、W3Cschool小結

從文字支持上說utf-8比GB2312要多。一般企業站看情況自己選擇網頁編碼。

三、如何選擇utf-8和gb2313編碼制作html

單獨做html如果你是先div css做HTML，可以不用考慮編碼問題，及時制作好了HTML編碼要轉換也很簡單，只需要通過DW等軟件即可完成html編碼轉換。

根據程序文件編碼定如果在開發DIV CSS時就知道了程序文件時哪種編碼。這個時候就要根據開發程序文件編碼確定編碼。如果程序文件和HTML編碼不同很容易照成Html亂碼（html中文亂碼）。如果不會程序開發卻使用開源程序比如dedecms 、帝國、phpcms 等網站系統時，開發HTML和使用開源程序編碼也要保持一致。

總結：

無論什么情況下開發DIV CSS使用HTML編碼要根據程序確定，如果無法確定要使用程序編碼，這個時候選擇常用gbk和utf編碼兩種均可，如果在開發HTML時知道程序文件使用什么HTML編碼，這個時候在開發DIV CSS時候就要與程序文件使用編碼保持一致，避免網頁亂碼問題。

所以建議最好用UTF-8，國際通用。GB2312是國內用的，簡體中文。