前端學習第四天-css提升

達標要求

掌握css復合選擇器
塊級元素和行內元素及行內塊的區別?
哪些元素是塊元素,行內元素及行內塊元素?
熟練掌握display的用法
能夠說出css三大特性
熟練運用背景樣式

1. CSS復合選擇器

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

1.1 交集選擇器

交集選擇器由兩個選擇器構成，找到的標簽必須滿足：既有標簽一的特點，也有標簽二的特點。

其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格及其他符號。

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

1.2 并集選擇器

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

并集選擇器和的意思，只要逗號隔開的，所有選擇器都會執行后面樣式。

1.3 后代選擇器(重點)

后代選擇器又稱為包含選擇器。

用來選擇元素或元素組的子孫后代。
其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，先寫爺爺父親，在寫兒子孫子。

1.4 子元素選擇器（重點）

子元素選擇器只能選擇作為某元素子元素的元素。

子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接

這里的子指的是親兒子不包含孫子,重孫子之類。

1.6 復合選擇器總結

選擇器	作用	特征	使用情況	隔開符號及用法
后代選擇器	用來選擇元素后代	是選擇所有的子孫后代	較多	符號是空格 .nav a
并集選擇器	選擇某些相同樣式的選擇器	可以用于集體聲明	較多	符號是逗號 .nav, .header
子代選擇器	選擇最近一級元素	只選親兒子	較少	符號是> .nav>p
交集選擇器	選擇兩個標簽交集的部分	既是又是	較少	沒有符號 div.title

1.7?綜合練習

<!-- 主導航欄 -->
<div class="nav"><ul><li><a href="">公司首頁</a></li><li><a href="">公司簡介</a></li><li><a href="">公司產品</a></li><li><a href="">聯系我們</a></li></ul><em> 收藏本站 </em><div> 聯系我們:<em>1234567890</em></div> 
</div>
<!-- 側導航欄 -->
<div class="sidebar"><div class="sidebarLeft">左側導航欄</div><div class="sidebarRight"><a href="#">登錄</a></div>
</div>

在不修改以上代碼的前提下，完成以下任務：

主導航欄和側導航欄里面文字都是18像素并且是微軟雅黑。
鏈接登錄的顏色為紅色。
主導航欄里的列表中的文字顏色為深灰色。
收藏本站要求字體加粗。

我們網頁的標簽非常多，在不同地方會用到不同類型的選擇器，以便更好的完成我們的網頁。

2.標簽顯示模式（display）（重點）

什么是標簽的顯示模式？

標簽以什么方式進行顯示，比如div 自己占一行，比如span 一行可以放很多個

作用：

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

HTML標簽一般分為塊標簽和行內標簽兩種類型，它們也稱塊元素和行內元素。

2.1 塊級元素(block-level)

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

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

塊級元素的特點：

（1）總是從新行開始。

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

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

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

