文章目錄

• CSS的發展歷程
• CSS 網頁的美容師
• CSS初識
• CSS樣式規則
• CSS字體樣式屬性
• • font-size:字號大小
  • font-family:字體
  • font-weight:字體粗細
  • font-style:字體風格
  • font:綜合設置字體樣式 (重點)
• 選擇器
• • 標簽選擇器（元素選擇器）
  • 類選擇器
  • 多類名選擇器
  • id選擇器
  • id選擇器和類選擇器區別
  • 通配符選擇器
  • 偽類選擇器
  • • 鏈接偽類選擇器
    • 結構(位置)偽類選擇器（CSS3)
    • 目標偽類選擇器(CSS3)
• CSS注釋
• CSS外觀屬性
• • color:文本顏色
  • line-height:行間距
  • text-align:水平對齊方式
  • text-indent:首行縮進
  • letter-spacing:字間距
  • word-spacing:單詞間距
  • 顏色半透明(css3)
  • 文字陰影(CSS3)
• 引入CSS樣式表（書寫位置）
• • 行內式（內聯樣式）
  • 內部樣式表（內嵌式）
  • 外部樣式表（外鏈式）
  • 三種樣式表總結
• 標簽顯示模式（display）
• • 塊級元素(block-level)
  • 行內元素(inline-level)
  • 塊級元素和行內元素區別
  • 行內塊元素（inline-block）
• CSS復合選擇器
• • 交集選擇器
  • 并集選擇器
  • 后代選擇器
  • 子元素選擇器
  • 屬性選擇器
  • • 偽元素選擇器（CSS3)
• CSS 背景(background)
• • 背景圖片(image)
  • 背景平鋪（repeat）
  • 背景位置(position)
  • 背景附著
  • 背景簡寫
  • 背景透明(CSS3)
  • 背景縮放(CSS3)
  • 多背景(CSS3)
• CSS 三大特性
• • CSS層疊性
  • CSS優先級
  • CSS特殊性（Specificity）
• 盒子模型（CSS重點）
• • 看透網頁布局的本質
  • 盒子模型（Box Model）
  • 盒子邊框（border）
  • • 表格的細線邊框
    • 盒子邊框總結表
    • 圓角邊框(CSS3)
  • 內邊距（padding）
  • 外邊距（margin）
  • • 外邊距實現盒子居中
    • 清除元素的默認內外邊距
  • 外邊距合并
  • • 相鄰塊元素垂直外邊距的合并
    • 嵌套塊元素垂直外邊距的合并
  • content寬度和高度
  • 盒子模型布局穩定性
  • CSS3盒模型
  • 盒子陰影
• 浮動(float)
• • 普通流(normal flow)
  • 什么是浮動？
  • 浮動詳細內幕特性
• 清除浮動
• • 為什么要清除浮動
  • 清除浮動本質
  • 清除浮動的方法
  • • 額外標簽法
    • 父級添加overflow屬性方法
    • 使用after偽元素清除浮動
    • 使用before和after雙偽元素清除浮動
• 版心和布局流程
• • 布局流程
  • 一列固定寬度且居中
  • 兩列左窄右寬型
  • 通欄平均分布型
• Photoshop
• • Photoshop基本使用
  • PS界面組成：
  • 基本操作
  • 移動工具 V
  • 圖層操作
  • 圖層編組
  • 圖層上下位置移動
  • 圖層透明度
  • 套索工具 L
  • 磁性套索 L
  • 魔棒工具 W
  • 選區布爾運算
  • 鋼筆工具： P
  • Photoshop 切圖
  • • 切片工具
    • 切圖插件
• 定位(position)
• • 元素的定位屬性
  • 靜態定位(static)
  • 相對定位relative
  • 絕對定位absolute
  • • 父級沒有定位
    • 父級有定位
    • 絕對定位的盒子沒有邊偏移
    • 子絕父相
  • 固定定位fixed(認死理型)
  • 疊放次序（z-index）
• 四種定位總結
• 定位模式轉換
• 元素的顯示與隱藏
• • display 顯示
  • visibility 可見性
  • overflow 溢出
• CSS高級技巧
• • CSS用戶界面樣式
  • • 鼠標樣式cursor
    • 輪廓 outline
    • 防止拖拽文本域resize
  • vertical-align 垂直對齊
  • • 圖片和文字對齊
    • 去除圖片底側空白縫隙
  • CSS精靈技術（sprite）
  • • 核心技術
  • 過渡(CSS3)
  • 2D變形(CSS3)
  • 動畫(CSS3)

