前端學習第三天-css基礎

1. CSS簡介

從HTML被發明開始，樣式就以各種形式存在。不同的瀏覽器結合它們各自的樣式語言為用戶提供頁面效果的控制。最初的HTML只包含很少的顯示屬性。隨著HTML的成長，為了滿足頁面設計者的要求，HTML添加了很多顯示功能。但是隨著這些功能的增加，HTML變的越來越雜亂，而且HTML頁面也越來越臃腫。于是CSS便誕生了。

那么如何實現結構和樣式的完全分離呢？

1.1 什么是CSS

簡單來說，層疊樣式表（Cascading Style Sheet）是一種專門用來控制界面外觀風格的文檔。主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設置不同的樣式。

1.2 CSS發展歷史

1996年 CSS 1.0 規范面世，其中加入了字體、樣色等相關屬性。
1998年 CSS 2.0 規范推出，這個版本的 CSS 也是最廣為人知的一個版本。
2004年 CSS 2.1 規范推出，對 CSS 2.0 進行了一些小范圍的修改，刪除了一些瀏覽器支持不成熟的屬性。
2010年 CSS 3.0 規范推出，將 CSS3 分成了不同的模塊，例如盒子模型、背景和邊框、文字特效等模塊。

2. CSS使用方式(4種)

2.1 行內樣式

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title></head><body><p style="font-size: 16px; color: red;">大家好</p></body>
</html>

行內樣式需要寫到標簽的 style 屬性值中。

2.2 內部樣式表

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title><style>p {font-size: 16px;color: red;}</style></head><body><p>Hello everyone</p></body>
</html>

內部樣式需要寫到 <style> 標簽中。

2.3 外部樣式表

鏈接式

將樣式寫到單獨的文件中，文件的擴展名為 .css。例如，index.css 文件中有如下樣式：

p {font-size: 16px;color: red;
}

然后通過 <link> 元素將 index.css 文件引入到頁面中：

<!DOCTYPE html>
<html lang="en"><head><title>This is title</title><link rel="stylesheet" type="text/css" href="./css/index.css"></head><body><p>我是優秀的開發工程師</p></body>
</html>

2.4 導入外部樣式表

css文件中通過@import 引入其他css文件

@import url(global.css);

2.5css使用方式總結

定義在外部文件（外鏈樣式）：開發中主要是通過這種形式定義樣式。（推薦）
在頁面的頭部定義（內聯樣式）：通過這種形式定義的樣式只在本頁面內生效。
在css文件導入外部樣式表(導入樣式)：通過import 引入其他css文件。
定義在特定的元素身上（行內樣式）：這種形式多用于測試，可維護性較差。（不推薦）

3. CSS基本語法

CSS 樣式由一系列的規則集組成，規則集中有一條或多條樣式聲明。
選擇器通常是您需要改變樣式的 HTML 元素。
每條樣式聲明包含著一對屬性名和屬性值。
屬性名和屬性值之間以冒號（:）隔開。
樣式規則之間以分號（;）隔開。

4. CSS字體樣式屬性

4.1 font-size:字號大小

font-size屬性用于設置字號。推薦使用像素單位px。

4.1.1 px

px單位名稱為像素，像素是固定大小的單元,用于屏幕媒體(即在電腦屏幕上讀取)。
一個像素等于電腦屏幕上的一個點 (是你屏幕分辨率的最小分割)。
大多數瀏覽器的默認字體大小是16px。

4.1.2 em

em是相對字體長度單位。如果用于font-size屬性本身，則是相對于父元素的font-size。

em單位有如下特點：

em的值并不是固定的;
em會繼承父級元素的字體大小。

4.2 font-family:字體

font-family屬性用于設置字體。網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設置為微軟雅黑，可以使用如下CSS樣式代碼：

p{ font-family:"Times New Roman",微軟雅黑;
}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體。

注意:

現在網頁中普遍使用16px、字體是微軟雅黑。

各種字體之間必須使用英文狀態下的逗號隔開。

如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";。

盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示。

4.3 font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外，可以使用css 來實現。

font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍）。

屬性值	描述
normal	默認值。定義標準的字符。
bold	定義粗體字符。
bolder	定義更粗的字符。
lighter	定義更細的字符。
100~900	定義由粗到細的字符。400 等同于 normal，而 700 等同于 bold。

數字 400 等價于 normal，而 700 等價于 bold。但是我們更喜歡用數字來表示。

4.4 font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外，可以使用css 來實現，但是css 是沒有語義的。

font-style屬性用于定義字體風格，如設置斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式。

italic：瀏覽器會顯示斜體的字體樣式。

注意:

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式。

4.5 font:綜合設置字體樣式 (重點)

font屬性用于對字體樣式進行綜合設置，其基本語法格式如下：

選擇器{font: font-style ?font-weight ?font-size ?font-family;
}

注意：

1.使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。

2.其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

5. CSS注釋

CSS規則是使用 /* 需要注釋的內容 */ 進行注釋的。

p{font-size: 14px; ? ? ? ? ? ? ? ? /* 所有的字體是14像素大小*/}

6. 選擇器

6.1 基本選擇器（重點）

6.1.1 標簽選擇器

p {font-size: 16px;color: red;
}

選擇頁面中所有的 <p> 元素，給它們設置字體大小和顏色。

6.1.2 Class 選擇器

.box {font-size: 20px;color: green;
}

選擇頁面中 class 屬性值中包含 box 類名的所有元素，給它們設置字體大小和顏色。

6.1.3 ID 選擇器

#nav {font-size: 24px;color: blue;
}

