CSS樣式屬性（一）

字體樣式

font-size:字號大小

font-size屬性 設置字號 該屬性的值可以使用相對長度單位 也可以使用絕對長度單位 其中相對長度單位比較常用 推薦使用px像素單位

相對長度單位	說明
em	相對於當前對象內文本的字體尺寸
px	像素，最常用
絕對長度單位	說明
in	英寸
cm	釐米
mm	毫米
p	點

font-family:字體

font-family屬性用於設置字體 常用的字體有宋體、微軟雅黑、黑體等

p{font-family:“微軟雅黑”;}

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

常用技巧：

1.現在網頁中普遍使用14px
2.儘量使用偶數的數字字號。ie6等老式瀏覽器支持奇數會有bug
3.各種字體之間必須使用英文狀態下的逗號隔開。
4.中文字體需要加英文狀態下的引號，英文字體一般不需要加引號。當需要設置英文字體時，英文字體名必須位於中文字體名之前。
5.如果字體名中包含空格、#、$等符號，則改字體必須加英文狀態下的單引號或者雙引號，例如font-family："Times New Roman"
6.儘量使用系統默認字體，保證在任何用戶的瀏覽器中都能真確顯示。

css unicode 字體

在css中設置字體名稱，直接寫中文是可以的。但是在文件編碼不匹配是會產生亂碼的錯誤。xp系統不支持 類似微軟雅黑的中文

方案一：你可以使用英文來代替。 比如font-family:“Microsoft Yahei”.

方案二：可以使用Unicode編碼來寫字體名稱來避免這些錯誤

以後儘量只寫Unicode字體 寫宋體 和微軟雅黑 “\5FAE\8F6F\96C5\9ED1”,"\5B8B\4F53"

font-weight：字體粗細

字體加粗出了用b和Strong標籤之外，可以使用css來實現，但是css是沒有語義的。

font-weight屬性用於定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100-900(100的整數倍)

數字400等價於 normal，而700等價於bold。

font-style:字體風格

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

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

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

oblique:瀏覽器會顯示傾斜的字體樣式

平時我們很少給文字加斜體，反而喜歡給斜體標籤改爲普通模式

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

font屬性英語對字體樣式進行綜合設置，其根本語法如下：

選擇器{font: font-style font-weight font-size/line-height font-family;}

使用font屬性時，必須按上面的語法格式中的順序書寫，不能更換順序，各個屬性以空隔開
其中不需要設置的屬性可以省略，但是必須保留font-size和font-family屬性，否則font屬性將不起作用

css註釋

/* */

選擇器

要想將css樣式應用於特定的HTML元素，首先需要找到該目標元素。在css中，執行這一任務的樣式規則部分被稱爲選擇器

標籤選擇器

標籤選擇器是指用HTML標籤名稱作爲選擇器，按照標籤名稱分類，爲頁面中某一類標籤指定統一的css樣式

標籤名{屬性1：屬性值1；屬性2：屬性值2} 或者
元素名{屬性1：屬性值1；屬性2：屬性值2}

標籤選擇器最大的優點是能快速爲頁面中的標籤統一樣式，但是不能設計差異化樣式

類選擇器

類選擇器使用"."進行標識，後面緊跟類名

.類名（屬性1：屬性值1；屬性2：屬性值2）

標籤調用時用class="類名"即可。

類選擇器最大的優勢是可以爲元素對象定義單獨或相同的樣式。

1.長名稱或詞組可以使用中橫線來爲選擇器命名
2.不建議使用"_"來命名css選擇器

瀏覽器兼容問題（比如使用_tips的選擇器命名，在IE6是無效的）

能良好區分JavaScript變量名(JS變量命名是用"_")

3.不要純數字、中文等命名，儘量使用英文字母來表示

多類名選擇器

我們可以給標籤指定多個類名 達到多個選擇的目的

注意：

1. 樣式顯示效果跟HTML元素中的類名先後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的情況下，還是較多使用的。

<div class="pink fontWeight font20">亞瑟</div>
<div class="font20">劉備</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蟬</div>

id選擇器

id選擇器使用“#”進行標識，後面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即爲HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id對象出現，但是允許相同名字的class。

類選擇器（class） 好比人的名字， 是可以多次重複使用的， 比如 張偉 王偉 李偉 李娜

id選擇器 好比人的身份證號碼， 全中國是唯一的， 不得重複。 只能使用一次。

id選擇器和類選擇器最大的不同在於 使用次數上。

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用範圍最廣的，能匹配頁面中所有的元素。其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

僞類選擇器

僞類選擇器用於向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素。

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