CSS的發展歷程

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

CSS 網頁的美容師

CSS的出現，拯救了混亂的HTML，當讓更加拯救了我們web開發者。 讓我們的網頁更加豐富多彩。

CSS初識

CSS(Cascading Style Sheets)

CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設置HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式。

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

CSS樣式規則

使用HTML時，需要遵從一定的規范。CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

在上面的樣式規則中:1.選擇器用于指定CSS樣式作用的HTML對象，花括號內是對該對象設置的具體樣式。 2.屬性和屬性值以“鍵值對”的形式出現。 3.屬性是對指定的對象設置的樣式屬性，例如字體大小、文本顏色等。 4.屬性和屬性值之間用英文“:”連接。 5.多個“鍵值對”之間用英文“;”進行區分。 可以用段落 和 表格的對齊的演示。

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設置字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位。其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少。具體如下：

font-family:字體

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

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

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

常用技巧：

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

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外，可以使用CSS 來實現，但是CSS 是沒有語義的。

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

小技巧：

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

font-style:字體風格

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

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

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

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

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

<小技巧：

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

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

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

選擇器{font: font-style font-weight font-size/line-height font-family;} 使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開。注意：其中不需要設置的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用。

選擇器

標簽選擇器（元素選擇器）

標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式。其基本語法格式如下：

標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 或者 元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標簽選擇器最大的優點是能快速為頁面中同類型的標簽統一樣式，同時這也是他的缺點，不能設計差異化樣式。

課堂案例：

類選擇器

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; } 標簽調用的時候用 class=“類名” 即可。

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

小技巧：

1.長名稱或詞組可以使用中橫線來為選擇器命名。 2.不建議使用“_”下劃線來命名CSS選擇器。

? 輸入的時候少按一個shift鍵;
　瀏覽器兼容問題 (比如使用_tips的選擇器命名，在IE6是無效的)
　能良好區分JavaScript變量命名(JS變量命名是用“_”)

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

下面講的是google的案例

<head><meta charset="utf-8"><style>span {font-size: 100px;}.blue {color: blue;}.red {color: red;}.orange {color: orange;}.green {color: green;}</style></head><body><span class="blue">G</span><span class="red">o</span><span class="orange">o</span><span class="blue">g</span><span class="green">l</span><span class="red">e</span></body>

多類名選擇器

我們可以給標簽指定多個類名，從而達到更多的選擇目的。

注意：

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 愛上了討厭 記憶法 或者 lv 包包 非常 hao

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;}

目標偽類選擇器(CSS3)

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

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

CSS注釋

CSS規則是使用 /* 需要注釋的內容 */ 進行注釋的，即在需要注釋的內容前使用 “/*” 標記開始注釋，在內容的結尾使用 “*/”結束。

例如：

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

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:行間距

ine-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）

塊級元素(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特殊）

注意：

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

鏈接里面不能再放鏈接。

塊級元素和行內元素區別

塊級元素的特點： （1）總是從新行開始 （2）高度，行高、外邊距以及內邊距都可以控制。 （3）寬度默認是容器的100% （4）可以容納內聯元素和其他塊元素。 行內元素的特點： （1）和相鄰行內元素在一行上。 （2）高、寬無效，但水平方向的padding和margin可以設置，垂直方向的無效。 （3）默認寬度就是它本身內容的寬度。 （4）行內元素只能容納文本或則其他行內元素。

行內塊元素（inline-block）

在行內元素中有幾個特殊的標簽——<img />、<input />、<td>，可以對它們設置寬高和對齊屬性，有些資料可能會稱它們為行內塊元素。行內塊元素的特點： （1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙。 （2）默認寬度就是它本身內容的寬度。 （3）高度，行高、外邊距以及內邊距都可以控制。

CSS復合選擇器

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

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格

記憶技巧：

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

比如： 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)

E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

E::first-line 文本第一行；

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 || lengthbackground-position : position || position

參數：

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

說明：

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

注意：

position 后面是x坐標和y坐標。 可以使用方位名詞或者 精確單位。

如果和精確單位和方位名字混合使用，則必須是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樣式的復雜性。子元素可以繼承父元素的樣式（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,2a: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能趕上一個類選擇器的情況。

總結優先級：

使用了 !important聲明的規則。

內嵌在 HTML 元素的 style屬性里面的聲明。

