Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore หน่วยที่2HTML (ต่อ)

หน่วยที่2HTML (ต่อ)

Published by วิรยา สีขาว, 2019-05-26 23:37:39

Description: หน่วยที่2HTML (ต่อ)

Search

Read the Text Version

การเขียนภาษา HTML5 กับ CSS3

CSS3 คอื อะไร  CSS ยอมาจาก Cascading Style Sheet มักเรยี กโดยยอวา \"สไตลชีต\" คือ ภาษาทใี่ ชเปนสว นของการจัดรูปแบบการแสดงผลเอกสาร HTML โดยท่ี CSS กําหนด กฎเกณฑในการระบรุ ูปแบบ (หรอื \"Style\") ของเน้อื หาในเอกสาร อันไดแก สขี อง ขอความ สีพนื้ หลัง ประเภทตวั อกั ษร และการจดั วางขอ ความ ซ่ึงการกําหนดรูปแบบ หรอื Style นีใ้ ชหลกั การของการแยกเนื้อหาเอกสาร HTML ออกจากคําส่ังทีใ่ ชในการ จดั รูปแบบการแสดงผล กาํ หนดใหรูปแบบของการแสดงผลเอกสาร ไมข ้ึนอยกู ับเน้ือหาของ เอกสาร เพอื่ ใหง ายตอการจัดรปู แบบการแสดงผลลพั ธข องเอกสาร HTML โดยเฉพาะใน กรณีทม่ี ีการเปลี่ยนแปลงเน้ือหาเอกสารบอยคร้ัง หรอื ตองการควบคมุ ใหรปู แบบการ แสดงผลเอกสาร HTML มลี ักษณะของความสม่ําเสมอทวั่ กันทกุ หนาเอกสารภายใน เวบ็ ไซตเดียวกัน โดยกฎเกณฑในการกําหนดรูปแบบ (Style) เอกสาร HTML ถกู เพิม่ เขา มาคร้ังแรกใน HTML 4.0 เม่ือปพ .ศ. 2539 ในรปู แบบของ CSS level 1 Recommendations ทกี่ ําหนดโดย องคก ร World Wide Web Consortium หรอื W3C

ประโยชนของ CSS 1.CSS มีคณุ สมบตั ิมากกวา tag ของ html เชน การกําหนดกรอบใหข อ ความ รวมทงั้ สี รูปแบบของขอความทกี่ ลาวมาแลว 2.CSS น้ันกําหนดทต่ี นของไฟล html หรือตําแหนง อน่ื ๆ ก็ได และสามารถมีผล กบั เอกสารทง้ั หมด หมายถงึ กาํ หนด ครั้งเดียวจุดเดียวก็มีผลกับการแสดงผลทง้ั หมด ทาํ ให เวลาแกไ ขหรอื ปรับปรุงทาํ ไดส ะดวก ไมต องไลตามแก tag ตา งๆ ท่ัวท้งั เอกสาร 3.CSS สามารถกําหนดแยกไวต างหากจาก ไฟลเ อกสาร html และสามารถนํามาใชร วม กับเอกสารหลายไฟลได การแกไขก็แกเพยี ง จุดเดยี วก็มผี ลกับเอกสารทง้ั หมด CSS กบั HTML / XHTML นั้นทําหนาทีค่ นละอยา งกัน โดย HTML / XHTML จะทําหนา ท่ีในการวางโครงรางเอกสารอยางเปนรูปแบบ ถูกตอง เขาใจ งา ย ไมเกีย่ วขอ งกับการแสดงผล สวน CSS จะทําหนา ทใ่ี นการตกแตง เอกสารให สวยงาม เรียกไดวา HTML /XHTML คือสว น coding สว น CSS คือสวน design

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

CSS  แกไ ขรปู แบบดวยการแทรก code html <h1><font color=\"blue\">This is a heading</font></h1>  แก ไขรปู แบบดว ย Style Sheet h1 { color:blue;

การเขียนภาษา HTML โดยใช CSS <HTML><HEAD> <TITLE>my first web page</TITLE> <link rel=\"stylesheet\" type=\"text/css\"href=\"style01.css“ /> </HEAD> <BODY> <h1>This is a heading</h1> </body> </HTML>

CSS Selectors p { text-align: center; color: red; }

The element Selector  <!DOCTYPE html><html><head>  <style>  p{  text-align: center;  color: red; }  </style></head><body>  <p>Every paragraph will be affected by the style.</p>  <p id=\"para1\">Me too!</p>  <p>And me!</p></body></html>