鏈接僞類選擇器

• :link /* 未訪問的鏈接 */

• :visited /* 已訪問的鏈接 已經點擊過的狀態*/

• :hover /* 鼠標移動到鏈接上 */

• :active /* 選定的鏈接 點擊不鬆開的時候 顯示的狀態 */

  注意寫的時候，他們的順序儘量不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法

a {   /* a是標籤選擇器  所有的鏈接 */
			font-weight: 700;
			font-size: 16px;
			color: gray;
		}
a:hover {   /* :hover 是鏈接僞類選擇器 鼠標經過 */
			color: red; /*  鼠標經過的時候，由原來的 灰色 變成了紅色 */
}

結構(位置)僞類選擇器（CSS3)

• :first-child :選取屬於其父元素的首個子元素的指定選擇器
• :last-child :選取屬於其父元素的最後一個子元素的指定選擇器
• :nth-child(n) ： 匹配屬於其父元素的第 N 個子元素，不論元素的類型
• :nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每個元素，不論元素的類型，從最後一個子元素開始計數。
  n 可以是數字、關鍵詞或公式

li:first-child { /*  選擇第一個孩子 */
        		color: pink; 
        	}
li:last-child {   /* 最後一個孩子 */
        		color: purple;
        	}
li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 */ 
				color: skyblue;
        	}
even(可以選擇所有偶數的標籤) odd(可以選擇所有奇數的標籤) n(從0開始 到最後一個全選)
2n 2n+1 3n

目標僞類選擇器(CSS3)

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素

:target {
		color: red;
		font-size: 30px;
}

CSS外觀屬性

color:文本顏色

color屬性用於定義文本的顏色，其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等。

2.十六進制，如#FF0000，#FF6600，#29D794等。實際工作中，十六進制是最常用的定義顏色的方式。

3.RGB代碼，如紅色可以表示爲rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代碼的百分比顏色值，取值爲0時也不能省略百分號，必須寫爲0%。

line-height:行間距

line-height屬性用於設置行間距，就是行與行之間的距離，即字符的垂直間距，一般稱爲行高。line-height常用的屬性值單位有三種，分別爲像素px，相對值em和百分比%，實際工作中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了。

text-align:水平對齊方式

text-align屬性用於設置文本內容的水平對齊，相當於html中的align對齊屬性。其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

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

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

letter-spacing:字間距

letter-spacing屬性用於定義字間距，所謂字間距就是字符與字符之間的空白。其屬性值可爲不同單位的數值，允許使用負值，默認爲normal。

word-spacing:單詞間距

word-spacing屬性用於定義英文單詞之間的間距，對中文字符無效。和letter-spacing一樣，其屬性值可爲不同單位的數值，允許使用負值，默認爲normal。

word-spacing和letter-spacing均可對英文進行設置。不同的是letter-spacing定義的爲字母之間的間距，而word-spacing定義的爲英文單詞之間的間距。

顏色半透明(css3)

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

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

文字陰影(CSS3)

以後我們可以給我們的文字添加陰影效果了 Shadow 影子

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

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

引入CSS樣式表（書寫位置）

CSS可以寫到那個位置？ 是不是一定寫到html文件裏面呢？

行內式（內聯樣式）

是通過標籤的style屬性來設置元素的樣式，其基本語法格式如下：

<標籤名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標籤名>

語法中style是標籤的屬性，實際上任何HTML標籤都擁有style屬性，用來設置行內式。其中屬性和值的書寫規範與CSS樣式規則相同，行內式只對其所在的標籤及嵌套在其中的子標籤起作用。

內部樣式表（內嵌式）

內嵌式是將CSS代碼集中寫在HTML文檔的head頭部標籤中，並且用style標籤定義，其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中，style標籤一般位於head標籤中title標籤之後，也可以把他放在HTML文檔的任何地方。

外部樣式表（外鏈式）

鏈入式是將所有的樣式放在一個或多個以.CSS爲擴展名的外部樣式表文件中，通過link標籤將外部樣式表文件鏈接到HTML文檔中，其基本語法格式如下：

<head>
  <link href="CSS文件的路徑" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是個單標籤哦!!!

該語法中，link標籤需要放在head頭部標籤中，並且必須指定link標籤的三個屬性，具體如下：

href：定義所鏈接外部樣式表文件的URL，可以是相對路徑，也可以是絕對路徑。
type：定義所鏈接文檔的類型，在這裏需要指定爲“text/CSS”，表示鏈接的外部文件爲CSS樣式表。
rel：定義當前文檔與被鏈接文檔之間的關係，在這裏需要指定爲“stylesheet”，表示被鏈接的文檔是一個樣式表文件。

