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

搜索
博主信息
博文 34
粉絲 0
評論 0
訪問量 28665
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
元素樣式及選擇器
OC的PHP大牛之路
原創(chuàng)
485人瀏覽過

元素的樣式

顏色、字體、背景可繼承
優(yōu)先級：自定義>繼承>默認(rèn)

  1. 內(nèi)聯(lián)樣式：style屬性，適用于當(dāng)前特定的某個元素

    1. <body>
    2.  <h1 style="color:red">xxx</h1>
    3.  <h1 style="color:red">xxx</h1>
    4.  <h1 style="color:red">xxx</h1>
    5. </body>

  2. 文檔樣式：<style></style>標(biāo)簽，適用于當(dāng)前html文檔

    1. <body>
    2.  <h1 >xxx</h1>
    3.  <h1 >xxx</h1>
    4.  <h1 >xxx</h1>
    5.  <style>
    6.      h1{
    7.          color: red;
    8.      }
    9.  </style>
    10. </body>

  3. 外部樣式：<link rel="stylesheet" href="css文件">首選

    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx</h1>
    5.  <h1 >xxx</h1>
    6.  <h1 >xxx</h1>
    7. </body>

選擇器

基本選擇器

  1. 標(biāo)簽選擇器
    標(biāo)簽選擇器
    html:
    1.  <link rel="stylesheet" href="01.css">
    2. </head>
    3. <body>
    4.  <h1 >xxx1</h1>
    5.  <h1 >xxx2</h1>
    6.  <h1 >xxx3</h1>
    7.  <h1 >xxx4</h1>
    8.  <h1 >xxx5</h1>
    9.  <h1 >xxx6</h1>
    10. </body>
    css:
    1. /* 標(biāo)簽選擇器 */
    2. h1{
    3.  color: red;
    4. }

2.屬性選擇器id# class.
屬性選擇器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1>xxx5</h1>
  9.     <h1>xxx6</h1>
  10. </body>

css

  1. /* 標(biāo)簽選擇器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 屬性選擇器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }

3.群組選擇器,
群組選擇器
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10. </body>

css

  1. /* 標(biāo)簽選擇器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 屬性選擇器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群組選擇器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }

4.通配選擇器*
通配選擇器
!important用于臨時提權(quán)，用于調(diào)試
html

  1.     <link rel="stylesheet" href="01.css">
  2. </head>
  3. <body>
  4.     <h1>xxx1</h1>
  5.     <h1 title="welcome">xxx2</h1>
  6.     <h1 class="three">xxx3</h1>
  7.     <h1 id="active">xxx4</h1>
  8.     <h1 id="hello">xxx5</h1>
  9.     <h1 class="world">xxx6</h1>
  10.     <h2>大家看這里</h2>
  11. </body>

css

  1. /* 標(biāo)簽選擇器 */
  2. h1{
  3.     color: red;
  4. }
  6. /* 屬性選擇器 */
  7. h1[title="welcome"]{
  8.     color:green;
  9. }
  11. /* h1[class="three"]{  */
  12.     /* color: blue;  */
  13.  /* }   */
  14. h1.three{
  15.     color: blue;
  16. }
  18. /* h1[id="active"]{ */
  19. /*     color: blueviolet; */
  20. /* } */
  21. h1#active{
  22.     color: blueviolet;
  23. }
  25. /* 群組選擇器 */
  26. h1#hello,h1.world{
  27.     background-color: aqua;
  28. }
  30. /* 通配選擇器 */
  31. body *{
  32.     background-color: grey !important;
  33. }

上下文選擇器

1.子元素>
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3</li>
  8.     <li class="item">item4</li>
  9.     <li class="item">item5</li>
  10.     <li class="item">item6</li>
  11.     <li class="item">item7</li>
  12.     <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }

2.后代元素空格
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.     <li class="item">item1</li>
  6.     <li class="item">item2</li>
  7.     <li class="item">item3
  8.         <ul>
  9.             <li class="item">item3-1</li>
  10.             <li class="item">item3-2</li>
  11.             <li class="item">item3-3</li>
  12.         </ul>
  13.     </li>
  14.     <li class="item">item4</li>
  15.     <li class="item">item5</li>
  16.     <li class="item">item6</li>
  17.     <li class="item">item7</li>
  18.     <li class="item">item8</li>
  19.     </ul>
  20. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }

3.相鄰兄弟+
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相鄰兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }

4.所有兄弟~
html

  1.     <link rel="stylesheet" href="demo.css">
  2. </head>
  3. <body>
  4.     <ul class="list">
  5.        <li class="item">item1</li>
  6.        <li class="item">item2</li>
  7.        <li class="item">item3</li>
  8.        <li class="item">item4</li>
  9.        <li class="item five">item5</li>
  10.        <li class="item">item6</li>
  11.        <li class="item">item7</li>
  12.        <li class="item">item8</li>
  13.     </ul>
  14. </body>

css

  1. /* 1.子元素 */
  2. .list>.item{
  3.     border: 1px solid;
  4. }
  6. /* 2.后代元素 */
  7. .list .item{
  8.     border: 1px solid;
  9. }
  11. /* 3.相鄰兄弟 */
  12. .list>.item.five {
  13.     background-color:aqua;
  14. }
  15. .list>.item.five + *{
  16.     background-color: aquamarine;
  17. }
  19. /* 4.所有兄弟 */
  20. .list>.item.five ~ *{
  21.     background-color: blueviolet;
  22. }

選擇器的權(quán)重

(0,0,0)表示選擇器因子的權(quán)重，
對應(yīng)(百位<id>,十位<class>，個位<tag>)

增加權(quán)重的方法：
1.增加標(biāo)簽（可以是父級標(biāo)簽），這樣就可以不依
序，如html body h1{xxx}

2.增加代碼，如.title{xxx}可增加至.title.go {xxx}

注：盡量少用或者不用id,權(quán)重過大

批改老師：PHPzPHPz

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

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

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

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