使用了 ID 選擇器的規則。

使用了類選擇器、屬性選擇器、偽元素和偽類選擇器的規則。

使用了元素選擇器的規則。

只包含一個通用選擇器的規則。

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

盒子模型（CSS重點）

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

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

看透網頁布局的本質

網頁布局中，我們是如何把里面的文字，圖片，按照美工給我們的效果圖排列的整齊有序

盒子模型（Box Model）

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

盒子邊框（border）

語法：

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

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

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

none：沒有邊框即忽略所有邊框的寬度（默認值）solid：邊框為單實線(最為常用的)dashed：邊框為虛線dotted：邊框為點線double：邊框為雙實線

表格的細線邊框

以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來。 讓我們真的相信，CSS就是我們的白馬王子（白雪公主）。

table{ border-collapse:collapse; }

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

盒子邊框總結表

設置內容	樣式屬性	常用屬性值
上邊框	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:四邊寬度 四邊樣式 四邊顏色;

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形。

語法格式：

Border-radius: 水平半徑/垂直半徑；

一般我們垂直半徑都是省略的默認和水平半徑一樣。

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

課堂案例:

<style>div {width:200px;height:200px;border:1px solid red;margin:10px 40px;text-align: center;line-height: 200px;}div:first-child {border:10px solid red;border-radius: 20px/50px;}div:nth-child(2) {border-radius: 20px;}div:nth-child(3) {border-radius: 15px 0;}div:nth-child(4) {border-radius:100px;}div:nth-child(5) {border-radius: 50%;}div:nth-child(6) {border-radius: 100px 0;}div:nth-child(7) {border-radius: 200px 0 0 0;}div:nth-child(8) {border-radius: 100px 100px 0 0;height:100px; /*高度減半*/}div:nth-child(9) {border-radius: 100px;height:100px;}div:nth-child(10) {border-radius: 100%;height:100px;} </style

內邊距（padding）

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

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:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同。

外邊距實現盒子居中

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

必須是塊級元素。

盒子必須指定了寬度（width）

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

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

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

清除元素的默認內外邊距

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

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

注意： 行內元素是只有左右內外邊距的，是沒有上下內外邊距的。

外邊距合并

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

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

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

解決方案： 避免就好了。

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

對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并。

解決方案：

可以為父元素定義1像素的上邊框或上內邊距。

可以為父元素添加overflow:hidden。

待續。。。。

content寬度和高度

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

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

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

盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和 盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和

注意：

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

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

盒子模型布局穩定性

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

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

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

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

width > padding > margin

原因：

margin 會有外邊距合并 還有 ie6下面margin 加倍的bug（討厭）所以最后使用。

padding 會影響盒子大小， 需要進行加減計算（麻煩） 其次使用。

width 沒有問題（嗨皮）我們經常使用寬度剩余法 高度剩余法來做。

CSS3盒模型

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

可以分成兩種情況：

1、box-sizing: border-box 盒子大小為 width

2、box-sizing: content-box 盒子大小為 width + padding + border

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

div {width: 100px;height: 100px;background: skyblue;margin: 0 auto;border: 1px solid gray;/* 默認的設置 如果我們添加了 border屬性 該容器的大小會發生改變因為他要優先保證內部的內容所占區域 不變*//* box-sizing 如果不設置 默認的值 就是 content-box: 優先保證內容的大小 對盒子進行縮放;border-box: 讓 盒子 優先保證自己所占區域的大小,對內容進行壓縮;*/box-sizing: border-box; }

盒子陰影

語法格式：

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

前兩個屬性是必須寫的。其余的可以省略。

外陰影 (outset) 但是不能寫 默認 想要內陰影 inset

img {border:10px solid orange;box-shadow:3px 3px 5px 4px rgba(0,0,0,1); }

浮動(float)

普通流(normal flow)

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

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

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

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

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

后來，我們發現浮動有個很有意思的事情：就是讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了。（CSS3已經我們真正意義上的網頁布局，具體CSS3我們會詳細解釋）

什么是浮動？

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

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

選擇器{float:屬性值;} 屬性值描述

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

浮動詳細內幕特性

浮動首先創建包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的范圍。 浮動的元素排列位置，跟上一個元素（塊級）有關系。如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。 由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。 浮動脫離標準流，不占位置，會影響標準流。浮動只有左右浮動。 元素添加浮動后，元素會具有行內塊元素的特性。元素的大小完全取決于定義的大小或者默認的內容多少 浮動根據元素書寫的位置來顯示相應的浮動。

