基礎CSS語法

專題班第七堂網頁課

基礎CSS語法

CSS是什麼

Cascading Style Sheets

階層式樣式表

風格頁面語言

CSS可以幹嘛？

字體

顏色

尺寸

位置

動畫

襯線字體

清單樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表單練習</title>
</head>
<body>
    <form action="">
            <h3 class="">帳號</h3>
            <input type="text" placeholder="請輸入帳號">
            <h3>密碼</h3>
            <input type="password" placeholder="請輸入密碼">
    </form>
</body>
</html>

如果我們要把其中的<h3>修改成紅色字體呢？

h3 {
  color:red;
}

如果想再把他的字體調大呢？

h3 {
  color: red;
  font-size: 5em;
}

h3 {
  color: red;
  font-size: 5em;
}

「選擇器」

一到多項「聲明」

屬性名稱

屬性內容

選擇器

基本選擇器

複合選擇器

虛擬元素

虛擬類別

基本選擇器

元素選擇器

h3 {
  color:red;
}

class選擇器

.classname {
  color:red;
}

ID選擇器

#idname {
  color:red;
}

實作

給你們HTML

Codepen連結，練習CSS選擇器

給你們CSS的表

常用CSS屬性一覽表