原文地址

文章使用YD的排版，點擊原文地址，更方便查閱。

分析

有一個標題(H1),還有一些段落(P)：

標題是居中的，段落也是居中的.所以我們可以設置H標籤和P標籤的align屬性等於center來實現

標題和段落都有顏色, 都有字體都有大寫，##所以需要給文字包裹一個font標籤, 然後通過font標籤來設置顏色以及大小。

通過標籤來修改樣式的缺點:

需要記憶哪些標籤有哪些屬性，如果該標籤沒有這個屬性，那麼設置了也沒效果。
當需求變更時我們需要修改大量的代碼才能滿足現有的需求。
HTML只有一個作用就是用來添加語義。

所以在企業開發中修改樣式都是交個CSS來做

那麼通過CSS來修改樣式有什麼好處?

不用記憶哪些屬性屬於哪個標籤。
當需求變更時我們不需要修改大量的代碼就可以滿足需求。
在前端開發中CSS只有一個作用, 就是用來修改樣式。

那麼我們要如何使用CSS添加樣式呢?

CSS格式

<style type="text/css">
        標籤名稱{
            屬性名稱: 屬性對應的值;
            ...
        }   
</style>

注意點

style標籤必須寫在head標籤開始和結束標籤之間(也就是必須和title標籤是兄弟關係)
style標籤中的type屬性其實可以不用寫, 默認就是type=”text/css”
設置樣式時必須按照固定的格式來設置.key: value;

其中:不能省略, 分號大多數情況下也不能省略.

CSS學習一共分爲兩大部分, 一個是CSS屬性, 另一個是CSS選擇器

文字屬性

1.規定【文字樣式】的屬性

格式: font-style: italic

取值:

normal: 正常的, 默認就是正常的。

italic: 傾斜的。

2.規定【文字粗細】的屬性

格式: font-weight: bold

取值:

bold 加粗

bolder 比加粗還要粗

lighter 細線, 默認就是細線

100~900之間整百的數字

快捷鍵

通常情況下每單詞的首字母即可

fw font-weight:;
fwb font-weight: bold;
fwbr  font-weight: bolder;

3.規定【文字大小】的屬性

格式: font-size: 30px;

單位: px(像素 pixel);

注意: 通過font-size設置大小一定要帶單位, 也就是一定要寫px;

4.規定【文字字體】的屬性

格式: font-family: “楷體”

注意:

如果取值是中文, 需要用雙引號或者單引號括起來。
設置的字體必須是用戶電腦裏面已經安裝的字體。

5.文字屬性的補充

如果設置的字體不存在, 那麼系統會使用默認的字體來顯示。
如果設置的字體不存在, 而我們又不想用默認的字體來顯示怎麼辦?

格式: font-family:”字體1”, “備用方案”, …;
如果想給中文和英文分別設置單獨的字體, 怎麼辦？

但凡是中文字體, 裏面都包含了英文。

但凡是英文字體, 裏面都沒有包含中文。

也是就是說中文字體可以處理英文, 而英文字體不能處理中文。
補充在企業開發中最常見的字體有以下幾個。

中文: 宋體/黑體/微軟雅黑

英文: “Times New Roman”/Arial

還需要知道一點, 就是並不是名稱是英文就一定是英文字體

因爲中文字體其實都有自己的英文名稱, 所以是不是中文字體主要看能不能處理中文

宋體 SimSun

黑體 SimHei

微軟雅黑 Microsoft YaHei

6.文字屬性的縮寫

    <!--<style>
       p{
           /*
           font-style: italic;
           font-weight: bold;
           font-size: 10px;
           font-family:"楷體";
           */
           font:bold italic 10px "楷體";
       }
    </style>-->

注意:

在這種縮寫格式中有的屬性值可以省略

sytle可以省略

weight可以省略
在這種縮寫格式中style和weight的位置可以交換
在這種縮寫格式中有的屬性值是不可以省略的

size不能省略

family不能省略
size和family的位置是不能順便亂放的

size一定要寫在family的前面, 而且size和family必須寫在所有屬性的最後

文本屬性

1. 文本裝飾的屬性 decoration=裝飾

格式: text-decoration: underline;

取值:

underline 下劃線

line-through 刪除線

overline 上劃線

none 什麼都沒有，最常見的用途就是用於去掉超鏈接的下劃線。

2.文本水平對齊的屬性

格式: text-align: right;

取值:

left 左

right 右

center 中

3.文本縮進的屬性

格式: text-indent: 2em;

取值:

2em, 其中em是單位, 一個em代表縮進一個文字的寬度

選擇器

