Blog

CSS 基本語法

Select {屬性:屬性值;屬性:屬性值}
/*這裡面是註解*/

最後一組屬性設定的結束可以不用加分號

CSS Selectors

  • Selectors(選取器)
    • CSS 的樣式是需要套用到某一個 HTML 標籤上，所以要怎麼找到您想要修改的 HTML 標籤，就是要透
  • 常用的選取器
    • 標籤選取器 (Type)
    • 類別選取器 (Class)
    • 物件選取器 (ID)

CSS 的基礎設定

  • 使用 CSS 修改元素長度或大小時要指定單位
  • 1in = 2.54cm = 25.4mm = 72pt = 12pc
  • 瀏覽器預設文字 (Font-Size) 的大小
    • 1em = 100% = 12pt =16px

CSS 使用顏色的設定方式

style="color:red"
style="color:#5B00AE"
style="color:rgb(0,128,0)"

可以使用的文字樣式屬性

  • 文字修飾
    • text-decoration:none | underline | overline | line-through
  • 英文大小寫轉換
    • text-transform: none| capitalize | uppercase | lowercase
  • 文字色彩
    • color:green
  • 字型
    • font-family:新細明體,標楷體,細明體…
  • 字型粗細
    • font-weight:100(細)~900(粗) | normal(400) | bold(700) | bolder | lighter
  • 字型類型
    • font-style:normal | italic | oblique(沒有 italic 的字使之傾斜)
  • 字型大小
    • font-size:<絕對大小> | <相對大小> | <長對值> |<比例值>
      • 絕對大小：xx-small、x-small、small、medium、large、x-large、xx-large
      • 相對大小：larger、smaller
      • 長度值：in、cm、mm、pt、pc、em、ex、px
      • 比例值：em、%

將 CSS 套用至 HTML 的寫法

  • 直接加入樣式 (Inline)
  • 自訂樣式表 (embedding)
  • 外掛樣式表 (Linking)

直接加入樣式 (Inline)

<tag style="CSS 語法">
<h2 style="color:red;text-decoration:underline">Heading</h2>

自訂樣式表 (embedding)

標籤選擇器 (Type)

宣告在 head 之間

<style>
    h1,h2 {color:red}
</style>

類別選擇器 (Class)

  • 可套用到不同的標籤上
<style>
    .st1 {color:red}
</style>

<h1 class="st1">Heading1</h1>
<h2 class="st1">Heading2</h2>
  • 只讓特定的標籤套用
h2.st1 {color:green}

<h1 class="st1">Heading1</h1>
<h2 class="st1">Heading2</h2>

因為指定 <h2> 才能被 .st1 套用，所以只有 <h2> 會有效果。

ID 物件選擇器

ID 物件只能套用一次

#theH1 {text-transform:capitalize}

<h1 id="theH1">Heading</h1>

Javascript 使用時，請輸入以下測試語法

theH1.style.color="blue";

外掛樣式表 (Linking)

  • 以外掛方式定義 (Linking)
  • 事先定義好標籤樣式，並將之存成 .css
  • 在 html 的 head 中加入：
<head>
    <link rel="stylesheet" href="filePath">
</head>

發佈留言