總結： 浮動 —> 浮漏特

浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不占位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，這是特殊的使用，有很多的不好處，使用要謹慎。

清除浮動

為什么要清除浮動

我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，

由于浮動元素不再占用原文檔流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。

如果浮動一開始就是一個美麗的錯誤，那么請用正確的方法挽救它。

清除浮動本質

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

清除浮動的方法

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

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

選擇器{clear:屬性值;} 屬性值描述

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

額外標簽法

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

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

缺點： 添加許多無意義的標簽，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

可以通過觸發BFC的方式，可以實現清除浮動效果。（BFC后面講解）

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

優點： 代碼簡潔

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

使用after偽元素清除浮動

使用方法：

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {*zoom: 1;} /* IE6、7 專有 */

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

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

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

使用方法：

.clearfix:before,.clearfix:after { content:".";display:table; } .clearfix:after {clear:both; } .clearfix {*zoom:1; }

優點： 代碼更簡潔

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

代表網站： 小米、騰訊等

版心和布局流程

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

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

布局流程

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

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

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

3、制作HTML頁面，CSS文件。

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

一列固定寬度且居中

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

兩列左窄右寬型

比如小米 小米官網

通欄平均分布型

比如錘子 錘子官網

Photoshop

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、不同文件之間拖拽圖像。

圖層操作

圖層面板快捷鍵 F7

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

1、圖層縮覽圖判斷

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

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

圖層面板中加選圖層：

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

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

復制圖層：選中目標圖層后（移動工具狀態下）

1、按ALT拖拽圖像

2、CTRL+J （重合）

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

圖層編組

選中目標圖層，CTRL+G

取消編組：CTRL+SHIFT+G

雙擊圖層名稱可重新命名

雙擊組名稱，可命名組

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-b8Gc8m6m-1615418691626)(media/1498465862231.png)]

圖層上下位置移動

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

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

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

移動選區或圖像時：

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

圖層透明度

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

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

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

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

套索工具 L

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

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

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

? DELETE刪除當前點

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

磁性套索 L

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

魔棒工具 W

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

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-BGPRXYGJ-1615418691628)(media/1498465928343.png)]

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

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

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

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

選區反選：CTRL+SHIFT+I

選區布爾運算

選區面積大小的變化。

新選區：保持選中狀態

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

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

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

鋼筆工具： P

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

組成;路徑線和錨點

繪制路徑后，CTRL+回車，生成選區。

路徑類型：

直線型路徑：連續單擊

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

Photoshop 切圖

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

切片工具

利用切片工具手動劃出

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

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

切圖插件

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

定位(position)

如果，說浮動， 關鍵在一個 “浮” 字上面， 那么 我們的定位，關鍵在于一個 “位” 上。

PS: 定位是我們CSS算是數一數二難點的了，但是，你務必要學好它，我們CSS離不開定位，特別是后面的js特效，天天和定位打交道。不要抵觸它，反而要愛上它，它可以讓我們工作更加輕松哦！

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分。

1、邊偏移

邊偏移屬性描述

top	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	底部偏移量，定義元素相對于其父元素下邊線的距離
left	左側偏移量，定義元素相對于其父元素左邊線的距離
right	右側偏移量，定義元素相對于其父元素右邊線的距離

也就說，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

值描述

static	自動定位（默認定位方式）
relative	相對定位，相對于其原文檔流的位置進行定位
absolute	絕對定位，相對于其上一個已經定位的父元素進行定位
fixed	固定定位，相對于瀏覽器窗口進行定位

靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置。 所謂靜態位置就是各個元素在HTML文檔流中默認的位置。

上面的話翻譯成白話： 就是網頁中所有元素都默認的是靜態定位哦！ 其實就是標準流的特性。

在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

PS： 靜態定位其實沒啥可說的。

相對定位relative

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置。

對元素設置相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在文檔流中的位置仍然保留。即是一個相對定位的效果展示：

注意： 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有。

就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它。

絕對定位absolute

[注意] 如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

當position屬性的取值為absolute時，可以將元素的定位模式設置為絕對定位。

注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置。

父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準對齊(document文檔)。

父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位。

絕對定位的盒子沒有邊偏移

如果只是給盒子指定了 定位，但是沒有給與邊偏移，則改盒子以標準流來顯示排序，和上一個盒子的底邊對齊，但是不占有位置。

