摘要：與類選擇器一樣，選擇器中可以忽略通配選擇器。是唯一標(biāo)識(shí)，只能被使用一次選擇器標(biāo)簽選擇器標(biāo)簽選擇器使用類選擇器選擇器標(biāo)簽選擇器設(shè)置鏈接的樣式能夠設(shè)置鏈接樣式的屬性有很多種例如等等。

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素
樣式通常存儲(chǔ)在樣式表中
把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問題
外部樣式表可以極大提高工作效率
外部樣式表通常存儲(chǔ)在 CSS 文件中
多個(gè)樣式定義可層疊為一個(gè)

HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過使用

、

、

這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息。同時(shí)文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。

所有的主流瀏覽器均支持層疊樣式表

div和span的理解

div是一個(gè)html標(biāo)簽, 一個(gè)塊級(jí)元素(多帶帶顯示一行), 多帶帶使用沒有任何意義, 必須結(jié)合CSS來使用, 主要用于頁面的布局;

span是一個(gè)html標(biāo)簽, 一個(gè)內(nèi)聯(lián)元素(顯示一行), 它多帶帶使用沒有任何意義, 必須結(jié)合css使用, 主要對(duì)括起來的內(nèi)容進(jìn)行樣式的修飾;

類選擇器

使用類選擇器前要對(duì)世紀(jì)文檔做標(biāo)記，才能發(fā)揮類選擇器作用。

.name{text-align:center}

在文檔后面的部分，通過包含與樣式相關(guān)的"class"屬性，且將其中一個(gè)預(yù)定義的樣式指定為"name"值，就一塊明確選擇要對(duì)該標(biāo)簽的特定情況用何種樣式

    
    
    



    Sie sprechen gut Deutsch.


    Was machen Sie hier in Berlin?Arbeiten Sie hire?


    Nein,ich studiere.

ID選擇器

ID 選擇器類似于類選擇器，ID 選擇器前面有一個(gè) # 號(hào) - 也稱為棋盤號(hào)或井號(hào)。與類選擇器一樣，ID 選擇器中可以忽略通配選擇器。
ID是唯一標(biāo)識(shí)，只能被使用一次

    
    
    


    

        Sheen:Sie sprechen gut Deutsch.
    
    

        Star:Was machen Sie hier in Berlin?Arbeiten Sie hire?
    
    

        Clotho:Nein,ich studiere.
    

標(biāo)簽選擇器

    
    
    


使用CSS

    類選擇器

ID選擇器
標(biāo)簽選擇器

設(shè)置鏈接的樣式

能夠設(shè)置鏈接樣式的 CSS 屬性有很多種（例如 color, font-family, background 等等）。
鏈接的特殊性在于能夠根據(jù)它們所處的狀態(tài)來設(shè)置它們的樣式。
鏈接的四種狀態(tài)：
a:link - 普通的、未被訪問的鏈接
a:visited - 用戶已訪問的鏈接
a:hover - 鼠標(biāo)指針位于鏈接的上方
a:active - 鏈接被點(diǎn)擊的時(shí)刻

CSS樣式的引入

引入方式:

1). 行內(nèi)引入: 
2). 內(nèi)部引入: 寫在head標(biāo)簽里面的style標(biāo)簽里面的樣式;
3). 外部引入: 將css樣式獨(dú)立成一個(gè)文件， 通過與當(dāng)前html文件鏈接在一起.
三種引入方式的優(yōu)先級(jí): 就近原則

//CSS文件
div {
    width: 80%;
    margin: 0 auto;
    padding: 0;

}

ul {
    list-style-type: none
}

li {
    display: inline-block;
    width: 20%;
    background: snow;
    color: #333333;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    font-size: large;
    text-transform: capitalize;
}

li:hover {
    background: green;
    color: snow;
}

a:hover {

    color: snow;

}

    
    
    
    





    

        

            HTML
        
        
CSS
        
JS
        
python
    

GPU云服務(wù)器 云服務(wù)器 css樣式 頁面css樣式 css的樣式 css樣式代碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113955.html

• 上一篇：前端每日實(shí)戰(zhàn)：152# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)圓點(diǎn)錯(cuò)覺效果
• 下一篇：小白面試之制作一個(gè)本地個(gè)人信息網(wǎng)頁

相關(guān)文章

• python大佬養(yǎng)成計(jì)劃----CSS樣式類

  摘要：與類選擇器一樣，選擇器中可以忽略通配選擇器。是唯一標(biāo)識(shí)，只能被使用一次選擇器標(biāo)簽選擇器標(biāo)簽選擇器使用類選擇器選擇器標(biāo)簽選擇器設(shè)置鏈接的樣式能夠設(shè)置鏈接樣式的屬性有很多種例如等等。 CSS 概述 CSS 指層疊樣式表 (Cascading Style Sheets) 樣式定義如何顯示 HTML 元素 樣式通常存儲(chǔ)在樣式表中 把樣式添加到 HTML 4.0 中，是為了解決內(nèi)容與表現(xiàn)分離的問...

  Steve_Wang_ 2019-08-02 11:38 評(píng)論0 收藏0

• python大佬養(yǎng)成計(jì)劃----CSS樣式類練習(xí)

  摘要：導(dǎo)航欄擁有易用的導(dǎo)航條對(duì)于任何網(wǎng)站都很重要。通過，您能夠把乏味的菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。導(dǎo)航欄需要標(biāo)準(zhǔn)的作為基礎(chǔ)。導(dǎo)航欄基本上是一個(gè)鏈接列表，因此使用和元素是非常合適的制作水平導(dǎo)航欄有兩種創(chuàng)建水平導(dǎo)航欄的方法。 導(dǎo)航欄 擁有易用的導(dǎo)航條對(duì)于任何網(wǎng)站都很重要。 通過 CSS，您能夠把乏味的 HTML 菜單轉(zhuǎn)換為漂亮的導(dǎo)航欄。 導(dǎo)航欄需要標(biāo)準(zhǔn)的 HTML 作為基礎(chǔ)。 在我們的例子中，將用標(biāo)...

  cnsworder 2019-08-30 15:54 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

daryl

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• UCloud金秋雙11促銷活動(dòng)點(diǎn)睛：2核4G/4核8G云服務(wù)器，烏蘭察布/香港/洛杉磯價(jià)格幾何？-老

  閱讀 1674·2021-10-29 13:11

• 編程筆試(解析及代碼實(shí)現(xiàn))：猴子吃桃。猴子第一天吃了若干個(gè)桃子，當(dāng)即吃了一半，還不解饞，又多吃了一個(gè)

  閱讀 841·2021-09-22 10:02

• PacificRack：洛杉磯機(jī)房Windows VPS年付12美元起

  閱讀 1698·2021-08-20 09:35

• CSS階段總結(jié)

  閱讀 1563·2019-08-30 15:54

• 使用CSS3實(shí)現(xiàn)input多選框自定義樣式

  閱讀 2467·2019-08-30 15:44

• python大佬養(yǎng)成計(jì)劃----CSS樣式類

  閱讀 1392·2019-08-29 16:52

• preload & prefetch

  閱讀 1106·2019-08-23 12:56

• 總結(jié)開發(fā)過程踩到的坑（三）

  閱讀 765·2019-08-22 15:16

最新活動(dòng)

閱讀需要支付1元查看

支付并查看

<