[筆記]網頁美妝師 - CSS

Published on:
  • 選取器:找到誰去做設定/更改的意思
    • p vs .p 是不一樣的
    • 選標籤 直接打 ex p
    • 選class(類別) 要加. Ex .sp
  • 優先權
    • 選取器(同等級)一樣的情況,順序後面的會覆蓋前面
    • id>類別class>標籤tag
  • 共用的地方用tag / 特殊化的用class
    • 一個標籤可以有很多class,不同的class用空白做區隔 -<p class="男 短褲 短髮">
    • 要選男 短髮時 .男.短髮 (串起來的是同一個物件)
    • 越詳細越明確的優先權越高 (.男.短髮 > .男)
    • 空間的概念(切版常用到)
    • 在AA裡面的strong (用空白)
      • 指定某一個東西的子層 ,AA是父層 strong是子層
    • 路徑
    • 同一個資料夾裡的檔案 直接打名字img src='lego.png'
    • 不同資料夾裡的檔案 打資料夾在打名字img src='pic/lego.png'
    • A資料夾裡找B資料夾的檔案 img src='../b/xx.jpg
    • 出一個資料夾../ 要再出去就在一次../會變成../../資料夾/檔案
    • 從網頁位置找其他檔案 (相對路徑)
    • 從網址找到檔案(絕對路徑)
  • Font-weight
    • bold仿粗體 / 字體本身沒有粗體 用軟體計算的方式讓她加粗 /
    • 粗體有100~900區分 每100為單位
  • Font-family 字體
    • 如果對方電腦沒有這個字體,用逗號做區隔 使用第二個
    • 字體分兩大類 有襯線字 vs 無襯線字sans-serif (會抓系統內建的預設的)
    • 字體名稱中間有空白用單引號來圈起來
  • text-decoration
    • none會讓原本有底線的消失
  • Line-height
    • 當沒有特別指定時,line-height (行高)在瀏覽器的原始預設值為 1.0 ~ 1.2 倍,但如果想要讓瀏覽者在閱讀文字上面感到更舒適的話,通常比較多人會設定在 1.4 ~ 1.8 倍之間。
    • 有襯線字 1.4
    • 無襯線字 1.8
  • text-indent
    • 文字首行縮排的意思
    • 要加單位
  • 單位
    • em ->一個字母的寬度
    • 一個字大小預設是16px
    • %
  • 註解
    • CSS
    • /裡面放解釋/
    • HTML
    • <!— 註解—!>
  • float 浮動
    • 可以讓不同div做橫排
  • div(division) 區域
    • 用class做區域的分別
    • 正常情況下會在直排 ,區塊級(block)的元素
  • 區塊尺寸的控制
    • 高度通常不設定,因為內容太多會自動撐高
    • 寬度設定
    • Padding :內容物跟邊邊的距離
    • Margin: 物件跟物件之間的距離
    • 一個物件 區分為
    • 1.佔據空間
    • 2.可見範圍
      • width(內容物的寬度) + padding(內距) + border(邊匡)
      • 人的肉體+ 衣服跟肉體的空隙 +衣服的厚度

Comments

comments powered by Disqus