2.2 行內元素(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，他們都是文字類塊級標簽，里面不能放其他塊級元素。

鏈接里面不能再放鏈接。

2.3 行內塊元素（inline-block）

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

行內塊元素的特點：

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

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

2.4 三種模式總結區別

元素模式	元素排列	設置樣式	默認寬度	包含
塊級元素	一行只能放一個塊級元素	可以設置寬度高度	容器的100%	容器級可以包含任何標簽
行內元素	一行可以放多個行內元素	不可以直接設置寬度高度	它本身內容的寬度	容納文本或則其他行內元素
行內塊元素	一行放多個行內塊元素	可以設置寬度和高度	它本身內容的寬度

2.5 總結-塊級元素和行內元素分別有哪些？

1）行內元素有：a b span img input select strong（強調的語氣）

2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p table form

2.6 標簽顯示模式轉換 display

塊轉行內：display:inline;
行內轉塊：display:block;
塊、行內元素轉換為行內塊： display: inline-block;

3. CSS 三大特性

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

3.1 CSS層疊性

所謂層疊性是指多種CSS樣式的疊加,就是css處理沖突的能力。

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

當同一個元素被兩個選擇器選中時，CSS會根據選擇器的權重決定使用哪一個選擇器。權重低的選擇器效果會被權重高的選擇器效果覆蓋（層疊）。

可以這樣理解權重：這個選擇器對于這個元素的重要性。

3.2 CSS繼承性

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

注意：

1.所以對于字體、文本屬性等網頁中通用的樣式可以使用繼承。例如，字體、字號、顏色、行距等可以在body元素中統一設置，然后通過繼承影響文檔中所有文本。

2.并不是所有的CSS屬性都可以繼承，例如，下面的屬性就不具有繼承性：邊框、外邊距、內邊距、背景、定位、元素高屬性。

3.3 CSS優先級

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

!important>行內樣式表>ID選擇器>類選擇器>標簽選擇器>通配符>繼承的樣式>瀏覽器默認樣式

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

繼承樣式的權重為0。即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆蓋繼承來的樣式。
行內樣式優先。應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100。總之，他擁有比上面提高的選擇器都大的優先級。
權重相同時，CSS遵循就近原則。也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大。
CSS定義了一個!important命令，該命令被賦予最大的優先級。也就是說不管權重如何以及樣式位置的遠近，!important都具有最大優先級。

3.4 權重計算

關于CSS權重，用一個四位的數字串來表示，更像四個級別，值從左到右，左面的最大，一級大于一級，數位之間沒有進制，級別之間不可超越。

繼承或者* 的貢獻值	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

注意:

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

2.繼承的權重是 0

總結優先級：

使用了 !important聲明的規則。
內嵌在 HTML 元素的 style屬性里面的聲明。
使用了 ID 選擇器的規則。
使用了類選擇器、偽類選擇器的規則。
使用了標簽選擇器的規則。
只包含一個通用選擇器的規則。
同一類選擇器則遵循就近原則。

4. 背景樣式（重點）

4.1 背景顏色

屬性名	background-color
屬性值	合法的顏色的名，比如：`red`；十六進制值，比如：`#ff0000`；RGB 值，比如：`rgb(255,0,0)`
默認值	transparent
描述	設置背景顏色。

示例如下：

.box {/* 下面3種寫法是等價的 */background-color: red;background-color: rgb(255, 0, 0);background-color: #ff0000;
}

4.2 背景圖片

屬性名	background-image
屬性值	圖片所在路徑
默認值	none
描述	設置背景圖片。

示例如下：

.box {background-image: url("./logo.jpg");
}

4.3 圖片重復方式

屬性名	background-repeat
屬性值	repeat \| repeat-x \| repeat-y \| no-repeat
默認值	repeat
描述	設置背景圖片。

屬性值

值	描述
repeat	默認。背景圖像將在垂直方向和水平方向重復。
repeat-x	背景圖像將在水平方向重復。
repeat-y	背景圖像將在垂直方向重復。
no-repeat	背景圖像將僅顯示一次。

示例如下：

.box {/* repeat 默認值，默認情況下，在水平和垂直方向上都重復*/background-repeat: repeat;background-repeat: repeat-x;background-repeat: repeat-y;background-repeat: no-repeat;
}

4.4 圖片位置

屬性名	background-position
屬性值	長度 \| 百分比 \| 表示方位的單詞
默認值	0% 0%
描述	背景圖片的位置

示例如下：

/*水平：left center right垂直：top  center bottom
*/
?
.box {background-position: 40px 40px;（水平位置、垂直位置）background-position: 20% 20%;background-position: right bottom;
}

4.4.1 position值總結

值	描述
top left center bottom right	如果您僅規定了一個關鍵詞，那么第二個值將是"center"。默認值：0% 0%。
x% y%	1.第一個值是水平位置，第二個值是垂直位置。 2.盒子的百分比和圖片的百分比重合的位置 3.左上角是 0% 0%。右下角是 100% 100%。 4.如果您僅規定了一個值，另一個值將是 50%。
xpos ypos	1.第一個值是水平位置，第二個值是垂直位置。 2.像素值是：盒子的指定位置，與圖片左上角的位置位置重合 3.左上角是 0 0。單位是像素 (0px 0px) 或任何其他的 CSS 單位。 4.如果您僅規定了一個值，另一個值將是50%。

4.4.2 為什么需要CSS精靈技術

圖所示為網頁的請求原理圖，當用戶訪問一個網站時，需要向服務器發送請求，網頁上的每張圖像都要經過一次請求才能展現給用戶。

然而，一個網頁中往往會應用很多小的背景圖像作為修飾，當網頁中的圖像過多時，服務器就會頻繁地接受和發送請求，這將大大降低頁面的加載速度。

現在我們來回答為什么需要精靈技術？

為了有效地減少服務器接受和發送請求的次數，提高頁面的加載速度。

4.4.3 精靈技術

CSS 精靈其實是將網頁中的一些背景圖像整合到一張大圖中（精靈圖），然而，各個網頁元素通常只需要精靈圖中不同位置的某個小圖，要想精確定位到精靈圖中的某個小圖。

這樣，當用戶訪問該頁面時，只需向服務發送一次請求，網頁中的背景圖像即可全部展示出來。

我們需要使用CSS的

background-image
background-repeat
background-position屬性進行背景定位，
其中最關鍵的是使用background-position 屬性精確地定位。

注意:

css精靈技術主要針對于背景圖片，插入的圖片img 是不需要這個技術的。

精確測量，每個小背景圖片的大小和位置。

給盒子指定小背景圖片時，背景定位基本都是負值。

4.5 圖片附著(了解)

屬性名	background-attachment
屬性值	scroll \| fixed
默認值	scroll
描述	設置背景圖像是否固定或者隨著頁面的其余部分滾動。

示例如下：

.box {/*  背景圖隨著頁面內容滾動 */background-attachment: scroll;/*  背景圖不會隨著頁面內容滾動 */background-attachment: fixed;
}

4.6 簡寫屬性

屬性名	background
屬性值	color image repeat attachment position
默認值	每個屬性的默認值
描述	設置背景圖片是否隨內容滾動

示例如下：

.box {background: #00ff00 url("index.png") no-repeat fixed center;
}

4.7 背景透明(CSS3)

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

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

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

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

4.8 背景縮放(CSS3)

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

其參數設置如下：

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

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

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

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

注意:background-size屬性一定要寫在background屬性后面。

4.9 背景總結

屬性	作用	值
background-color	背景顏色	預定義的顏色值/十六進制/RGB代碼
background-image	背景圖片	url(圖片路徑)
background-repeat	是否平鋪	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分別是x 和 y坐標，切記如果有精確數值單位，則必須按照先X 后Y 的寫法
background-attachment	背景固定還是滾動	scroll/fixed
背景簡寫	更簡單	背景顏色背景圖片地址背景平鋪背景滾動背景位置; 他們沒有順序
背景透明	讓盒子半透明	background: rgba(0,0,0,0.3); 后面必須是 4個值
背景縮放	背景圖片的尺寸	長度單位、cover、contain

4.10?導航案例

<head><style>     a {width: 150px;height: 50px;/* 把a行內元素轉換為行內塊元素 */display: inline-block;/* 文字水平居中 */text-align: center;/* 我們設定行高等于盒子的高度，就可以使文字垂直居中 */line-height: 50px;/* 字體顏色 */color: #666;/* 取消下劃線 文本裝飾 */text-decoration: none;}a:hover { ?/* 鼠標經過 給我們的鏈接添加背景圖片*/background: url(images/btn.png) no-repeat; }</style>
</head>
<body><a href="#">首頁</a><a href="#">業務介紹</a><a href="#">關于我們</a><a href="#">聯系我們</a>
</body>

5. 插入圖片和背景圖片區別

插入圖片我們用的最多比如產品展示類移動位置只能靠盒模型 padding margin
背景圖片我們一般用于小圖標背景或者超大背景圖片背景圖片只能通過 background-position

 img { ?width: 200px;/* 插入圖片更改大小 width 和 height */height: 210px;margin-top: 30px; ?/* 插入圖片更改位置 可以用margin 或padding  盒模型 */margin-left: 50px; /* 插入當圖片也是一個盒子 */}
?div {width: 400px;height: 400px;border: 1px solid purple;background: #fff url(images/sun.jpg) no-repeat;background-position: 30px 50px; /* 背景圖片更改位置 用 background-position */}