三種樣式表總結

樣式表	優點	缺點	使用情況	控制範圍
行內樣式表	書寫方便，權重高	沒有實現樣式和結構相分離	較少	控制一個標籤（少）
內嵌樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實現結構和樣式相分離	需要引入	最多，強烈推薦	控制整個站點（多）

標籤顯示模式（display）

我們網頁的標籤非常多，再不同地方會用到不同類型的標籤，以便更好的完成我們的網頁。

標籤的類型(顯示模式)

HTML標籤一般分爲塊標籤和行內標籤兩種類型，它們也稱塊元素和行內元素。具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自佔據一整行或多整行，可以對其設置寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標籤是最典型的塊元素。

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內邊距都可以控制。

（3）寬度默認是容器的100%

（4）可以容納內聯元素和其他塊元素。

行內元素(inline-level)

行內元素（內聯元素）不佔有獨立的區域，僅僅靠自身的字體大小和圖像尺寸來支撐結構，一般不可以設置寬度、高度、對齊等屬性，常用於控制頁面中文本的樣式。

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標籤最典型的行內元素。

行內元素的特點：

（1）和相鄰行內元素在一行上。

（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。

（3）默認寬度就是它本身內容的寬度。

（4）行內元素只能容納文本或則其他行內元素。（a特殊）

注意：

1. 只有 文字才 能組成段落 因此 p 裏面不能放塊級元素，同理還有這些標籤h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標籤，裏面不能放其他塊級元素。
2. 鏈接裏面不能再放鏈接。

塊級元素和行內元素區別

塊級元素的特點：
（1）總是從新行開始
（2）高度，行高、外邊距以及內邊距都可以控制。
（3）寬度默認是容器的100%
（4）可以容納內聯元素和其他塊元素。

行內元素的特點：
（1）和相鄰行內元素在一行上。
（2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。
（3）默認寬度就是它本身內容的寬度。
（4）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標籤——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們爲行內塊元素。

行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。
（2）默認寬度就是它本身內容的寬度。
（3）高度，行高、外邊距以及內邊距都可以控制。

CSS複合選擇器

複合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是爲了可以選擇更準確更精細的目標元素標籤。

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。

記憶技巧：

交集選擇器 是 並且的意思。 即…又…的意思

比如：   p.one   選擇的是： 類名爲 .one  的 段落標籤。  

用的相對來說比較少，不太建議使用。

並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），都可以作爲並集選擇器的一部分。如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用並集選擇器爲它們定義相同的CSS樣式。

記憶技巧：

並集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行後面樣式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色爲紅色。  通常用於集體聲明。

後代選擇器

後代選擇器又稱爲包含選擇器，用來選擇元素或元素組的後代，其寫法就是把外層標籤寫在前面，內層標籤寫在後面，中間用空格分隔。當標籤發生嵌套時，內層標籤就成爲外層標籤的後代。

子孫後代都可以這麼選擇。 或者說，它能選擇任何包含在內 的標籤。

子元素選擇器

子元素選擇器只能選擇作爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格。

白話： 這裏的子 指的是 親兒子 不包含孫子 重孫子之類。

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子。  demo 元素包含着h3。

屬性選擇器

**選擇器	**示例	**含義
E[attr]****		存在attr屬性即可
E[attr=val]****		屬性值完全等於val
E[attr*=val]****		屬性值裏包含val字符並且在“任意”位置
E[attr^=val]****		屬性值裏包含val字符並且在“開始”位置
E[attr$=val]****		屬性值裏包含val字符並且在“結束”位置

/* 獲取到 擁有 該屬性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 獲取 屬性等於某個值的 元素 屬性值 可以使用 引號進行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 獲取以某個屬性開頭的語法  */
li[color^='green'] {
  background-color: orange;
}
/* 獲取以某個值 結尾的屬性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}

/* 獲取 屬性中 擁有某個值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果屬性的值 只有very 也能夠獲取  用來獲取 多個屬性 並且 使用-連接 */
li[price|='very'] {
  background-color: darkred;
}

<ul>
  <li type='fruit' color='green'>西瓜</li>
  <li type='vegetable' color='greenyellow'>西蘭花</li>
  <li type='meat'>牛肉</li>
  <li type='meat hot'>豬肉</li>
  <li type='drink hot'>可樂</li>
  <li type='drink hot'>雪碧</li>
  <li price='very-cheap'>紅酒</li>
  <li price='very'>白酒</li>
</ul>

僞元素選擇器（CSS3)

