合屬性font

就是咱們上面講到的屬性可以用一個(gè)屬性來代替, 像這樣的屬性我們稱之為復(fù)合屬性。

基本語法：

font:[font-style|font-weight]||font-size/line-height|| font-family

[]-可有可無(字體傾斜和字體加粗可以省略不寫)

p{
font: italic 900 20px/48px "宋體";
}

盒子屬性值的聲明

padding margin border-width border-color border-style

以border-style樣式為例:

取一個(gè)值:

border-style:solid:

說明:邊框的四條邊都是實(shí)線

取兩個(gè)值:

border-style:solid dotted;

說明:上下邊框使用第一個(gè)值,左右邊框使用第二個(gè)值,兩個(gè)值一定要用空格隔開

取三個(gè)值:

border-style:solid dotted double;

說明:上邊框使用第一個(gè)值,左右邊框使用第二個(gè)值,下邊框使用第三個(gè)值

取四個(gè)值:

四條邊框按照上、右、下、左的順序來調(diào)用取值，取值之間也要用空格隔開

z-index 只對已經(jīng)有定位的元素生效(position:relative/absolute/fixed)

人熟悉前端(html,css,js,vue等)，后端(python)，爬蟲，小程序等，老板有需求私信聯(lián)系我。

第01階段.前端基礎(chǔ)

CSS 第二天

今天我們圍繞一個(gè) 導(dǎo)航欄案例進(jìn)行學(xué)習(xí)知識點(diǎn)。

今日重點(diǎn)：

• 復(fù)合選擇器后代選擇器并集選擇器
• 標(biāo)簽顯示模式
• CSS背景背景位置
• CSS三大特性優(yōu)先級

1. CSS復(fù)合選擇器

目標(biāo)

• 理解理解css復(fù)合選擇器分別的應(yīng)用場景
• 應(yīng)用使用后代選擇器給元素添加樣式使用并集選擇器給元素添加樣式使用偽類選擇器

為什么要學(xué)習(xí)css復(fù)合選擇器

CSS選擇器分為 基礎(chǔ)選擇器 和 復(fù)合選擇器 ，但是基礎(chǔ)選擇器不能滿足我們實(shí)際開發(fā)中，快速高效的選擇標(biāo)簽。

• 目的是為了可以選擇更準(zhǔn)確更精細(xì)的目標(biāo)元素標(biāo)簽。
• 復(fù)合選擇器是由兩個(gè)或多個(gè)基礎(chǔ)選擇器，通過不同的方式組合而成的

1.1 后代選擇器（重點(diǎn)）

• 概念：后代選擇器又稱為包含選擇器
• 作用：用來選擇元素或元素組的子孫后代
• 其寫法就是把外層標(biāo)簽寫在前面，內(nèi)層標(biāo)簽寫在后面，中間用空格分隔，先寫父親爺爺，再寫兒子孫子。

父級 子級{屬性:屬性值;屬性:屬性值;}

• 語法：

.class h3{color:red;font-size:16px;}

• 當(dāng)標(biāo)簽發(fā)生嵌套時(shí)，內(nèi)層標(biāo)簽就成為外層標(biāo)簽的后代。
• 子孫后代都可以這么選擇。 或者說，它能選擇任何包含在內(nèi) 的標(biāo)簽。

1.2 子元素選擇器

• 作用：子元素選擇器只能選擇作為某元素子元素(親兒子)的元素。
• 其寫法就是把父級標(biāo)簽寫在前面，子級標(biāo)簽寫在后面，中間跟一個(gè) > 進(jìn)行連接
• 語法：

.class>h3{color:red;font-size:14px;}

一句話說出他們

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

白話：

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

1.3 交集選擇器

• 條件交集選擇器由兩個(gè)選擇器構(gòu)成，找到的標(biāo)簽必須滿足：既有標(biāo)簽一的特點(diǎn)，也有標(biāo)簽二的特點(diǎn)。

• 語法：

• 其中第一個(gè)為標(biāo)簽選擇器，第二個(gè)為class選擇器，兩個(gè)選擇器之間不能有空格，如h3.special。

記憶技巧：

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

比如：   p.one   選擇的是： 類名為 .one  的 段落標(biāo)簽。  

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

1.4 并集選擇器（重點(diǎn)）

