www成人无码,思思热久久性爱无码,午夜不卡在线看,亚洲六月婷

Web前端知識

首頁 > 免費(fèi) > Web前端知識 >

Web前端筆記之CSS結(jié)構(gòu)和層疊

來源:北京匯仁智杰科技有限公司   時間:2016-04-13   點(diǎn)擊:

  特殊性
  有的時候我們?yōu)橥粋€元素設(shè)置了不同的CSS樣式代碼,那么元素會啟用哪一個CSS樣式呢?
  我們來看一下面的代碼:
  <style type="text/css">
   p{
    color:red;
   }
  .first{
    color:green;
   }
  </style>
  <p class="first">這是第一個段落</p>
  在樣式中p和.first都匹配到了p這個標(biāo)簽上,那么會顯示哪種顏色呢?
  green是正確的顏色,那么為什么呢?
  是因?yàn)闉g覽器是根據(jù)權(quán)值來判斷使用哪種css樣式的,權(quán)值高的就使用哪種css樣式。
  那接下來講解權(quán)值的規(guī)則:
  標(biāo)簽的權(quán)值為:1;
  類的權(quán)值為:10;
  ID的權(quán)值為最高:100;
  p{color:red;} /*權(quán)值為1*/
  p span{color:green;} /*權(quán)值為1+1=2*/
  .warning{color:white;} /*權(quán)值為10*/
  p span.warning{color:purple;} /*權(quán)值為1+1+10=12*/
  #footer .note p{color:yellow;} /*權(quán)值為100+10+1=111*/
  重要性
  有時某個聲明可能非常重要,超過了其他聲明。CSS2.1稱之為重要聲明,并允許在這些聲明的結(jié)束分號之前插入!important來標(biāo)示。
  <style type="text/css">
   p{
   color:red!important;
   }
   p{
   color:green;
   }    
  </style>
  <p class="first">這是第一個段落</p>
  這時p段落中的文本會顯示的red紅色。
  繼承
  特殊性對于理解如何向文檔應(yīng)用聲明很重要,同樣還有個很重要的概念就是繼承,基于繼承機(jī)制,樣式不僅應(yīng)用到指定的元素,還會應(yīng)用到其后代元素。
  <script type="text/css">
   p{
    color:red;
   }
  </script>
  <p>這是一個<span>悲傷地故事</span></p>
  這里span是p的子元素。那么p的顏色改變那么其span的顏色也會相應(yīng)改變;
  注:有些CSS樣式是不具有繼承性的。例如border;
  <script type="text/css">
   p{
    border:1px solid red
   }
  </script>
  <p>這是一個<span>悲傷地故事</span></p>
  在上面例子中它代碼的作用只是給p標(biāo)簽設(shè)置了邊框?yàn)?像素、紅色、實(shí)心邊框線,而對于子元素span是沒用起到作用的。一般的,大多數(shù)框模型屬性(包括外邊距、內(nèi)邊距、背景和邊框)都不能繼承。
  層疊性
  <script type="text/css">
   p{
    color:red;
   }
   p{
   color:green;
   }
  </script>
  <p class="first">這是一個<span>悲傷的故事</span></p>
  最后 p中的文本會設(shè)置為green,這個層疊很好理解,理解為后面的樣式會覆蓋前面的樣式。
  所以css樣式優(yōu)先級就不難理解了:
  內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)> 嵌入樣式表(當(dāng)前文件中)> 外部樣式表(外部文件中)。

網(wǎng)絡(luò)營銷推廣 . 北京匯仁智杰科技有限公司!

地址:北京市昌平區(qū)回龍觀龍冠大廈5層
咨詢:15201492965
業(yè)務(wù)QQ:373002979
E - mail:sales @ huirenzhijie.com
企業(yè)網(wǎng)站備案:京ICP備15021091號-1

匯仁智杰與眾不同

  • 有網(wǎng)絡(luò)推廣經(jīng)驗(yàn)
  • 有網(wǎng)站建站隊(duì)伍
  • 有大型網(wǎng)站建設(shè)經(jīng)驗(yàn)
  • 致力于營銷型網(wǎng)站建設(shè)
  • 始終堅(jiān)持技術(shù)和服務(wù)同樣重要
查看PC版網(wǎng)站
備案號:京ICP備15021091號-1 版權(quán)所有:匯仁智杰

一级不卡视频在线观看| 国精品人妻无码一区二区三区性色| 欧美日韩三四区| 东京热这里只有精品| 亚洲AV后入| 日韩黄色大全| 91精品999| A∨亚洲天堂| 精品久久中文国产| 四虎海外影院| aaaa影院| 人妻中文字幕在线| 无码日韩字幕| 日韩黄色A级大片| 国产精品中文久久久久久久| www.亚洲图片| 亚洲清纯欧美| 欧美熟妇另类久久久久久不卡| 日本黄色视频中文字幕| 中午字幕无码| AV无码国产精品色午夜| 天天日夜夜想| 粉嫩极品国产在线观看| 毛片传媒免费播放| 欧美激情黑人猛交爽| 人人狠狠| 日韩无码 jizz| 18禁黄网站禁片免费观看国产| 玖玖噜色AV| 五月激情终合| 久久国产成人免费网站777| 亚洲av无码老司机| 婷婷国产剧情av| a级毛片免费完整视频| 色站国产| 日韩精品zipai| 91天堂网| 短视频污在线| 极品少妇xxxx| 日本一免费观王播放| 国产精品久久久久久无码五月|