亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 4
粉絲 0
評(píng)論 0
訪問量 4526
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css元素樣式表的來源
朝與同歌暮同酒
原創(chuàng)
1008人瀏覽過

簡介

css層疊樣式表為HTML或XML等標(biāo)記語言提供了一種樣式描述,定義了其中元素的顯示方式。css中的“層疊”表示,css樣式單中的樣式形成一個(gè)層次結(jié)構(gòu),更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果。

CSS樣式表的來源

css樣式表的來源主要有兩大類,分別是用戶自定義樣式和用戶代理樣式。
用戶自定義樣式
顧名思義,就是用戶自己定義的樣式。在此大類中,樣式表的來源又分為3個(gè)小項(xiàng)

  1. style=屬性,style屬性作為元素的屬性,直接寫在元素標(biāo)簽內(nèi)。
    1. <h1 style="color: red">Hello World!</h1>
  2. <style>標(biāo)簽,style標(biāo)簽作為HTML的一個(gè)元素,可用于控制其它元素的樣式。但是由于,它是寫在具體的HTML文檔內(nèi),因此它只能控制當(dāng)前文檔的樣式,因此也稱為內(nèi)部樣式。<style>標(biāo)簽一般放在<head>標(biāo)簽內(nèi)。
    1. <head>
    2. <meta charset="UTF-8">
    3. <title>Title</title>
    4. <style>
    5. h1 {
    6. color: brown;
    7. }
    8. </style>
    9. </head>
  3. 引用外部樣式,顧名思義,就是引用外部的樣式表。何為外部樣式表?就是樣式作為一個(gè)單獨(dú)的文件,被保存在.css文件中。保存在此文件中的樣式,具有通用性比較強(qiáng)的特點(diǎn)。只要HTML文件中的元素,可以被該樣式表中的選擇器選中。那么該外部樣式,就可以控制相應(yīng)的元素的樣式。引用外部樣式,一般使用HTML中的<link>標(biāo)簽。
    <link rel="stylesheet" href="style.css">
    用戶代理樣式
    還有一種樣式來源,被稱為用戶代理樣式。在使用中,用戶代理其實(shí)就是瀏覽器。因此也可以理解為瀏覽器默認(rèn)樣式。既然被稱為默認(rèn)樣式,就是瀏覽器自動(dòng)添加的樣式,無需用戶管理。例如,HTML中的h1標(biāo)簽,顯示在瀏覽器時(shí)字體自動(dòng)加大并加粗,a標(biāo)簽?zāi)J(rèn)添加下劃線等

    CSS優(yōu)先級(jí)沖突的解決方案

    css中的優(yōu)先級(jí)一般為 id > class > tag。我們可以將id的權(quán)重設(shè)為100,class的權(quán)重設(shè)為10,tag的權(quán)重設(shè)為1。這樣就可以通過選擇器的權(quán)重,確定選擇器的優(yōu)先級(jí)。舉例:
    1. <style>
    2. body h1.title{
    3. color: red;
    4. }
    5. h1.title{
    6. color: yellow;
    7. }
    8. #head{
    9. color: blue;
    10. }
    11. </style>
    12. <h1 class="title" id="head">Hello World!</h1>
    h1.title的權(quán)重是 10×1+1=11
    body h1.title的權(quán)重是 10×1+1×2=12
    #head的權(quán)重是 100×1=100
    那么在這三個(gè)選擇器中,最后一個(gè)選擇器的權(quán)重是最大的,那么它所設(shè)置的各種樣式優(yōu)先級(jí)也是最高的,標(biāo)題的顏色也就被設(shè)置成了藍(lán)色。
    需要注意的幾點(diǎn):
  • 不同優(yōu)先級(jí),優(yōu)先級(jí)高的屬性有效
  • 同優(yōu)先級(jí),代碼順序在后面的屬性有效
  • 行內(nèi)樣式優(yōu)先級(jí)最高,但在css樣式屬性后加上!important則該屬性優(yōu)先級(jí)最高
  • 使用選擇器時(shí),盡量不用!important和id,這樣的選擇器優(yōu)先級(jí)太高,會(huì)使代碼失去靈活性和通用性。也要少使用tag選擇器,這樣的選擇器則是優(yōu)先級(jí)太低,讓樣式表失去了減少代碼量,達(dá)到樣式復(fù)用的作用。
  • 最后一點(diǎn)是,id唯一性是靠我們自己保證的。即使有多個(gè)相同的id,瀏覽器也能渲染出正確的結(jié)果。但我們要把id當(dāng)成元素的身份證,確保它的唯一性,減少代碼出莫名其妙的錯(cuò)誤的概率。
批改老師:天蓬老師天蓬老師

批改狀態(tài):合格

老師批語:前端是最考驗(yàn)程序員的地方, 因?yàn)橛刑嗟牡胤娇梢远ㄖ? 嚴(yán)重依賴開發(fā)者的自覺和行業(yè)約定, 不像后端語言那樣的嚴(yán)格
本博文版權(quán)歸博主所有,轉(zhuǎn)載請(qǐng)注明地址!如有侵權(quán)、違法,請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理!
全部評(píng)論 文明上網(wǎng)理性發(fā)言,請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費(fèi)學(xué)