CSS 層疊式樣式表

css cascading style sheets 1996 電腦586
層疊樣式表 自己也是文本 {} 
工做環境 任何文本編輯器 Dreamweaver webstorm
顯示環境-瀏覽器

優點
避免使用沒必要要的HTML元素 減小代碼量
縮短更新和維護的時間
作出HTML實現不了的特效

新標籤
<div> <span>
div ：是用來爲HTML文檔內大塊(block-level)的內容提供結構和背景元素
      Div的起始標籤和結束標籤之間的全部內容都是用來構成這個塊的，中文咱們把它稱做  
     「層」
      雙標記 <div>內容1</div><div>內容2</div> 顯示換行 後跟換行符
  
span標籤：是被用來組合文檔中的行內元素。span沒有固定的格式表現。當對它應用樣式時，它
         纔會產生視覺上的變化
         <span>內容3</span> <span>內容4</span> 行級標籤 同一行
理解：容器標籤 div標籤主要是塊 早期是Table佈局，如今都是Div+CSS佈局 用樣式表控制內  
      容的位置
  
CSS規則 .placeholder {color:#999;}

選擇符(selector)：規則中用於選擇文檔中要應用的樣式的那些元素，該元素能夠是（X）HTML
                 的某個標籤  （如本例中<h2>標籤被選中），也能夠是頁面中指定的class
                 或id屬性限定的標記
聲明：聲明包含在一對大括號"{}"內，用於告訴瀏覽器如何渲染頁面中與選擇相匹配的對象。聲
     明內部由屬性及其屬性值組成，並用冒號隔開，以分號結束，聲明的形式能夠是一個或者  
    多個屬性的組合
屬性(property):屬性是由官方CSS規範約定的，而不是自定義的，除個別瀏覽器私有屬性之外
屬性值(value)：屬性值放置在屬性名和冒號後面，具體內容跟隨屬性的類別而呈現不一樣形式，  
             通常包括數值 單位以及關鍵字
  
CSS註釋
  結構性註釋 /*header
  提示性註釋 /* 12345 */

樣式表加載總結
1.內嵌樣式-直接在頁面的標籤里加(不經常使用，用於局部修改或者單獨增長）
 <div style="boder:1px red solid">測試信息</div>

2.內部樣式表-在head部分加入 （即聲明，本頁面當中調用）
 <style type="text/css">div{margin:0;padding:0;border:1px red solid;}</style>
  寫成類的形式來調用 
  head
<style type="text/css"> .font_rea{font-size:30px}</style>   
  body
 <div class="font_read">調用</div>

3.鏈入外部樣式表--在head部分加入（經常使用）
  <link rel="stylesheet" type="text/css" href="my.css" media="all"/>,引入外部css
文件
  宋體12px 使用的最小字體
在CSS樣式表中定義類 
html頭部聲明<link href="" type="text/css" rel="stylesheet">
    body中在<div class=""></div>來引用
4。導入外部樣式表（不經常使用）
  -在head頭部加入<style type="text/css">@import(my.css);</style>

樣式表優先級
  內嵌樣式>內部樣式表>導入外部樣式表

鏈入外部樣式表與內部樣式表之間的優先級取決於所處位置的前後，最後定義的優先級最高

link和@import區別
使用link連接的css是客戶端瀏覽你的網頁時先將外部的css文件加載到網頁當中，而後再進行編
譯顯示，因此這種狀況下顯示不出來的網頁跟咱們預期的效果是同樣，即便一個頁面link多個
css文件，網速再慢也是同樣的效果
使用@import導入的CSS就不一樣了，客戶端在瀏覽網頁時是先將html的結構呈現出來，再把外部
的CSS文件加載到網頁當中，固然最終的效果也是跟前者同樣，只是當網速較慢時會先顯示沒有
CSS統一佈局是的html網頁，這樣就會給閱讀者很很差的感受。這也是如今大部分網站的CSS都採
用連接方式的主要緣由。