1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）
2. E::first-line 文本第一行；
3. E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

4、E::before和E::after

在E元素內部的開始位置和結束位創建一個元素，該元素爲行內元素，且必須要結合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏“:”用來表示僞類，“::”用來表示僞元素，但是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣做的目的是用來做兼容處理。

E:after、E:before後面的練習中會反覆用到，目前只需要有個大致瞭解

“:” 與 “::” 區別在於區分僞類和僞元素

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片，以及來進行圖片設置。

background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動
背景的合寫（複合屬性）
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

背景圖片(image)

語法：

background-image : none | url (url) 

參數：

none : 　無背景圖（默認的）
url : 　使用絕對或相對地址指定背景圖像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3纔可以多背景）可以和 background-color 連用。 如果圖片不重複地話，圖片覆蓋不到地地方都會被背景色填充。 如果有背景圖片平鋪，則會覆蓋背景顏色。

小技巧： 我們提倡 背景圖片後面的地址，url不要加引號。

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

參數：

repeat : 　背景圖像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景圖像不平鋪

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

設置背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素。

repeat-x : 　背景圖像在橫向上平鋪

repeat-y : 　背景圖像在縱向平鋪

背景位置(position)

語法：

background-position : length || length

background-position : position || position 

參數：

length : 　百分數 | 由浮點數字和單位標識符組成的長度值。請參閱長度單位
position : 　top | center | bottom | left | center | right

說明：

設置或檢索對象的背景圖像位置。必須先指定background-image屬性。默認值爲：(0% 0%)。
如果只指定了一個值，該值將用於橫座標。縱座標將默認爲50%。第二個值將用於縱座標。

注意：

1. position 後面是x座標和y座標。 可以使用方位名詞或者 精確單位。
2. 如果和精確單位和方位名字混合使用，則必須是x座標在前，y座標後面。比如 background-position: 15px top; 則 15px 一定是 x座標 top是 y座標。

實際工作用的最多的，就是背景圖片居中對齊了。

背景附着

語法：

background-attachment : scroll | fixed 

參數：

scroll : 　背景圖像是隨對象內容滾動
fixed : 　背景圖像固定

說明：

設置或檢索背景圖像是隨對象內容滾動還是固定的。

背景簡寫

background屬性的值的書寫順序官方並沒有強制標準的。爲了可讀性，建議大家如下寫：

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最後一個參數是alpha 透明度 取值範圍 0~1之間

注意： 背景半透明是指盒子背景半透明， 盒子裏面的內容不收影響。

同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫。

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景縮放(CSS3)

通過background-size設置背景圖片的尺寸，就像我們設置img的尺寸一樣，在移動Web開發中做屏幕適配應用非常廣泛。

其參數設置如下：

a) 可以設置長度單位(px)或百分比（設置百分比時，參照盒子的寬高）

b) 設置爲cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢出部分則會被隱藏。

c) 設置爲contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域。

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設置多背景，可用於自適應佈局

background-image: url('images/gyt.jpg'),url('images/robot.png');

CSS 三大特性

層疊 繼承 優先級 是我們學習CSS 必須掌握的三個特性。

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加。

是瀏覽器處理衝突的一個能力,如果一個屬性通過兩個選擇器設置到同一個元素上，那麼這個時候一個屬性就會將另一個屬性層疊掉

比如先給某個標籤指定了內部文字顏色爲紅色，接着又指定了顏色爲藍色，此時出現一個標籤指定了相同樣式不同值的情況，這就是樣式衝突。

一般情況下，如果出現樣式衝突，則會按照CSS書寫的順序，以最後的樣式爲準。

CSS最後的執行口訣：  長江後浪推前浪，前浪死在沙灘上。

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標籤會繼承父標籤的某些樣式，如文本顏色和字號。想要設置一個可繼承的屬性，只需將它應用於父元素即可。

簡單的理解就是： 子承父業。

恰當地使用繼承可以簡化代碼，降低CSS樣式的複雜性。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題。

在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重爲0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都爲0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。

行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解爲遠大於100。總之，他擁有比上面提高的選擇器都大的優先級。

權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最後的樣式優先級最大。

CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

CSS特殊性（Specificity）

關於CSS權重，我們需要一套計算公式來去計算，這個就是 CSS Specificity，我們稱爲CSS 特性或稱非凡性，它是一個衡量CSS值優先級的一個標準 具體規範入如下：

specificity用一個四位的數 字串(CSS2是三位)來表示，更像四個級別，值從左到右，左面的最大，一級大於一級，數位之間沒有進制，級別之間不可超越。