選擇頁面中 id 屬性值是 nav 的元素，給它設置字體大小和顏色。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。類選擇器（class）好比人的名字，是可以多次重復使用的。 id選擇器好比人的身份證號碼，全中國是唯一的，不得重復。只能使用一次。

6.1.4 通配符選擇器

* {font-size: 24px;color: blue;
}

6.1.5 總結-CSS的基本選擇器

標簽選擇器：針對一類標簽
ID選擇器：針對某一個特定的標簽使用
類選擇器：針對你想要的所有標簽使用
通用選擇器（通配符）：針對所有的標簽都適用（不建議使用）

6.2偽類選擇器(重點)

偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果等。

為了和我們剛才學的類選擇器相區別，類選擇器是一個點比如 .demo {} 而我們的偽類選擇器用 2個點就是冒號比如 :link{}

6.2.1 鏈接偽類選擇器

/* 未訪問的鏈接 */
:link ? /* 已訪問的鏈接 */
:visited 
/* 鼠標移動到鏈接上 */
:hover
/* 選定的鏈接 */
:active

注意:

a:hover 必須位于 a:link 和 a:visited 之后，這樣才能生效！

a:active 必須位于 a:hover 之后，這樣才能生效！

a:link會對擁有a標簽的屬性href=""，即擁有實際鏈接地址的a對象發生效果

7. CSS外觀屬性

7.1 color：文本顏色

屬性名	color
屬性值	預定義的顏色名 \| 十六進制值的顏色值 \| RGB顏色值
默認值	在不同瀏覽器中，默認值可能不同，但是在大部分瀏覽器中默認值為黑色。
描述	設置文本的顏色

注意:

1.一般情況下顏色我們喜歡小寫字母比如 #ff0000。

2.css顏色簡寫比如 #ff0000 可以簡寫為#f00， #ff00ff 簡寫為 #f0f。

7.2 顏色半透明(css3)

文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：

/* a 是alpha透明的意思,取值范圍 0~1之間  */
color: rgba(r,g,b,a) ? ?
color: rgba(0,0,0,0.3)

7.3 line-height：行間距

行高是指文本行基線間的垂直距離:基線與基線之間的距離。

屬性名	line-height
屬性值	normal \|數字 \| 長度值 \| 百分比
默認值	normal
描述	設置文本的行高

normal：默認值，行高由瀏覽器自動處理。
數字：行高 = 數字 * 字體大小，例如，line-height: 2;font-size: 16px;，則行高等于：2 * 16px = 32px
長度值：使用長度值設置行高，例如，line-height: 32px。

基線（base line）并不是漢字文字的下端沿，而是英文字母“x”的下端沿。

一般項目中的頁面的行高設置比字號大7~8像素左右就可以了, 比如當前使用14像素的字號，行高設為24像素左右合適。

7.4 text-align：水平對齊方式

屬性名	text-align
屬性值	left \| right \| center \| justify
默認值	如果文本方向為ltr，則默認值為left；如果文本方向為rtl，則默認值為right
描述	設置文本在水平方向上的對齊方式

left：內容左對齊。
center：內容居中對齊。（重點）
right：內容右對齊。
justify：內容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。

7.5 text-indent:首行縮進

text-indent屬性用于設置首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器窗口寬度的百分比%，允許使用負值, 建議使用em作為設置單位。

7.6 text-decoration：文本修飾

文本修飾

屬性名	text-decoration
屬性值	none \| underline \| overline \| line-through
默認值	none
描述	對文本進行修飾

none：指定文字無裝飾
underline：指定文字的裝飾是下劃線
overline：指定文字的裝飾是上劃線
line-through：指定文字的裝飾是貫穿線

7.7 letter-spacing：字符間距

字符間距

屬性名	letter-spacing
屬性值	normal \| 長度值
默認值	normal
描述	增加或減少字符間的空白（字符間距）

normal：默認間隔
長度值：用長度值指定間隔。可以為負值。

7.8 word-spacing（單詞）

單詞間距

屬性名	word-spacing
屬性值	normal \| length
默認值	normal
描述	增加或減少單詞間的空白(即字間隔)

normal：默認間隔
length：用長度值指定間隔。可以為負值。

7.9 文字陰影(CSS3)

可以給文字添加陰影效果

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

值	描述
h-shadow	必需。水平陰影的位置。允許負值。
v-shadow	必需。垂直陰影的位置。允許負值。
blur	可選。模糊的距離。
color	可選。陰影的顏色。

前兩項是必須寫的。后兩項可以選寫。

/* 多重陰影 */
text-shadow: -5px 0px cyan, 5px 0px red;

8. CSS書寫規范

開始就形成良好的書寫規范，是你專業化的開始。

8.1 標識符規范

【建議】小寫。

示例：

/* good */
.username{color:red;
}
?
/* bad */
.USERNAME{COLOR:RED;
}

8.2 屬性規范

【強制】屬性定義必須另起一行。

示例：

/* good */
.selector{margin: 0;padding: 0;
}
?
/* bad */
.selector { margin: 0; padding: 0; }

【強制】屬性定義后必須以分號結尾。

示例：

/* good */
.selector {margin: 0;
}
?
/* bad */
.selector {margin: 0
}

9.開發者工具（chrome）

此工具是我們的必備工具，以后代碼出了問題，我們首先就是：

“按F12”或者是 “shift+ctrl+i” 打開開發者工具。

ctrl+滾輪可以放大開發者工具代碼大小。
左邊是HTML元素結構右邊是CSS樣式。
右邊CSS樣式可以改動數值和顏色查看更改后效果。