HTML第四課+（CSS基礎）

標籤：mil   映像   刪除   百分比   legend   權重   sub   group   16進位   

回顧結構標籤

• html
• body
• head

頭部標籤

• meta
• title
• link

格式標籤

• hn
• br
• hr
• p
• pre
• center

列表標籤

• ul
• li
• ol
• dl
• dt
• dd

文字標籤

• em
• strong
• q
• blockquote
• cite
• bdo
• kbd
• var
• code
• sub
• sup
• address
• abbr
• .......

超連結

• a

映像

• img
• map
• area

表格標籤

• table
• caption
• thead
• tbody
• tfoot
• tr
• td
• th
• colgroup
• col

表單標籤

• form
• input
• select
• option
• textarea
• button
• fieldset
• legend

架構分幀

• iframe

HTML全域屬性

• title
• id
• class
• dir
• style

CSS 層疊樣式表CSS的使用方式

• 在元素的style屬性內 行內式 內聯式
• 寫在 <style> 標籤內
• 寫到外部css檔案中，用<link>關聯到HTML中，
• @import可以引入css，用於css中引入css

CSS的格式

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

CSS的長度單位

• px 像素
• em 相對於預設大小 倍數
• 百分比
• pt(磅) cm(厘米) mm(毫米) 絕對單位

顏色表示

• 顏色的英文單詞

  red orange yellow green cyan blue purple black white pink gray

• rgb方式

  rgb(123,45,178)rgb(0~255,0~255,0~255)rgb(百分比，百分比，百分比)

  • rbg(255,0,0) 紅色
  • rbg(255,255,255) 白色
  • rgb(0,0,0) 黑色
  • rgb(100,100,100) 灰色。 只要三個都一樣，就是灰色

• 十六進位

  • #34afa1
  • #ff0000 紅色 可以簡寫 #f00
  • #00ff00 綠色 簡寫 #0f0
  • #0000ff 藍色 簡寫 #00f
  • #ffffff 白色 簡寫 #fff
  • #000000 黑色 簡寫 #000
  • #cccccc 灰色 簡寫 #ccc
  • #336699 簡寫 #369

CSS注釋

• /* 注釋 */

CSS選取器

• 元素選取器
• ID選取器 #id名
• CLASS選取器 .類名
• 全域選取器 *
• 關聯選取器-後代元素選取器 slecter selecter
• 關聯選取器-子項目選取器 selecter>selecter
• 組合選取器 兩種基本選取器的組合
• 偽類別選取器 love-hate
  • :link
  • :visited
  • :hover
  • :active

選取器的優先順序

• ID >CLASS > Tag
• 組合選取器 ID權重100 class權重10 Tag權重1

CSS的屬性字型屬性

• font-family 襯線字型（serif） 非襯線字型(sans-serif)
• font-style 字型風格 normal(預設)/itailc(斜體)/oblique(強制變斜)
• font-weight 字型粗度 normal(預設)/bold(加粗)/bodler(更粗)/lighter(細)/數字(>=600 粗)
• font-variant 字變形 noraml(預設)/small-caps(小型大寫字母)
• font-size 字型大小

• font 統一設定

  font:[style/weight/variant] size family

顏色屬性

• color 值：字母/rgb/16進位

文字屬性

• letter-spacing 字母間距
• word-spacing 單詞間距
• text-decoration 文本能修飾
  • none
  • underline 底線
  • overline 上劃線
  • line-through 中劃線 刪除線

HTML第四課+（CSS基礎）