繼承或者* 的貢獻值	0,0,0,0
每個元素（標籤）貢獻值爲	0,0,0,1
每個類，僞類貢獻值爲	0,0,1,0
每個ID貢獻值爲	0,1,0,0
每個行內樣式貢獻值	1,0,0,0
每個!important貢獻值	∞ 無窮大

比如的例子：

div ul  li   ------>      0,0,0,3

.nav ul li   ------>      0,0,1,2

a:hover      -----—>      0,0,1,1

.nav a       ------>      0,0,1,1   

#nav p       ----->       0,1,0,1

注意： 數位之間沒有進制 比如說： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不會存在10個div能趕上一個類選擇器的情況。

總結優先級：

1. 使用了 !important聲明的規則。
2. 內嵌在 HTML 元素的 style屬性裏面的聲明。
3. 使用了 ID 選擇器的規則。
4. 使用了類選擇器、屬性選擇器、僞元素和僞類選擇器的規則。
5. 使用了元素選擇器的規則。
6. 只包含一個通用選擇器的規則。

總結：權重是優先級的算法，層疊是優先級的表現

盒子模型（CSS重點）

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其餘的都是細節。要求這三部分，無論如何也要學的非常精通。

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成。

看透網頁佈局的本質

我們前面學過的雙標籤都是一個盒子。有了盒子，我們就可以隨意的，自由的，擺放位置了。

看透網頁佈局的本質： 把網頁元素比如文字圖片等等，放入盒子裏面，然後利用CSS擺放盒子的過程，就是網頁佈局。

盒子模型（Box Model）

首先，我們來看一張圖，來體會下什麼是盒子模型。

所有的文檔元素（標籤）都會生成一個矩形框，我們成爲元素框（element box），它描述了一個文檔元素再網頁佈局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響着其他盒子的大小和位置。

盒子邊框（border）

語法：

border : border-width || border-style || border-color 

邊框屬性—設置邊框樣式（border-style）

邊框樣式用於定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框爲單實線(最爲常用的)

dashed：邊框爲虛線  

dotted：邊框爲點線

double：邊框爲雙實線

盒子邊框寫法總結表

設置內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色;
樣式綜合設置	border-style:上邊 [右邊 下邊 左邊];	none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設置	border-width:上邊 [右邊 下邊 左邊];	像素值
顏色綜合設置	border-color:上邊 [右邊 下邊 左邊];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設置	border:四邊寬度 四邊樣式 四邊顏色;

表格的細線邊框

以前學過的html表格邊框很粗，這裏只需要CSS一句話就可以美觀起來。

table{ border-collapse:collapse; } collapse 單詞是合併的意思

border-collapse:collapse; 表示邊框合併在一起。

圓角邊框(CSS3)

從此以後，我們的世界不只有矩形。radius 半徑（距離）

語法格式：

border-radius: 左上角  右上角  右下角  左下角;

案例:

