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

http://purecss3.net/doraemon/doraemon_css3.html

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
}

http://purecss3.net/doraemon/dora3.css

CSS Syntax

選擇器

宣告

屬性

宣告

屬性

值

值

Declaration block

  • 由一個屬性和一個值組成
  • 使用花括號來包圍（Scope）
  • 以分號（結尾）分割

Property name

  • 是用來設置樣式屬性（style attribute）
  • 每個屬性有一個值
  • 屬性和值被冒號分開

Value units

  • px
  • pt
  • %
  • em
  • 像素（螢幕上的一個點）
  • 磅（1pt 等於 1/72 英吋）
  • 百分比，會繼承父元素
  • 百分比尺寸，會繼承父元素

more: http://www.w3schools.com/cssref/css_units.asp

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

http://www.w3school.com.cn/cssref/css_selectors.asp

Let's play a game

http://flukeout.github.io/

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>

http://goo.gl/MSAuHk​

Position Property

  • static
  • relative
  • fixed
  • absolute

W3C is u're good friend!

http://www.w3schools.com/css/css_positioning.asp

來練習看看吧

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);
}

下禮拜有請 @Zekt

台大開源社社長來幫我們講課

Web 初學者的第四堂課

By Albert Hsieh

Made with Slides.com

Web 初學者的第四堂課

大同大學資訊創意研究社系列社課

  • 1,276

More from Albert Hsieh