WebCamp CSS

2023 WebCamp
清華大學資訊科學研習社 NTHU Tech Society
清大網站開發實務集訓營
2023/7/17 CSS
2023 WebCamp
What is CSS
• 層疊樣式表 Cascading Style Sheets
• 設計 Markup Language（HTML, XML）的外觀
• 實現外觀 & 內容的分離
▪ 字體、排版、顏色、大小等等
• 副檔名：.css
2023 WebCamp
CSS History
CSS1 CSS2 CSS2.1 CSS3

(1996) (1998) (2011) (2012)
2023 WebCamp
CSS style rule
selector {property1 : value1 [; property2 : value2 [; …] ]}
• Selector：指向要 style 的 HTML element
• Declaration：每個宣告後都要有 ;
• h1 { color: blue; background: red; }

2023 WebCamp
CSS Usages
• Inline-style 行內(標籤內)套用
• External Style Sheet 連結 CSS 檔案套用
• style tag 套用
2023 WebCamp
Inline-styles
• Attribute: style
<h2 style="color:blue;background: aquamarine;margin-left:30px;
padding: 20px;">Welcome to WebCamp</h2>
2023 WebCamp
External Style Sheet index.html
<!DOCTYPE html>
<html>
<head>
• <link ref=“stylesheet” <meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" href="./style.css">
href=“css檔案位置”> </head>
<body>
<h1>Hello</h1>
</body>
</html>
style.css
h1 {
color: red;
text-align: center;
}
2023 WebCamp
style Tag <!DOCTYPE html>
<html>
<head>
• 利用 <style> 標籤 <title>CSS</title>
<style>
直接嵌在 html 裡面 h1 { color: red; text-align: center;}
</style>
• 放在 <head> 內 </head>
<body>
<h1>Hello</h1>
</body>
</html>
2023 WebCamp
Common Property
• Color
• Background
• Text
• etc.
2023 WebCamp
Color Property
• Support Property：
▪ background-color、color (text color)
• Support Value：
▪ Red, Blue, etc. predefined 的顏色名稱 (ref)
▪ RGB(三原色光 0-255)：rgb(158,219,154)
錯誤寫法：rgb 後有空格 rgb (158,219,154)
▪ 16進制：#9EDBFE
2023 WebCamp
Color Property
{\__/}
( • - •)
/>🌰
<h1 style="background-color: rgb(160, 120, 130);">Hello with rgb</h1>

<h1 style="border: 2px solid Red;">Hello with Red</h1>
<h1 style="background-color: #ff6347;">Hello with hex format</h1>
2023 WebCamp
Selector
• 選擇要 style 的 element
• Usages
▪ element：select all the html elements you specify
▪ #id：select elements with specified id
▪ .class：select elements with specified class name
2023 WebCamp
Selector
<h1>style with element</h1> HTML h1{color: red;} CSS

