สร้าง Style ด้วย css 3

ที่มาของ CSS
page01.html
…
<h1>This isa heading</h1>
…
…
page02.html
…
<h1>This isa heading</h1>
…
…
แก้ไขรูปแบบด้วยการแทรก code html
<h1><font color="blue">This isa heading</font></h1>
แก้ ไขรูปแบบด้วย Style Sheet
h1
{
color:blue;
}

CSS
ใช้ในการนิยามรูปแบบการแสดงผลให้กับ html tag
เริมใช้มาตั้งแต่ HTML 4.0
CSS มี External Style Sheets ที/เก็บลงในไฟล์ .css ช่วยลดภาระงานในการ
จัดรูปแบบการแสดงผล

การเพิ่ม STYLE ไปยังหน้าเว็บ
ใช้ attribute style แทรกใน element
<h1 style="color: green">Inline StylesareSloppy Styles</h1>
ประกาศในส่วน element head ของเอกสาร html
<head>
<title>Embedded Style Sheet Test</title>
<style>
...
</style>
</head>
แยก Style Sheet ออกเป็นไฟล์เดียว แล้วอ้างอิงในเอกสาร html
<head>
<title>External Style Sheet Test</title>
<link rel="stylesheet" href="SampleStyles.css">
</head>
เหมาะกับการ จัดรูปแบบที่ใช้ใน หน้าเดียว
เหมาะกับการ จัดรูปแบบที่ใช้ หลายหน้า

CSS SYNTEX
Selectorระบุชนิดของ เนื้อหาที/ต้องการจัดรูปแบบ เช่น tag, id, class Selector
Propertyระบุรูปแบบของ Style ที/ต้องการนามาใช้กับ Selector เช่น colors, fonts, alignment
Value ระบุค่าสาหรับ Property เช่น blue กาหนดให้กับ color property

CSS PROPERTIES
ดู Propery ต่างๆ จาก
• http://www.w3schools.com/cssref/default.asp
• http://www.htmldog.com/reference/cssproperties/

ตัวอย่าง
สร้างเอกสาร CSS ใน Dreamweaver และ saveเป็น mystyle.css
h1{
text-align: center;
color: green;
}
สร้างเอกสาร HTML5 บน Dreamweaver และ saveเป็น test_css.html
!doctypehtml>
<html>
<head>
<meta charset="utf-8">
</head>
<body><h1>Hello</h1></body>
</html>
<!doctypehtml>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body><h1>Hello</h1></body>
</html>

CLASS SELECTOR
กาหนด Selectorขึ้นต้นด้วย
.ArticleTitle{
font-family: Garamond, serif;
font-size: 40px;
}
ใช้ classที่สร้างขึ้น
<h1 class="ArticleTitle">HTML5 isWinning</h1>
กรณีที/ใช้คลาสกับบาง Element เท่านั้นกาหนดโดย
h1.ArticleTitle {
font-size: 40px;
}

STYLE SHEET COMMENT
/* Theheading ofthemainarticleona page. */
.ArticleTitle {
font-size: 40px;
}

จัดรูปแบบด้วย <DIV>, <SPAN> ELEMENT
ใช้ <div>
<div class="content">
...
<h2>Mayan Doomsday</h2>
...
</div>
ใช้ <span>
<span class="content">
...
<h2>Mayan Doomsday</h2>
...
</span>

MULTIPLE SELECTORS
h1{
font-family: Impact, Charcoal, sans-serif;
font-size: 40px;
}
h2{
font-size: 20px;
}
h1, h2{
}
h1{
font-size: 40px;}
h2{
font-size: 20px;
}

ID SELECTOR
กาหนด Selectorขึ้นต้นด้วย #
#Menu{
border-width: 2px;
border-style: solid;
}
ใช้ idที่สร้างขึ้น
<div id="Menu">...</div>

ATTRIBUTE SELECTORS
จัดรูปแบบให้กับ element ที่มีค่า attribute ตามที่กาหนด
input[type="text“]{
background-color:silver;
}
จัดรูปแบบการแสดงผลให้กับทุก inputelement ที่มี typeเป็น text
<label for="name">Name:</label>
<input id="name" type="text"><br>
<input type="submit" value="OK">

CSS3
CSS3 ไม่ ได้เป็นส่วนหนึ่งของ HTML5 ทั้งสองพัฒนาแยกกัน แต่ W3C สนับสนุนนักพัฒนาเว็บใช้ทั้งสองร่วมกัน เพื่อสร้าง เว็บที/ทันสมัยมากขึ้น
คุณสมบัติของ CSS3 คือ ส่วนเสริมเพิ่มเติมขึ้นมา หากใช้ใน Web Browser เก่ายังคงใช้งานได้
header {
background-color: #7695FE;
border: thin#336699 solid;
padding: 10px;
margin: 10px;
text-align: center;
border-radius: 25px;
}
CSS3 property

