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

搜索
博主信息
博文 145
粉絲 7
評論 7
訪問量 198423
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS選擇器優(yōu)先級和盒模型入門
李東亞1??3????12?
原創(chuàng)
1010人瀏覽過

一、CSS選擇器

常見選擇器類型有：
１、標(biāo)簽選擇器
２、屬性選擇器：（常用的id選擇器（#id）和類選擇器.class）
３、偽類選擇器：

  • 結(jié)構(gòu)偽類選擇器
    詳情請見：http://ipnx.cn/blog/detail/25340.html

  • 狀態(tài)偽類選擇器：
    (1)、a標(biāo)簽狀態(tài)偽類選擇器器

    • :link：a標(biāo)簽初始狀態(tài)選擇器
      a{}定義的樣式針對所有的超鏈接(包括錨點)
      a:link{}定義的樣式針對所有寫了href屬性的超鏈接(不包括錨點)
    • :visited：點擊后訪問的狀態(tài)
    • :hover:鼠標(biāo)懸停時的狀態(tài)
    • :active:單擊時的狀態(tài)

    (2)、form表單中input狀態(tài)選擇器（常見狀態(tài)選擇偽類等等）

    • :disabled:選擇禁用狀態(tài)的input標(biāo)簽
    • :read-only:選擇只讀狀態(tài)的input標(biāo)簽
    • :required:選擇必選項的input標(biāo)簽
    • :focus:選擇選中的input標(biāo)簽

４、選擇器的優(yōu)先級
（1）!important > 行內(nèi)樣式（內(nèi)斂樣式）> id選擇器 > class選擇器、屬性選擇器（含偽類選擇器） > 標(biāo)簽選擇器 > 通配符選擇器
（2）常見的選擇器的權(quán)重值（id、class、標(biāo)簽）

  • id權(quán)重100；class權(quán)重10；標(biāo)簽權(quán)重1；
  • 一個id就是100，兩個就200，以此類推，class（n10）、tag（n1）和id（n*100）一樣
  • 可以多id、class、tag混合使用
  • 有id看id,沒id看class,沒class看標(biāo)簽，誰的權(quán)重大，誰優(yōu)先級高
  • 如果id權(quán)重值一樣看class,如果id和class權(quán)重值都一樣就看tag

二、CSS常見的屬性

1、字體屬性：

屬性 屬性值 作用
font-size 單位：像素px rem、em 設(shè)置字體大小
font-family 與系統(tǒng)字體一致，可以設(shè)多值 設(shè)置不同字體
font-weight 100-900數(shù)值或者normal、bold、light等 設(shè)置字體粗度
font-style normal、italic（斜體）、oblique(認(rèn)為設(shè)置的傾斜提） 設(shè)置字體樣式
line-height 單位px 設(shè)置字體高度

三、盒子模型入門

1、盒子一般包含以下部分：

  • Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
  • Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
  • Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
  • Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

2、盒子內(nèi)外邊距的使用方式：

  • 每個盒子的外|內(nèi)邊距都有四邊：top right bottom left都可以單獨設(shè)置寬度，值為像素，
  • 簡寫方式：以padding:top right bottom left；以順時針單獨設(shè)置四條邊寬度
  • 如果上下一直，左右一直可以用兩只法簡寫；例如 padding：10px 5px; 第一個值表示上下邊寬度，第二個值表示左右邊寬度
  • 如果上下不一致，左右一直可以用三值法：padding：10px 5px 15px; 第一個值表示上下邊寬度，第二個值表示左右邊寬度，第三個值為底邊
    如果四個邊都一致，可以用單值法：padding：10px；
  • 不管三值法還是二值法，第二個值都用來表示左右邊的寬度

四、相關(guān)知識點練習(xí)

1、代碼：

  2. <!DOCTYPE html>
  3. <html>
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <title>CSS選擇器和狀態(tài)偽類</title>
  7.         <style>
  8.             a:link{
  9.                 text-decoration: none;
  10.                 color:#42B983
  11.             }
  12.             a:visited{
  13.                 color:#8B0000;
  14.             }
  16.             a:active{
  17.                 background-color: #FF0000;
  18.             }
  19.             a:hover{
  20.                 font-size: 40px;
  21.             }
  22.             form{
  23.                 display: flex;
  24.                 flex-direction: column;
  25.                 width: 400px;
  26.                 /* text-align: center; */
  27.             }
  28.             input:disabled{
  29.                 background-color: lightgreen;
  30.             }
  31.             input:read-only{
  32.                 background-color: red;
  33.             }
  35.             input:focus{
  36.                 background-color:#DA70D6;
  37.             }
  38.             input:required{
  39.                 background-color: #000000;
  40.             }
  41.             form{
  43.                 margin:10px 15px;
  44.                 padding: 10px;
  45.             }
  46.             body{
  47.                 background: url(image/bg.jpg);
  48.                 background-size: 600px;
  49.                 background-repeat: no-repeat;
  51.             }
  52.         </style>
  53.     </head>
  54.     <body>
  56.         <a href="https://www.zhongyequan.com">種業(yè)圈</a>
  57.         <form action="">
  58.             <div><label for="">用戶名：</label><input type="text" disabled value="admin"></div>
  59.             <div><label for="">密碼:</label><input type="password" name="" id="" readonly value="123456"></div>
  60.             <input type="text">
  61.             <input type="text" required>
  62.             <button>登陸</button>
  63.         </form>
  65.     </body>
  66. </html>

2、運(yùn)行結(jié)果圖

批改老師：天蓬老師天蓬老師

批改狀態(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é)