<style>
		div {
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
		div:first-child {  /* 結構僞類選擇器 選親兄弟 */
			border-radius: 10px;  /*  一個數值表示4個角都是相同的 10px 的弧度 */ 
		}

		div:nth-child(2) {
			/*border-radius: 100px;    取寬度和高度 一半  則會變成一個圓形 */
			border-radius: 50%;   /*  100px   50% 取寬度和高度 一半  則會變成一個圓形 */
		}

		div:nth-child(3) {
			border-radius: 10px 40px;  /* 左上角  和 右下角  是 10px  右上角 左下角 40 對角線 */
		}
		
		div:nth-child(4) {
			border-radius: 10px 40px  80px;   /* 左上角 10    右上角  左下角 40   右下角80 */
		}
		div:nth-child(5) {
			border-radius: 10px 40px  80px  100px;   /* 左上角 10    右上角 40  右下角 80   左下角   右下角100 */
		}
		div:nth-child(6) {
			border-radius: 100px;  
			height: 100px; 
		}
		div:nth-child(7) {
			border-radius: 100px 0;  
		}	
        </style>

內邊距（padding）

padding屬性用於設置內邊距。 是指 邊框與內容之間的距離。

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意： 後面跟幾個數值表示的意思是不一樣的。

值的個數	表達意思
1個值	padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值	padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值	padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

外邊距（margin）

margin屬性用於設置外邊距。 設置外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容。

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

可以讓一個盒子實現水平居中，需要滿足一下兩個條件：

1. 必須是塊級元素。
2. 盒子必須指定了寬度（width）

然後就給左右的外邊距都設置爲auto，就可使塊級元素水平居中。

實際工作中常用這種方式進行網頁佈局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

文字盒子居中圖片和背景區別

1. 文字水平居中是 text-align: center 讓行高等於高度 文字可以垂直居中
2. 盒子水平居中 左右margin 改爲 auto

text-align: center; /*  文字居中水平 */
margin: 10px auto;  /* 盒子水平居中  左右margin 改爲 auto 就闊以了 */

3. 插入圖片 我們用的最多 比如產品展示類
4. 背景圖片我們一般用於小圖標背景 或者 超大背景圖片

section img {  
		width: 200px;/* 插入圖片更改大小 width 和 height */
		height: 210px;
		margin-top: 30px;  /* 插入圖片更改位置 可以用margin 或padding  盒模型 */
		margin-left: 50px; /* 插入當圖片也是一個盒子 */
	}

aside {
		width: 400px;
		height: 400px;
		border: 1px solid purple;
		background: #fff url(images/sun.jpg) no-repeat;
	
		background-size: 200px 210px; /*  背景圖片更改大小隻能用 background-size */
		background-position: 30px 50px; /* 背景圖片更該位置 我用 background-position */
	}

清除元素的默認內外邊距

爲了更方便地控制網頁中的元素，製作網頁時，可使用如下代碼清除元素的默認內外邊距：

* {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
}

注意： 行內元素是隻有左右外邊距的，是沒有上下外邊距的。 內邊距，在ie6等低版本瀏覽器也會有問題。

我們儘量不要給行內元素指定上下的內外邊距就好了。

外邊距合併

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。

相鄰塊元素垂直外邊距的合併

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現象被稱爲相鄰塊元素垂直外邊距的合併（也稱外邊距塌陷）。

解決方案： 避免就好了。

嵌套塊元素垂直外邊距的合併

對於兩個嵌套關係的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合併，合併後的外邊距爲兩者中的較大者，即使父元素的上外邊距爲0，也會發生合併。

解決方案：

1. 可以爲父元素定義1像素的上邊框或上內邊距。
2. 可以爲父元素添加overflow:hidden。

待續。。。。

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。

width和height的屬性值可以爲不同單位的數值或相對於父元素的百分比%，實際工作中最常用的是像素值。

大多數瀏覽器，如Firefox、IE6及以上版本都採用了W3C規範，符合CSS規範的盒子模型的總寬度和總高度的計算原則是：

  /*外盒尺寸計算（元素空間尺寸）*/
  Element空間高度 = content height + padding + border + margin
  Element 空間寬度 = content width + padding + border + margin
  /*內盒尺寸計算（元素實際大小）*/
  Element Height = content height + padding + border （Height爲內容高度）
  Element Width = content width + padding + border （Width爲內容寬度）

注意：

1、寬度屬性width和高度屬性height僅適用於塊級元素，對行內元素無效（ img 標籤和 input除外）。

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合併的情況。

3、如果一個盒子沒有給定寬度/高度或者繼承父親的寬度/高度，則padding 不會影響本盒子大小。

盒子模型佈局穩定性

開始學習盒子模型，同學們最大的困惑就是， 分不清內外邊距的使用，什麼情況下使用內邊距，什麼情況下使用外邊距？

答案是： 其實他們大部分情況下是可以混用的。 就是說，你用內邊距也可以，用外邊距也可以。 你覺得哪個方便，就用哪個。

但是，總有一個最好用的吧，我們根據穩定性來分，建議如下：

按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin）。

  width >  padding  >   margin   

原因：

1. margin 會有外邊距合併 還有 ie6下面margin 加倍的bug（討厭）所以最後使用。
2. padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。
3. width 沒有問題（嗨皮）我們經常使用寬度剩餘法 高度剩餘法來做。

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定爲content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

1、box-sizing: content-box 盒子大小爲 width + padding + border content-box:此值爲其默認值，其讓元素維持W3C的標準Box Mode

2、box-sizing: border-box 盒子大小爲 width 就是說 padding 和 border 是包含到width裏面的

注：上面的標註的width指的是CSS屬性裏設置的width: length，content的值是會自動調整的。

div:first-child {
			width: 200px;
			height: 200px;
			background-color: pink; 
			box-sizing: content-box;  /*  就是以前的標準盒模型  w3c */
			padding: 10px;
			border: 15px solid red;
			/* 盒子大小爲 width + padding + border   content-box:此值爲其默認值，其讓元素維持W3C的標準Box Mode */
		}
		div:last-child {
			width: 200px;
			height: 200px;
			background-color: purple;
			padding: 10px;
			box-sizing: border-box;   /* padding border  不撐開盒子 */
			border: 15px solid red;
			/* margin: 10px; */
			/* 盒子大小爲 width    就是說  padding 和 border 是包含到width裏面的 */
}

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

1. 前兩個屬性是必須寫的。其餘的可以省略。
2. 外陰影 (outset) 但是不能寫 默認 想要內陰影 inset

div {
			width: 200px;
			height: 200px;
			border: 10px solid red;
			/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);  */
			/* box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸（影子大小） 陰影顏色  內/外陰影； */
			box-shadow: 0 15px 30px  rgba(0, 0, 0, .4);
			
}