子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的。

這句話的意思是 子級是絕對定位的話， 父級要用相對定位。

首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位。

就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的。

草圖就是如下：

所以，我們可以得出如下結論：

因為子級是絕對定位，不會占有位置， 可以放到父盒子里面的任何一個地方。

父盒子布局時，需要占有位置，因此父親只能是 相對定位.

這就是子絕父相的由來。

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，它以瀏覽器窗口作為參照物來定義網頁元素。當position屬性的取值為fixed時，即可將元素的定位模式設置為固定定位。

當對元素設置固定定位后，它將脫離標準文檔流的控制，始終依據瀏覽器窗口來定義自己的顯示位置。不管瀏覽器滾動條如何滾動也不管瀏覽器窗口的大小如何變化，該元素都會始終顯示在瀏覽器窗口的固定位置。

固定定位有兩點：

固定定位的元素跟父親沒有任何關系，只認瀏覽器。

固定定位完全脫標，不占有位置，不隨著滾動條滾動。

記憶法： 就類似于孫猴子， 無父無母，好不容易找到一個可靠的師傅（瀏覽器），就聽的師傅的，別的都不聽。

ie6等低版本瀏覽器不支持固定定位。

疊放次序（z-index）

當對多個元素同時設置定位時，定位元素之間有可能會發生重疊。

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0。

比如： z-index: 2;

注意：

z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上。

如果取值相同，則根據書寫順序，后來居上。

后面數字一定不能加單位。

只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性。

四種定位總結

定位模式是否脫標占有位置是否可以使用邊偏移移動位置基準

靜態static	不脫標，正常模式	不可以	正常模式
相對定位relative	不脫標，占有位置	可以	相對自身位置移動
絕對定位absolute	完全脫標，不占有位置	可以	相對于定位父級移動位置
固定定位fixed	完全脫標，不占有位置	可以	相對于瀏覽器移動位置

定位模式轉換

跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發生轉換， 都轉換為 行內塊模式， 因此 比如 行內元素 如果添加了 絕對定位或者 固定定位后，可以不用轉換模式，直接給高度和寬度就可以了。

元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow。

他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。 最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新刷新頁面，它們又會出現和你玩躲貓貓！！

display 顯示

display 設置或檢索對象是否及如何顯示。

display : none 隱藏對象 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

特點： 隱藏之后，不再保留位置。

visibility 可見性

設置或檢索是否顯示對象。

visible : 　對象可視

hidden : 　對象隱藏

特點： 隱藏之后，繼續保留原有位置。（停職留薪）

overflow 溢出

檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。

visible : 　不剪切內容也不添加滾動條。

auto : 　 超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉

scroll : 　不管超出內容否，總是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的鼠標樣式， 表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了。 防止表單域拖拽

鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

cursor : default 小白 | pointer 小手 | move 移動 | text 文本

鼠標放我身上查看效果哦：

<ul><li style="cursor:default">我是小白</li><li style="cursor:pointer">我是小手</li><li style="cursor:move">我是移動</li><li style="cursor:text">我是文本</li> </ul>

盡量不要用hand 因為 火狐不支持 pointer ie6以上都支持的盡量用

輪廓 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

outline : outline-color ||outline-style || outline-width

但是我們都不關心可以設置多少，我們平時都是去掉的。

最直接的寫法是 ： outline: 0;

<input type="text" style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域。

右下角可以拖拽：

右下角不可以拖拽：

<textarea style="resize: none;"></textarea>

vertical-align 垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

以前我們還講過讓文字居中對齊，是 text-align: center;

但是我們從來沒有講過有垂直居中的屬性， 我們的媽媽一直很擔心我們的垂直居中怎么做。

vertical-align 垂直對齊， 這個看上去很美好的一個屬性， 實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。

vertical-align : baseline |top |middle |bottom

設置或檢索對象內容的垂直對其方式。

vertical-align 不影響塊級元素中的內容對齊，它只針對于 行內元素或者行內塊元素，特別是行內塊元素， 通常用來控制圖片和表單等。

圖片和文字對齊

所以我們知道，我們可以通過vertical-align 控制圖片和文字的垂直關系了。 默認的圖片會和文字基線對齊。

去除圖片底側空白縫隙

有個很重要特性你要記住： 如果一個元素沒有基線，比如圖片或者表單等行內塊元素 ，則他的底線會和父級盒子的基線對齊。 這樣會造成一個問題，就是圖片底側會有一個空白縫隙。