<h2 id="id">style with id</h2> #id{color: green;}
<h3 class="class">style with class</h3> .class{color: blue;}
2023 WebCamp
CSS Selector Combinator
• element, element
div, p: 所有 <div> elements 和所有 <p> elements
• element element
div p: 所有在 <div> elements 裡面的 <p> elements
• element > element
div > p: 所有 parent 是 <div> element 的 <p> elements
• Ref
{\__/}
2023 WebCamp
CSS Selector Combinator ( • - •)
/>🌰
div p ？ div p ？
div > p？ div > p？
<div>
<div>
<span>
<h2>Hi</h2>
<p>I will not be styled.</p>
<p>I will not be styled.</p> </span>
</div> </div>
哪些會 style 到 <p>？
{\__/}
2023 WebCamp
CSS Selector Combinator ( • - •)
/>🌰
div p √ div p √
div > p √ div > p X
<div>
<div>
<span>
<h2>Hi</h2>
<p>I will not be styled.</p>
<p>I will not be styled.</p> </span>
</div> </div>
Lab3（10min）
Color Lab2！
可以使用任意 style 方法
• inline-style
• <style>
• style.css
2023 WebCamp
Pseudo-Class
• style 指定 element 的特殊狀態
▪ mouse hover
▪ visited link / unvisited link
▪ gets focus
• selector: pseudo-class { {\__/} a: hover{
( • - •) color: red;
property: value; />🌰 }
}
• Ref
2023 WebCamp
Pseudo-element
• style 指定 element 的特殊部分
▪ Element 的第一個字、第一行
▪ Insert content before, or after, the content of an element
• selector:: pseudo-element { {\__/} p:: first-line{
property: value; ( • - •) color: red;
/>🌰 }
}
• Ref
2023 WebCamp
Cascade
• 多個 style 用於同個 element
• 根據優先級 & 特定規則疊加
<p class = “class" id = “id"> 誰最大！</p>
p{color: red;}
.class{color: green;}
#id{color: blue;}
2023 WebCamp
Cascade
• 多個 style 用於同個 element
• 根據優先級 & 特定規則疊加
<p class = “class" id = “id"> 誰最大！</p>
p{color: red;}
.class{color: green;}
#id{color: blue;}
2023 WebCamp
Cascade Order
• Importance > Specificity > Source Order
• 以越前面的為主
2023 WebCamp
Cascade Order：Importance
• !important
• selector {
property: value !important;
} p{color: red;}
.class{color: green !important;}
#id{color: blue;}
2023 WebCamp
Cascade Order：Specificity
• 計算 Selectors 權重
• a(1000)：如果直接在 element 上設定 style ，那 a = 1，否則為 0
• b(100)：計算使用 ID selector 的數量
• c(10)：計算使用 class/attributes selector & pseudo-class 的數量
• d(1)：計算使用 type selector & pseudo-element 的數量
Cascade Order：Specificity
Selector Thousands Hundreds Tens Ones Total specificity Priority
h1 0 0 0 1 0001 #5
#important 0 1 0 0 0100 #2
h1 + p::first-letter 0 0 0 3 0003 #4
li > a > .inline-warning 0 0 1 2 0012 #3
In style attribute 1 0 0 0 1000 #1
Lab4（5min）
More!!!
移到網址上鼠標要變
Keyword: pointer
2023 WebCamp
Inheritance
• 子元素會從父元素繼承一些 properties (font/color)
• Inherited properties by default
▪ font, color, etc
• Not inherited properties by default
▪ margin, padding, border, and background-image
• Check the reference for property inheritance.
2023 WebCamp
Box Model in HTML
• Each element in HTML is represented as a rectangular box,
with the box's content, padding, border, margin, width
and height
2023 WebCamp
Box Model Example
• What is unit px? Is there any other units?
• Reference body {
margin: 0;
}
#wrapper * {
padding: 20px;
margin: 40px;
font-size: 20px;
border: 20px solid rgba(0,0,0,0.5);
}
2023 WebCamp
Box Model - Unit
• Frequently used units:
▪ px -> pixel
▪ em -> width of a capital letter M in current font-size
▪ vw, vh -> 1/100th of the width and height of the viewport
• Unitless values
▪ margin: 0
▪ line-height: 1.5 -> 1.5 times height to the font-size
2023 WebCamp
Overflow Property
• 當內容太大會超出區域時
• auto • visible
▪ Add scroll bar ▪ show the content out of the box
• scroll • Reference
▪ Add scroll bar
• hidden
▪ hide the content out of the box
2023 WebCamp
Overflow Property：Ex
div.ex1 {
overflow: auto;
}
div.ex1 {
overflow: hidden;
}
div.ex1 {
overflow: visible;
}
Normal Flow of Content Rendering
• 預設狀況
▪ Block elements are laid out vertically
▪ Inline elements are laid out horizontally
• How to change
▪ display property
▪ float property
▪ position property
Display Property
• The values of display property:
• block
▪ content before and after the box appears on a separate line
• inline
▪ content flows with document's text (surrounding text effect)
▪ can not set width and height
• inline-block
▪ as inline type，但可以改寬高，不會增加新一行在 block 前/後
• Reference
Display Property
• display: inline; width: 60px; no effect
• display: block;
• display: inline-block; width: 60px

Float Property
• The values of float property:
• left
▪ The element floats to the left of its container
• right
▪ The element floats to the right of its container
• none (default)
▪ The element does not float (will be displayed just where it occurs in the text).
• inherit
▪ The element inherits the float value of its parent
• Assign Reading: Float and Clear
Float Property
<h1>2 column layout example</h1> Before: Normal flow
<div>
<h2>First column</h2>
<p> Lorem ipsum ...</p>
</div>
<div>
<h2>Second column</h2>
<p>Nam ...</p>
</div>
Float Property
After
div:nth-of-type(1) {
width: 48%;
div:nth-of-type(n):
float: left;
Selects every <div> element that is the
}
n-th <div> element of its parent
div:nth-of-type(2) {
width: 48%;
float: right;
}
Position Property
• Specifies how an element is positioned in a document.
• Static (default)
▪ Normal Flow
• Relative
• Fixed
• Absolute
• Reference
Position - relative
• element positioned relative to its normal (Normal flow) position
• left: value
▪ the contents shift on the right direction
• right: value
▪ the contents shift on the left direction
• bottom: value
▪ the contents shift on the up direction
• top: value
▪ the contents shift on the down direction
• Empty region will not be filled
Position - relative
div.relative {
position: relative;
left: 30px;
bottom: 50px;
border: 3px solid #73AD21;
}
Position - fixed
• element positioned relative to the viewport (browser window),
就算頁面滑動也會待在同一個地方
• A fixed element does not leave a gap in the page where it would
normally have been located.
• The following element will fill the gap.
Position - fixed
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
}
Position - absolute
• An element with position: absolute; is positioned relative to the
nearest positioned ancestor (relative to body if no ancestor)
• Positioned ancestor cannot be static
div.absolute { <div class="relative">This div element has position: relative;
position: absolute; <div class="absolute">This div element has position: absolute;</div>
top: 80px;
</div>
right: 0;
width: 200px;
height: 100px;
}
div.relative {
position: relative;
width: 400px;
height: 200px;
}
Take a break

WebCamp CSS

Uploaded by

Copyright:

Available Formats

You might also like

WebCamp CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WebCamp CSS

Uploaded by

Copyright:

Available Formats

2023 WebCamp

清華大學資訊科學研習社 NTHU Tech Society

CSS1 CSS2 CSS2.1 CSS3

• h1 { color: blue; background: red; }

<h1 style="background-color: rgb(160, 120, 130);">Hello with rgb</h1>

<h1>style with element</h1> HTML h1{color: red;} CSS

<p class = “class" id = “id"> 誰最大！</p>

<p class = “class" id = “id"> 誰最大！</p>

• display: inline-block; width: 60px

You might also like