BROWSER-SPECIFIC STYLES
CSS3 อยู่ในช่วงที่กาลังพัฒนา ดังนั้นจึงเกิดผู้สร้างหลากหลายจึงแก้ปัญหาด้วย
VendorPrefix
ตัวอย่างการไล่ ระดับสี
.stylishBox{
background: yellow;
background-image: -moz-radial-gradient(circle, green, yellow);
background-image: -webkit-radial-gradient(circle, green, yellow);
background-image: -o-radial-gradient(circle, green, yellow);
background-image: -ms-radial-gradient(circle, green, yellow);
}

คุณสมบัติที่เพิ่มมาใน CSS3
Web Font
Selectors
Box Model
Backgrounds and Borders
Text Effects Text Effects
2D/3D Transformations
Animations
Multiple Column Layout
User Interface

ปัญหาของ WEB SAFE FONT
เว็บในอดีตมักใช้ Font ภาษาไทยในตระกูล Web SafeFontเช่น MSSansSerif, Tahoma หากต้องการใช้ฟอนต์ นอกเหนือจากนี1จะต้องทาข้อความให้เป็นภาพแทน ซึ่งมีข้อเสีย เช่น
แก้ ไขข้อความได้ยาก เพราะต้องเปิดโปรแกรมแก้ ไขภาพ
คัดลอกตัวหนังสือไม่ ได้ คัดลอกตัวหนังสือไม่ ได้
เว็บมีขนาดใหญ่ ใช้เวลาโหลดนานขึ้น

WEB FONT
CSS3 สามารถเพิ่มฟอนต์ใหม่ ได้ตามความต้องการ โดยมีการทางานดังนี้
Uploadไฟล์ Font ขึ้น Web Server
กาหนดไฟล์ฟอนต์ที/ต้องการนามาใช้ในไฟล์ cssด้วยคาสั่ง @font-face
Browser พบคาสั่งจะทาการโหลดฟอนต์เก็บไว้ที่เครื่องผู้ใช้ และเรียกใช้

ตัวอย่าง WEB FONT
ตัวอย่างการใช้ฟอนต์ซึ่ง
เป็นฟอนต์ฟรีทั้ง
ฟอนต์ จากเว็บ Font
Squirrel

ชนิดของ WEB FONT

HTTP://WWW.FONTSQUIRREL.COM/FONTFACE

CHANTELLI-ANTIQUA- FONTFACEKIT.ZIP

STYLESHEET.CSS
Line 1: Register Font ใหม่ สาหรับใช้ใน style sheet
Line 2: กาหนดชื่อ Font ที่ใช้ในการอ้างอิง
Line 3: กาหนดไฟล์ชนิด EOTสาหรับ IEโดย url() คือ ฟังก์ชันสั่งให้ Browser โหลดไฟล์ตามตาแหน่งที่ระบุ
Line 4: local() คือ ฟังก์ชันกาหนดว่าถ้ามีชื่อ Font นี้แล้วในเครื่องผู้ใช้ให้ใช้ในเครื่องแทน
Line 5-7: กาหนดไฟล์ Font โดยกาหนด WOFFเป็นอันดับแรก เพราะมีคุณภาพดีสุด รองลงมาคือ TTFหรือ OTFและ สุดท้าย คือ SVG

การเรียกใช้ WEB FONT

การสร้าง WEB FONT ด้วยตนเอง
http://www.fontsquirrel.com/fontface/generator

WEB FONT ภาษาไทย
http://www.f0nt.com
ฟอนต์ไทยมาตรฐาน
http://www.f0nt.com/release/13-free-fonts-from-sipa/

GOOGLE WEB FONTSHTTP://WWW.GOOGLE.COM/WEBFONTS
การใช้ GoogleWeb Font
1. เพิ่มในส่วนของ <head>
<link
href="http://fonts.googleapis.com/css?family=Metrophobic“
rel="stylesheet">
2. เรียกใช้
h1{
font-family: 'Metrophobic',
arial, serif;
}

การจัดเนื้อหาแบบ MULTIPLE COLUMNS
article {
text-align: justify;
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
}
การกาหนดแบบนี้จะต้องแสดงแบบ 3 Columns เสมอ
ทาให้เมื่อมีหน้าจอที/แคบไม่ สามารถอ่านได้ การกาหนดด้วยขนาด Column จึงยืดหยุ่นมากกว่า เมื่อ
ความกว้างหน้าจอเปลี่ยนแปลงไป
article {
text-align: justify;
-moz-column-width: 10em;
-webkit-column-width: 10em;
column-width: 10em;
}
Firefox
Chrome & Safari
Opera
กาหนดด้วยขนาด Colum

