重溫HTML之frameset、css、選取器

標籤：分行   十六   active   jpg   html   外觀   捲軸   www   eset   

　　分幀（frameset）

　　　　　　HTML 架構是劃分視窗的技術 就是把一個視窗分隔成多個視窗 每個視窗顯示不同的網頁內容多用於後台 也叫做分幀

　　　　Frameset

　　　　　　注意 如果你在頁面上寫frameset了那麼就不能出現body

　　　　<frameset></frameset>

　　常用屬性:

　　　　Cols  分列單位可以寫像素也可以寫百分比 之後除上面內容外還可以寫*(*代表剩餘所有)

  　　　 Rows 分行單位可以寫像素也可以寫百分比 之後除上面內容外還可以寫*(*代表剩餘所有)

　　Frameborder  分幀邊框 0/1

　　Border 邊框粗細

　　Frame 把視窗分成幾份就要有對應的幾個frame標籤出現

　　　　<frame />  

常用屬性：

 　　Name  給設定的地區一個名字  用作跳轉使用

　　Src 預設的顯示頁面連結

　　Noresize 不允許調整邊框

　　Scrolling  捲軸

　　　　yes 出現捲軸|no 不出現捲軸

CSS簡介

　　Cascading Style Sheets 層疊樣式表(階層式樣式表)

　　是一個文字檔，不需要編譯 由瀏覽器直接執行

　　作用是 定義網頁外觀 如 字型,背景，等。。。

　　可以配合JavaScript做出絢麗的效果

CSS 特點

　　　　精確的定位

　　　　準確的控制頁面的任何元素

　　　　精細的控制

　　　　可以做到像素層級的調整

　　　　樣式與內容分離

　　　　便於維護，便於重用

使用方法

　　內聯

　　　　 寫在標籤內的style屬性中的叫做內聯

　　　　　　例如: <p style="color:yellow">祖傳牛皮癬,專治老中醫</p>

　　內嵌

　　　　寫在head標籤的style標籤中的屬性叫做內嵌

　　　　　　例如:

　　　　　　　　<style>

     　　　　　　　　   p{color:red;}

　　　　　　　　</style>

　　外聯

　　　　通過外部引入的方式使用

　　　　　　例如:<link rel=”stylesheet” type=”text/css” href=”./css.css”/>

基礎文法

　　CSS 格式

　　　　選取器

　　　　　　負責圈定範圍，要修改的元素集合

　　　　聲明

　　　　　　  由屬性名稱和屬性值組成，中間用冒號串連(屬性名稱:屬性值)，用於設定具體樣式

CSS組成

　　由選取器和一個或多個聲明組成，多個聲明之間用分號

　　　　選取器{屬性名稱:屬性值;屬性名稱:屬性值;}

CSS 注釋

　　Html 注釋  <!-- -->

　　樣式表裡面的注釋就一種 /* 這裡面是注釋內容 */

　　　　　　注釋不能嵌套

單位

　　長度單位

　　　　em 倍數 

　　　　　　px: pixel 像素 螢幕上顯示的最小單位 用於網頁設計。

　　　　　　PPI（DPI）每英寸的像素點 是一個率 表示了 清晰度 精度

　　　　　　Pt 是一個標準的長度單位 1pt=1/72英寸 用於印刷行業

　　　　　　　　公式: px = pt*DPI/72;

　　　　　　cm/mm   厘米/毫米

顏色單位

　　英文名: red green blue 。。。。。

　　十六進位rgb #000000 - #ffffff

　　Rgb

　　　　數字 (0-255) rgb(255,0,0)

　　　　百分比(0-100%) rgb(100%,0%,0%)

URL地址

　　不用引號 url(test.jpg)

　　絕對路徑 url(http://www.baidu.com/test.jpg)

　　用單引號 url(‘./test.jpg’)

用雙引號url(“./test.jpg”)

選取器

　　HTML選取器

　　　　就是使用html元素作為選取器

　　　　　　例如: p{color:red}

　　ID選取器

　　　　使用id值作為選取器

　　　　使用方式: #id值{聲明}

　　　　例如:#duang{color:red;}

　　Class選取器

　　　　使用class值作為選取器

　　　　使用方式:.class值{聲明}

　　　　例如:.butingke{color:red}

　　　　注意:不要輕易使用id選取器 請多使用class選取器進行選擇！

　　關聯選取器

　　　　通過一級一級的向下尋找得到唯一使用選取器

　　　　每個選取器之間使用空格隔開

　　　　例如: ul #zhangsan b{color:red}

　　組合選取器

　　　　多個選取器組合在一起中間使用逗號分隔

　　　　例如:p,.pangzi{color:red}

　　虛擬元素選取器

　　　　:link 未訪問連結

　　　　:hover 滑鼠移動到連結上時

　　　　:active 滑鼠選中的連結

　　　　:visited 已訪問的連結

　　　　　　只有a標籤有上面四種虛擬元素內容

　　　　　　除a標籤以外的文字標籤現在只有兩種虛擬元素內容分別為（hover，active）

　　　　　　選取器的優先順序: 關聯選取器>id選取器>class選取器>html選取器

　　　　　　排除上面的內容

　　　　　　　　離得越近 優先順序越高（就近原則）

 

如有錯誤，請指出！ 本人及時糾正！

重溫HTML之frameset、css、選取器