解決的方法就是：

給img vertical-align:middle | top等等。 讓圖片不要和基線對齊。

給img 添加 display：block; 轉換為塊級元素就不會存在問題了。

CSS精靈技術（sprite）

核心技術

核心技術就是利用CSS精靈（主要是背景位置）和盒子padding撐開寬度, 以便能適應不同字數的導航欄。

一般的經典布局都是這樣的：

<li><a href="#"><span>導航欄內容</span></a> </li>

總結：

a 設置 背景左側，padding撐開合適寬度。

span 設置背景右側， padding撐開合適寬度 剩下由文字繼續撐開寬度。

之所以a包含span就是因為 整個導航都是可以點擊的。

過渡(CSS3)

過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

在CSS3里使用transition可以實現補間動畫（過渡效果），并且當前元素只要有“屬性”發生變化時即存在兩種狀態(我們用A和B代指），就可以實現平滑的過渡，為了方便演示采用hover切換兩種狀態，但是并不僅僅局限于hover狀態來實現過渡。

語法格式:

transition: 要過渡的屬性 花費時間 運動曲線 何時開始; 屬性描述CSS

transition	簡寫屬性，用于在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 “ease”。	3
transition-delay	規定過渡效果何時開始。默認是 0。	3

運動曲線示意圖：

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-kpoVLFsn-1615418691629)(media/1498445454760.png)]

img {width:80px; height: 80px; border:8px solid #ccc; border-radius: 50%;transition:transform 0.5s ease-in 0s; } img:hover {transform:rotate(180deg); }

2D變形(CSS3)

轉換是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、變形、縮放，甚至支持矩陣方式，配合過渡和即將學習的動畫知識，可以取代大量之前只能靠Flash才可以實現的效果。

變形轉換 transform

• 移動 translate(x, y)

translate(50px,50px);

使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。

可以改變元素的位置，x、y可為負值；

translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）translateX(x)僅水平方向移動（X軸移動）translateY(Y)僅垂直方向移動（Y軸移動） .box {width: 499.9999px;height: 400px;background: pink;position: absolute;left:50%;top:50%;transform:translate(-50%,-50%); /* 走的自己的一半 */ }

讓定位的盒子水平居中

• 縮放 scale(x, y)

transform:scale(0.8,1);

可以對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。

scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放） scaleX(x)元素僅水平方向縮放（X軸縮放） scaleY(y)元素僅垂直方向縮放（Y軸縮放）

scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大

• 旋轉 rotate(deg)

可以對元素進行旋轉，正值為順時針，負值為逆時針；

transform:rotate(45deg);

當元素旋轉以后，坐標軸也跟著發生的轉變

調整順序可以解決，把旋轉放到最后

注意單位是 deg 度數

案例旋轉撲克牌

body {background-color: skyblue; } .container {width: 100px;height: 150px;border: 1px solid gray;margin: 300px auto;position: relative; } .container > img {display: block;width: 100%;height: 100%;position: absolute;transform-origin: top right;/* 添加過渡 */transition: all 1s; } .container:hover img:nth-child(1) {transform: rotate(60deg); } .container:hover img:nth-child(2) {transform: rotate(120deg); } .container:hover img:nth-child(3) {transform: rotate(180deg); } .container:hover img:nth-child(4) {transform: rotate(240deg); } .container:hover img:nth-child(5) {transform: rotate(300deg); } .container:hover img:nth-child(6) {transform: rotate(360deg); }

• 傾斜 skew(deg, deg)

transform:skew(30deg,0deg);

該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。

可以使元素按一定的角度進行傾斜，可為負值，第二個參數不寫默認為0。

5.transform-origin可以調整元素轉換的原點

div{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，然后進行順時旋轉45度 */

動畫(CSS3)

動畫是CSS3中具有顛覆性的特征之一，可通過設置多個節點來精確控制一個或一組動畫，常用來實現復雜的動畫效果。

語法格式：

animation:動畫名稱 動畫時間 運動曲線 何時開始 播放次數 是否反方向;

關于幾個值，除了名字，動畫時間，延時有嚴格順序要求其它隨意r

@keyframes 動畫名稱 {from{ 開始位置 } 0%to{ 結束 } 100% } animation-iteration-count:infinite; 無限循環播放 animation-play-state:paused; 暫停動畫"

總結

以上是生活随笔為你收集整理的史上最全的CSS基础知识大全！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。