กาหนดด้วยขนาด COLUMN

TRANSPARENCY
ใช้ฟังก์ชัน rgba()
rgb(red, green, blue, alpha)
0-255 0 (โปร่งใส) –1 (ทึบ)
.semitransparentBox {
background: rgba(170,240,0,0.5);
}
}
ใช้ property ชื่อ opacity
.semitransparentBox {
background: rgb(170,240,0);
opacity: 0.5;
}

BACKGROUNDS
CSS3 สามารถกาหนดภาพ Background ได้หลายภาพด้วย background-imageและกาหนดตาแหน่งในการวางได้
background-position
.decoratedBox{
margin: 50px;
padding: 20px;
background-image: url('top-left.png'), url('bottom-right.png');
background-position: lefttop, rightbottom;
background-repeat: no-repeat, no-repeat;
}

BOX-SHADOW
.shadowedBox{
border: thin#336699 solid;
border-radius: 25px;
box-shadow: 5px 5px 10px gray;
}
box-shadow: 0px 0px 20px limeinset;
ระยะห่างของเงากับ box ในแนวนอน
ระยะห่างของเงากับ box ในแนวตั้ง
ค่าความ Blur, ค่าการกระจายของเงา
สีของเงา
กาหนดให้แสดงเงาภายใน

TEXT-SHADOW
.textShadow{
font-size: 30px;
font-weight: bold;
text-shadow: gray10px 10px 7px;
}
สีเงา
ระยะห่างของเงากับ box ในแนวนอน
ระยะห่างของเงากับ box ในแนวตั้ง
ค่าความ Blur

MEDIA QUERY
Mediaqueryคือ การตรวจสอบว่ารายละเอียดของอุปกรณ์ที/ใช้ในการดูเว็บไซต์ เช่น ขนาด, resolution, color capabilitiesเป็นต้น
ข้อมูลที่ได้จาก Mediaqueryจะช่วยเลือก Style Sheet ที่เหมาะกับการแสดงผลได้

MEDIA QUERY
Property ของ MediaQuery
max-widthดึงค่าความกว้างของ Web Browser ที่เปิดอยู่
max-device-widthดึงค่าความกว้างของอุปกรณ์ที่ใช้ในการเปิดเว็บ มักใช้ในการตรวจสอบว่าเป็นมือถือหรือไม่ ถ้ามี ค่าน้อยแสดงว่าเว็บถูกเปิดบนมือถืออยู่
รูปแบบการนิยาม Style Sheet ในการแสดงผลบนอุปกรณ์ที่หลากหลาย
@media(media-query-property-name: value) {
/* Newstylesgohere. */
}

ตัวอย่างการใช้ MEDIA QUERY
@media(max-width: 480px) {
...
}
@media(max-width: 250px) {
...
}
@media(min-width: 400px) and (max-width: 700px) {
…
}
กาหนด Style เมื่อ Browser มีขนาด 480 pixel
กาหนด Style เมื่อ Browser มีขนาด 250pixel
กาหนด Style เมื่อ Browser มีขนาด 400-700pixel

