สร้าง style ด้วย css 3
TRANSCRIPT
CSSCascading Style Sheets
ทมาของ CSSpage01.html…<h1>This is a heading</h1>……
page02.html…<h1>This is a heading</h1>……
แกไขรปแบบดวยการแทรก code html<h1><font color="blue">This is a heading</font></h1>
แก ไขรปแบบดวย Style Sheeth1{color:blue;}
CSS
ใชในการนยามรปแบบการแสดงผลใหกบ html tag
เรมใชมาตงแต HTML 4.0
CSS ม External Style Sheets ท/เกบลงในไฟล .css ชวยลดภาระงานในการจดรปแบบการแสดงผล
การเพม STYLE ไปยงหนาเวบ
ใช attribute style แทรกใน element<h1 style="color: green">Inline Styles are Sloppy 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.cssh1 {text-align: center;color: green;} สรางเอกสาร HTML5 บน Dreamweaver และ save เปน test_css.html
!doctype html> <html><head><meta charset="utf-8"></head><body><h1>Hello</h1></body></html>
<!doctype html><html><head><meta charset="utf-8"><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 is Winning</h1>
กรณท/ใชคลาสกบบาง Element เทานนก าหนดโดยh1.ArticleTitle {font-size: 40px;}
STYLE SHEET COMMENT/* The heading of the main article on a 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-family: Impact, Charcoal, sans-serif;font-size: 20px;}
h1, h2 {font-family: Impact, Charcoal, sans-serif;}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;}
จดรปแบบการแสดงผลใหกบทก input element ทม 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 อยในชวงทก าลงพฒนา ดงนนจงเกดผสรางหลากหลายจงแกปญหาดวย Vendor Prefix
ตวอยางการไล ระดบส.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);}
คณสมบตทเพมมาใน CSS3Web 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 Safe Fontเชน MS Sans Serif, 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
การใช Google Web Font1. เพมในสวนของ <head><link href="http://fonts.googleapis.com/css?family=Metrophobic“rel="stylesheet">
2. เรยกใชh1 {font-family: 'Metrophobic', arial, serif;}
การจดเนอหาแบบ MULTIPLE COLUMNSarticle {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;}
FirefoxChrome & SafariOpera
ก าหนดดวยขนาด 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;}
ROUNDED CORNERS
BACKGROUNDSCSS3 สามารถก าหนดภาพ Background ไดหลายภาพดวย background-image และก าหนดต าแหนงในการวางได background-position
.decoratedBox {margin: 50px;padding: 20px;background-image: url('top-left.png'), url('bottom-right.png');
background-position: left top, right bottom;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 lime inset;
ระยะหางของเงากบ box ในแนวนอน
ระยะหางของเงากบ box ในแนวตง
คาความ Blur, คาการกระจายของเงา
สของเงา
ก าหนดใหแสดงเงาภายใน
TEXT-SHADOW.textShadow {font-size: 30px;font-weight: bold;text-shadow: gray 10px 10px 7px;}
สเงา
ระยะหางของเงากบ box ในแนวนอน
ระยะหางของเงากบ box ในแนวตงคาความ Blur
MEDIA QUERY Media query คอ การตรวจสอบวารายละเอยดของอปกรณท/ใชในการดเวบไซต เชน ขนาด, resolution, color
capabilities เปนตน ขอมลทไดจาก Media query จะชวยเลอก Style Sheet ทเหมาะกบการแสดงผลได
MEDIA QUERY Property ของ Media Query
max-width ดงคาความกวางของ Web Browser ทเปดอย max-device-width ดงคาความกวางของอปกรณทใชในการเปดเวบ มกใชในการตรวจสอบวาเปนมอถอหรอไม ถาม
คานอยแสดงวาเวบถกเปดบนมอถออย
รปแบบการนยาม Style Sheet ในการแสดงผลบนอปกรณทหลากหลาย@media (media-query-property-name: value) {/* New styles go here. */}
ตวอยางการใช MEDIA QUERY@media (max-width: 480px) {...}@media (max-width: 250px) {...}@media (min-width: 400px) and (max-width: 700px) {…}
ก าหนด Style เมอ Browser มขนาด 480 pixel
ก าหนด Style เมอ Browser มขนาด 250 pixel
ก าหนด Style เมอ Browser มขนาด 400-700 pixel
ตวอยางการใช MEDIA QUERY แบบชวง/* Normal styles here */@media (min-width: 600px) and (max-width: 700px) {/* Override the styles for 600-700 pixel windows. */}@media (min-width: 400px) and (max-width: 599.99px) { @media (min-width: 400px) and (max-width: 599.99px) {/* Override the styles for 400-600 pixel windows. */}@media (max-width: 399.99px) {/* Override the styles for sub-400 pixel windows. */}
การก าหนดต าแหนงไฟล STYLE SHEET การเขยน Style Sheet ทใชทก Media Query ในไฟลเดยวอาจมขนาดใหญ ท าใหยากตอการปรบปรงในภายหลง การแยก
ไฟลตามชนดหนาจอ จะชวยใหขนาดไฟลลดลง และจดการไดงายขน
<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 และ Android Phone<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">
HTTP://COLLY.COM/
HTTP://TEEGALLERY.COM/
HTTP://MEDIAQUERI.ES/VIT/
การสรางเวบเพอรองรบการแสดงผลบนมอถอ
1. สรางเอกสาร html2. สราง style sheet 3. ทดสอบบนอปกรณทเกยวของ
สรางเอกสาร HTML5<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><link rel="stylesheet" href="mystyle.css"></head><body><h1>Cool Animals Gallery!</h1><p>This gallery contains 8 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 is the Title</h1> <p>Animals are generally considered to have evolvedfrom a flagellated eukaryote.[39] Their closest known living relatives are the choanoflagellates, collared flagellates that have a morphology similar tothe choanocytes of certainsponges.[40] Molecular studies place animals in a supergroup called the opisthokonts, which also include the choanoflagellates, fungi and a few small parasitic protists.[41] The name comes from the posterior location of the flagellumin motile cells, such as most animal spermatozoa, whereas other eukaryotes tend to have anterior flagella.[42] The first fossils that might represent animals appear in the Trezona Formation at Trezona Bore,West Central Flinders, SouthAustralia.[43] These fossils are interpreted as being early sponges. They were found in 665-million-year-old rock.[43] The next oldest possible animal fossils are found towards the end of the Precambrian,around 610 million years ago, and are known as the Ediacaran or Vendian biota.[44] These are difficult to relate to later fossils, however. Some may represent precursors of modern phyla, but they may be separate groups, and it is possible they are not really animalsat all.[45] Aside from them, most known animal phyla make a more or less simultaneous appearance during the Cambrian period, about 542 million years ago.[46] It is still disputed whether this event, called the Cambrian explosion, represents a rapid divergence between different groups or a change in conditions that made fossilization possible. Some paleontologists suggest that animals appeared much earlier than the Cambrian explosion, possibly as early as 1billion years ago.[47] Trace fossils such as tracksand burrows found in the Tonian era indicate the presence of triploblastic worms, like metazoans, roughly as large (about 5 mm wide) and complex as earthworms.[48] During thebeginning of the Tonian period around 1 billion years ago, there was a decrease in Stromatolite diversity, which may indicate the appearance of grazing animals, since stromatolite diversity increased when grazing animals went extinctat the End Permian and End Ordovician extinction events, and decreased shortly after the grazer populations recovered. However the discovery that tracks very similar to these early trace fossils are produced today by the giant singlecelled protist Gromia sphaerica casts doubt on their interpretation as evidence of early animal evolution.[49][50] It has been estimated that 99.9% of animals that have ever existed are extinct</p></div></body></html>
เขยน STYLE SHEET: MYSTYLE.CSS/* default styles */img{
width: 202px;height: 202px;
}#content{
margin-left: 180px; font-size: 14px;
}
/* mobile styles */@media screen and (max-device-width: 480px){
img{
margin-bottom: 5px;max-width: 40%;height: auto;
}#content{
margin-left: 20px; font-size: 16px;
}}
ทดสอบบน DESKTOP
ทดสอบบนมอถอ