CSS選擇器以及文本樣式

CSS學(xué)習(xí)

CSS

層疊樣式表（Cascading Style Sheets）
CSS可用來為網(wǎng)頁創(chuàng)建樣式表，通過樣式表可以對網(wǎng)頁進(jìn)行裝飾。

CSS語法

選擇器 {樣式名:樣式值；樣式名:樣式值 ; }

例如：p{color:red;font-size:20px;}

行內(nèi)樣式

將樣式寫到標(biāo)簽內(nèi)部的style屬性中,例如：

<p style="color: red;font-size: 30px"></p>

但是，這樣做的缺點是：導(dǎo)致結(jié)構(gòu)與表現(xiàn)耦合，同時導(dǎo)致樣式不能夠復(fù)用，所以這種方式我們不使用。

內(nèi)部樣式表

可以將樣式直接寫到style標(biāo)簽中，例如：

<style>
    p{color:red; font-size: 30px;}
</style>

好處：使CSS獨立于HTML中，可以同時為多個標(biāo)簽設(shè)置樣式
缺點：只能在一個頁面中使用，不能在多個頁面中使用

外部樣式表

可以將所有的樣式都保存到一個CSS文件中，在通過link標(biāo)簽將其引入到HTML中，例如：

<link rel="stylesheets" type="text/css" href="style.css">

將樣式表放入到了頁面的外部，可以在多個頁面中引入，同時瀏覽器加載文件時可以使用緩存。

selector選擇器

一、元素選擇器

語法：

