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

搜索
博主信息
博文 16
粉絲 0
評(píng)論 0
訪問(wèn)量 22135
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
css引入方式和css選擇器
剛哥哥
原創(chuàng)
865人瀏覽過(guò)

css引入方式：

css具有多種引入方式：

1、通過(guò)在開(kāi)始標(biāo)簽內(nèi)寫(xiě)style 屬性 定義css 樣式；（內(nèi)聯(lián)樣式）；
  1. 內(nèi)聯(lián)樣式定義css屬性和值，它的優(yōu)先級(jí)最高，相當(dāng)于私人訂制；
2、在head內(nèi)通過(guò)style 元素定義css樣式;（內(nèi)嵌樣式）
  1. 這種方式只在本html文檔內(nèi)有效，
3、通過(guò)引入外部css文件的方式引入css；（外聯(lián)樣式）
  1. 這種方式可以同時(shí)導(dǎo)入到多個(gè)html文檔中同時(shí)使用，通過(guò)link標(biāo)簽導(dǎo)入；
4、在style元素內(nèi)通過(guò)@import 關(guān)鍵字導(dǎo)入css樣式，（導(dǎo)入方式）
  1. 用于從其他樣式文件導(dǎo)入樣式規(guī)則，@import url("使用絕對(duì)或相對(duì)地址指定導(dǎo)入的外部樣式表文件?？梢允莡rl(url)或者直接是一個(gè)url");

示例代碼：

1、內(nèi)聯(lián)樣式示例代碼：

  1. <h1 style="color:red">css內(nèi)聯(lián)樣式示例，內(nèi)聯(lián)css樣式優(yōu)先級(jí)最高</h1>

2、內(nèi)嵌樣式示例代碼：

  1. <head>
  2.     <style>
  3.         h1 {
  4.             color:red;
  5.         }
  6.     </style>
  7. </head>
  8. <body>
  9.     <h1>內(nèi)嵌樣式代碼演示，內(nèi)嵌樣式css只在當(dāng)前html文檔中有效</h1>
  10. </body>

3、通過(guò)引入外部css文件的方式引入css；（外聯(lián)樣式）

  1. <head>
  2.     <link rel="stylesheet" href="外部css文件路徑"/>
  3. </head>

4、通過(guò)@import關(guān)鍵字導(dǎo)入css

  1. <style>
  2.     @import url("CssFileName.css");
  3. </style>

css選擇器：

css有以下幾種選擇：

1、標(biāo)簽選擇器；
  1. 語(yǔ)法：
  2.     h1{
  3.         屬性：值；
  4.         }

注釋?zhuān)篽1：標(biāo)簽

*（星號(hào)），代表所有元素

2、類(lèi)選擇器：
  1. 語(yǔ)法：
  2.         .top{
  3.             屬性：值；
  4.             }

注釋?zhuān)簍op：類(lèi)名

3、id選擇器：
  1. 語(yǔ)法：
  2.             #top{
  3.                 屬性:值;
  4.                 }

注釋?zhuān)簍op :id名；id在同一個(gè)html頁(yè)面中，具有唯一性，唯一性有開(kāi)發(fā)者自己把控，

4、上下文選擇器：
  1. html是結(jié)構(gòu)化文檔，文檔有父級(jí)、同級(jí)、后代；
  2. 語(yǔ)法格式：父級(jí) 目標(biāo)元素{聲明塊}；
5、結(jié)構(gòu)偽類(lèi)選擇器：

1、結(jié)構(gòu)偽類(lèi)選擇器，可以根據(jù)元素在文檔中所處的位置，來(lái)動(dòng)態(tài)選擇元素，從而減少HTML文檔對(duì)ID或類(lèi)的依賴(lài)，有助于保持代碼干凈整潔。

  1.  2、:root 偽類(lèi)
  2. ：root，匹配文檔樹(shù)的根元素，：root表示<html>元素，優(yōu)先級(jí)高；
  4. 語(yǔ)法樣式：
  5. :root { 樣式屬性 }
  6.     譬如，:root{background:red} ，表示將頁(yè)面背景色設(shè)置為紅        色。
  7.     聲明全局CSS變量時(shí) :root 很有用。
  9. 3、 :empty 偽類(lèi)
  10.     :empty 偽類(lèi)，代表沒(méi)有子元素的元素。

4、nth-of-type(n)和:nth-last-of-type(n)選擇器

  1. :nth-of-type(n)和:nth-last-of-type(n)選擇器用于匹配屬于父元素的特定類(lèi)型的第n個(gè)子元素和倒數(shù)第n個(gè)子元素，

選擇器示例代碼：

1、標(biāo)簽選擇器：

  1. h1 {
  2.     color:red;
  3. }
  4. <body>
  5.     <h1>h1標(biāo)簽</h1>
  6. </body>

2、類(lèi)選擇器：

  1.     .top {
  2.         border:1px solid red;
  3.     }
  4.     <body>
  5.         <div class="top">
  6.             1像素實(shí)線邊框
  7.         </div>
  8.     </body>

3、id選擇器：

  1.     #top {
  2.         border:2px solid red;
  3.     }
  4.     <body>
  5.         <div id="top">
  6.             2像素實(shí)線邊框
  7.         </div>
  8.     </body>

4、上下文選擇器：

  1.         <style>
  2.         ul li {
  3.             color:red;
  4.         }
  5.     </style>
  6. </head>
  7. <body>
  8.     <ul>
  9.         <li>上下文選擇器1</li>
  10.         <li>上下文選擇器2</li>
  11.         <li>上下文選擇器3</li>
  12.         <li>上下文選擇器4</li>
  13.         <li>上下文選擇器5</li>
  14.     </ul>
  15. </body>

5、結(jié)構(gòu)偽類(lèi)選擇器：

  1.        /* 選擇奇數(shù)列 */
  2.         ul :nth-of-type(odd){
  3.             color:red;
  4.         }
  5.         /* 選擇偶數(shù)列 */
  6.         ul :nth-of-type(even){
  7.            color: royalblue;
  8.            background-color: seagreen;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13.     <ul>
  14.         <li>上下文選擇器1</li>
  15.         <li>上下文選擇器2</li>
  16.         <li>上下文選擇器3</li>
  17.         <li>上下文選擇器4</li>
  18.         <li>上下文選擇器5</li>
  19.     </ul>
  20. </body>
批改老師：天蓬老師天蓬老師

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

老師批語(yǔ)：
本博文版權(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é)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(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é)