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

搜索
博主信息
博文 145
粉絲 7
評(píng)論 7
訪問量 198437
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
CSS入門和結(jié)構(gòu)偽類選擇器
李東亞1??3????12?
原創(chuàng)
1158人瀏覽過

CSS入門

一、CSS是一種層疊樣式表，主要用修飾html樣式和布局，是一種樣式規(guī)則集,主要有以及下及部分組成：

  • 選擇器
  • 聲明：
    • 屬性
    • 屬性值

CSS書寫規(guī)則（嵌入式和CSS文件）

  • 每個(gè)規(guī)則集（除了選擇器的部分）都應(yīng)該包含在成對(duì)的大括號(hào)里（{}）。
  • 在每個(gè)聲明里要用冒號(hào)（:）將屬性與屬性值分隔開。
  • 在每個(gè)規(guī)則集里要用分號(hào)（;）將各個(gè)聲明分隔開。

二、CSS引入的方式：
1、嵌入式：通過style標(biāo)簽嵌入到html文檔中
2、內(nèi)聯(lián)式：也稱為行內(nèi)樣式,在元素標(biāo)簽內(nèi)通過style屬性直接定義樣式
3、外部引入式：直接導(dǎo)入外部樣式文件到html文檔中，常見的方式有@import url("css文件路徑")|@import "css文件路靜"和<link rel="stylesheet" href="CSS文件路徑">；

三、常見的CSS基礎(chǔ)選擇器：
1、元素標(biāo)簽選擇器
2、屬性選擇器：

  • class選擇器：通常用.屬性值來表示
  • id選擇器：通常用#屬性值來表示
  • [屬性=”屬性值”]：通用屬性選擇器

3、*:通配符選擇器

四、上下文選擇器
1、后代選擇器：空格
2、子代選擇器：>
3、同級(jí)相鄰選擇器：+ 選擇當(dāng)前標(biāo)簽同級(jí)的下一個(gè)元素
4、同級(jí)兄弟選擇器：~ 選擇當(dāng)前標(biāo)簽后面所有同級(jí)的元素

五、結(jié)構(gòu)偽類選擇器
常見的結(jié)構(gòu)偽類選擇器有：nth-child()和nth-of-type()
兩種用法相同區(qū)別在于：前者不區(qū)分元素標(biāo)簽類型，后者區(qū)分
結(jié)構(gòu)偽類選擇器的用法（以nth-of-type為例）：
1、預(yù)設(shè)用用法：

  • :first-of-type：選中第一個(gè)元素標(biāo)簽
  • :last-of-tyoe:選中最后一個(gè)元素標(biāo)簽
  • :only-of-type：選擇唯一一個(gè)的元素 沒有其他相同類型的兄弟元素
    2、:nth-of-type(n):選定某個(gè)元素，n（正整數(shù)）為第幾個(gè)元素
    3、:nth-of-type(an+b):通過公式an+b正序特定的元素
    4、:nth-last-of-type(-n+b):選擇后面n個(gè)元素

CSS入門和結(jié)構(gòu)偽類練習(xí)

1、代碼：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>CSS入門和結(jié)構(gòu)偽類的使用</title>
  6.         <!-- 通過link標(biāo)簽導(dǎo)入外部樣式 -->
  7.         <link rel="stylesheet" href="index_style.css">
  8.         <style>/*通過style標(biāo)簽嵌入樣式*/
  9.             /* 通過@import ""導(dǎo)入外部樣式 .content盒子樣式*/
  10.             /* @import "index.css"; */
  11.             @import url(index.css);
  13.             h2{
  14.                 margin-top: 5px;
  15.                 margin-left: 5px;
  16.                 width: 200px;
  17.                 text-align: center;
  18.             }
  19.             ul :first-of-type{
  20.                 color:red;
  21.             }
  23.             ul :last-of-type{
  24.                 color: greenyellow;
  25.             }
  26.             /* only-of-type 選擇只有一個(gè)的元素 沒有其他相同類型的兄弟元素。*/
  27.             ul :only-of-type{
  28.                 font-size: 20px;
  29.                 color:skyblue;
  30.             }
  31.             /* 選擇ul下面的奇數(shù)列 */
  32.             ul :nth-of-type(2n+1){
  33.                 background-color: lightgrey;
  34.             }
  35.             /* 選擇倒數(shù)三列 */
  36.             ul :nth-last-of-type(-n+3){
  38.                 background-color: #42B983;
  39.             }
  40.             /* 選中一個(gè)ul下面的一個(gè)元素 */
  41.             ul :nth-of-type(5){
  42.                 background-color: darkred;
  43.                 font-size:5em;
  44.             }
  45.         </style>
  46.     </head>
  47.     <body>
  48.         <!-- 行內(nèi)樣式：通過元素標(biāo)簽的style屬性寫入樣式 -->
  49.         <h2 style="color:red">Css入門</h2>
  51.         <div class="content">
  52.             我是內(nèi)容！
  53.         </div>
  54.         <ul>
  55.             <li>列表11</li>
  56.             <li>列表12</li>
  57.             <li>列表13</li>
  58.             <li>列表14</li>
  59.             <li>列表15</li>
  60.             <li>列表16</li>
  61.             <li>列表17</li>
  62.             <li>列表18</li>
  63.             <li>列表19</li>
  64.             <li>列表20</li>
  65.         </ul>
  66.         <ul>
  67.             <li>進(jìn)選擇只有一個(gè)元素的</li>
  68.         </ul>
  69.     </body>
  70. </html>

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

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

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

老師批語：
本博文版權(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é)