CSS - Khon Kaen University 2.pdf · 2018-01-22 · CSS • CSS ย่อมาจา Cascading...

Theerayut Thongkrau

CSSCascading Style Sheets

Chapter 2

CSS• CSS ยอมาจาก Cascading Style Sheets• เปนภาษาทใชในการก าหนดรปแบบการแสดงผลของ

HTML Element• เกดขนพรอมกบ HTML 4.0 เพอแกปญหาการแสดงผล• สามารถแทรกค าสง CSS ในโคด HTML หรอแยกสวนออกเปนไฟล .css ได

CSS กบ HTML• HTML ใชก าหนดโครงสรางและก ากบสวนประกอบของหนาเวบ

• แทก หรอ attribute ของ HTML ทใชในการจดรปแบบสวนใหญถกยกเลกแลวใน HTML version 5 เชน <center>, align

• CSS ใชก าหนดรปแบบการแสดงผลของหนาเวบ ในแตละสวนของเอกสาร

bedroom {ผามาน: สเทา;พน: ยาง ลายไม;

bathroom {พน: กระเบอง สเขยว;ผนง: สขาว;

CSS กบ HTMLHTML = การวางโครงสรางของบานCSS = การตกแตงบาน

CSS Syntax• ไวยากรณของ CSS ประกอบดวย 2 สวน ไดแก Selector และ

รายการ Property

– Selector คอ ชออลเมนต, ชอคลาส หรอรหส (id) ทตองการจดรปแบบ– Property คอ ชอคณสมบตทตองการจดรปแบบ– Value คอ คาทตองการก าหนดรปแบบใหกบ Property อาจมไดหลายคา แตละคาคนดวย

ชองวาง และปดทายดวย ;– เครองหมาย { } ใชก าหนดขอบเขตของ Selector 5

h1 { color: blue; font-size: 12px;}

propertyvalue

Selector

ตวอยางค าสงใน CSS

color: maroon;

Selector

ชอ Property คา Property

ก าหนดขอความในแทก <p> เปนสน าตาลแดง

การแทรกค าสง CSS• Internal Style Sheet - ใสค าสง CSS ในแทก <head> ภายใตแทก <style> วธนเหมาะ

กบการจดรปแบบใหกบเวบหนาเดยว• External Style Sheet - ใสค าสง CSS ในไฟลแยกตางหาก แลวอางถงไฟลในแทก

• Inline Style Sheet - ใสค าสง CSS ในแทกทตองการโดยตรง เพอจดรปแบบเฉพาะแทกนนๆ วธนควรท าเมอมความจ าเปนเทานน เพราะยากตอการกลบมาแกไขในภายหลง

หมายเหต หากมชอ Selector ซ ากน Browser จะเลอกใชรปแบบตามล าดบดงน

Inline Internal External 7

Internal Style Sheet<!doctype html>

<html>

<head>

</head>

<body>

<h1>Computer Science Department, KKU</h1>

<p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยขอนแกน จดตงอยางเปนทางการเมอวนท 23 มนาคม 2537 ผลตบณฑตระดบปรญญาตรมาแลว 21 รน และปรญญาโทมาแลวมากกวา 10 รน </p>

<h2>เปาหมาย</h2><p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะดาน ตรงกบความตองการของผประกอบการ</p>

</body>

</html>

เพม CSS ในการก าหนดส font ของแทก <p>

<style>

p {color: maroon;

</style>

ผลลพธ

External Style Sheet

<!doctype html>

<html>

<head>

<style>

color: maroon;

</style>

</head>

<body>

<h1>Computer Science Department, KKU</h1>

<p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร มหาวทยาลยขอนแกนจดตงอยางเปนทางการเมอวนท 23 มนาคม 2537 ผลตบณฑตระดบปรญญาตรมาแลว 21 รน และปรญญาโทมาแลวมากกวา 10 รน</p>

mystyle.css

p {color: maroon;

/* ไมตองใสแทก HTML ใดๆในน */

อางองโดยใช Relative URL

Inline Style Sheet

• ใช Attribute style แทรกในแทก แลวก าหนดคณสมบต CSS

<!doctype html><html><body>

<h1 style="font-family: sans-serif; color: gray;">Computer Science Department, KKU

<p style="color: maroon;">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร</p>

<h2>เปาหมาย</h2><p style="color: maroon;">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม</p>

</body></html>

CSS Comment• การอธบายสวนตางๆของโคด CSS จะชวยใหการแกไขโคดงายขนในภายหลง Comment ทเขยนขน Browser จะไมสนใจ

/*This is a comment*/

text-align: center;

/*This is another comment*/

color: black;

font-family: arial;

ตวอยาง Property

Property

คณสมบตเกยวกบส color (สตวอกษร)background-color (สพนหลง)

คณสมบตเกยวกบการจดชองวาง(Spacing)

margin paddingmargin-left, margin-right, margin-top, margin-bottompadding-left, padding-right, padding-top, padding-bottom

คณสมบตกรอบตางๆ border-widthborder-styleborder-colorborder (ก ำหนดควำมกวำง รปแบบ สในครงเดยว)

การจดต าแหนงขอความ text-aligntext-indentword-spacingletter-spacingline-heightwhite-space

ตวอยาง Property

Property

Font font-familyfont-sizefont-weightfont-stylefont-varianttext-decoration

ขนาด widthheight

Layout positionleft, rightfloat, clear

Graphics background-imagebackground-repeatbackground-position

คมอ CSS• เราสามารถเลอกคณสมบตตางๆมาปรบใชกบเวบเพจโดยดจาก CSS Properties Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

กจกรรม

</style></head><body>

<h1>CSS Tutorials</h1><p>Free web tutorials at

</p></body></html>

• จดรปแบบแทก <body> โดยก าหนดคณสมบตดงน– เปลยน “สพนหลง” จากเดม “สขาว ” มาเปน “สด า”– เปลยน “สตวอกษร” เปน “สสม”– ก าหนด “ขนาดตวอกษร” ใหเปน “24px”– ก าหนด “การจดต าแหนงตวอกษร” จากเดม “ชดซาย” มาเปน “กงกลาง”

• จดรปแบบแทก <h1> โดยก าหนดคณสมบตดงน– เปลยน “สตวอกษร” จากเดม “สสม” มาเปน “สเหลอง”

• จดรปแบบแทก <a> โดยก าหนดคณสมบตดงน– เปลยน “สตวอกษร” จากเดม “สน าเงน” มาเปน “สเขยว”– เปลยน “น าหนกตวอกษร” จากเดม “ตวปกต” มาเปน “ตวหนา”

background-color: red;

border: 1px solid gray;

1 Selector มไดหลาย Property

ก าหนดใหแทก <p> มสพนเปนสแดง และ

ม 2 property

มกรอบขนาด 1 พกเซล แบบทบ สเทา

คาของ property สามารถมไดหลายคา โดยคนแตละคาดวยชองวาง

Selector ทมรปแบบเหมอนกน

h1 {font-family: sans-serif;color: gray;

h1, h2 {font-family: sans-serif;color: gray;

รปแบบเหมอนกน สามารถก าหนดชอแทกไวดวยกนได โดยคนดวย comma

ก าหนดรปแบบเพมเตมให Selector เดม

border-bottom: 1px solid black;

h1, h2 {font-family: sans-serif;color: gray;

เพมรปแบบเสนใตใหกบแทก<h1> และ <h2>

h1 {border-top: 1px solid black;

เมอตองการเพมบางรปแบบใหกบ <h1> ซงถกก าหนดรปแบบไปแลวสามารถท าไดโดยการระบ Selector h1 เพยงอยางเดยว

ผลลพธ

การสบทอด property• เมอมการก าหนดคณสมบต CSS ในแทกทอยระดบเหนอกวา แทกทซอนอยจะไดรบคณสมบตนนไปดวย

body {font-family: sans-serif;

ไมจ าเปนตองใส เพราะไดรบการสบทอดจากแทกทอย level เหนอกวาแลว

ปญหาการใช Selector โดยชอแทก

ถาตองการก าหนดส font ของแทก<p> ตวท 2 ใหมความแตกตางกบแทก <p> ตวแรกจะท าอยางไร ?

<!doctype html>

<html>

<head>

<style>

color: maroon;

</style>

</head>

<body>

<h1>Computer Science Department, KKU</h1><p>ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p><h2>เปาหมาย</h2>

<p>ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>

</body>

</html>

Class Selector• การก าหนด selector เปนชอ tag จะท าให tag เดยวกนมรปแบบเหมอนกนหมด ดงนนเราจะตงชอ Class ขน เพอใชในการจ าแนกรปแบบทมความแตกตางกน

p.greentea {color: green;

p.red {color: red;

คลาส red คลาส greentea

Class Selector

<!doctype html>

<html>

<head>

<style>

color: maroon;

</style>

</head>

<body>

</body>

</html>

p.red {color: red;

<p class="red">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p>

<p class="greentea">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>

ผลลพธ

<!doctype html>

<html>

<head>

<style>

color: maroon;

</style>

</head>

<body>

</body>

</html>

class ทไมผกกบแทก

<h1 class="greentea">Computer Science Department, KKU</h1>

<h2 class="greentea">เปาหมาย</h2>

p.red {color: red;

.greentea {color: green;

<p class="red">ภาควชาวทยาการคอมพวเตอร คณะวทยาศาสตร </p>

<p class="greentea">ผลตบณฑตทมคณภาพ มคณธรรมจรยธรรม และมความเชยวชาญเฉพาะ</p>

ผลลพธ

การใชรปแบบจากคลาส 2 คลาสขนไป

.red {color: red;

.line {border-bottom: 1px solid black;

}</style></head><body>

<p class="red line">Computer Science Department, KKU</p></body></html>

ผลลพธ

คนชอคลาสทน ามาใชดวยชองวาง

id Selector• id ใชส าหรบก าหนดรปแบบทปรบใชกบ 1 Element เทานน (single/unique element)

<html><head><style>#para1 { text-align:center; color:red; }#para2 { text-align:right; }

<div id="para1">This is a paragraph 1.</div><div id="para2">This is a paragraph 2.</div>

</body>

</html>

ผลลพธ

Pseudo Selectors• Element บางตวสามารถใส

รปแบบพเศษได เชน แทก <a> ม 4 สถานะ ไดแก link, visited, hover, และ active การก าหนดรปแบบใหแตกตางกนไปในแตละสถานะนเรยกวา Pseudo Selectors

<!DOCTYPE html><html><head><style>a:link {color:green; text-decoration:none;}a:hover {color:red;background-color:yellow;}a:active {color:blue;}a:visited {color:pink;}

<a href="http://www.pantip.com">Pantip</a></body></html>

a:link a:hover

a:active a:visitedผลลพธ

Attribute Selectors• Attribute Selectors คอ การเลอกใสรปแบบใหกบ Element ทมคา attribute ตามทก าหนด

<!DOCTYPE html><html><head><style>input[type="password"] {

background-color:red;}

</style></head><body>Username: <input type="text" name="username"><br>Password: <input type="password" name="pwd">

</body></html>

ผลลพธ

สรป Selector

Selectors CSS code HTML code

Tag h1, h2 { color: red; } <h1>…</h1><h2>…</h2>

Tag รวมกบ Class p.large { font-size: 2em;} <p class="large">...</p>

Class .large { font-size: 16pt; } <p class="large">...</p> หรอ<div class="large">...</div> หรอ<span class="large">...</span>

id #para1 { text-align:center; } <p id="para1">…</p> หรอ<div id="para1">…</div> หรอ<span id="para1">…</span>

Pseudo a:link { text-decoration:none; } <a href="http://www.cc.com">…</a>

Attribute input[type="password"] {background-color:red;

หนวยตางๆใน CSSชอหนวย ค าอธบาย

% เปอรเซนต

in นว

cm เซนตเมตร

mm มลลเมตร

em1em มขนาดเทากบฟอนตปจจบนของ Element นน 2em หมายถง 2 เทาของฟอนตปจจบน ตวอยางเชร Element นนมขนาดฟอนต 12 pt เมอก าหนดขนาด 2em จะเพมขนาดเปน 24 pt

ex 1ex คอ 1/2 ของความสงของฟอนตปกต

pt point (1 pt = 1/72 นว)

pc pica (1 pc = 12 points)

px pixels (จดบนหนาจอ)29

หนวยตางๆใน CSSแนะน าใหใช ใชเทาทจ าเปน ไมแนะน าใหใช

ส าหรบแสดงผลออกทางหนาจอ em, px, % ex

pt, cm, mm,

in, pc

ส าหรบแสดงผลออกทางกระดาษทสงจากเครองพมพ

em, cm, mm,

in, pt, pc, %px, ex

1in = 2.54cm = 25.4mm = 72pt = 6pc

ทมา: https://www.w3.org/Style/Examples/007/units.en.html

การก าหนดสใน CSS• แบบค าทมความหมายส เชน silver, maroon, yellow

ดสอนท https://developer.mozilla.org/en/docs/Web/CSS/color_value

• แบบเลขฐาน 16#ff0000

• แบบเลขฐาน 10rgb(255,255,0)

• แบบก าหนด % ความเขมของสrgb(80%,80%,100%)

ตวอยางp {

font-family: Arial, sans-serif;

color: rgb(255,255,0);

font-size: 2ex;

font-weight: bold;}

ชนดของ HTML Element• Block Element คอ Element ทใชก าหนดขอบเขตพนทบนหนาเวบแบบ Block เชน <h1>, <p>, <ul>, <table>, <div> มบรรทดวางทงกอนและหลงแทก

• Inline Element คอ Element ทใชก าหนดขอบเขตของขอความในบรรทดเดยวกน เชน <b>, <td>, <a>, <img>, <span> ไมมบรรทดวางกอนและหลงแทก

โครงสรางของ Block Element

Block Element ประกอบดวยสวนตางๆดงน• Margin คอ ชองวางทอยรอบกรอบ (border) สวนนอก ซง Margin จะไมมสพน แตจะ

เปนสโปรงใส (Transparent)• Border คอ เสนกรอบทลอมรอบสวนทเปน Padding และเนอหา • Padding คอ ชองวางทอยลอมรอบเนอหา

height

paddingbordermargin

left right

bottom

Property ส าหรบ Block Element

<html><head><style>.box1 {margin: 30px;border: 2px solid black;padding: 30px;width: 400px;height: 50px;background: gray;

}.rounded {border-radius: 20px;

}.shadow {box-shadow: 5px 5px 10px gray;

<div class="box1">W3C announced on... Forum (IDPF)</div><div class="box1 rounded">W3C announced... Forum (IDPF)</div><div class="box1 rounded shadow">W3C announced... Forum (IDPF)</div>

</body></html>

คาความ Blur เงา สเงา

ระยะหางของเงากบกรอบในแนวตง

ระยะหางของเงากบกรอบในแนวนอน

กจกรรม

<!DOCTYPE html><html><body>อำย - แจมจนทร โปรเจค (สงโต น ำโชค)<iframe width="560" height="315" src="http://www.youtube.com/embed/SjEQrlpshSw" ></iframe>

</body></html>

แทก <div> และ <span>• ใชแทก <div> หรอ <span> ในการแบงขอบเขตของการแสดงผล

ตามรปแบบ CSS ทก าหนด เชน class หรอ id กรณทไมตองการใหขนกบการแสดงผลของแทกอนๆ

<html>

<head>

<style>

.greentea { color: green; }

</style>

</head>

<body>

I love <div class="greentea">KKU</div> Jub Jub<br><br>

I love <span class="greentea">KKU</span> Jub Jub

</body>

</html>

ผลลพธ

กจกรรม• จากเอกสาร HTML ดานลางนสรางคลาสเพอใชในการจดรปแบบ

<!DOCTYPE html>

<html>

<body>

<h2>Cascading Style Sheets</h2>

<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation

semantics (the look and formatting) of a document written in a markup language. Its most common

application is to style web pages written in HTML, but the language can also be applied to any kind of

XML document, including plain XML, SVG and XUL.</p>

</body>

</html>

การจดวาง ElementElement ในเวบเพจสามารถจดวางไดหลายแบบ ดงน• Fixed• Relative• Absolute• Overlapping• Float

การจดวางแบบ Fixed• แบบ Fixed คอ การก าหนดต าแหนงบน Browser โดยท Browser

จะไมมการเคลอนท Element นนเมอมการเลอนหนา

<!DOCTYPE html><html><head><style>

p.pos_fixed {position:fixed;top:30px;right:5px;

<p class="pos_fixed">Some more text</p><p><b>Note:</b> IE7 and IE8 supports the fixed value only if a !DOCTYPE is specified.</p></body></html>

ก าหนดต าแหนงทจะน าไปวาง

30pixel

5pixel

การจดวางแบบ Relative

h2.pos_left {position: relative;left: -20px;

}h2.pos_right {

position: relative;left: 20px;

}</style></head><body><h2 class="pos_left">This heading.</h2><h2 class="pos_right">This heading.</h2></body></html>

ถอยหลงจากขอบทางซาย 20 pixel

เดนหนาจากขอบทางซาย 20 pixel

• แบบ Relative คอ การก าหนดต าแหนงบน Browser โดยเรมจากจดท Element นนอย เชน บรรทดท 2 ของหนา ถาตองการใหเคลอนไปทางซาย 20pixel กจะใชค าสง left: 20px

การจดวางแบบ Absolute• แบบ Absolute คอ การก าหนดต าแหนงโดยนบจากจดเรมตนคอดานบนและดานขางของ Browser

<!DOCTYPE html><html><head><style>h2 {

position: absolute;left: 100px;top: 150px;

}</style></head><body><h2>This is a heading with an absolute position</h2><p>With absolute positioning, an element can be placed anywhere on a page.</p></body></html>

150 pixel

100 pixel

การจดวางแบบ Overlapping• แบบ Overlapping คอ การจดล าดบชนของ Element ในแนวแกน z โดย

ก าหนดเปนคาบวกหรอลบ คาบวกจะท าให Element อยดานบน คาลบจะท าใหอยดานลาง

<!DOCTYPE html><html><head><style>img {

position: absolute;left: 0px;top: 0px;z-index: -1;

}</style></head><body><h1>This is a heading</h1><img src="http://202.28.94.20/_temp/dog.png"><p>Because the image has a z-index of -1, it will be placed behind the text.</p></body></html>

ก าหนดต าแหนงภาพท (0,0) วางไวดานหลง

กจกรรม• จากเอกสาร HTML ดานลางนจงก าหนดรปแบบใหตรงตามตวอยาง

<!DOCTYPE html><html><head><meta charset="UTF-8"></head><body><img src="http://202.28.94.20/_temp/note.jpg" width="30%"><div>ฉนรกเธอ<br>I love you</div></body></html>

การจดวางแบบ Float• เปนการบงคบให Element ลอยเหนอวตถอน โดยทไมท าใหบงขอมลทอยสวนหลง

img {float: right;

}</style></head><body><p>In the paragraph below, we have added an image with style <b>float:right</b>.The result is that the image will float to the right in the paragraph.</p><p><img src="http://202.28.94.20/_temp/Dog.png"> This is some text. This is some text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is sometext. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text.This is some text. This is some text. This is some text. This is sometext. This is some text. This is some text. This is some text. This issome text. This is some text. This is some text. This is some text.This is some text. This is some text.</p></body></html>

การจดวางแบบ Clear• เปนการก าหนดใหอนญาตใหม Element ทมรปแบบ Float อยหรอไม เชน clear:left คอ หามม Element ลอยอยดานซาย

img {float: left;

}p.clear {

clear: both;}

</style></head><body><img src="http://202.28.94.20/_temp/Dog.png"><p>This is some text. This is some text. This is some text. This issome text. This is some text. This is some text.</p><p class="clear">This is also some text. This is also some text.This is also some text. This is also some text. This is also sometext. This is also some text.</p></body></html> Paragraph นไมยอมใหมภาพ

มาแทรกทงซายและขวา

Display Property• ใชในการควบคม Layout ของแตละ Element • ทก Element ถกก าหนด display property ตามชนดอยแลว

– Block Element ถกก าหนด display: block;– Inline Element ถกก าหนด display: inline;

• สามารถก าหนดให Element ทเปน Block ใหเปน inline ได• คาของ display property มหลายคา เชน none ไมแสดง

element หรอซอน46

display: flex; • display property ทมคาเปน flex ใชครอบ Block Element ทตองการใหปรบ width

หรอ height ได เพราะความกวางของ Block Element จะใชพนทในแนวนอนทงหมดเสมอ สวนความสงจะขนกบเนอหา

ศกษา Flex Layout เพมเตมทน https://css-tricks.com/snippets/css/a-guide-to-flexbox 47

ใช Flex Layout ไมใช Flex Layout

CSS.flex-container {

display: flex; background-color: grey;

}.item {

background-color: blue;margin: 10px;

HTML<div class="flex-container">

</div>

การจดกงกลาง• จดกงกลางขอความ• จดกงกลาง Block Element• จดกงกลางรปภาพ• จดกงกลางในแนวตง• จดกงกลางทงแนวตงและแนวนอน

จดกงกลางขอความ• ใช property ชอ text-align ก าหนดคาเปน center

.textcenter {text-align: center;

<div class="textcenter">The lines in this paragraph are all centered</div>

จดกงกลาง Block Element• ก าหนดพนทวางดานซายและขวามขนาดเทากนดวยการใช auto กบ

property margin-left และ margin-light

CSS.blocktext {

width: 200px;margin-left: auto;margin-right: auto;

margin-left: auto; margin-right: auto;

width: 200px;

HTML<div class="blocktext">

This rather narrow block of text is ...example.

</div>

การจดกงกลางรปภาพ• ก าหนดใหภาพแสดงผลแบบ Block Element (ปกตภาพเปนแบบ Inline Element) ดวย

display: block; และจงก าหนด auto กบ property margin-left และ margin-light

CSS.center-img {display: block;margin-left: auto;margin-right: auto;

margin-left: auto; margin-right: auto;

การจดกงกลางในแนวตง• ก าหนดสวนสงของ Block Element ควรก าหนดเปน Flex Layout กอน แลวก าหนด

align-items: center;

CSS.vcenter {height: 150px;display: flex;align-items: center;background-color: aqua;

<div class="vcenter">This paragraph is vertically centered.</div>

margin-right: auto;

height: 150px;

การจดกงกลางทงแนวตงและแนวนอน• ก าหนดสวนสงของ Block Element ควรก าหนดเปน Flex Layout กอน แลวก าหนด

align-items: center;

CSS.vcenter {height: 150px;display: flex;align-items: center;justify-content: center;background-color: aqua;

<div class="vcenter">This paragraph is vertically centered.</div>

การจดกงกลางทถกยกเลกใน HTML5• attribute align ถกยกเลกแลวใน HTML5 เชน

• แทก center ถกยกเลกแลวใน HTML5 เชน<center>Hello</center>

การจดโครงสรางของเวบ• การวางโครงสรางของเวบเกดจากการใชแทก <div> หรอ

Semantic Markup ในการจดวาง รวมกบการใชค าสง CSS

การจดโครงสรางของเวบดวย <div>

<html><head><style>body {width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;

#header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;

#section {display: flex;

#menu {background-color: aqua;height: 200px;width: 100px;

#content {background-color: gray;height: 200px;width: 400px;

#footer {background-color:blue;text-align:center;

</style></head>

<div id="menu"><b>Menu</b><br>Add<br>Edit<br>Delete

</div><div id="content">Content...</div>

</div><div id="footer">Developed by...Mr.Yeah</div>

</body></html>

Semantic Element• HTML 5 มแทกทใชในการก ากบต าแหนงของหนาเวบ ทมชอทม

ความหมายมากขน <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>,<figcaption>

• แทกเหลานไมมผลตอการแสดงผลลพธ เปนเพยงบอกสวนประกอบของเวบเพจ และให Search Engine เขาใจเทานน

• ศกษาเพมเตม https://www.w3.org/TR/html5/sections.html57

การจดโครงสรางของเวบดวยแทก Semantic

<html><head><style>body {width:500px;margin-top: 0px;margin-left: auto;margin-right: auto;

header {background-color:navy;color: white;font-size: 25px;margin-bottom: 0px;

section {display: flex;

nav {background-color: aqua;height: 200px;width: 100px;

article {background-color: gray;height: 200px;width: 400px;

footer {background-color:blue;text-align:center;

</style></head>

<nav><b>Menu</b><br>Add<br>Edit<br>Delete

</nav><article>Content...</article>

</section><footer>Developed by...Mr.Yeah</footer>

</body></html>

กจกรรม• จงสรางเวบไซตทมรปแบบดงน

หนาแรกเกยวกบบรษทสนคาบรการตดตอ

Logoอะไรกได

Font• การก าหนด Font ใน CSS สามารถก าหนดชอฟอนตส ารองไวไดหลายชอ

• เมอ Browser หาฟอนตบนเครองผใชไมเจอ จะคนหาฟอนตทก าหนดไวในตวถดไป

body {

font-family: Verdana, Geneva, Arial, sans-serif;

คณสมบต text-shadow

<!DOCTYPE html><html><head><style>#shadow1 {

font-size: 30px;font-weight: bold;text-shadow: gray 10px 10px 7px;

</style></head><body><div id="shadow1" align="center">

Shadow Text</div></body></html>

ระยะหางของเงากบขอความในแนวนอน ระยะหางของเงากบ

ขอความในแนวตง

คาความ Blur,คาการกระจายของเงา

สเงา

Web Font• Web Font คอ ฟอนตทเกบไฟลไวบนเซรฟเวอร เมอตองการใชฟอนตจะโหลดมาพรอมกบหนาเวบเพจ

• Web Font แกปญหาการใชฟอนตทมความแตกตางกนไปในแตละเครอง ท าใหไมตองกงวลวาเครองใดจะไมมฟอนตตดตงอย

• Web Font ชวยใหสามารถใชฟอนตทแปลกใหมได โดยไมตองแปลงขอความใหเปนรปภาพ

ชนดของ Web Font• TTF – ใชไดกบทก Browser ยกเวนบน IE และ IOS

• EOT – ใชบน IE อยางเดยว

• WOFF – ใชไดทก Browser (ก าลงจะเปนมาตรฐาน)

• SVG – ใชบน IOS เทานน63

ขนตอนการใช Web Font• เลอก Web Font จาก www.fontsquirrel.com/fontface

• ลงทะเบยน Web Font ใน CSS ดวยค าสง @font-face

• ก าหนดชอฟอนตทลงทะเบยนไวใน font-family

ไฟล Web Font ทได

การลงทะเบยน Web Font ใน CSS

บรรทดท 1: ค าสงลงทะเบยน Web Fontบรรทดท 2: ก าหนดชอ Web Font ทจะใชในการอางองบรรทดท 3: ก าหนดไฟลชนด EOT ส าหรบ IE โดย url() คอ ฟงกชนสงให Browser โหลดไฟล

ตามต าแหนงทระบบรรทดท 4: local() คอ ฟงกชนก าหนดวาถามชอ Font นแลวในเครองผใชใหใชในเครองแทนบรรทดท 5-7: ก าหนดไฟล Font โดยก าหนด WOFF เปนอนดบแรก เพราะมคณภาพดสด

รองลงมาคอ TTF หรอ OTF และสดทาย คอ SVG

1 @font-face {2 font-family: 'ChantelliAntiquaRegular';3 src: url('Chantelli_Antiqua-webfont.eot');4 src: local('Chantelli Antiqua'),5 url('Chantelli_Antiqua-webfont.woff') format('woff'),6 url('Chantelli_Antiqua-webfont.ttf') format('truetype'),7 url('Chantelli_Antiqua-webfont.svg') format('svg');8 }

ค าสงนน ามาจากไฟล stylesheet.css

น าไปแทรกค าสงนในแทก<style> หรอ ไฟล .css

ก าหนดชอฟอนตทลงทะเบยนไวใน font-family

body {

font-family: Verdana, Geneva, Arial , sans-serif;

'ChantelliAntiquaRegular'

Google Web Fonts• Google Web Fonts คอ Web Font ท Google สรางขนเพอใหบรการแกผสรางเวบฟร

โดยไมตองโหลดมาไวท Server ของตนเอง แตสามารถอางองไดเลย

เลอก Web Font ทตองการ

ขนตอนการใช Google Web Font1. เลอก Web Font ทตองการจาก

http://www.google.com/fonts

2. เพม Link ไปยง CSS ของ Google Web Font<link href="https://fonts.googleapis.com/css?family=Pattaya" rel="stylesheet">

3. ก าหนดชอฟอนตไวใน body {

font-family: 'Pattaya', sans-serif;}

การสราง Web Font จาก Web Font Generator• ฟอนตทใชในการตดตงทวไปทไมใช Web

Font สามารถน ามาแปลงเปน Web Font ได โดยเลอกฟอนตจากเวบตางๆ เชน http://www.f0nt.com/

• หลงจากนนสราง Web Font ดวย Web FontGenerator ท

http://www.fontsquirrel.com/tools/webfont-generator

• ฟอนตบางฟอนตจะไมสามารถสราง Web Font ได

เพมไฟลฟอนตชนด .ttf หรอ .otf

เลอก Expert

เลอก No Subsetting

การใชไอคอน Font Awesome• download ไฟลจาก http://fontawesome.io/• จะไดไฟล font-awesome-4.7.0.zip• ให Extract ไวใน Folder เดยวกบเวบไซต• น าไปใชโดยแทรกแทก link ไวภายใตแทก <head> ดงน<link rel="stylesheet" href="font-awesome-XXX/css/font-awesome.min.css">

ใสเลข Version ตามชอโฟลเดอรท Extract

การใชไอคอน Font Awesome• เลอกไอคอนทตองการใชจาก http://fontawesome.io/icons/

การใชไอคอน Font Awesome• ใชแทกทเปน inline element และระบชอคลาสของ icon นน

หรอ

ระบชอ icon ทตองการแสดงบนหนาเวบ

ก าหนดชอคลาสแรกเปน fa ทกครง

ขนาดของไอคอน

<i class="fa fa-camera-retro fa-lg"></i> fa-lg

<i class="fa fa-camera-retro fa-2x"></i> fa-2x

ระบชอคลาสทขนาดตางๆ

ศกษาเพมเตม• สามารถใสกรอบ และท าใหไอคอนเคลอนไหวได ดไดท

http://fontawesome.io/examples/

คณสมบตพนหลง (Background)• background-color สพนหลง เชน

p { background-color:#e0ffff; }

• background-image ระบภาพพนหลง เชนbackground-image:url('img_tree.png');

• background-size ก าหนดขนาดภาพพนหลง (กวางและสง) เชนbackground-size: 80px 60px;

• background-attachment ก าหนดใหยดภาพพนหลง ไมใหเลอนตามbackground-attachment:fixed;

• background-repeat ก าหนดการแสดงซ าในแนวตงและแนวนอน • background-position ก าหนดต าแหนงภาพพนหลง

คณสมบต background-position• left top• left center• left bottom• right top• right center• right bottom• center top• center center• center bottom

คณสมบต background-repeat• repeat – วางพนหลงใหเตม (คา default)• repeat-x – วางพนหลงเฉพาะในแนวนอน• repeat-y – วางพนหลงเฉพาะในแนวตง• no-repeat – วางพนหลงเพยงครงเดยว• inherit – ใชพนหลงเชนเดยวกบ Element ทอยเหนอกวา

body {

background-image:url('smiley.gif');

background-repeat:no-repeat;

background-position: left bottom;

ตวอยาง

<!DOCTYPE html><html><head><style>.decoratedBox {

width: 600px;height: 130px;border: 1px solid gray;margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');

background-position: left top, right bottom;

background-repeat: no-repeat, no-repeat;}</style></head>

<body><div class="decoratedBox"><p>This box combines two background images, which are positioned in its top-left and bottom-right.</p></div></body></html>

ภาพแรก ใหแสดงดานบนซาย แสดงครงเดยว

ภาพทสอง ใหแสดงดานลางขวา แสดงครงเดยว

ตวอยาง

<!DOCTYPE html><html><head><style>body {

margin: 20px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');background-position: left top, right bottom;background-repeat: no-repeat, no-repeat;

}</style></head>

<body><p>This box combines two background images, which are positioned in its top-left and bottom-right.</p><br><br><br><br><br><br><br><br><br><br><br></body></html>

คณสมบต Transparency• การท าสแบบโปรงแสงจะใช

วธก าหนดคาสดวย rgba(red, green, blue, คา alpha)

• การท าใหภาพมความโปรงแสงจะใชคณสมบต

opacity: คา alpha

<!doctype html><html><head><meta charset="utf-8"><style>

h1 {background-color: rgba(34, 234, 0, 0.3);border: 1px #336699 solid;

}img:hover {

opacity: 0.5;}

</style></head><body background="http://202.28.94.20/_temp/lemon-tile.jpg"><h1>Computer Science Department, KKU</h1><img src="http://202.28.94.20/_temp/Dog.png"></body></html>

คา alpha มคาในชวง 0-10 - โปรงใส1 - สทบ

การหมนภาพ

position: relative;top: 100px;left: 100px;transform: rotate(10deg);

ก าหนดใหหมน 10 องศา

การขยายภาพ

position: relative;top: 100px;left: 100px;

img:hover {transform: rotate(10deg) scale(2);z-index: 2;

</body></html>

ใหภาพอยเหนอภาพปจจบนระบใหขยายภาพแนวตงและนอน 2 เทา

ก าหนด Pseudo Selector เพอใหใชรปแบบนเมอมเมาสมาวาง

Responsive Design• Responsive Design คอ วธการพฒนาเวบใหสามารถแสดงผลไดตามขนาด

ของอปกรณซงมอยหลากหลาย เชน เครอง PC, Tablet, Smart Phone• Responsive Design ใชแนวคดทวา เขยนครงเดยว ท างานไดทกอปกรณ

(write once, run everywhere)

แนวทางในการสรางเวบแบบ Responsive Design

• Mobile-first ใชรปแบบโครงสรางเวบทมความเรยบงายมากทสด โดยออกแบบเรมตนทหนาจอมอถอ

• ใชคา CSS Property แบบ Relative (การอางองจากคาเรมตน)• ตรวจสอบหนาจอดวย Media Query• ใช CSS Framework ทรองรบ เชน Bootstrap, Bulma

ก าหนดแทก <meta>

ก าหนดใหปรบพนทการแสดงผลหนาเวบ (viewport) ตามความกวางของอปกรณทใชในการเปดหนาเวบ<meta name="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

คณสมบต ค าอธบาย

width ความกวางของอปกรณ ระบคาเปนตวเลข (หนวย pixel) หรอใชค าวา "device-width" เพอใหใชความกวางของหนาจอจรงๆ (หากไมบอก Browser จะแสดงเหมอนหนาจอใหญปกต)

height ความสงของอปกรณ ระบคาเปนตวเลข (หนวย pixel) หรอใชค าวา "device-height" เพอใหใชความสงของหนาจอจรงๆ

initial-scale ก าหนดการขยาย (zoom) หนาจอเมอมการเปดหนาเวบ คา 1.0 หมายถงไมตองขยาย

minimum-scale ก าหนดขอบเขตต าสดในการขยาย หากมคาเปน 1.0 ผใชจะไมสามารถขยายได

maximum-scale ก าหนดขอบเขตสงสดในการขยาย หากมคาเปน 1.0 ผใชจะไมสามารถขยายได

user-scalable ก าหนดใหผใชสามารถขยายหนาจอไดหรอไม ซงมคาเปน yes หรอ no

พนฐานของการสรางเวบในปจจบน ควรก าหนดคา meta นเสมอ เพอรองรบหนาจอทมความแตกตางกน

ขนาด Font แบบ Relative• ก าหนดหนวยของ Font เปน em แทน px

<html><head><meta name="viewport" content="width=device-width, initial-

scale=1.0, maximum-scale=1.0">

<div class="topic">หวขออยทน</div><div class="content">เนอหา เนอหา เนอหา เนอหา เนอหา เนอหา </div>

</body></html>

ก าหนดใหทงเวบใชขนาดฟอนตมคาเรมตนท 100%

หากตองการใหฟอนตมขนาดเพมจากขนาดเรมตนกเทา ใหใชหนวย em แทน px เชน2 em = 200%1 em = 100%

ขนาดรปภาพ แบบ Relative• ภาพทแสดงบนเวบทมขนาดหนาจอแตกตางกนควรมการปรบ

ขนาดภาพโดยก าหนดคณสมบต CSS ดงน– ก าหนดคณสมบต width ดวยคาซงเปนเปอรเซนต เชน

หมายถง แสดงภาพทความกวางเตมจอ แมวาไฟลภาพจรงจะมขนาดใหญหรอเลกกวาหนาจอ

– ก าหนดคณสมบต max-width ดวยคาซงเปนเปอรเซนต เชน

หมายถง แสดงภาพทความกวางเตมจอ แตความกวางสงสดไมเกนความกวางของไฟลภาพจรง

• ควรใช max-width เพอปองกนภาพขยายเกนขนาดของภาพจรง87

ตวอยาง

Media Query• Media Query คอ คอ การตรวจสอบรายละเอยดของอปกรณทผใช ใชใน

การชมเวบไซต เชน ขนาด, resolution, color capabilities เปนตน • ขอมลทไดจาก Media query จะชวยใหนกพฒนาก าหนดรปแบบ CSS ท

เหมาะกบการแสดงผลได

Media Query• การก าหนดรปแบบ CSS ใหกบหนาจอแตละขนาด ท าได 2วธ ไดแก– แยกไฟล CSS ส าหรบแตละหนาจอ– รวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว

การแยกไฟล CSS ส าหรบแตละหนาจอ

• บรรทดท 1 คอ การก าหนด CSS ใหกบอปกรณทมความกวางสงสด 480 pixel หรอนอยกวานน

• บรรทดท 2 คอ การก าหนด CSS ใหกบอปกรณทมความกวางต าสด 481 pixel หรอมากกวานน

การรวมไฟล CSS ส าหรบทกหนาจอในไฟลเดยว

การก าหนด Media Query แบบชวง

/* ก าหนดรปแบบของหนาจอปกต */

@media (min-width: 600px) and (max-width: 700px) {/* ก าหนดรปแบบของหนาจอ 600-700 pixel */

}@media (min-width: 400px) and (max-width: 599.99px) {

/* ก าหนดรปแบบของหนาจอ 400-600 pixel */}@media (max-width: 399.99px) {

/* ก าหนดรปแบบของหนาจอทต ากวา 400 pixel */}

ชวงความกวางของหนาจอ

หลกการจด Layout แบบ Responsive Design

.menu {background-color: black;color: white;text-align: center;width: 30%;

.content {background-color: gainsboro;width: 60%;

.ads {background-color: cornflowerblue;width: 10%;

.flex { display: flex; }

@media (max-width : 480px) {.flex { display: block; }.menu { width: auto; }.content { width: auto; }.ads { width: auto; }

</style></head><body><div class="flex">

<div class="menu">Menu1<br>Menu2<br>Menu3<br></div><div class="content">In publishing, art, and communication, … as speech, writing or any of various arts".</div>

<div class="ads">advertising<br>advertising<br>advertising<br></div></div></body></html>

ผลลพธเมอขนาดหนาจอไมเกน 480 pixel

ผลลพธเมอขนาดหนาจอมากกวา 480 pixel

CSS - Khon Kaen University 2.pdf · 2018-01-22 · CSS • CSS ย่อมาจา Cascading...

Documents

ขอเชิญเข าร วมโครงการสัมมนาหลักสูตร “การยกเว นอากรและลด ... · สอบถามรายละเอียดเพ

497 - Khon Kaen University · เหล็กรูปโค้งเกาะติดที่ผิวของวัตถุ ตามกฎของฟาราเดย์ทำาให้เกิดการ

ทิศทางและยุทธศาสตร์ าร าับดูแลธุริจประันภัย ยุคดิจิทัลสู่ ... · •จัดท

KHON KAEN SUSU MAGAZINE VOL2 MAY 2012

ตัวอย่าง - Khon Kaen University · 11.2 สถานการณ์หรือการพัฒนาทางสังคมและวัฒนธรรม 1

GIT ขอเช ญเข าร วมงานสัมมนา · 2020. 1. 24. · รายชื่อผู เข าร วมงานสัมมนา กรุณาเขียนด

Library Services: Khon Kaen University บริการและการใช้ห้องสมุดสำหรับนักศึกษาปริญญาตรี

BMP12 1 - Khon Kaen University

- kaen- prevención del vih

CIEE Khon Kaen Perspectives--2003--FA

รายชื่อผู ลงทะเบียนเข าร วม ... · 2020-01-29 · รายชื่อผู ลงทะเบียนเข าร วมประชุมวิชาการประจําป

หน่วยที่ 11 การประยุกต์ใช้ความรู้ทางสังคมวิทยา และ ...¸าร... · แพทย์แผนโบราณขึ้นครั้งแรก

Prob C Drof Ch05 - Khon Kaen University

ชุดการสอนวิทยาศาสตร เรียนรู้วิทยาศาสตร์ไปกับโครงการพระราชด าร ·

แบบแสดงราย าร oอมูลประจําปี แบบ ...แบบแสดงราย าร oอม ลประจ าป (แบบ 56-1) ส นส

TORและการอุทธรณ์¸าร... · มาตรา 116 การอุทธรณ์ต้องทาเป็นหนังสือลงลายมือชื่อผู้

SET Corner Khon Kaen University

CIEE Khon Kaen Perspectives--2001--FA

คู่มือกองทุน...(English Language Capacity) ๙. พ ฒนาและส งเสร มผ น าร นใหม เข าร วมพ ฒนาโรงเร

ตัวชี้วัดที่ 1 - Khon Kaen Universitygad.kku.ac.th/main/qa/report_index_gad.doc · Web viewงานและบ คลากรเข าร วมกำหนดกลย