標(biāo)簽名{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            p{
                color: red;
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <p>這是一個很完美的網(wǎng)頁</p>
    </body>
    
</html>

效果如下：

標(biāo)簽元素.PNG

二、類選擇器

語法：

.className{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>類選擇器</title>
        <style>
            .div1{
                font: 微軟雅黑;
                color: pink;
                text-align: center;
                font-size: 50px;
            }
        </style>
    </head>
    <body>
        <div class="div1">真正的高度在于超越過去的自己</div>
    </body>
    
</html>

效果如下：

類選擇器.PNG

三、id選擇器

根據(jù)元素的id屬性值選取元素。
語法：

id{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>id選擇器</title>
        <style>
            #div1{
                font: 微軟雅黑;
                font-size: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="div1">真正的高度在于超越過去的自己</div>
    </body>
    
</html>

顯示效果如下：

id選擇器.PNG

id屬性是不能重復(fù)的

四、復(fù)合選擇器（交集選擇器）

復(fù)合選擇器，可以同時使用多個選擇器，這樣可以選擇同時滿足多個選擇器的元素。
語法：

選擇器1選擇器2{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>復(fù)合選擇器（交集選擇器）</title>
        <style>
            span.p3{
                background-color: yellow;
            }
        </style>
    </head>
    <body>
        <p class="p3">床前明月光</p>
        <span class="p3">疑是地上霜</span>
    </body>
    
</html>

效果如下：

復(fù)合選擇器.PNG

五、群組選擇器（并集選擇器）

群組選擇器，可以同時使用多個選擇器，多個選擇器將被同時應(yīng)用指定的樣式。
語法：

選擇器1,選擇器2,選擇器3 { }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>復(fù)合選擇器</title>
        <style>
            h1,p{
                font-size: 50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>真正的高度在于超越過去的自己</h1>
        <p>我曾經(jīng)跨過山和大海，也穿過人山人海，我曾經(jīng)擁有著的一切，轉(zhuǎn)眼間就飄散如煙。</p>
    </body>
    
</html>

效果如下：

群組選擇器.PNG

六、通用選擇器

通用選擇器，可以同時選中頁面中的所有元素。
語法：

*{}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通用選擇器</title>
        <style>
            *{
                font-size:50px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <p>真正的高度在于超越過去的自己</p>
        <p>我曾經(jīng)跨過山和大海，也穿過人山人海，我曾經(jīng)擁有著的一切，轉(zhuǎn)眼間就飄散如煙。</p>
        <p>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉(xiāng)。</p>
    </body>
    
</html>

效果如下：

通用選擇器.PNG

七、標(biāo)簽之間的關(guān)系

祖先元素
后代元素
父元素
子元素
兄弟元素

八、后代選擇器

后代選擇器可以根據(jù)標(biāo)簽的關(guān)系，為處在元素內(nèi)部的代元素設(shè)置樣式。
語法：

祖先元素后代元素后代元素 { }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>后代選擇器</title>
        <style>
            #d1 span{
            color: greenyellow;
        }

        </style>
    </head>
    <body>
        <div id="d1">
        <span>我是div標(biāo)簽中的span</span>
        <p><span>我是p標(biāo)簽中的span</span></p>
    </div>
    </body>
    
</html>

效果如下：

后代選擇器.PNG

九、偽類和偽元素

偽類

正常鏈接：
a:link
訪問過的鏈接（只能定義字體顏色）
a:visited
鼠標(biāo)滑過的鏈接
a:hover
正在點擊的鏈接
a:active

十、其他元素

獲取焦點
:focus

指定元素前
:before

指定元素后
:after

選中的元素
::selection

十一、其他選擇器

首字母
:first-letter

首行
:first-line

十二、屬性選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style type="text/css">
        /*
        為所有具有title屬性的p元素，設(shè)置一個背景顏色為黃色
        屬性選擇器
            作用：可以根據(jù)元素中的屬性或?qū)傩灾祦磉x取指定元素
            語法：
                [屬性名] 選取含有指定屬性的元素
                [屬性名="屬性值"] 選取含有指定屬性值的元素
                [屬性名^="屬性值"] 選取屬性值以指定內(nèi)容開頭的元素
                [屬性名$="屬性值"] 選取屬性值以指定內(nèi)容結(jié)尾的元素
                [屬性名*="屬性值"] 選取屬性值包含指定內(nèi)容的元素
        p[title]{
            background-color: yellow;
        }
        */
        /*為title屬性值是hello的元素設(shè)置一個背景顏色為黃色
        p[title="hello"]{
            background-color: yellow;
        }
        */
        /*為title屬性值以ab開頭的元素設(shè)置一個背景顏色為黃色
        p[title^="ab"]{
            background-color: yellow;
        }
        */
        /*為title屬性值以c結(jié)尾的元素設(shè)置一個背景顏色
        p[title$="c"]{
            background-color: yellow;
        }
        */
        /*為title屬性值包含c的元素設(shè)置一個背景顏色*/
        p[title*="c"]{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <!-- 
        title屬性，這個屬性可以給任何標(biāo)簽指定
        當(dāng)鼠標(biāo)移入到元素上時，元素中的title屬性的值將會作為提示文字顯示
     -->
    <p title="hello">我是一個段落</p>
    <p>我是一個段落</p>
    <p title="abbc">我是一個段落</p>
    <p title="abccd">我是一個段落</p>
    <p title="abc">我是一個段落</p>
</body>
</html>

顯示效果如下：

屬性選擇器.PNG

十三、子元素選擇器

子元素選擇器可以給另一個元素的子元素設(shè)置樣式。
語法：

父元素 > 子元素{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子元素選擇器</title>
    <style type="text/css">
        /*
        為第一個p標(biāo)簽設(shè)置一個背景顏色為黃色
        :first-child 可以選中第一個子元素
        :last-child 可以選中最后一個子元素
        :nth-child 可以選中任意位置的子元素
            該選擇器后邊可以指定一個參數(shù)，指定要選中第幾個子元素
            even 表示偶數(shù)位置的子元素
            odd 表示奇數(shù)位置的子元素

        body>p:first-child{
            background-color: yellow;
        }
        p:last-child{
            background-color: yellow;
        }
        p:nth-child(even){
            background-color: yellow;
        }
        */
        /*
        :first-of-type
        :last-of-type
        :nth-of-type
            和child類似，只不過child是在所有的子元素中找
            而type是在當(dāng)前類型的子元素中找
        
        p:first-of-type{
            background-color: yellow;
        }
        */
        p:last-of-type{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <span>我是span</span>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <span>我是span</span>
    <!-- <div>
        <p>我是一個p標(biāo)簽</p>
    </div> -->
</body>
</html>

子元素選擇器.PNG

其他子元素選擇器

選擇第一個子標(biāo)簽
:first-child

選擇最后一個子標(biāo)簽

:last-child

選擇指定位置的子元素
:nth-child

選擇指定類型的子元素
:first-of-type
:last-of-type
:nth-of-type

十四、兄弟選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>兄弟元素選擇器</title>
    <style type="text/css">
        /*
        為span后的一個p元素設(shè)置一個背景顏色為黃色
        后一個兄弟元素選擇器
            作用：可以選中一個元素后緊挨著的指定的兄弟元素
            語法：前一個 + 后一個
        span + p{
            background-color: yellow;
        }
        */
        /*
        選中后邊的所有兄弟元素
            語法：前一個 ~ 后邊所有
        */
        span ~ p{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <span>我是一個span</span>
    <div>我是div</div>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
</body>
</html>

效果如下：

兄弟選擇器.PNG

十五、否定偽類

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>否定偽類</title>
    <style type="text/css">
        /*
        為所有的p元素設(shè)置一個背景顏色為黃色，除了class值為hello的
        否定偽類：
            作用：可以從已選中的元素中剔除出某些元素
            語法：
                :not(選擇器)
        */
        p:not(.hello){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p class="hello">我是一個p標(biāo)簽</span>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
    <p>我是一個p標(biāo)簽</p>
</body>
</html>

否定偽類.PNG

十六、選擇器的權(quán)重

不同的選擇器有不同的權(quán)重值：

內(nèi)聯(lián)樣式：權(quán)重是 1000

id選擇器：權(quán)重是 100

類、屬性、偽類選擇器：權(quán)重是 10

元素選擇器：權(quán)重是 1

通配符：權(quán)重是 0

計算權(quán)重需要將一個樣式的全部選擇器相加，比如上邊的body h1的權(quán)重是20，h1的權(quán)重是10，所以第一個選擇器設(shè)置的樣式會優(yōu)先顯示。

文本樣式

1. em和strong

em標(biāo)簽用于表示一段內(nèi)容中的著重點。
strong標(biāo)簽用于表示一個內(nèi)容的重要性。
這兩個標(biāo)簽可以單獨使用，也可以一起使用。

<p>
<strong>警告：任何情況下不要接近僵尸。</strong>
他們只是 <em>看起來</em> 很友好，實際上他們是為了吃你的胳膊！
</p>

通常em顯示為斜體，而strong顯示為粗體。

2. i和b標(biāo)簽

i標(biāo)簽會使文字變成斜體
b標(biāo)簽會使文字變成粗體

3. small標(biāo)簽

small標(biāo)簽表示細(xì)則一類的旁注，通常包括免責(zé)聲明、注意事項、法律限制、版權(quán)信息等。
瀏覽器在顯示small標(biāo)簽時會顯示一個比父元素小的字號

<p><small>&copy;2018北財. 保留所有權(quán)利.</small></p>

4.cite標(biāo)簽

使用cite標(biāo)簽可以指明對某內(nèi)容的引用或參考。例如，戲劇、文章或圖書的標(biāo)題，歌曲、電影、照片或雕塑的名稱等。

<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事。
</p>

5. blockquote標(biāo)簽和q標(biāo)簽

blockquote和q表示標(biāo)記引用的文本。

blockquote用于長引用，q用于短引用。
在兩個標(biāo)簽中還可以使用cite屬性來表示引用的地址。

孟子曾經(jīng)說過：
<blockquote>天將降大任于是人也...</blockquote>
他說的真對??！

<p>孔子曾經(jīng)說過：<q>學(xué)而時習(xí)之不亦說乎</q></p>

6. sup和sub

sup和sub用于定義上標(biāo)和下標(biāo)。
上標(biāo)主要用于表示類似于103中的3。
下標(biāo)則用于表示類似余H2O中的2。

7. ins和del

ins表示插入的內(nèi)容，顯示時通常會加上下劃線。
del表示刪除的內(nèi)容，顯示時通常會加上刪除線。

8. code標(biāo)簽和pre標(biāo)簽

如果你的內(nèi)容包含代碼示例或文件名，就可以使用code元素。
pre元素表示的是預(yù)格式化文本，可以使用
pre包住code來表示一段代碼。

<pre>
<code>
function fun(){  alert("hello");
}
</code>
</pre>

9.有序列表

<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
</ol>

10. 無序列表

<ul>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
</ul>

11. 定義列表

使用dl、dd、dt來創(chuàng)建一個定義列表

<dl>
    <dt>定義項1</dt>
    <dd>定義描述1</dd>
    <dt>定義項2</dt>
    <dd>定義描述2</dd>
    <dt>定義項3</dt>
    <dd>定義描述3</dd>
</dl>

12. 文字大小

font-size

13.文字字體

font-family

14. 字體分類

serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書字體）
fantasy （虛幻字體）

以上這些分類都是一些大的分類，并沒有涉及具體的類型，如果將字體指定為這些格式，瀏覽器會自己選擇指定類型的字體。

15. 斜體和粗體

font-style用來指定文本的斜體

指定斜體：font-style:italic
指定非斜體：font-style:normal

font-weight用來指定文本的粗體

指定粗體：font-weight:bold
指定非粗體：font-weight:normal

16. 小型大寫字母

font-variant屬性可以將字母類型設(shè)置為小型大寫。在該樣式中，字母看起來像是稍微縮小了尺寸的大寫字母。

font-variant:small-caps

17. 字體屬性的簡寫

font可以一次性同時設(shè)置多個字體的樣式。
語法：

font:加粗斜體小型大寫大小/行高字體

18. 行間距

line-height用于設(shè)置行高，行高越大則行間距越大。
行間距 = line-height – font-size

19. 大寫化

text-transform樣式用于將元素中的字母全都變成大寫。

大寫：text-transform:uppercase

小寫：text-tansform:lowercase

首字母大寫：text-transform:capitalize

正常：text-transform:none

20. 文本修飾

text-decoration屬性，用來給文本添加各種修飾。通過它可以為文本的上方、下方或者中間添加線條。
可選值：

underline

overline

line-through

none

21. 字母間距和單詞間距

letter-spacing用來設(shè)置字符之間的間距。
word-spacing用來設(shè)置單詞之間的間距。

這兩個屬性都可以直接指定一個長度或百分?jǐn)?shù)作為值。正數(shù)代表的是增加距離，而負(fù)數(shù)代表減少距離。

22. 對齊文本

text-align用于設(shè)置文本的對齊方式。

可選值：
left：左對齊
right：右對齊
justify：兩邊對齊

center：居中對齊

23. 首行縮進(jìn)

text-indent用來設(shè)置首行縮進(jìn)。
該樣式需要指定一個長度，并且只對第一行生效。
text-indent:2em;首行縮進(jìn)2個字符

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS選擇器與文本樣式

CSS選擇器以及文本樣式

CSS學(xué)習(xí)

CSS

CSS語法

行內(nèi)樣式

內(nèi)部樣式表

外部樣式表

selector選擇器

一、元素選擇器

二、類選擇器

三、id選擇器

id{}

四、復(fù)合選擇器（交集選擇器）

五、群組選擇器（并集選擇器）

六、通用選擇器

七、標(biāo)簽之間的關(guān)系

八、后代選擇器

九、偽類和偽元素

偽類

十、其他元素

十一、其他選擇器

十二、屬性選擇器

十三、子元素選擇器

其他子元素選擇器

十四、兄弟選擇器

十五、否定偽類

十六、選擇器的權(quán)重

文本樣式

1. em和strong

2. i和b標(biāo)簽

3. small標(biāo)簽

4.cite標(biāo)簽

5. blockquote標(biāo)簽和q標(biāo)簽

6. sup和sub

7. ins和del

8. code標(biāo)簽和pre標(biāo)簽

9.有序列表

10. 無序列表

11. 定義列表

12. 文字大小

13.文字字體

14. 字體分類

15. 斜體和粗體

16. 小型大寫字母

17. 字體屬性的簡寫

18. 行間距

19. 大寫化

20. 文本修飾

21. 字母間距和單詞間距

22. 對齊文本

23. 首行縮進(jìn)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、元素選擇器

二、類選擇器

三、id選擇器

五、群組選擇器（并集選擇器）

六、通用選擇器

八、后代選擇器

九、偽類和偽元素

十、其他元素

十一、其他選擇器

十二、屬性選擇器

十五、否定偽類