• 應(yīng)用：如果某些選擇器定義的相同樣式，就可以利用并集選擇器，可以讓代碼更簡潔。
• 并集選擇器（CSS選擇器分組）是各個(gè)選擇器通過,連接而成的，通常用于集體聲明。
• 語法：

• 任何形式的選擇器（包括標(biāo)簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分。
• 記憶技巧：并集選擇器通常用于集體聲明 ，逗號隔開的，所有選擇器都會執(zhí)行后面樣式，逗號可以理解為 和的意思。

比如  .one, p , #test {color: #F00;}  
表示   .one 和 p  和 #test 這三個(gè)選擇器都會執(zhí)行顏色為紅色。 
通常用于集體聲明。  

1.5 鏈接偽類選擇器（重點(diǎn)）

偽類選擇器：

為了和我們剛才學(xué)的類選擇器相區(qū)別 類選擇器是一個(gè)點(diǎn) 比如 .demo {} 而我們的偽類 用 2個(gè)點(diǎn) 就是 冒號 比如 :link{} 偽娘

作用：

用于向某些選擇器添加特殊的效果。比如給鏈接添加特殊效果， 比如可以選擇 第1個(gè)，第n個(gè)元素。

因?yàn)閭晤愡x擇器很多，比如鏈接偽類，結(jié)構(gòu)偽類等等。我們這里先給大家講解鏈接偽類選擇器。

• a:link /* 未訪問的鏈接 */
• a:visited /* 已訪問的鏈接 */
• a:hover /* 鼠標(biāo)移動到鏈接上 */
• a:active /* 選定的鏈接 */

注意

• 寫的時(shí)候，他們的順序盡量不要顛倒 按照 lvha 的順序。否則可能引起錯(cuò)誤。
• 記憶法 love hate 愛上了討厭 lv 包包 非常 hao
• 因?yàn)榻墟溄觽晤?，所以都?利用交集選擇器 a:link a:hover
• 因?yàn)閍鏈接瀏覽器具有默認(rèn)樣式，所以我們實(shí)際工作中都需要給鏈接單獨(dú)指定樣式。
• 實(shí)際工作開發(fā)中，我們很少寫全四個(gè)狀態(tài)，一般我們寫法如下：

a {   /* a是標(biāo)簽選擇器  所有的鏈接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是鏈接偽類選擇器 鼠標(biāo)經(jīng)過 */
            color: red; /*  鼠標(biāo)經(jīng)過的時(shí)候，由原來的 灰色 變成了紅色 */
}

1.6 復(fù)合選擇器總結(jié)

2. 標(biāo)簽顯示模式（display）重點(diǎn)

目標(biāo)：

• 理解標(biāo)簽的三種顯示模式三種顯示模式的特點(diǎn)以及區(qū)別理解三種顯示模式的相互轉(zhuǎn)化
• 應(yīng)用實(shí)現(xiàn)三種顯示模式的相互轉(zhuǎn)化

2.1 什么是標(biāo)簽顯示模式

• 什么是標(biāo)簽的顯示模式？標(biāo)簽以什么方式進(jìn)行顯示，比如div 自己占一行， 比如span 一行可以放很多個(gè)
• 作用： 我們網(wǎng)頁的標(biāo)簽非常多，在不同地方會用到不同類型的標(biāo)簽，以便更好地完成我們的網(wǎng)頁。
• 標(biāo)簽的類型(分類)HTML標(biāo)簽一般分為塊標(biāo)簽和行內(nèi)標(biāo)簽兩種類型，它們也稱塊元素和行內(nèi)元素。

2.2 塊級元素(block-level)

• 例：

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

• 塊級元素的特點(diǎn)

（1）比較霸道，自己獨(dú)占一行

（2）高度，寬度、外邊距以及內(nèi)邊距都可以控制。

（3）寬度默認(rèn)是容器（父級寬度）的100%

（4）是一個(gè)容器及盒子，里面可以放行內(nèi)或者塊級元素。

• 注意：只有 文字才 能組成段落 因此 p 里面不能放塊級元素，特別是 p 不能放div 同理還有這些標(biāo)簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標(biāo)簽，里面不能放其他塊級元素。

2.3 行內(nèi)元素(inline-level)

• 例：