HTML The id Attribute  <!DOCTYPE html>  <body>  <html><head>  <style>  <h2>The id  #myHeader { Attribute</h2>  background-color:  <p>Use CSS to style lightblue; an element with the id  color: black; \"myHeader\":</p>  padding: 40px;  text-align: center;  <h1 } id=\"myHeader\">My  </style> Header</h1>  </head>  </body>  </html>



The id Selector  <!DOCTYPE html><html><head>  <style>  #para1 {  text-align: center;  color: red; }  </style></head><body>  <p id=\"para1\">Hello World!</p>  <p>This paragraph is not affected by the style.</p>  </body></html>

The class Selector <!DOCTYPE html><html><head> <style> .center { text-align: center; color: red; } </style></head><body> <h1 class=\"center\">Red and center-aligned heading</h1> <p class=\"center\">Red and center-aligned paragraph.</p> </body></html>

HTML The class Attribute  <!DOCTYPE html>  <body>  <html><head>  <style>  <h2>The class Attribute</h2>  .city {  background-color:  <p>Use CSS to style elements with the class name \"city\":</p> tomato;  color: white;  <h2 class=\"city\">London</h2>  padding: 10px; }  <p>London is the capital of  </style> England.</p>  </head>  <h2 class=\"city\">Paris</h2>  <p>Paris is the capital of France.</p>  <h2 class=\"city\">Tokyo</h2>  <p>Tokyo is the capital of Japan.</p>  </body></html>



The class Selector  <!DOCTYPE html><html><head>  <style>  p.center {  text-align: center;  color: red; }  </style></head><body>  <h1 class=\"center\">This heading will not be affected</h1>  <p class=\"center\">This paragraph will be red and center-aligned.</p>  </body></html>

The class Selector  <!DOCTYPE html><html><head><style>  p.center {  text-align: center;  color: red; }  p.large {  font-size: 300%; }  </style></head><body>  <h1 class=\"center\">This heading will not be affected</h1>  <p class=\"center\">This paragraph will be red and center-aligned.</p>  <p class=\"center large\">This paragraph will be red, center-aligned, and in a large font-size.</p>  </body></html>

HTML5  <HTML> <HEAD> <TITLE>my first web page</TITLE> </HEAD> <BODY> <h1>This is my web site.</h1> </body> </HTML>

HTML5 & CSS3  <HTML> <HEAD> <TITLE>my first web page</TITLE> <link rel=\"stylesheet\" type=\"text/css\" href=\"mystyle.css\" /> </HEAD> <BODY> <h1> This is my web site. </h1> </body> </HTML>

การสรางไฟล CSS3 กําหนดช่อื ไฟล mystyle.css เขยี นคําสง่ั ดงั น้ี h1 {text-shadow: 5px 5px 5px #FF0000;}

สรา งเอกสาร CSS save เปน mystyle.css h1 { text-align: center; color: green; }

สรา งเอกสาร HTML  <!doctype html> <html> <head> <meta charset=\"utf-8\"> <link rel=\"stylesheet\" href=\"mystyle.css\"> </head> <body><h1>Hello</h1></body> </html>

 กาํ หนด Selector ขน้ึ ตนดวย .ArticleTitle{ font-family: Garamond, serif; font-size: 40px; }  ใช class ทสี่ รา งขึ น <h1 class=\"ArticleTitle\">HTML5 is Winning</h1>

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

ตัวอยา งการนําไปใช h1 { <html> <head> <meta font-family: Impact, charset=\"utf-8\"> Charcoal, sans-serif; <link rel=\"stylesheet\" font-size: 40px; href=\"style04.css\"> color: red; </head> <body> }h2 { <h1>HTML5 is font-family: Impact, Winning</h1> Charcoal, sans-serif; <h2>Mayan font-size: 20px; Doomsday</h2> color: blue; } </body> </html>



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

 <!DOCTYPE html> <html><head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body></html>

Menu01.css #Menu { border-width: 2px; border-style: solid; color: red; background-color:silver;}

HTML <html> <head> <link rel=\"stylesheet\" href=\"menu01.css\"> </head> <body> <div id=\"Menu\">test1<br>aa<br>bb</div> <div id=\"Menu\">test2</div> </body> </html>

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

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

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); }

การนาํ ไปใช <html> <head> <link rel=\"stylesheet\" href=\"dd.css\"> </head> <body> <div> <div class=\"stylishBox\"> <h2>การเขียนภาษา HTML5</h2> test2 <br>test3 </div> </body> </html>



CSS3  CSS3 ไมไดเ ปน สวนหนงึ่ ของ HTML5 ท้ังสองพฒั นาแยกกัน แต W3C สนับสนุนนกั พัฒนาเวบ็ ใชท ั ง สองรว มกัน เพอ่ื สรา ง  เว็บท/ี ทันสมยั มากข้ึน  คณุ สมบตั ขิ อง CSS3 คือ สว นเสรมิ เพม่ิ เตมิ ขน้ึ มา หากใชใ น Web Browser เกา ยังคงใชง านได

CSS3 การสรางรปู แบบของหัวขอ header  header { background-color: #7695FE; border: thin #336699 solid; padding: 10px; margin: 10px; text-align: center; border-radius: 25px; }

HTML <html> <head> <link rel=\"stylesheet\" href=\"ss.css\"> </head> <header> <h1>Heading A</h1> <p>เนือ้ หาสวนนเ้ี ปน ของ Heading A</p> <h2>Heading B</h2> <p>เน้ือหาสว นนีเ้ ปน ของ Heading B</p> <h2>Heading C</h2> <p>เนือ้ หาสวนนี้เปนของ Heading C</p> </header></body></html>



การจัดเนื้อหาแบบ 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; }

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; }