浮動(float)

普通流(normal flow)

這個單詞很多人翻譯爲 文檔流 ， 字面翻譯 普通流 或者標準流都可以。

前面我們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

html語言當中另外一個相當重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種大前提的佈局排列之下絕對不會出現例外的情況叫做普通流佈局。

浮動(float)

浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實現“環繞”圖片的效果

後來，我們發現浮動可以讓任何盒子可以一行排列,因此我們就慢慢的開始用浮動的特性來佈局了。

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動詳細內幕特性

浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。 

浮動的元素排列位置，跟上一個元素（塊級）有關係。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2可以推斷出，一個父盒子裏面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。

元素添加浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者默認的內容多少浮動根據元素書寫的位置來顯示相應的浮動。

版心和佈局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀。同樣，在製作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”。

“版心”(可視區) 是指網頁中主體內容所在的區域。一般在瀏覽器窗口中水平居中顯示，常見的寬度值爲960px、980px、1000px、1200px等。

佈局流程

爲了提高網頁製作的效率，佈局時通常需要遵守一定的佈局流程，具體如下：

1、確定頁面的版心（可視區）。

2、分析頁面中的行模塊，以及每個行模塊中的列模塊。

3、製作HTML結構 。

4、CSS初始化，然後開始運用盒子模型的原理，通過DIV+CSS佈局來控制網頁的各個模塊。

一列固定寬度且居中

最普通的，最爲常用的結構

兩列左窄右寬型

通欄平均分佈型

清除浮動

爲什麼要清除浮動

我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做佈局用，則會有很多的問題出現， 但是，你不能說浮動不好 由於浮動元素不再佔用原文檔流的位置，所以它會對後面的元素排版產生影響，爲了解決這些問題，此時就需要在該元素中清除浮動。

準確地說，並不是清除浮動，而是清除浮動後造成的影響

清除浮動本質

清除浮動主要爲了解決父級元素因爲子級浮動引起內部高度爲0 的問題。

清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

額外標籤法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標籤例如 <div style=”clear:both”></div>，或則其他標籤br等亦可。

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標籤，結構化較差。

父級添加overflow屬性方法

可以通過觸發BFC的方式，可以實現清除浮動效果。

可以給父級添加： overflow爲 hidden|auto|scroll  都可以實現。

優點： 代碼簡潔

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素。

使用after僞元素清除浮動

:after 方式爲空元素的升級版，好處是不用單獨加標籤了

使用方法：

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */

優點： 符合閉合浮動思想 結構語義化正確

缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

注意： content:"." 裏面儘量跟一個小點，或者其他，儘量不要爲空，否則再firefox 7.0前的版本會有生成空格。

使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 這句話可以出發BFC BFC可以清除浮動,BFC我們後面講 */
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

優點： 代碼更簡潔

缺點： 由於IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

代表網站： 小米、騰訊等

Photoshop

要求 ：

1.會簡單的摳圖

2.會簡單的修改PSD效果圖

3.能熟練的切圖

Photoshop基本使用

PS界面組成

菜單欄、選項欄、工具欄、浮動面板（拖拽名稱，可單獨操作面板）、繪圖窗口
​ 窗口菜單，可顯示隱藏所有面板

工作區：（新建）

1、調整浮動面板

2、選項欄後方，新建工作區，命名。

刪除工作區：先選擇其他工作區，再操作刪除工作區。

基本操作

文件下拉菜單：
​ 1、新建 新建文檔 CTRL+N

單位：像素 釐米 毫米

屏幕顯示： 單位 像素 72像素/英寸 RGB顏色模式

印刷行業： 單位 CM/MM 300像素/英寸 CMYK顏色模式

2、關閉文檔 CTRL+W

3、存儲 CTRL+S （替存）

4、存儲爲 CTRL+SHIFT+S 另存一份文件

5、格式：
​ .psd PS源文件格式 圖層、文字、樣式等，可再次編輯
​ （給自己）
​ .jpg 有損壓縮格式 （給客戶） 品質 最高12