標籤選擇器

根據指定的標籤名稱, 在當前界面中找到所有該名稱的標籤, 然後設置屬性。

標籤名稱{
    屬性:值；
}

注意

標籤選擇器選中的是當前所有界面的標籤, 而不能單獨選中某一個標籤。
標籤選擇器無論標籤藏的多深都能選中。
只要是HTML中的標籤就可以作爲標籤選擇器

id選擇器

根據指定的id名稱找到對應的標籤, 然後設置屬性;

#id名稱{
    屬性:值；
}

注意

每個HTML標籤都有一個屬性叫做id, 也就是說每個標籤都可以設置id;
在同一個界面中的id的名稱是不可以重複的;
在編寫id選擇器時一定要在id名稱前面加#;
id的名稱是有一定的規範的;
在企業開發中一般情況下如果僅僅是爲了設置樣式, 我們不會使用id, 因爲在前端開發中id是留給js使用的。

類選擇器

根據指定的類名稱找到對應的標籤, 然後設置屬性;

.類名{
    屬性:值;
}

注意

每個HTML標籤都有一個屬性叫做class, 也就是說每個標籤都可以設置類名。
在同一個界面中class的名稱是可以重複的。
在編寫class選擇器時一定要在class名稱前面加上”.”;
類名就是專門給CSS來設置樣式的;
在HTML中每個標籤可以同時綁定多個類名;

那麼我們可以總結一下，class選擇器與id選擇器它們有什麼樣的區別呢？

……

後代選擇器

找到指定標籤的所有特定的後代標籤, 設置屬性

標籤名稱1 標籤名稱2 {
    屬性:值;
}

從左至右，依次往下查找, 然後設置屬性。

只要後代的標籤都等於標籤名稱2, 都會被設置屬性, 就相當於這個層級的標籤選擇器

子元素選擇器

找到指定標籤中所有的特定的直接子元素, 然後設置屬性。

標籤名稱1>標籤名稱2 {
    屬性:值;
}

子元素選擇器，只會查找兒子，不會查找嵌套的元素

後代選擇器和子元素選擇器不僅僅可以使用標籤名稱，還可以使用其它選擇器。

在開發中

如果想選中指定標籤中的所有特定的標籤, 那麼就使用後代選擇器

如果只想選中指定標籤中的所有特定兒子標籤, 那麼就使用子元素選擇器

交集選擇器

是所有選擇器選中的標籤中, 相交的那部分標籤設置屬性；

選擇器1選擇器2 {
    屬性:值;
}

注意

選擇器和選擇器之間沒有任何的連接符號
選擇器可以使用標籤名稱/id名稱/class名稱
交集選擇器僅僅作爲了解, 開發中用的並不多

並集選擇器

給所有選擇器選中的標籤設置屬性

選擇器1,選擇器2{
    屬性:值;
}

注意

並集選擇器必須使用,來連接
選擇器可以使用標籤名稱/id名稱/class名稱

兄弟選擇器

兄弟選擇器 : 給指定選擇器後面緊跟的那個選擇器中的標籤設置屬性;

兄弟選擇器分爲兩個種

相鄰兄弟選擇器 CSS2

給指定選擇器後面緊跟的那個選擇器選中的標籤設置屬性;

選擇器1+選擇器2{
    屬性:值;
}

注意

相鄰兄弟選擇器必須通過+連接;
相鄰兄弟選擇器只能選中緊跟其後的那一個標籤, 不能選中被隔開的標籤;

比如 h1+p 設置屬性後, 只給h1標籤相鄰的那一個p標籤被設置樣式，後面還有的p標籤不會被設置樣式;

通用兄弟選擇器 CSS3

通用兄弟選擇器 : 給指定選擇器後面的所有選擇器選中的所有標籤設置屬性;

選擇器1~選擇器2{
    屬性:值;
}

注意

通用兄弟選擇器必須用~連接
通用兄弟選擇器選中的是指定選擇器後面某個選擇器選中的所有標籤, 無論有沒有被隔開都可以選中

序選擇器

CSS3中新增的選擇器最具代表性的就是序選擇器

1.同級別的第幾個

: frist-child 選中同級別中的第一個標籤
: last-child 選中同級別中的最後一個標籤
: nth-child(n) 選中同級別中的第n個標籤
: nth-last-child(n) 選中同級別中的倒數第n個標籤
: only-child 選中父元素中唯一的標籤

**注意點: 不區分類型**

2.同類型的第幾個

