亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

HTML (css樣式規(guī)范)必看篇

  發(fā)布時(shí)間：2016-06-27 09:38:03   作者：佚名   我要評(píng)論
下面小編就為大家?guī)?lái)一篇HTML (css樣式規(guī)范)必看篇。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

CSS樣式規(guī)范

1.類(lèi)選擇器

2.標(biāo)簽選擇器

3.id選擇器

4.CSS樣式的子選擇器

類(lèi)選擇器

1.必背的固定結(jié)構(gòu)，成為CSS樣式標(biāo)記。所有的樣式都可以寫(xiě)成CSS樣式的標(biāo)記中

<style type="text/css">

</style>

2. type=“text/css” 意思是聲明這個(gè)標(biāo)記是css樣式類(lèi)型

type：類(lèi)型的意思
text：文本的意思
css：疊層樣式表

3.類(lèi)選擇器語(yǔ)法格式 .類(lèi)名 （點(diǎn)加類(lèi)名）

寫(xiě)的位置：在css樣式的標(biāo)記中
調(diào)用方法在HTML標(biāo)簽內(nèi)部寫(xiě)上 class=類(lèi)名

4.命名規(guī)范

建議是純字母或字母后面加數(shù)字，請(qǐng)勿數(shù)字開(kāi)頭，其它雖然可以使用請(qǐng)問(wèn)使用

5.為什么要把行內(nèi)的css提取到css的標(biāo)記中

優(yōu)點(diǎn)一：保持HTML的層次清晰，方便檢測(cè)錯(cuò)誤
優(yōu)點(diǎn)二：可以重復(fù)使用css樣式

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="UTF-8">  
  8.   
  9.     <title>類(lèi)選擇器</title>  
  10.   
  11.     <style type="text/css">  
  12.   
  13.         /*類(lèi)選擇器*/  
  14.   
  15.         .box{width: 200px; height: 50px; background-color: aqua;border: 10px salmon solid}  
  16.   
  17.     </style>  
  18.   
  19. </head>  
  20.   
  21. <body>  
  22.   
  23. <div class="box"></div>  
  24.   
  25. <div class="box"></div>  
  26.   
  27. <div class="box"></div>  
  28.   
  29.    
  30.   
  31. </body>  
  32.   
  33. </html>  
樣式結(jié)果

ID選擇器

1. ID選擇器的語(yǔ)法格式 #ID名稱(chēng)

寫(xiě)的位置：在CSS樣式的標(biāo)記中
調(diào)用方法在HTML標(biāo)簽內(nèi)部寫(xiě)上 id="ID名稱(chēng)"
 
2. 命名規(guī)范

同類(lèi)上一節(jié)的類(lèi)名一樣的道理

3. 為什么要把行內(nèi)的CSS提取到CSS的標(biāo)記中

優(yōu)點(diǎn)一：保持HTML的層次清晰，方便檢測(cè)錯(cuò)誤
優(yōu)點(diǎn)二：區(qū)分優(yōu)先級(jí)，如果需要復(fù)用請(qǐng)選擇類(lèi)選擇器

4. ID不允許重復(fù)調(diào)用，id就想身份證編號(hào)一樣，每個(gè)都是不同的

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.        <meta charset="UTF-8">  
  8.   
  9.        <title>Title</title>  
  10.   
  11.        <style type="text/css">  
  12.   
  13.         /*ID選擇器*/  
  14.   
  15.         /*ID唯一標(biāo)識(shí)符的意思,設(shè)計(jì)的目的就是讓id唯一性*/  
  16.   
  17.         #box{width: 200px;height: 50px;background-color: bisque}  
  18.   
  19.         #boy,#boy1,#boy2{width: 200px;height: 50px;background-color: bisque;  
  20.   
  21.         border: 2px seagreen solid}  
  22.   
  23.         #gil,.doc{width: 200px;height: 50px;background-color: bisque;  
  24.   
  25.         border: 2px seagreen solid}  
  26.   
  27.         /*設(shè)置多個(gè)共享一個(gè)參數(shù)*/  
  28.   
  29.    
  30.   
  31.     </style>  
  32.   
  33.    
  34.   
  35. </head>  
  36.   
  37. <body>  
  38.   
  39.     <div id="gil"></div>  
  40.   
  41.     <div class="doc"></div>  
  42.   
  43.     <div class="doc"></div>  
  44.   
  45.    
  46.   
  47. </body>  
  48.   
  49. </html>  
樣式結(jié)果

標(biāo)簽名選擇器

用到多個(gè)標(biāo)簽使用相同的屬性，可以寫(xiě)成選擇器。方面下面所有用到這個(gè)標(biāo)簽時(shí)共有這個(gè)屬性

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>Title</title>  
  6.     <style type="text/css">  
  7.         /*標(biāo)簽名  選擇器*/  
  8.         div{border: 10px salmon solid; width:99px;height: 20px}  
  9.     </style>  
  10. </head>  
  11. <body>  
  12.     <div>周杰倫</div>  
  13.     <div>孫其虎</div>  
  14.     <div>張杰</div>  
  15. </body>  
  16. </html>  

CSS樣式的子選擇器

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="UTF-8">  
  8.   
  9.     <title>子選擇器</title>  
  10.   
  11.     <style type="text/css">  
  12.   
  13.         div b{color: crimson}  
  14.   
  15.         /*只影響 具有div 下的 b子標(biāo)簽受影響*/  
  16.   
  17.         div >b{color: skyblue}  
  18.   
  19.         /*只影響兒子，不影響孫子*/  
  20.   
  21.     </style>  
  22.   
  23. </head>  
  24.   
  25. <body>  
  26.   
  27.     <div><b>美國(guó)</b></div>  
  28.   
  29.     <div><b><b>中國(guó)</b></b></div>  
  30.   
  31.    
  32.   
  33. </body>  
  34.   
  35. </html>  