6、文件打開：
​ 1）文件下拉菜單-打開（CTRL+O歐）（雙擊軟件空白處=打開）
​ 2）拖拽文件至選項欄上方，釋放鼠標

移動工具 V

1、不同文件之間拖拽圖像。

自由變形 Ctrl + T

使用技巧：

1.使用鼠標拖拽控制點，可以縮放，按Shift鍵，在對角上脫宅可以等比例縮放
2.鼠標放到框外，拖動可以旋轉對象 完成旋轉後 按下回車確認操作

圖層操作

圖層面板快捷鍵 F7

圖層選擇： 使用移動工具V

1、圖層縮覽圖判斷

2、按住CTRL,在目標圖像上單擊

3、將光標放置在目標圖像上右鍵，選擇圖層名稱

圖層面板中加選圖層：

1、按SHIFT，單擊另一目標圖層 中間所有圖層被選中

2、按CTRL，單擊另一目標圖層 只選中目標圖層

複製圖層：選中目標圖層後（移動工具狀態下）

1、按ALT拖拽圖像

2、CTRL+J （重合）

3、拖拽目標至創建新圖層按鈕

圖層編組

選中目標圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可重新命名

雙擊組名稱，可命名組

移動工具V選擇組或圖層時，需設置選項欄

圖層上下位置移動

1、選中目標圖層，在圖層面拖拽

2、CTRL+] 向上移動圖層
​ CTRL+[ 向下移動圖層

3、CTRL+SHIFT+] 圖層置頂
​ CTRL+SHIFT+[ 圖層置底

移動選區或圖像時：

移動過程中，沒釋放鼠標，按住SHIFT，可同一水平線、同一垂線、45度移動。

圖層透明度和合並圖層

**合併圖層：Ctrl + E

不透明度：設置圖層的不透明程度 0%完全透明，不可見

​ 100%完全不透明，真實可見

填充：與不透明度效果類似

鍵盤數字鍵，可快速設置透明度數值

矩形選區工具 M

用來選擇某部分區域 我們稱爲選區工具

橢圓選區工具： 光標放在中心點 按下 Shift + Alt 以光標爲圓心 等比例放大

取消選區： ctrl + d

顏色填充

前景色：Alt+delete

背景色：Ctrl+delete

套索工具 L

1、套索工具 L 在屏幕上拖拽鼠標左鍵，釋放後生成選區

2、多邊形套索 L 連續單擊繪製多邊形選區

​ 閉合方法：1、單擊起始點 2、雙擊任意位置

​ DELETE刪除當前點

3、磁性套索工具 L 單擊顏色交界後，沿交界線拖拽鼠標，可生成選區。

磁性套索 L

L 在顏色交界的位置單擊後拖動。單擊起始點後，生成選區。 大小寫鍵：CAPSLOCK 可控制光標精確狀態。

魔棒工具 W

以單擊位置爲選擇色，選擇相似顏色生成選區。

容差：選擇顏色的範圍 容差小，顏色選擇精確。 0-255

連續：勾選連續時，相連顏色生成選區。

​ 不勾選，畫面中所有相似顏色被選中生成選區。

按SHIFT在未生成選區位置單擊，可選區相加。

選區反選：CTRL+SHIFT+I

選區布爾運算

選區面積大小的變化。

新選區：保持選中狀態

添加到選區：相加運算（按住SHIFT再繪製選區）

從選區減去：相減（按住ALT再繪製選區）

與選區交叉：重合部分保留。（按住ALT+SHIFT再繪製選區）

鋼筆工具： P

作用：繪製路徑，生成選區，摳圖。

組成;路徑線和錨點

繪製路徑後，CTRL+回車，生成選區。

路徑類型：

直線型路徑：連續單擊

曲線型路徑：第一點單擊，第二點拖動鼠標。

Photoshop 切圖

PS切圖 可以 分爲 手動 利用切片切圖 以及 利用PS的插件快速切圖

切片工具

1. 利用切片工具手動劃出

2. 圖層—新建基於圖層的切片

3. 利用標尺 基礎參考線的切片

   導出格式:導出爲web所用格式 Shift + Alt + Ctrl + s

### 切圖插件

Cutterman是一款運行在photoshop中的插件，能夠自動將你需要的圖層進行輸出， 以替代傳統的手工 “導出web所用格式” 以及使用切片工具進行挨個切圖的繁瑣流程。 它支持各種各樣的圖片尺寸、格式、形態輸出，方便你在pc、ios、Android等端上使用。 它不需要你記住一堆的語法、規則，純點擊操作，方便、快捷，易於上手。