常見的行內(nèi)元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標(biāo)簽最典型的行內(nèi)元素。有的地方也成內(nèi)聯(lián)元素

• 行內(nèi)元素的特點(diǎn)：

（1）相鄰行內(nèi)元素在一行上，一行可以顯示多個(gè)。

（2）高、寬直接設(shè)置是無效的。

（3）默認(rèn)寬度就是它本身內(nèi)容的寬度。

（4）行內(nèi)元素只能容納文本或則其他行內(nèi)元素。

注意：

• 鏈接里面不能再放鏈接。
• 特殊情況a里面可以放塊級元素，但是給a轉(zhuǎn)換一下塊級模式最安全。

2.4 行內(nèi)塊元素（inline-block）

• 例：

在行內(nèi)元素中有幾個(gè)特殊的標(biāo)簽——<img />、<input />、<td>，可以對它們設(shè)置寬高和對齊屬性，有些資料可能會稱它們?yōu)樾袃?nèi)塊元素。

• 行內(nèi)塊元素的特點(diǎn)：（1）和相鄰行內(nèi)元素（行內(nèi)塊）在一行上,但是之間會有空白縫隙。一行可以顯示多個(gè) （2）默認(rèn)寬度就是它本身內(nèi)容的寬度。 （3）高度，行高、外邊距以及內(nèi)邊距都可以控制。

2.5 三種模式總結(jié)區(qū)別

2.6 標(biāo)簽顯示模式轉(zhuǎn)換 display

• 塊轉(zhuǎn)行內(nèi)：display:inline;
• 行內(nèi)轉(zhuǎn)塊：display:block;
• 塊、行內(nèi)元素轉(zhuǎn)換為行內(nèi)塊： display: inline-block;

此階段，我們只需關(guān)心這三個(gè)，其他的是我們后面的工作。

3. 行高那些事（line-height）

目標(biāo)

• 理解能說出 行高 和 高度 三種關(guān)系能簡單理解為什么行高等于高度單行文字會垂直居中
• 應(yīng)用使用行高實(shí)現(xiàn)單行文字垂直居中能會測量行高

3.1 行高測量

行高的測量方法：

3.2 單行文本垂直居中

行高我們利用最多的一個(gè)地方是： 可以讓單行文本在盒子中垂直居中對齊。

文字的行高等于盒子的高度。

這里情況些許復(fù)雜，開始學(xué)習(xí)，我們可以先從簡單地方入手學(xué)會。

行高 = 上距離 + 內(nèi)容高度 + 下距離

上距離和下距離總是相等的，因此文字看上去是垂直居中的。

行高和高度的三種關(guān)系

• 如果 行高 等 高度 文字會 垂直居中
• 如果行高 大于 高度 文字會 偏下
• 如果行高小于高度 文字會 偏上

4. CSS 背景(background)

目標(biāo)

• 理解背景的作用css背景圖片和插入圖片的區(qū)別
• 應(yīng)用通過css背景屬性，給頁面元素添加背景樣式能設(shè)置不同的背景圖片位置

4.1 背景顏色(color)

• 語法：background-color:顏色值; 默認(rèn)的值是 transparent 透明的

4.2 背景圖片(image)

• 語法：

background-image : none | url (url) 

background-image : url(images/demo.png);

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

4.3 背景平鋪（repeat）

• 語法：

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

4.4 背景位置(position) 重點(diǎn)

• 語法：

background-position : length || length

background-position : position || position 

• 注意：必須先指定background-image屬性position 后面是x坐標(biāo)和y坐標(biāo)。 可以使用方位名詞或者 精確單位。如果指定兩個(gè)值，兩個(gè)值都是方位名字，則兩個(gè)值前后順序無關(guān)，比如left top和top left效果一致如果只指定了一個(gè)方位名詞，另一個(gè)值默認(rèn)居中對齊。如果position 后面是精確坐標(biāo)， 那么第一個(gè)，肯定是 x 第二的一定是y如果只指定一個(gè)數(shù)值,那該數(shù)值一定是x坐標(biāo)，另一個(gè)默認(rèn)垂直居中如果指定的兩個(gè)值是 精確單位和方位名字混合使用，則第一個(gè)值是x坐標(biāo)，第二個(gè)值是y坐標(biāo)

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