HTML5 <html> <head> <link rel=\"stylesheet\" href=\"box.css\"> </head> <body> <div> <div class=\"semitransparentBox\"> <h2>การเขียนภาษา HTML5</h2> test2 <br>test3</div></body></html>

CSS Rounded Corners .semitransparentBox2 { background: rgb(170,240,0); opacity: 0.5; border-radius: 25px; background: #73AD21; padding: 20px; width: 200px; height: 150px; }

CSS Rounded Corners  #rcorners2 {  #rcorners3 { border-radius: border-radius: 25px; background: 25px; border: 2px solid url(paper.gif); background-position: #73AD21; padding: 20px; left top; width: 200px; background-repeat: height: 150px; repeat; } padding: 20px; width: 200px; height: 150px; }

ตัวอยางการใชงาน  <!DOCTYPE html>  ตอ  <html><head><style>  #rcorners1 {  #rcorners2 {  border-radius:  border-radius: 25px; 25px;  background:  border: 2px solid #73AD21; #73AD21;  padding: 20px;  padding: 20px;  width: 200px;  width: 200px;  height: 150px;  height: 150px; } }

CSS Navigation Bar  <!DOCTYPE html><html><body>  <ul>  <li><a href=\"#home\">Home</a></li>  <li><a href=\"#news\">News</a></li>  <li><a href=\"#contact\">Contact</a></li>  <li><a href=\"#about\">About</a></li>  </ul>  <p>Note: We use href=\"#\" for test links. In a real web site this would be URLs.</p>  </body></html>

ตัวอยาง (ตอ )  #rcorners3 {  <body>  border-radius: 25px;  background:  <h1>The border-radius Property</h1> url(images/518169-  <p>Rounded corners for an element with backgrounds.jpg); a specified background color:</p>  background-position: left top;  background-repeat: repeat;  <p id=\"rcorners1\">Rounded  padding: 20px; corners!</p>  width: 200px;  height: 150px;  <p>Rounded corners for an element with } a border:</p>  </style></head>  <p id=\"rcorners2\">Rounded corners!</p>  <p>Rounded corners for an element with a background image:</p>  <p id=\"rcorners3\">Rounded corners!</p>  </body></html>

ตัวอยางการเขียน Navigation  <!DOCTYPE html><html>  li a {  <head><style>  display: block;  ul {  color: #000;  list-style-type: none;  padding: 8px 16px;  margin: 0;  text-decoration: none;  padding: 0; }  width: 200px;  /* Change the link color on hover  background-color: */ #f1f1f1;  li a:hover { }  background-color: #555;  color: white; }  </style></head>

 <body>  <h2>Vertical Navigation Bar</h2>  <ul>  <li><a href=\"#home\">Home</a></li>  <li><a href=\"#news\">News</a></li>  <li><a href=\"#contact\">Contact</a></li>  <li><a href=\"#about\">About</a></li>  </ul>  </body></html>


วิรยา สีขาว

หน่วยที่2HTML (ต่อ)
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS