Web 初學者的第四堂課
CSS 基礎內容
我們好像很久沒上課了
先來複習一下吧
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TTUCSCEC</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<nav>這是導覽列</nav>
</header>
<main>
<p>一些文章內容</p>
<span id="article"></span>
<img src="http://i.imgur.com/gGJTxxw.jpg" class="bold">
</main>
<footer>
<p>TTUCSCEC ©2015 All Rights Reserved.</p>
</footer>
<script>
</script>
</body>
</html>CSS 是神馬？
聽起來就不好吃啊！
CSS
- 層疊樣式表（Cascading Style Sheets）
- 結構化 HTML 文件、定義如何顯示
- 提高工作效率
- 樣式表通常會存在 .css 裡
It looks like this
CSS is Magic!
body{
background:#fff;
}
#doraemon{
position:relative;
margin:50px;
}
#head_light{
width:50px;
height:50px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
box-shadow:80px 20px 50px #fff;
-webkit-box-shadow:80px 20px 55px #fff;
-moz-box-shadow:80px 20px 50px #fff;
border-radius:45px;
-webkit-border-radius:45px;
-moz-border-radius:60px;
position:absolute;
top:-20px;
left:170px;
opacity:0.5
}
CSS Syntax
選擇器
宣告
屬性
宣告
屬性
值
值
Declaration block
- 由一個屬性和一個值組成
- 使用花括號來包圍（Scope）
- 以分號（結尾）分割
Property name
- 是用來設置樣式屬性（style attribute）
- 每個屬性有一個值
- 屬性和值被冒號分開
Value units
- px
- pt
- %
- em
- 像素（螢幕上的一個點）
- 磅（1pt 等於 1/72 英吋）
- 百分比，會繼承父元素
- 百分比尺寸，會繼承父元素
CSS Comments
/* this is comments */
CSS Selectors
- 用來選擇要改變樣式的 HTML 元素
- 透過 id, class, type, attribute 等來選擇
Element Selector
- 使用元素名稱做選擇
p {
text-align: center;
color: red;
}Id Selector
- 使用 id 做選擇
- 獨一無二的元素
- HTML 的 id 屬性
#para1 {
text-align: center;
color: red;
}Class Selector
- 使用 class 做選擇
- 同常會套用在一群元素上
- HTML 的 class 屬性
.center {
text-align: center;
color: red;
}Grouping Selectors
- 選擇器可以合併
- 減少 CSS 長度
- 使用逗點分隔
h1, h2, p {
text-align: center;
color: red;
}and more?
- 子類別選擇器
- 後代選擇器
- 派生選擇器
- 相鄰兄弟選擇器
CSS Selectors
Let's play a game
Pseudo-class selector
- :first-child
- :link
- :visited
- :hover
- :active
- :focus
- :lang
如何使用 CSS？
- External style sheet
- Internal style sheet
- Inline style
外部樣式表
- 優先權最低
- 一個文件改變整個網站
- 使用 <link> 標籤連結到樣式表
- 必須寫在 <head> 裡
- 儲存在 .css 裡
內部樣式表
- 優先權第二高
- 單個文件需要特殊的樣式時
- 寫在 <style> 標籤裡
- 必須在 <head> 定義
內聯樣式
- 優先權最高
- 樣式僅需要在一個元素上應用一次
- 在相關的標籤內使用 style 屬性
- 很醜請儘量少用
提高優先權
!important
Box Model
- Content
- Padding
- Border
- Margin
Box Model
Try it!
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Position Property
- static
- relative
- fixed
- absolute
W3C is u're good friend!
來練習看看吧
body {
background-color: lightgray;
}
#article {
display: block;
margin: 1px 2px;
color: orange;
}
.bold {
border-style: dashed;
border-radius: 100%;
border-color: rgba(0, 188, 212, 0.1);
}