/*以下說明  x 10像素  y 垂直居中的*/
/*background-position: 10px center;*/

4.5 背景附著

• 背景附著就是解釋背景是滾動的還是固定的
• 語法： background-attachment : scroll | fixed

4.6 背景簡寫

• background：屬性的值的書寫順序官方并沒有強(qiáng)制標(biāo)準(zhǔn)的。為了可讀性，建議大家如下寫：
• background: 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置;
• 語法：

background: transparent url(image.jpg) repeat-y  scroll center top ;

案例：

導(dǎo)航欄案例

4.7 背景透明(CSS3)

• 語法：

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

• 最后一個(gè)參數(shù)是alpha 透明度 取值范圍 0~1之間
• 我們習(xí)慣把0.3 的 0 省略掉 這樣寫 background: rgba(0, 0, 0, .3);
• 注意： 背景半透明是指盒子背景半透明， 盒子里面的內(nèi)容不受影響
• 因?yàn)槭荂SS3 ，所以 低于 ie9 的版本是不支持的。

4.8 背景總結(jié)

5. CSS 三大特性

目標(biāo)：

• 理解能說出css樣式?jīng)_突采取的原則能說出那些常見的樣式會有繼承
• 應(yīng)用能寫出CSS優(yōu)先級的算法能會計(jì)算常見選擇器的疊加值

5.1 CSS層疊性

• 概念：所謂層疊性是指多種CSS樣式的疊加。是瀏覽器處理沖突的一個(gè)能力,如果一個(gè)屬性通過兩個(gè)相同選擇器設(shè)置到同一個(gè)元素上，那么這個(gè)時(shí)候一個(gè)屬性就會將另一個(gè)屬性層疊掉
• 原則：樣式?jīng)_突，遵循的原則是就近原則。 那個(gè)樣式離著結(jié)構(gòu)近，就執(zhí)行那個(gè)樣式。樣式不沖突，不會層疊

CSS層疊性最后的執(zhí)行口訣：  長江后浪推前浪，前浪死在沙灘上。

5.2 CSS繼承性

• 概念：子標(biāo)簽會繼承父標(biāo)簽的某些樣式，如文本顏色和字號。 想要設(shè)置一個(gè)可繼承的屬性，只需將它應(yīng)用于父元素即可。

簡單的理解就是： 子承父業(yè)。

• 注意：恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。比如有很多子級孩子都需要某個(gè)樣式，可以給父級指定一個(gè)，這些孩子繼承過來就好了。子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的可以繼承，以及color屬性）

5.3 CSS優(yōu)先級（重點(diǎn)）

• 概念：定義CSS樣式時(shí)，經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一元素上，此時(shí)，選擇器相同，則執(zhí)行層疊性選擇器不同，就會出現(xiàn)優(yōu)先級的問題。

1). 權(quán)重計(jì)算公式

關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity（特殊性）

• 值從左到右，左面的最大，一級大于一級，數(shù)位之間沒有進(jìn)制，級別之間不可超越。
• 關(guān)于CSS權(quán)重，我們需要一套計(jì)算公式來去計(jì)算，這個(gè)就是 CSS Specificity（特殊性）
• div { color: pink!important; }

2). 權(quán)重疊加

我們經(jīng)常用交集選擇器，后代選擇器等，是有多個(gè)基礎(chǔ)選擇器組合而成，那么此時(shí)，就會出現(xiàn)權(quán)重疊加。

就是一個(gè)簡單的加法計(jì)算

• 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注意：

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

3). 繼承的權(quán)重是0

這個(gè)不難，但是忽略很容易繞暈。其實(shí)，我們修改樣式，一定要看該標(biāo)簽有沒有被選中。

1） 如果選中了，那么以上面的公式來計(jì)權(quán)重。誰大聽誰的。 2） 如果沒有選中，那么權(quán)重是0，因?yàn)槔^承的權(quán)重為0.

6. CSS注釋

CSS注釋規(guī)則：

/*  需要注釋的內(nèi)容  */  進(jìn)行注釋的，即在需要注釋的內(nèi)容前使用 "/*" 標(biāo)記開始注釋，在內(nèi)容的結(jié)尾使用 "*/"結(jié)束。

例如：

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

7. 今日總結(jié)