前端基礎-- CSS
阿新 • • 發佈：2018-10-25
值範圍 接收 times span www. 外觀 cit 背景 sim 
CSS知識
CSS（Cascading Style Sheet，層疊樣式表）定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。Css之車更豐富的文檔外觀，Css可以為任何元素的文本和背景設置顏色；允許在任何元素外圍設置邊框；允許改變文字的大小，裝飾（如下劃線），間隔，甚至可以確定是否顯示文本。
CSS語法
每個CSS樣式右兩部分組成：選擇器和聲明。聲明又包括屬性和屬性值。
提示：聲明使用花括號包圍， 多個屬性用分好分隔，屬性和值之間使用冒號分隔。
CSS的幾種引入方式
行內樣式
行內樣式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。如果代碼量多的話，閱讀效率降低。
<p style="color: red">Hello world.</p>
內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head>
外部樣式
外部樣式就是將CSS寫在一個單獨的文件中，然後在頁面進行引入即可。推薦使用此方式。
<link href="mystyle.css" rel="stylesheet" type="text/css"/>
CSS選擇器
基本選擇器
標簽選擇器
- 什麽是標簽選擇器？
- 作用：根據指定的標簽名稱，在當前界面中找到所有該名稱的標簽，然後設置屬性
- 格式：
標簽名稱{ 屬性:值; } p {color: "red";}
- 註意點：
1、標簽選擇器選中的是當前界面中所有的標簽，而不能單獨選中某一個標簽 2、標簽選擇器無論標簽藏的多深都能選中 3、只要是HTML中的標簽就可以作為標簽選擇器（h/a/img/ul/ol/dl/input...）
id選擇器
- 什麽是id選擇器？
- 作用：根據指定的id名稱找到對應的標簽，然後設置屬性
- 格式：
#id名稱{ 屬性:值; } #i1 { background-color: red; }
- 註意點：
1、每個HTML標簽都有一個屬性叫做id，也就是說每個標簽都可以設置id 2、在同一個界面中id的名稱是不可以重復的 3、在編寫id選擇器時一定要在id名稱前面加上# 4、id的名稱只能由字母/數字/下劃線組成 5、id名稱不能以數字開頭 6、id名稱不能是HTML標簽的名稱（不能是a h1 img input ...） 7、在企業開發中一般情況下如果不僅僅是為了設置樣式，我們不會使用id，因為在前端開發中id是留給js使用的
類選擇器
- 什麽是類選擇器？
- 作用：根據指定的類名找到對應的標簽，然後是設置屬性
- 格式：
格式: .類名{ 屬性:值; } .c1 { font-size: 14px; }
-
註意點：
1、每個HTML標簽都有一個屬性叫做class，也就是說每個標簽都可以設置類名 2、在同一個界面中class的名稱是可以重復的 3、在編寫class選擇器時一定要在class名稱前面加上. 4、類名的命名規範和id名稱的命名規範一樣 5、類名就是專門給CSS設置樣式的 6、在HTML中每個標簽可以同時綁定多個類名。多個類名用空格隔開 <標簽名稱 class="類名1 類名2 ...">
1、id和class的區別？
1.1、id相當於人的身份證不可以重復；class相當於人的名稱可以重復
1.2、一個HTML標簽中只能綁定一個id名稱；一個HTML標簽中可以綁定多個class名稱
2、id選擇器和class選擇器區別？
id選擇器是以#開頭
class選擇器是以.開頭
3、在企業開發中如何選擇？
id一般情況下是給js使用的，除非特殊情況，否則不要使用id去設置樣式
id選擇器和class選擇器區別
組合選擇器
後代選擇器
- 什麽是後代選擇器？
- 作用：找到指定標簽的所有特定的後代標簽，設置屬性
- 格式：
標簽名稱1 標簽名稱2{ 屬性:值; } 先找到所有名稱叫做"標簽名稱1"的標簽, 然後再在這個標簽下面去查找所有名稱叫做"標簽名稱2"的標簽, 然後在設置屬性 div p{} /*li內部的a標簽設置字體顏色*/ li a { color: green; }
-
註意點：
1、後代選擇器必須用空格隔開 2、後代不僅僅是兒子，也包括孫子/重孫子，只要最終是放到指定標簽中的都是後代 3、後代選擇器不僅僅可以使用標簽名稱，還可以使用其它選擇器 4、後代選擇器可以通過空格一直延續下去
子元素選擇器
- 什麽是子元素選擇器？
- 作用：找到指定標簽中所有特定的直接子元素，然後設置屬性
- 格式：
格式: 標簽名稱1>標簽名稱2{ 屬性:值; } 先找到所有名稱叫做"標簽名稱1"的標簽, 然後在這個標簽中查找所有直接子元素名稱叫做"標簽名稱2"的元素 /*選擇所有父級是 <div> 元素的 <p> 元素*/ div>p { font-family: "Arial Black", arial-black, cursive; }
- 註意點：
1、子元素選擇器只會查找兒子，不會查找其它被嵌套的標簽 2、子元素選擇器之間需要用>符號連接，並且不能有空格 3、子元素選擇器不僅僅可以使用標簽名稱，還可以使用其它選擇器 4、子元素選擇器可以通過>符號一直延續下去
1、後代選擇器和子元素選擇器之間的區別？ 1.1、後代選擇器使用空格作為連接符號 1.2、子元素選擇器使用>作為連接符號 後代選擇器會選中指定標簽中，所有特定的後代標簽，也就是會選中兒子/孫子...,只要是被放到指定標簽中的特定標簽都會被選中 子元素選擇器只會選中指定標簽中，所有的特定的直接標簽，也就是只會選中特定的兒子標簽 2、後代選擇器和子元素選擇器之間的共同點 2.1、後代選擇器和子元素選擇器都可以使用標簽名稱/id名稱/class名稱來作為選擇器 2.2、後代選擇器和子元素選擇器都可以通過各自的連接符號一直延續下去 選擇器1>選擇器2>選擇器3>選擇器3{} 3、在企業開發中如何選擇？ 如果想選中指定標簽中的所有特定的標簽，那麽就使用後代選擇器 如果只想選中指定標簽中的所有特定兒子標簽，那麽久使用子元素選擇器後代選擇器和子元素選擇器之間的區別
兄弟選擇器
相鄰兄弟選擇器
- 什麽是相鄰兄弟選擇器？
- 作用：給指定標簽後面緊跟的那個標簽設置屬性
- 格式：
選擇器1+選擇器2{ 屬性:值; } /*選擇所有緊接著<div>元素之後的<p>元素*/ div+p { margin: 5px; }
-
註意點：
1、相鄰兄弟選擇器必須通過+連接 2、相鄰兄弟選擇器只能選中緊跟其後的那個標簽，不能選中被隔開的標簽
通用兄弟選擇器
- 什麽是通用兄弟選擇器？
- 作用：給指定選擇器後面的所有選擇器選中的所有標簽設置屬性
- 格式：
選擇器1~選擇器2{ 屬性:值; } /*i1後面所有的兄弟p標簽*/ #i1~p { border: 2px solid royalblue; }
- 註意點：
1、通用兄弟選擇器之間必須使用~連接 2、通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標簽，無論有沒有被隔開都可以選中
屬性選擇器
- 什麽是屬性選擇器？
- 作用：根據指定的屬性名稱找到對應的標簽，然後設置屬性
- 格式：
格式: [attribute] 作用:根據指定的屬性名稱找到對應的標簽, 然後設置屬性 [attribute=value] 作用: 找到有指定屬性, 並且屬性的取值等於value的標簽, 然後設置屬性 最常見的應用場景, 就是用於區分input屬性 /*用於選取帶有指定屬性的元素。*/ p[title] { color: red; } /*用於選取帶有指定屬性和值的元素。*/ p[title="213"] { color: green; }
1.屬性的取值是以什麽開頭的 [attribute|=value] CSS2 [attribute^=value] CSS3 兩者之間的區別: CSS2中的只能找到value開頭,並且value是被-和其它內容隔開的 CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開 2.屬性的取值是以什麽結尾的 [attribute$=value] CSS3 3.屬性的取值是否包含某個特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 兩者之間的區別: CSS2中的只能找到獨立的單詞, 也就是包含value,並且value是被空格隔開的 CSS3中的只要包含value就可以找到其它用法
通配符選擇器
- 什麽是通配符選擇器？
- 作用：給當前界面上所有的標簽設置屬性
- 格式：
格式: *{ 屬性:值; } * { color: white; }
- 註意點：
由於通配符選擇器是設置界面上所有的標簽的屬性，所以在設置之前會遍歷所有的標簽，如果當前界面上的標簽比較多，那麽性能就會比較差，所以在企業開發中一般不會使用通配符選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>選擇器練習</title> <style> /*標簽選擇器 p{ color: red; } */ /*id選擇器 #identity1{ color: red; } #identity2{ color: red; } */ /*類選擇器 .para{ color: red; } */ /*後代選擇器 div p{ color: red; } */ /*子元素選擇器 div>p{ color: red; } */ /*交集選擇器 p.para{ color: red; } */ /*並集選擇器 #identity1,#identity2{ color: red; } */ /*通用兄弟選擇器 h1~p{ color: red; } */ /*序選擇器 p:nth-of-type(n+1){ color: red; } */ /*屬性選擇器*/ p[id]{ color: red; font-size: 10px; text-decoration: underline; } </style> </head> <body> <div> <h1>我是標題</h1> <p id="identity1" class="para">我是段落1</p> <p id="identity2" class="para">我是段落2</p> </div> </body> </html>選擇器練習示例
CSS三大特性
繼承性
- 什麽是繼承性？
- 作用：給父元素設置一些屬性，子元素也可以使用，這個我們就稱之為繼承性
- 示例代碼：
<style> div{ color: red; } </style> <div> <ul> <li> <p>我是段落</p> </li> </ul> </div> <!--p會變成紅色-->
- 註意點：
1、並不是所有的屬性都可以繼承，只有以color/font-/text-/line-開頭的屬性才可以繼承 2、在CSS的繼承中不僅僅是兒子可以繼承，只要是後代都可以繼承 3、繼承性中的特殊性： 3.1>a標簽的文字顏色和下劃線是不能繼承的 3.2>h標簽的文字大小是不能繼承的 應用場景： 一般用於設置網頁上的一些共性的信息，例如網頁的文字顏色，字體，文字大小等內容
層疊性
- 什麽是層疊性？
- 作用：層疊性就是CSS處理沖突的一種能力
- 示例代碼：
<style> p{ color: red; } .para{ color: blue; } </style> <p id="identity" class="para">我是段落</p> <!-- 最終顯示藍色, 因為紅色被覆蓋掉了 -->
- 註意點：
層疊性只有在多個選擇器選中“同一個標簽”，然後又設置了“相同的屬性”，才會發生重疊性
優先級
- 什麽是優先級？
- 作用：當多個選擇器選中同一個標簽，並且給同一個標簽設置相同的屬性時，如何層疊就由優先級來確定
- 優先級的判斷的三種方式：
1、間接選中就是指繼承 如果是間接選中，那麽就是誰離目標標簽比較近就聽誰的 <style> li{ color: blue; } ul{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示藍色 --> 2、相同選擇器（直接選中） 如果都是直接選中，並且都是同類型的選擇器，那麽就是誰寫在後面就聽誰的 <style> p{ color: blue; } p{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示紅色 --> 3、不同選擇器（直接選中） 如果都是直接選中，並且不是相同類型的選擇器，那麽就會按照選擇器的優先級來層疊 id>類>標簽>通配符>繼承>瀏覽器默認 <style> #identity{ color: purple; } .para{ color: pink; } p{ color: green; } *{ color: blue; } li{ color: red; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示紫色 -->
三種判斷方式
!important
- 什麽是！important？
- 作用：用於提升某個直接選中標簽的選擇器中的某個屬性的優先級，可以將被指定的屬性的優先級提升為最高
- 示例代碼：
<style> #identity{ color: purple; font-size: 50px; } .para{ color: pink ; } p{ color: green !important; } </style> <ul> <li> <p id="identity" class="para">我是段落</p> </li> </ul> <!-- 最終顯示綠色 -->
- 註意點：
1、！important只能用於直接選中，不能用於間接選中 2、通配符選擇器選中的標簽也是直接選中的 3、！important只能提升被指定的屬性的優先級，其它的屬性的優先級不會被提升 4、！important必須寫在屬性值的分號前面 5、！important前面的感嘆號不能省略
CSS屬性相關
寬和高
width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬高，內聯標簽的寬度由內容來決定。
文字屬性
font-style
- 作用：規定文字樣式
- 格式：
font-style: italic; - 取值：
normal： 正常的， 默認值 italic： 傾斜 - 快捷鍵：
fs font-style: italic; fsn font-style: normal;
font-weight
- 作用：規定文字粗細
- 格式：
font-weight: bold; - 取值：
bold 加粗 bolder 比加粗還要粗 lighter 細線， 默認值 100~900 設置具體粗細，400等同於normal，而700等同於bold inherit 繼承父元素字體的粗細值 - 快捷鍵：
fw font-weight:; fwb font-weight: bold; fwbr font-weight: bolder;
font-size
- 作用：規定文字大小
- 格式：
font-size: 30px; - 取值：
px（像素 pixel） 註意：通過font-size設置大小一定要帶單位，也就是一定要寫px - 快捷鍵：
fz font-size:; fz30 font-size: 30px;
font-family
- 作用：規定文字字體
- 格式：
格式：font-family:"楷體"; - 取值：各種字體名稱
- 快捷鍵：
ff font-family:; - 註意點：
1、如果取值是中文，需要用雙引號或者單引號括起來 2、設置的字體必須是用戶電腦裏面已經安裝的字體
文字屬性的補充
1、如果設置的字體不存在，那麽系統會使用默認的字體來顯示（默認使用宋體）
2、如果設置的字體不存在，而我們又不想用默認的字體來顯示怎麽辦？
可以給字體設置備選方案
格式：font-family："字體1","備選方案1"...;
3、如果想給中文和英文分別單獨設置字體，怎麽辦？
但凡是中文字體，裏面都包含了英文
但凡是英文字體，裏面都沒有包含中文
也就是說中文字體可以處理英文，而英文字體不能處理中文
**註意點：如果想給界面中的英文單獨設置字體，那麽英文的字體必須寫在中文的前面
4、在企業開發中最常見的字體有以下幾個
中文: 宋體/黑體/微軟雅黑
英文: "Times New Roman"/Arial
還需要知道一點, 就是並不是名稱是英文就一定是英文字體
因為中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
文字屬性縮寫
- 縮寫格式：
font: style weight size family; - 例如：
font:italic bold 10px "楷體"; - 註意點：
1、在這種縮寫格式中有的屬性值可以忽略 sytle可以省略 weight可以省略 2、在這種縮寫格式中style和weight的位置可以變換 3、在這種縮寫格式中有的屬性值是不可以縮寫的 size不能省略 family不能省略 4、size和family的位置是不能隨便亂放的 size一定要寫在family的前面，而且size和family必須寫在所有屬性的最後
文本屬性
text-align
- 作用：設置元素中的文字的水平對齊方式
- 格式：
text-align: right; - 取值：
left 左邊對齊 默認值 right 右對齊 center 居中對齊 justify 兩端對齊 - 快捷鍵：
ta text-align: left; tar text-align: right; tac text-align: center;
text-decoration
- 作用：給文本添加裝飾效果
- 格式：
text-decoration: underline; - 取值：
underline 下劃線 line-through 刪除線 overline 上劃線 none 什麽都沒有, 最常見的用途就是用於去掉超鏈接的下劃線 - 快捷鍵：
td text-decoration: none; tdu text-decoration: underline; tdl text-decoration: line-through; tdo text-decoration: overline;
text-indent
- 作用：設置文本的縮進
- 格式：
text-indent: 2em; - 取值：2em, 其中em是單位, 一個em代表縮進一個文字的寬度
- 快捷鍵：
ti text-indent:; ti2e text-indent: 2em;
顏色屬性
在css中如何通過color屬性來修改文字顏色
- 格式：
color： 值； - 取值：
1. 英文單詞 2. rgb(255,0,0) 3. rgba(255,0,0,3) 4. #FF0000 -
1.1英文單詞 一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達 1.2rgb rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色) 格式: rgb(0,0,0) 那麽這個格式中的 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度 這其中的每一個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮 紅色: rgb(255,0,0); 綠色: rgb(0,255,0); 藍色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255) 只要讓紅色/綠色/藍色的值都一樣就是灰色 而且如果這三個值越小那麽就越偏黑色, 越大就越偏白色 例如: color: rgb(200,200,200); 1.3rgba rgba中的rgb和前面講解的一樣, 只不過多了一個a 那麽這個a呢代表透明度, 取值是0-1, 取值越小就越透明 例如: color: rgba(255,0,0,0.2); 1.4十六進制 在前端開發中通過十六進制來表示顏色, 其實本質就是RGB 十六進制中是通過每兩位表示一個顏色 例如: #FFEE00 FF表示R EE表示G 00表示B 什麽是十六進制? 十六進制和十進制一樣都是一種計數的方式 在十進制中取值範圍0-9, 逢十進一 在十六進制中取值範圍0-F, 逢十六進一 十進制 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 十六進制 0 1 2 3 4 5 6 7 8 9 a b c d e f 十六進制和十進制轉換的公式 用十六進制的第一位*16 + 十六進制的第二位 = 十進制 15 == 1*16 + 5 = 21 12 == 1*16 + 2 = 18 FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255 00 == 0*16 + 0 = 0 1.5十六進制縮寫 在CSS中只要十六進制的顏色每兩位的值都是一樣的, 那麽就可以簡寫為一位 例如: #FFEE00 == #FE0color取值詳細說明
CSS元素的顯示模式
在HTML中HTML將所有的標簽分為兩類，分別是容器級和文本級
在CSS中CSS也將所有的標簽分為兩類，分別是塊級元素和行內元素
什麽是塊級元素，什麽是行內元素？
塊級元素會獨占一行
行內元素不會獨占一行
常見的容器級的標簽：
div h ul ol dl li dt dd ...
常見的文本級的標簽：
span p buis stong em ins del ...
常見的塊級元素：
p div h ul ol dl li dt dd
常見的行內元素：
span buis strong em ins del
塊級元素和行內元素的區別？
塊級元素：
- 獨占一行
- 如果沒有設置寬高，那麽默認和父元素一樣寬
- 如果設置了寬高，那麽就按照設置的來顯示
行內元素：
- 不會獨占一行
- 如果沒有設置寬高，那麽默認和內容一樣寬
- 行內元素是不可以設置寬度和高度的
行內塊級元素：
為了能夠讓元素既能夠不獨占一行，又可以設置寬度和高度，那麽就出現了行內塊級元素
不獨占一行，並且可以設置寬高
CSS元素顯示模式轉換（display屬性）
如何轉換css元素的顯示模式？
設置元素的display屬性
- 格式：
display： 值; - display取值：
block 塊級 inline 行內 inline-block 行內塊級 - 快捷鍵：
di display: inline; db display: block; dib display: inline-block;
背景和精靈圖
背景相關屬性
background-color
- 作用：設置標簽的背景顏色
-
<style> div{ width: 100px; height: 50px; } .box1{ background-color: red; } .box2{ background-color: rgb(0,255,0); } .box3{ background-color: rgba(0,0,255,0.7); } .box4{ background-color: #0ff; } </style>
- 取值：
具體單詞 rgb rgba 十六進制 - 快捷鍵：
bc background-color: #fff;
background-image
- 作用：設置背景圖片
- 格式：
<style> div{ width: 500px; height: 500px; } .box1{ background-image: url(images/girl.jpg); /*background-image: url(http://img4.imgtn.bdimg.com/it/u=2278032206,4196312526&fm=21&gp=0.jpg);*/ } </style> <div class="box1"></div>
- 快捷鍵：
bi background-image: url(); - 註意點：
1、圖片的地址必須放在url()中，圖片的地址可以是本地的地址，也可以是網絡的地址 2、如果圖片的大小沒有標簽的大小大，那麽會自動在水平和垂直方向平鋪來填充 3、如果網頁上出現了圖片，那麽瀏覽器會再次發送請求獲取圖片
background-repeat
- 作用：控制背景圖片的平鋪方式
- 格式：
<style> div{ width: 500px; height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: repeat-y; } </style> <div class="box1"></div>
-
取值：
repeat 默認值，在水平方向和垂直方向都需要平鋪 no-repeat 在水平方向和垂直方向都不需要平鋪 repeat-x 只在水平方向平鋪 repeat-y 只在垂直方向平鋪 - 快捷鍵：
bgr background-repeat:可以通過背景圖片的平鋪來降低圖片的大小，提升網頁的訪問速度
- 註意點：背景顏色和背景圖片可以共存，圖片會覆蓋顏色
background-position
- 作用：專門用於控制背景圖片的位置
- 格式：
background-position: 水平方向 垂直方向; - 取值：
1. 具體的方位名詞 水平方向：left center right 垂直方向：top center bottom 2. 具體的像素 例如: background-position: 100px 200px; 記住一定要寫單位, 也就是一定要寫px 記住具體的像素是可以接收負數的 - 快捷鍵：
bp background-position: 0 0; - 註意點：同一個標簽可以同時設置背景顏色和背景圖片, 如果顏色和圖片同時存在, 那麽圖片會覆蓋顏色
-
<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: left top;*/ /*background-position: right top;*/ /*background-position: right bottom;*/ /*background-position: left bottom;*/ /*background-position: center center;*/ /*background-position: left center;*/ background-position: center top; } </style> <div class="box1"></div>
方位取值示例 -
<style> div{ /*width: 500px;*/ height: 500px; } .box1{ background-color: red; background-image: url(images/girl.jpg); background-repeat: no-repeat; /*background-position: 100px 0;*/ /*background-position: 100px 200px;*/ background-position: -100px -100px; } </style>
像素取值示例
背景屬性連寫
和font屬性一樣，background屬性也可以連寫
- 格式：
background: 背景顏色 背景圖片 平鋪方式 關聯方式 定位方式; - 快捷鍵：
bg+ background: #fff url() 0 0 no-repeat; - 註意點：background屬性中，任何一個屬性都可以被省略
- 什麽是背景關聯方式？
默認情況下背景圖片會隨著滾動條的滾動而滾動，如果不想讓背景圖片隨著滾動條的滾動而滾動，那麽我們就可以修改背景圖片和滾動條的關聯方式 - 如何修改背景關聯方式？
在CSS中有一個叫做background-attachment的屬性， 這個屬性就是專門用於修改關聯方式的 - 格式：background-attachment：scroll;
- 取值：scroll 默認值， 會隨著滾動條的滾動而滾動；fixed 不會隨著滾動條的滾動而滾動
- 快捷鍵：ba background-attachment:;
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>滾動背景圖示例</title> <style> * { margin: 0; } .box { width: 100%; height: 500px; background: url("https://www.luffycity.com/static/img/width-bank.1c9d1b0.png") no-repeat center center; background-attachment: fixed; } .d1 { height: 500px; background-color: tomato; } .d2 { height: 500px; background-color: steelblue; } .d3 { height: 500px; background-color: mediumorchid; } </style> </head> <body> <div class="d1"></div> <div class="box"></div> <div class="d2"></div> <div class="d3"></div> </body> </html>
鼠標滾動背景不動示例
插入圖片和背景圖片的區別
- 1.1
背景圖片僅僅是一個裝飾, 不會占用位置 插入圖片會占用位置 - 1.2
背景圖片有定位屬性, 所以可以很方便的控制圖片的位置 插入圖片沒有定位屬性, 所有控制圖片的位置不太方便 - 1.3
插入圖片的語義比背景圖片的語義要強, 所以在企業開發中如果你的圖片想被搜索引擎收錄, 那麽推薦使用插入圖片
精靈圖
1.什麽是css精靈圖？
CSS精靈圖是一種圖像合成技術
2.CSS精靈圖作用
可以減少請求的次數, 以及可以降低服務器處理壓力
3.如何使用CSS精靈圖
CSS的精靈圖需要配合背景圖片和背景定位來使用
- 示例
<style> .box{ width: 86px; height: 28px; background-image: url(images/weibo.png); background-position: -425px -200px; } </style> <div class="box"></div>
- 完整圖片
- 顯示的圖片
CSS盒模型
什麽是CSS盒模型？
CSS盒模型僅僅是一個形象的比喻，HTML中的標簽都是盒模型
CSS盒模型指那些可以設置寬度高度/內邊距/邊框/外邊框的標簽
1、內容的寬度和高度
就是通過width/height屬性設置的寬度和高度
2、元素的寬度和高度
寬度 = 左邊距 + 左內邊距 + width + 右內邊距 + 右邊距
高度 同理可證
3、元素空間的寬度和高度
寬度 = 左外邊距 + 左邊框 + 左內邊距 + width + 右內邊距 + 右邊框 + 右外邊距
高度 同理可證
- margin：（外邊距）用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目錄。
- padding：（內邊距）用於控制內容與邊框之間的距離
- border（邊框）：圍繞在內邊框和內容外的邊框
- content：盒子的內容，顯示文本和圖像
邊框屬性（border）
- 什麽是邊框？
邊框就是環繞在標簽寬度和高度周圍的線條
- 格式：
1、連寫（同事設置四條邊的邊框） border: 邊框的寬度 邊框的樣式 邊框的顏色; -
2、連寫（分別設置四條邊的邊框） border-top: 邊框的寬度 邊框的樣式 邊框的顏色; border-right: 邊框的寬度 邊框的樣式 邊框的顏色; border-bottom: 邊框的寬度 邊框的樣式 邊框的顏色; border-left: 邊框的寬度 邊框的樣式 邊框的顏色; - 快捷鍵：
bd+ border: 1px solid #000;bt+ border-top: 1px solid #000; br+ border-right: 1px solid #000; bb+ border-bottom: 1px solid #000; bl+ border-left: 1px solid #000; - 註意點：
1、連寫格式中顏色屬性可以省略，省略之後默認就是黑色 2、連寫格式中樣式不能省略，省略之後就看不到邊框了 3、連寫格式中寬度可以省略，省略之後還是可以看到邊框 - 邊框樣式：
none 無邊框。 dotted 點狀虛線邊框。 dashed 矩形虛線邊框。 solid 實線邊框。 - border-radius
用這個屬性能實現圓角邊框的效果。 將border-radius設置為長或高的一半即可得到一個圓形。