CSS

大綱

  • 什麼是CSS
  • CSS寫在哪?
  • 常用CSS Selector
  • 常用CSS Proterty & Value
  • Lab 2-美化你的個人頁面

什麼是CSS

Cascading Style Sheets(層疊樣式表)

selector + property + value

selector

p {
    
}

selector + property

p {
    background-color:
}

selector + property + value

p {
    background-color: blue;
}

CSS寫在哪?

  • Inline style
  • Internal style sheet
  • External style sheet

Inline style

<p style="color:blue;">我會變成藍色的喔!</p>

行內樣式: 作為一種attribute加在tag裡面，最方便但不好改

Internal style sheet

內部樣式表: 以<style></style>作為標籤，寫在<head>裡面，比較容易改，但只能給當前html使用

<!DOCTYPE html>
<html>
<head>
    <title>Sam's page</title>
    <style>
        p{
            color:blue;
        }
    </style>
</head>
<body>
    <h1>Sam的個人網頁</h1>
    <h2>我的大頭貼</h2>
    <img src="pictures/chocolate.png" style="width:300px;">
    <h2>我是誰?</h2>
    <p>
    名字: 楊平<br>
    系級: 圖資四<br>
    就讀學校: <a href="http://www.fju.edu.tw/">輔仁大學</a>
    </p>
    <h2>我的專長</h2>
    <ol>
	<li>講幹話</li>
	<li>寫程式</li>
	<li>彈bass</li>
    </ol>
    <h2>我的興趣</h2>
    <ul>
	<li>聽音樂</li>
	<li>吃</li>
	<li>睡</li>
    </ul>
</body>
</html>

External style sheet

外部樣式表: 將css作為單獨的文件，使用以下語法引入，可同時給多個文件使用

<link rel="stylesheet" type="text/css" href="mystyle.css">
  • 寫在<head>裡面
  • rel: relationship，引入文件與此文件之關係
  • type: 引入文件之類型
  • href: 引入文件之類型

優先順序

Inline style > Internal style sheet > External style sheet

常用CSS Selector

  • tag
  • class
  • id

tag

p{
    color:blue;
}

class

.heading1{
    color:blue;
}
<h1 class="heading">Sam的個人網頁</h1>

類別: 寫在HTML標籤當中，代表該標籤的類別，同樣類別名稱視為同一類別

以英文句號「.」代表類別

id

#my_selfie{
    color:blue;
}
<img id="my_selfie" src="pictures/chocolate.png">

寫在HTML標籤當中，代表該標籤的識別，盡量不要重複使用相同id

以井字號「#」代表類別

Lab 1-選擇器

依照html裡面的描述，把指定的標籤作外觀更動

hint: 變更字體大小語法為「font-size:30px;」

https://codepen.io/bluebell3310/pen/xaqQEe

常用CSS Proterty & Value

  • 背景
  • 文字
  • 大小
  • box model

背景

  • 顏色 background-color: #色碼 or 顏色 or rgb();
  • 圖片background-image: url('網址 or 本機位置');
p{
    background-color: red;
    background-color: #ff0000;
    background-color: rgb(255, 0, 0);
}

body{
    background-image: url('myBG.png');
}

文字

  • 顏色 color: #色碼 or 顏色 or rgb();
  • 字型 font-family: 第一順位字體, 第二順位字體 , ...;
  • 大小 font-size: px;
  • 粗細 font-weight: normal or bold;
  • 位置 text-align: right or center or left;
p{
    color: rgb(255, 0, 0);
    font-family: Microsoft JhengHei, serif;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}

大小

  • 寬度 width: px;
  • 高度 height: px;
p{
    width: 100px;
    height: 50px;
}

box model

  • 外距 margin: 上px 右px 下px 左px;
  • 邊框 border
  • 內距 padding: 上px 右px 下px 左px;

box model

p{
    margin: 30px;
    padding: 0px 15px 0px 15px;
}

Lab 2-美化你的個人頁面

  1. 使用External style sheet
  2. 新增背景圖片
  3. h1置中
  4. 更改字體
  5. 在背景上再加上一個比較小的白色背景

Example

HINTS

  • 背景圖片不夠大，重複出現

background-repeat: no-repeat;

  • 背景圖片太大，超過畫面範圍

background-size: cover;

Bouns

  • 滑鼠移動時，背景不動，只有白色小背景跟著動

background-attachment:fixed;

  • 白色背景半透明

background-color: rgba(255, 255, 255, 0.5);

Made with Slides.com