Website Series 3 - CSS
57
-
Upload
eugene-yang -
Category
Engineering
-
view
129 -
download
0
Transcript of Website Series 3 - CSS
Effect of CSSHTML
Title1 Title2 Title3 Title4HTML + CSS
Title1 Title2 Title3 Title4
Concept Of CSS Finding tags and modify them Make things beautiful Different browser may have different outcome
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
No need to select
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Need to select
No need to select
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Need to select
No need to select
Put everything in <style> into a .css
file
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Need to select
No need to select
Put everything in <style> into a .css
file
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Need to select
No need to select
Put everything in <style> into a .css
file
Places to Put CSS<html><head><link rel=“stylesheet” href=“css/style.css”><style>…</style></head><body><div style=“…”></div></body></html>
Need to select
No need to select
Put everything in <style> into a .css
file
How it workdiv.box {
background:white;border: 2px solid blue;width: 200px;height: 200px;
}
<div class=“box”></div>
How it workdiv.box {
background:white;border: 2px solid blue;width: 200px;height: 200px;
}
<div class=“box”></div> Selector
How it workdiv.box {
background:white;border: 2px solid blue;width: 200px;height: 200px;
}
<div class=“box”></div> Selector
Style
CSS Selector
Tag#id.class [attributes] : filter
http://flukeout.github.io/
CSS Selector Syntax (1)Selector example* AllE E tags inputE F F tags inside E tags input textareaE>F F tags as child of E div>pE+F F tags adjacent to E H1+pE.C E tags with C class p.warningE#I E tag with id as I input#nameE[A=V] ~ attribute A equals V input[type=‘text’]E[A^=V] ~ attribute A starts with V div[title^=‘my’]E[A$=V] ~ attribute A ends with V a[href$=‘.pdf’]E[A!=V] ~ attribute A not equal to V form[method!=‘POST’]E[A*=V] ~ attribute A contains V a[href*=‘google.com’]
CSS Selector Syntax : filter (2)Filter example
:hover when element being hovered a:hover
:first-child As first child in its parent element li:first-child
:last-child As last child in its parent element li:last-child
:nth-child(n|even|odd) As nth-child ~ li:nth-child ( 2 ) li:nth-child ( odd )
:nth-child(Xn+Y) li:nth-child ( 5n+1 )
:even
:odd
:not(selector) Elements that is not selected by the selector :not( img [ src*=‘dog’ ] )
Example
Example
Example
.container .content:first-child
.container .content.info
Example
Example
Example
.thumb img
.pic-container > img
Example
Example
.info .vislble-data:last-child
.visible-data[data-type=‘gender’]
Example
Example
Text Related Styles
Text Related Styles 字體適用順序
font-family: "微軟正黑體 ",Arial, Helvetica, sans-serif
Text Related Styles 字體適用順序
font-family: "微軟正黑體 ",Arial, Helvetica, sans-serif 字體大小
font-size: 16px; 14pt, small, medium, large, x-large……
Text Related Styles 字體適用順序
font-family: "微軟正黑體 ",Arial, Helvetica, sans-serif 字體大小
font-size: 16px; 14pt, small, medium, large, x-large……
行高line-height: 20px;
Text Related Styles 字體適用順序
font-family: "微軟正黑體 ",Arial, Helvetica, sans-serif 字體大小
font-size: 16px; 14pt, small, medium, large, x-large……
行高line-height: 20px;
水平位置text-align: center;
CSS Block Model
Content
CSS Block Model
Padding
Content
Border
CSS Block Model
Padding
Content
MarginBorder
CSS Block Model
Padding
Content
MarginBorder
CSS Block Model
Padding
Content
Top
Bottom
RightLeft
Try itdiv.box {display: block;background: white;margin: 10px 15px;padding: 10px;border: 2px solid blue;border-radius: 2px;width: 200px;height: 200px;color: #AAAAAA;}
Hi~~~
<div class=“box”></div>
some selector {display: …. ;…
}
some selector {display: …. ;…
}
CSS layout Ordinary layout Use position properties Float Display property: table, inline-block (Flex) (Grid System)
Ordinary Types of display
Ordinary Types of displayblock
<div><div></div>
</div><p></p>
Ordinary Types of displayblock
<div><div></div>
</div><p></p>
inline
<div>123123<span>hahaha</
span>123213</div>
123123 123213hahaha
Position property Static Relative Absolute Fixed
@layout_ex_1.html
.container
.container
.nav
.container
.content.nav
.container
.content
.content.nav
3 Ways To Make That Page
3 Ways To Make That Page Float：文繞圖的方式
3 Ways To Make That Page Float：文繞圖的方式 Table：用表格
3 Ways To Make That Page Float：文繞圖的方式 Table：用表格 Inline-block：…痾我不知道這要怎麼形容…
3 Ways To Make That Page Float：文繞圖的方式 Table：用表格 Inline-block：…痾我不知道這要怎麼形容… @layout_ex_2.html
:hover Match when element is being hovered. It can replace some functions that JavaScript do.
(It can do a lot of magical things, but we will not cover today.)
Conclusion Selector & Properties Many ways to layout a page, choice a way that is most logical
and fit to the page you are building. Use it wisely can save a lot of effort in JavaScript.
We will come back to RWD(Response Web Design) laterhttp://fundesigner.net/responsive-web-design-explain/
Reference Learn CSS Layout
http://zh-tw.learnlayout.com/ CSS Order
http://culaidocf-cf-blog.logdown.com/posts/157717-css-selector-priority
![Precision Limit Switches - AutomationDirectDimensions mm [inches] Precision Limit Switches Dimensions Precision Touch: CS / CSJ / CSS / CSK / CSP Series See our website, , for complete](https://static.fdocuments.us/doc/165x107/5e98b3c0f672cc5b6847765d/precision-limit-switches-automationdirect-dimensions-mm-inches-precision-limit.jpg)