ตัวอย่างการใช้ MEDIA QUERY แบบช่วง
/* Normalstyleshere*/
@media(min-width: 600px) and (max-width: 700px) {
/* Overridethestylesfor600-700 pixelwindows. */
}
@media(min-width: 400px) and (max-width: 599.99px) { @media(min-width: 400px) and (max-width: 599.99px) {
/* Overridethestylesfor400-600 pixelwindows. */
}
@media(max-width: 399.99px) {
/* Overridethestylesforsub-400 pixelwindows. */
}

การกาหนดตาแหน่งไฟล์ STYLE SHEET
การเขียน Style Sheet ที่ใช้ทุก MediaQueryในไฟล์เดียวอาจมีขนาดใหญ่ ทาให้ยากต่อการปรับปรุงในภายหลังการแยก ไฟล์ตามชนิดหน้าจอ จะช่วยให้ขนาดไฟล์ลดลง และจัดการได้ง่ายขึ้น
<head>
<link rel="stylesheet" href="standard_styles">
<link rel="stylesheet" media="(max-width: 480px)" href="small_styles.css">
...
</head>

การใช้ MEDIA QUERY สาหรับมือถือ
กาหนดส่วน head
<meta name="viewport" content="width=device-width">
กาหนด Style Sheet
iPhoneและ AndroidPhone
<link rel="stylesheet" media="(max-device-width: 480px)" href="mobile_styles.css"> <link rel="stylesheet“ media="(max-device-width: 480px)" href="mobile_styles.css">
iPad
<link rel="stylesheet" media="(max-device-width: 768px) and (orientation: portrait)“ href="iPad_portrait.css">
<link rel="stylesheet" media="(max-device-width: 768px) and (orientation:landscape)"
href="iPad_landscape.css">

การสร้างเว็บเพื่อรองรับการแสดงผลบนมือถือ
1. สร้างเอกสาร html
2. สร้าง style sheet
3. ทดสอบบนอุปกรณ์ที่เกี่ยวข้อง

สร้างเอกสาร HTML5
<!doctypehtml>
<html><head>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Cool AnimalsGallery!</h1>
<p>This gallerycontains8 photos.</p>
<center>
<img src="img/animal.jpg"> <img src="img/baylor_bear.jpg"> <img src="img/gopher.jpg"> <img src="img/gorilla.jpg"> <img src="img/honey_badger.jpg"> <img src="img/iguana.jpg">
</center>
<br>
<div id="content">
<h1>This istheTitle</h1>
<p>Animals aregenerallyconsideredtohaveevolvedfroma flagellatedeukaryote.[39] Theirclosestknownlivingrelativesarethechoanoflagellates, collaredflagellatesthathavea morphologysimilartothechoanocytesofcertain
sponges.[40] Molecularstudiesplaceanimalsina supergroupcalledtheopisthokonts, whichalsoincludethechoanoflagellates, fungiand a fewsmallparasiticprotists.[41] Thenamecomesfromtheposteriorlocationoftheflagellum
inmotilecells, suchasmostanimalspermatozoa, whereasothereukaryotestendtohaveanteriorflagella.[42] ThefirstfossilsthatmightrepresentanimalsappearintheTrezonaFormationatTrezonaBore,WestCentralFlinders, South
Australia.[43] Thesefossilsareinterpretedasbeingearlysponges. Theywerefoundin665-million-year-oldrock.[43] ThenextoldestpossibleanimalfossilsarefoundtowardstheendofthePrecambrian,around610 millionyearsago,
and areknownastheEdiacaranorVendianbiota.[44] Thesearedifficulttorelatetolaterfossils, however. Somemayrepresentprecursorsofmodernphyla, buttheymaybeseparategroups, and itispossibletheyarenotreallyanimals
atall.[45] Asidefromthem, mostknownanimalphylamakea moreorlesssimultaneousappearanceduringtheCambrianperiod, about542 millionyearsago.[46] Itisstilldisputedwhetherthisevent, calledtheCambrianexplosion,
representsa rapiddivergencebetweendifferentgroupsora changeinconditionsthatmadefossilizationpossible. SomepaleontologistssuggestthatanimalsappearedmuchearlierthantheCambrianexplosion, possiblyasearlyas1
billionyearsago.[47] TracefossilssuchastracksandburrowsfoundintheTonianeraindicatethepresenceoftriploblasticworms, likemetazoans, roughlyaslarge(about5 mmwide) and complexasearthworms.[48] Duringthe
beginningoftheTonianperiodaround1 billionyearsago, therewasa decreaseinStromatolitediversity, whichmayindicatetheappearanceofgrazinganimals, sincestromatolitediversityincreasedwhengrazinganimalswentextinct
attheEndPermianand EndOrdovicianextinctionevents, and decreasedshortlyafterthegrazerpopulationsrecovered. Howeverthediscoverythattracksverysimilartotheseearlytracefossilsareproducedtodaybythegiantsingle
celledprotistGromiasphaericacastsdoubtontheirinterpretationasevidenceofearlyanimalevolution.[49][50] Ithasbeenestimatedthat99.9% ofanimalsthathaveeverexistedareextinct</p>
</div>
</body>
</html>

เขียน STYLE SHEET: MYSTYLE.CSS
/* defaultstyles*/
img
{
width: 202px;
height: 202px;
}
#content
{
margin-left: 180px;
font-size: 14px;
}
/* mobilestyles*/
@mediascreenand (max-device-width: 480px)
{
img
{
margin-bottom: 5px;
max-width: 40%;
height: auto;
}
#content
{
margin-left: 20px;
font-size: 16px;
}
}

ทดสอบบนมือถือ

สร้าง Style ด้วย css 3

More Related Content

Viewers also liked (20)

Similar to สร้าง Style ด้วย css 3 (20)

สร้าง Style ด้วย css 3