樣式結(jié)果

二、樣式優(yōu)先級(jí)

1.CSS執(zhí)行順序，在同等優(yōu)先級(jí)的情況下，下一行的如果與上一行的CSS有沖突一下一行為標(biāo)準(zhǔn)

在優(yōu)先級(jí)不同的情況下，優(yōu)先級(jí)高的覆蓋優(yōu)先級(jí)的低的。

2.選擇器優(yōu)先級(jí)順序排列

第一名：行內(nèi)樣式 1000;
第二名：ID選擇器 100;
第三名：元素名.類(lèi)名 10;
第四名：類(lèi)名
第五名：標(biāo)簽名 1;

3.主意事項(xiàng)：

當(dāng)你寫(xiě)的CSS不起作用的時(shí)候，優(yōu)先檢測(cè)代碼有沒(méi)有寫(xiě)錯(cuò)
第二檢查優(yōu)先級(jí)情況有沒(méi)有錯(cuò)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <!DOCTYPE html>  
  2.   
  3. <html lang="en">  
  4.   
  5. <head>  
  6.   
  7.     <meta charset="UTF-8">  
  8.   
  9.     <title>優(yōu)先級(jí)定義</title>  
  10.   
  11.     <style type="text/css">  
  12.   
  13.         .red{color: aqua}  
  14.   
  15.         .blue{color: crimson}  
  16.   
  17.         .dce{color: antiquewhite}  
  18.   
  19.         /*在同級(jí)中相同的屬性，標(biāo)準(zhǔn)調(diào)用下面的*/  
  20.   
  21.         div{color: blue}  
  22.   
  23.         /*影響范圍越廣的，優(yōu)先級(jí)越低*/  
  24.   
  25.    
  26.   
  27.         #blue{ color: springgreen}  
  28.   
  29.         #ket{color: blueviolet}  
  30.   
  31.         div.red{color: aqua}  
  32.   
  33.         /*類(lèi)名>元素名*/  
  34.   
  35.         /*ID優(yōu)先級(jí)最高*/  
  36.   
  37.         #alex b{color: chartreuse}  
  38.   
  39.         b{color: blue;border: 2px cornsilk solid}  
  40.   
  41.    
  42.   
  43.     </style>  
  44.   
  45. </head>  
  46.   
  47. <body>  
  48.   
  49. <div id="ket" class="red" style="color: black">優(yōu)先sex</div>  
  50.   
  51. <!--在行內(nèi)樣式最高-->  
  52.   
  53. <div id="blue" class="red">優(yōu)先</div>  
  54.   
  55. <div class="blue red dce"> 優(yōu)先級(jí)</div>  
  56.   
  57. <div id="alex"><b>中國(guó)</b></div>  
  58.   
  59. <b>美國(guó)</b>  
  60.   
  61. </body>  
  62.   
  63. </html>  
樣式

以上就是小編為大家?guī)?lái)的HTML (css樣式規(guī)范)必看篇全部?jī)?nèi)容了，希望大家多多支持腳本之家~

原文地址：http://www.cnblogs.com/pythonxiaohu/archive/2016/06/25/5616511.html

相關(guān)文章

  • HTML外部樣式表如何引入CSS樣式

    這篇文章主要介紹了HTML外部樣式表如何引入CSS樣式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)
    2020-12-10

  • HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解

    下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)知識(shí)——css樣式表,樣式屬性,格式與布局詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-11

  • HTML基礎(chǔ)必看——全面了解css樣式表

    下面小編就為大家?guī)?lái)一篇HTML基礎(chǔ)必看——全面了解css樣式表。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-07-11

  • html動(dòng)態(tài)加載css樣式和js腳本示例

    這篇文章主要介紹了html動(dòng)態(tài)加載css樣式和js腳本示例,需要的朋友可以參考下
    2014-04-16

  • 將html標(biāo)簽在瀏覽器居中顯示的css樣式

    在布局過(guò)程中為了某些需求，將html標(biāo)簽在瀏覽器居中顯示是很常見(jiàn)的做法，下面有個(gè)不錯(cuò)的示例，大家可以參考下
    2014-04-15

  • 通過(guò)CSS樣式實(shí)現(xiàn)的html背景色漸變效果

    在html中可以輕松實(shí)現(xiàn)背景色漸變的下面是一個(gè)通過(guò)CSS實(shí)現(xiàn)的示例，大家若感興趣，可以參考下
    2014-03-24

  • html 隱藏div HTML里隱藏表格TABLE或者DIV內(nèi)容的css樣式

    突然想起幾年前用過(guò)的一個(gè)隱藏樣式代碼，有些時(shí)候用它非常方便，比如想讓某塊表格TABLE或者DIV里的內(nèi)容完全看不到，那就加上他，嘿嘿，就隱身了,需要的朋友可以了解下
    2012-12-21

  • XHTML語(yǔ)言默認(rèn)的CSS樣式

    html,address, blockquote, body,dd,div, dl,dt,fieldset,form, frame,frameset, h1,h2,h3,h4, h5,h6,noframes, ol,p,ul,center, dir,hr,menu,pre { display:block} li {
    2008-10-17

  • HTML嵌入CSS樣式的四種實(shí)現(xiàn)方法

    CSS 樣式既可以作為單獨(dú)的文件（.css類(lèi)型的文件）引入到 HTML 文檔中，本文主要介紹了HTML嵌入CSS樣式的四種實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的可以了解一下
    2023-11-03

最新評(píng)論