:first-of-type 選中同級別中同類型的第一個標籤
:last-of-type  選中同級別中同類型的最後一個標籤
:nth-of-type(n) 選中同級別中同類型的第n個標籤
:nth-last-of-type(n)  選中同級別中同類型的倒數第n個標籤
:only-of-type 選中父元素中唯一類型的某個標籤

3.其它

:nth-child(odd) 選中同級別中的所有奇數
:nth-child(even) 選中同級別中的所有偶數

:nth-child(xn+y)
x和y是用戶自定義的, 而n是一個計數器, 從0開始遞增

屬性選擇器

屬性選擇器: 根據指定的屬性名稱找到對應的標籤, 然後設置屬性

[attribute]
作用:根據指定的屬性名稱找到對應的標籤, 然後設置屬性

[attribute=value]
作用: 找到有指定屬性, 並且屬性的取值等於value的標籤, 然後設置屬性
最常見的應用場景, 就是用於區分input屬性

1.屬性的取值是以什麼開頭的。
[attribute |= value] CSS2
[attribute^=value] CSS3

案例一、<img src="" alt="abcwwwmmm">
案例二、<img src="" alt="abc-wwwmmm">

兩者之間的區別:
CSS2中的只能找到value開頭,並且value是被-和其它內容隔開的
CSS3中的只要是以value開頭的都可以找到, 無論有沒有被-隔開

上述代碼中，案例一和二使用 [attribute^=value] 修改樣式都會成功，使用 [attribute|=value] 只有案例二纔會起作用。

2.屬性的取值是以什麼結尾的
[attribute$=value] CSS3

3.屬性的取值是否包含某個特定的值得
[attribute~=value] CSS2
[attribute*=value] CSS3
兩者之間的區別:
CSS2中的只能找到獨立的單詞, 也就是包含value,並且value是被空格隔開的
CSS3中的只要包含value就可以找到

CSS三大特性

[ ] 繼承性
[ ] 層疊性
[ ] 優先級

什麼是繼承性???

[x] 給父元素設置一些屬性, 子元素也可以使用, 這個我們就稱之爲繼承性

注意

並不是所有的屬性都可以繼承, 只有以color/font-/text-/line-開頭的屬性纔可以繼承
在CSS的繼承中不僅僅是兒子可以繼承, 只要是後代都可以繼承
繼承性中的特殊性
1. a標籤的文字顏色和下劃線是不能繼承的
2. h標籤的文字大小是不能繼承的

應用場景:

一般用於設置網頁上的一些共性信息, 例如網頁的文字顏色, 字體,文字大小等內容

什麼是層疊????

[x] 層疊性就是CSS處理衝突的一種能力

注意點:

層疊性只有在多個選擇器選中”同一個標籤”, 然後又設置了”相同的屬性”, 纔會發生層疊性

什麼是優先級?

[x] 當多個選擇器選中同一個標籤, 並且給同一個標籤設置相同的屬性時, 如何層疊就由優先級來確定

優先級判斷的三種方式

間接選中就是指繼承

如果是間接選中, 那麼就是誰離目標標籤比較近就聽誰的
相同選擇器(直接選中)

如果都是直接選中, 並且都是同類型的選擇器, 那麼就是誰寫在後面就聽誰的
不同選擇器(直接選中)

如果都是直接選中, 並且不是相同類型的選擇器, 那麼就會按照選擇器的優先級來層疊

什麼是 !important ???

[x] 用於提升某個直接選中標籤的選擇器中的某個屬性的優先級的,可以將被指定的屬性的優先級提升爲最高

注意
1. !important只能用於直接選中, 不能用於間接選中

通配符選擇器選中的標籤也是直接選中的
!important只能提升被指定的屬性的優先級, 其它的屬性的優先級不會被提升
!important必須寫在屬性值得分號前面
!important前面的感嘆號不能省略

什麼是優先級的權重?

[x] 當多個選擇器混合在一起使用時, 我們可以通過計算權重來判斷誰的優先級最高

權重的計算規則
1. 首先先計算選擇器中有多少個id, id多的選擇器優先級最高
2. 如果id的個數一樣, 那麼再看類名的個數, 類名個數多的優先級最高
3. 如果類名的個數一樣, 那麼再看標籤名稱的個數, 標籤名稱個數多的優先級最高
4. 如果id個數一樣, 類名個數也一樣, 標籤名稱個數也一樣, 那麼就不會繼續往下計算了,那麼此時誰寫在後面聽誰的,也就是說優先級如果一樣, 那麼誰寫在後面聽誰的

注意

只有選擇器是直接選中標籤的才需要計算權重, 否則一定會聽直接選中的選擇器的

CSS文字屬性與選擇器