CSS CASCADING STYLE SHEET.

CSS CASCADING STYLE SHEET

Cascading Style Sheet คือ การจัดเอกสารรูปแบบการแสดงผลของเว็บไซต์
มีวัตถุประสงค์เพื่อ ปรับปรุงวิธีการในการกำหนดรูปแบบเอกสารซึ่งทำให้เกิดความสะดวกมากยิ่งขึ้น และอีกทั้งยังมีความต่อเนื่องกันอีกด้วย ทั้งภายในเอกสารหรือเวปไซต์เดียวกัน ให้มีรูปแบบเดียวกัน และสอดคล้องกัน กำหนดมาตรฐานการใช้งานโดยองค์กรกลาง W3C (World Wide Web Consortium)

ข้อดี CSS ช่วยลดการใช้งานภาษา HTML ทำให้ Code HTML เหลือส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น แก้ไขเอกสารได้ง่ายและรวดเร็ว เว็บเพจมีขนาดเล็กลง ดาวน์โหลดได้เร็ว กำหนดรูปแบบการแสดงผลจากคำสั่ง CSS ชุดเดียวกันให้มีผลกับเว็บเพจทุกหน้า ทำให้แก้ไขและปรับปรุงได้ง่าย ควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้หลายเว็บเบราวเซอร์ กำหนดรูปแบบการแสดงผลที่เหมาะสมกับชนิดสื่อ รองรับการทำงานของ Web Browser ในอนาคตได้

ตัวอย่างของการใช้ Tag ที่มากเกินความจำเป็น
ถ้าต้องการจัดข้อความในตารางโดยใช้ตัวอักษร MS Sans Serif , เป็นตัวหนา และมีน้ำเงิน จะต้องใช้ Tag ดังนี้ <TD><FONT FACE="MS Sans Serif " COLOR= "BLUE" ><B>ข้อความ</B></TD> จากตัวอย่างจะเห็นว่า จะต้องเขียน Tag ที่มากเกินความจำเป็นและเสียเวลาอย่างมาก ซึ่งถ้าตารางมีหลายช่องก็จะต้องกำหนด Tag อย่างนี้ในตารางทุกๆ ช่อง รวมถึงทำให้ File ใหญ่ขึ้นด้วย

โครงสร้างการเขียน CSS
Selector คือ ส่วนที่อยู่ก่อนเครื่องหมายปีกกา Declaration คือ ส่วนที่อยู่ภายในเครื่องหมายปีกกา ประกอบด้วย Property และ Value Properties คือ คุณสมบัติ หรือรูปแบบที่กำหนดให้กับ selector การกำหนดค่าให้กับ properties ใช้เครื่องหมาย colon (:) จบการการกำหนดให้กับ properties ใช้เครื่องหมาย Semi-colon(;) selector { property1: value; property2: value; }

ตัวอย่างการเขียน CSS

การใช้งาน CSS <style> body { background-color: blue; }
body {margin-left: 15%; } body {margin-right: 15%;} </style> <style> body { background-color: blue; margin-left: 15%; margin-right: 15%; } </style>

การใช้งาน CSS <style> h1 { font-style: Italic; color: red; }
h1, h2 { font-style: Italic; color: red; } </style>

CSS มีคุณสมบัติการถ่ายทอด
body {color: red; } h2 { font-style: Italic;} กำหนดที่ Selector body มีผลทำให้ตัวอักษรทุกตัวในหน้าเว็บเพจมีสีแดง รวมถึงตัวอักษรที่อยู่ระหว่างแท็ก <h2> และ </h2> ด้วย และแสดงเป็นตัวเอียง

<body> <h1>หัวข้อที่ 1</h1> <font> รายละเอียด 1 <p> ย่อหน้าที่ 1</p> </font> <h2>หัวข้อที่ 2</h2> ข้อความทั่วไป </body> body h1 h2 font p

<html> <head> <style type = "text/CSS"> body { color: red; } font { color: green; font-style: Italic;} </style> </head> <body><h1>หัวข้อที่ 1</h1> <font> รายละเอียด 1<p> ย่อหน้าที่ 1</p></font> <h2>หัวข้อที่ 2</h2> ข้อความทั่วไป </body> body h1 h2 font p

เปรียบเทียบรูปแบบ CSS และ HTML
<I><FONT face=“Arial” color=“green”><H3>Hi I love Web</H3></FONT></I> HTML CSS H3 {font-family : Arial; font-style : italic; color : green} ได้ผลลัพธ์เหมือนกัน

การเขียน Comment CSS

การเขียน Comment CSS ใช้เครื่องหมาย /*……*/ ตัวอย่างเช่น <style>
/* กำหนดสีตัวอักษรเป็นสีดำ ขนาด 14px */ body { color:#000000; font-size:14px; } </style>

ชนิดของ Selector ใน CSS

ชนิดของ Selector Selector คือ HTML elements หรือ elements ที่ CSS Rule ประกอบด้วย (1) Class Selectors (2) ID Selectors (3) The Universal Selector (4) Descendant Selectors (5) Direct Child Selectors (6) Attribute Selectors (7) Pseudo-Classes (8) Pseudo-Elements :first-letter and :first-line

(1) Class Selectors ประกาศเริ่มต้นด้วย . ตามด้วยชื่อ Class
การใช้งาน Class Selectors สามารถใช้แสดงผลรูปแบบซ้ำหลายๆ ครั้งกับ elements หลายๆ อัน ใน 1 เว็บเพจ

ตัวอย่าง Class Selectors
<html><head> <style> .position1{ position : absolute;top : 0; left : 100px;bottom : 15px; color:red; font-size:100px; } </style> </head><body> <div class="position1">test</div> </body> </html>

(2) ID Selectors การประกาศเริ่มต้นด้วย # ตามด้วยชื่อ ID
การใช้งาน ID Selectors สามารถใช้แสดงผลได้เพียงหนึ่ง Element ใน 1 เว็บเพจ

ตัวอย่าง ID Selectors <html><head><style> #show1{ color:blue; font-size:10em; position:absolute; left:100px;} </style></head> <body> <div id="show1" > <span>CSS</span></div> </body></html>

(3) The Universal Selector
ประกาศด้วย * ใช้กับทุก element ภายใน 1 website ตัวอย่าง * { border: 1px solid black; }

(4) Descendant Selectors
คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่สั่งงาน เช่น Tag span และ h1 เป็น Tag ลูกของ tag div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น body div h1 span Descendant Selectors

Descendant Selectors <html><head> <style> #show1{color:blue;font-size:10em;position:absolute;left:100px;} div h1 {color: #ff9900;} </style> </head> <body> <div id="show1" > <span>CSS</span> <h1>CSS</h1> </div> </body> </html> Descendant Selectors Descendant Selectors

(5) Direct Child Selectors
element ที่อยู่บน document ที่มีระดับต่ำกว่า 1 ระดับ ถูกเรียกว่า "Child body div h1 span Direct Child Selectors

(6) Attribute Selectors
การสร้าง CSS จาก Attribute ของ Tag HTML รูปแบบ CSS [attribute] Selector CSS [attribute="value"] Selector CSS [attribute~="value"] Selector CSS [attribute|="value"] Selector CSS [attribute^="value"] Selector CSS [attribute$="value"] Selector ศึกษาเพิ่มเติมได้ที่

CSS [attribute] Selector
คือ Selector ที่กำหนด Attribute ตามที่ระบุ

CSS [attribute] Selector
<html><head> <style> a[target] { background-color: yellow; } </style> </head> <body> <a href="">link1 not have target</a> <a href="" target="_Blank">link2 have target</a> </body> </html>

CSS [attribute="value"] Selector
คือ Selector ที่ Attribute มีค่า value ตามค่าที่ระบุ

<html><head> <style> a[target] { background-color: yellow;} a[target="_blank"] { background-color:pink;} </style> </head> <body> <a href="">link1 not have target</a> <a href="" target="_Blank">link2 target _Blank</a> <a href="" target="_new">link3 target _new</a> </body> </html>

CSS [attribute~="value"] Selector
คือ Selector ที่ Attribute มีค่า value ประกอบด้วยคำที่ระบุ

<html><head><style> [title~=flower] { border: 5px solid yellow;} </style> </head> <body> <p>All images with the title attribute containing the word "flower" get a yellow border.</p> <img src="img/1.png" title="klematis flower" width="150" height="113"> <img src="img/2.png"title="flower" width="224" height="162"> <img src="img/3.png" title="tree" width="200" height="358"> <p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body></html>

CSS [attribute|="value"] Selector
คือ Selector ที่ Attribute ที่มี value เริ่มต้นค่าที่ระบุ Value ที่ระบุจะเป็น คำเดี่ยว หรือ ตามด้วย -

<html><head> <style>[class|=top] { background: yellow;}</style> </head> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="topcontent">Are you learning CSS?</p> <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>

CSS [attribute^="value"] Selector
คือ Selector ที่ Attribute ที่มี value เริ่มต้นค่าที่ระบุ โดยไม่สนใจคำอื่นที่ต่อท้าย

<html><head> <style>[class^=top] { background: yellow;}</style> </head> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="topcontent">Are you learning CSS?</p> <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>

CSS [attribute$="value"] Selector
คือ Selector ที่ Attribute ที่มี value ลงท้ายด้วค่าที่ระบุ

<html><head><style>[class^=top] {background: yellow;} [class$=top] {background: pink;}</style> </head> <body> <h1 class="top-header">Welcome</h1> <p class="top-text">Hello world!</p> <p class="content">Are you learning CSS?</p> <p class="topcontent">Are you learning CSS?</p> <p class="contenttop">Are you learning CSS?</p> <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> </body> </html>

การกำหนด Cascading Style Sheet

การกำหนด Cascading Style Sheet
สามารถทำได้ 4 วิธีคือ 1. กำหนด CSS แบบ In-line 2. กำหนด CSS ใน Tag Head 3. กำหนด CSS ด้วยคำสั่ง <Link> 4. กำหนด CSS

1.กำหนด CSS แบบ In-line กำหนด Attribute Style Tag HTML
ไม่เหมาะสำหรับการควบคุมการแสดงผลหลายๆหน้า

<tag style = "property: value;">
กำหนด CSS แบบ In-line รูปแบบ tag คือ แท็กคำสั่งของภาษา HTML <tag style = "property: value;">

ตัวอย่างการกำหนด CSS แบบ In-line
<HTML><HEAD><TITLE> New Document </TITLE> </HEAD> <BODY style = "background-color: #FFFFCC;"> <FONT style = "font-style: Italic; font-size: 16pt; color: red;"> ข้อความ ปกติ</FONT> <H1 style = "color: green;">หัวข้อที่ 1</H1> <H2>หัวข้อที่ 2</H2> <H3>หัวข้อที่ 3</H3> </BODY> </HTML>

2.กำหนด CSS ใน tag HEAD กำหนด Tag Style ไว้ใน Tag Head
เหมาะสำหรับการควบคุมการแสดงผลหน้าเว็บเพจเฉพาะหน้านั้น ไม่เหมาะสำหรับการควบคุมการแสดงผลหลายๆหน้า

ตัวอย่าง กำหนด CSS ใน tag HEAD
<HTML> <HEAD> <TITLE> New Document </TITLE> <style type="text/CSS"> body {background-color: #FFFFCC;} font {font-style: Italic; font-size: 16pt; color: red;} h1 {color: green; } </style> </HEAD> <BODY> <FONT>ข้อความปกติ</FONT> ……

3.กำหนด CSS ด้วยคำสั่ง <Link>
กำหนด Tag Link ไว้ใน Tag Head แยกไฟล์ CSS ไว้ต่างหาก เหมาะสำหรับการควบคุมการแสดงผลหลายๆ หน้าเว็บเพจ ลดการทำงานในการปรับแต่งเอกสาร HTML เพราะแก้ไขเพียงจุดเดียว คือ ไฟล์.CSS จึงทำให้ประหยัดเวลา หนึ่งเว็บเพจสามารถเรียกใช้ Style sheet ได้เพียงหนึ่งไฟล์ <link rel = "stylesheet" type="text/CSS" href = "ชื่อไฟล์.CSS">

ขั้นตอนกำหนด CSS ด้วยคำสั่ง <Link>
(1) สร้างไฟล์ Style Sheet บันทึกไฟล์เป็นนามสกุล .CSS ตัวอย่างเช่น สร้างไฟล์ชื่อ mystyle.CSS โดยประกอบด้วยคำสั่งดังนี้ h3 {font-family : Arial; font-style : italic; color : green} (2) สร้างไฟล์ HTML โดยระบุ Tag <LINK> ไว้ใน Tage Head ดังตัวอย่าง

ตัวอย่างกำหนด CSS ด้วยคำสั่ง <Link>
ไฟล์ mystyle.CSS h3 {font-family: Arial; font-style: italic; color: green; } <HTML> <HEAD> <LINK rel="stylesheet" type="text/CSS" href="mystyle.CSS" title="style1"> </HEAD> <BODY> <H3>This is a green , italic , Arial H3 header.</H3> <P><H3>So is this.</H3></P> </BODY> </HTML>

ตัวอย่าง ไฟล์ display.CSS ไฟล์ ex.html
body {background-color: #FFFFCC;} font {font-style: Italic; font-size: 16pt; color: red;} h1 {color: green; } ตัวอย่าง ไฟล์ ex.html <HTML> <HEAD> <TITLE> New Document </TITLE> <link rel = "stylesheet" type="text/CSS" href = "display.CSS"> </HEAD> <BODY> <FONT>ข้อความปกติ</FONT> <H1>หัวข้อที่ 1</H1> <H2>หัวข้อที่ 2</H2> <H3>หัวข้อที่ 3</H3> </BODY> </HTML>

4.กำหนด CSS ด้วยคำสั่ง @import
กำหนด url(“ชื่อไฟล์ css”) ใน Tag Style แยกไฟล์ CSS ไว้ต่างหาก เหมาะสำหรับการควบคุมการแสดงผลหลายๆ หน้าเว็บเพจ ลดการทำงานในการปรับแต่งเอกสาร HTML เพราะแก้ไขเพียงจุดเดียว คือ ไฟล์.CSS จึงทำให้ประหยัดเวลา หนึ่งเว็บเพจสามารถเรียกใช้ Style sheet ได้หลายไฟล์ <STYLE type="text/CSS"> @import url(“ชื่อไฟล์ CSS") </STYLE>

ตัวอย่างการกำหนด CSS ด้วยคำสั่ง @import
ไฟล์ mystyle.CSS h3 {font-family: Arial; font-style: italic; color: green; } <HTML> <HEAD> <STYLE type="text/CSS"> @import url("mystyle.CSS") </STYLE> </HEAD> <BODY> <H3>This is a green , italic , Arial H3 header.</H3> <P><H3>So is this.</H3></P> </BODY> </HTML>

ลำดับความสำคัญของการทำงาน CSS
!important Inline style (inside an HTML element) internal style sheets (in the head section) External style sheets Browser default

!important Browser ให้ความสำคัญของ CSS ที่ระบุ !importantมากที่สุด

ตัวอย่าง ก่อนใช้ !important
<html><head> <style> #header {background:#60A2AA;color:#FFFFFF;padding:10px;} #main {background:#CCE2B5;color:#7CAB6A;padding:20px;} #footer {background:#FAF2E5;color:#EC9974;padding:10px;} .title-text {font-size:2em;}</style></head> <body> <div id="header" style="background:#000;"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </body></html>

ตัวอย่าง ก่อนใช้ !important

ตัวอย่าง การใช้ !important
<html><head> <style> #header {background:#60A2AA !important;color:#FFFFFF;padding:10px;} #main {background:#CCE2B5;color:#7CAB6A;padding:20px;} #footer {background:#FAF2E5;color:#EC9974;padding:10px;} .title-text {font-size:2em;}</style></head> <body> <div id="header" style="background:#000;"> <h2 class="title-text">Header</h2> <p>Hello World in Header</p> </div> <div id="main"> <h3 class="title-text">Main</h3> <p>Hello World in Main</p> <div id="footer"> <h4 class="title-text">Footer</h4> <p>Hello World in Footer</p> </body></html>

ตัวอย่าง หลังใช้ !important

PSEUDO-CLASS

PSEUDO-CLASS เป็น Class เทียมที่เป็น Class พิเศษ
Pseudo-class มีเพียงชุดเดียวคือ Anchor หรือ Tag <A> โดยมี Class ที่มีชื่อเฉพาะ คือ link,visited,hover และ active การกำหนดใช้ : เป็นตัวนำหน้าชื่อ Class ซึ่งสามารถใช้ร่วมกับ Class จริงๆ ที่มีอยู่ได้ selector:pseudo-class {property: value} selector.CSS-class:pseudo-class {property: value}

PSEUDO-CLASS การใช้งาน Pseudo Class จะอยู่ใน Tag <A>
A:link เป็น Selector แสดงรายการที่เป็นจุดเชื่อมโยง ตัวอย่าง เช่น a:link { color: red;} A:visited เป็น Selector แสดงข้อความที่คลิกเชื่อมโยงแล้ว a:visited { color: green;} active เป็น Selector แสดงรายการเชื่อมโยงขณะกำลังคลิกเมาส์ a:active { color: blue;} A:hover เป็น Selector แสดงรายการเชื่อมโยงเมื่อนำเมาส์ไปวาง a:hover { color: hotpink;}

PSEUDO-Element

PSEUDO-Element first-child คือ element ที่ตามมาเป็นตัวแรก
first-line คือ บรรทัดแรกของ element นั้น first-letter คือตัวอักษรตัวแรกของ element นั้น before คือ ก่อน element นั้น after คือ หลัง element นั้น ตัวอย่างการใช้งาน p:first-letter{color:#ff0000;font-size:xx-large;} p:first-line{color:#0000ff;}

Pseudo-class ใช้ร่วมกับ Class
.big {font-size:200%} A:hover {color:red} สามารถใช้ร่วมกับ Class ได้ดังนี้ <A class="big" href="... ">ตัวเชื่อมโยง</a>

<!DOCTYPE html> <html><head> <style> a.highlight:hover { color: #ff0000;} p:first-letter{color:#ff00ff;font-size:xx-large} </style></head> <body> <p><a class="highlight" href="CSS_syntax.asp">CSS Syntax</a></p> <p><a href="default.asp">CSS Tutorial</a></p> </body> </html>

Hover on <div> <!DOCTYPE html> <html><head><style> div { background-color: green; color: white; padding: 25px; text-align: center;} div:hover { background-color: blue;}</style> </head> <body> <p>Mouse over the div element below to change its background color:</p> <div class="mouseover">Mouse Over Me</div> </body> </html>

Hover on <div>

CSS Link

การกำหนด Property CSS ของ Link
Purpose a:link กำหนด style ให้กับ link ปกติที่ยังไม่เคยถูก click a:visited กำหนด style ให้กับ link ที่เคยถูกคลิกแล้ว a:hover กำหนด style ให้กับ link เมื่อเลื่อนเมาส์ไปอยู่เหนือ link a:active กำหนด style ให้กับ link ขณะถูกคลิก text-decoration กำหนดรูปแบบการขีดเส้นใต้ข้อความ None,underline,overline text-decoration: underline overline; กำหนดรูปแบบการขีดเส้นใต้ข้อความทั้งด้านบนและด้านล่าง

ตัวอย่างการสร้าง Link ด้วย CSS (1)
<html><head> <style> .header {background:#60A2AA;color:#FFFFFF;padding:10px;} .main {background:#CCE2B5;color:#7CAB6A;padding:20px;} #footer {background:#FAF2E5;color:#EC9974;padding:10px;} .title-text {font-size:2em;} a{text-decoration: underline overline;} a:hover{color:hotpink;} div:hover {background-color:lightgray;}} </style></head>

ตัวอย่างการสร้าง Link ด้วย CSS (2)
<body> <div class="header" > <a href=""><h2 class="title-text">Link1</h2> </a> <p>go to Link1</p> </div> <div class="main"> <a href=""><h3 class="title-text">Link2</h3></a> <p>go to Link2</p> <div id="footer"> <a href=""><h4 class="title-text">Link3</h4> </a> <p>go to Link3</p> </body></html>

ตัวอย่างการสร้าง Link ด้วย CSS

CSS Colors

CSS Colors Color Names RGB (Red, Green, Blue) Hexadecimal Colors

Color Names เพิ่มเติมได้ที่

RGB (Red, Green, Blue) เพิ่มเติมได้ที่

Hexadecimal Colors เพิ่มเติมได้ที่

CSS Units

หน่วยที่ใช้วัดค่าต่างๆ ใน CSS
หน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน) px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px em (emphasize, ความสูงของตัวอักษร) เป็นขนาดจำนวนเท่าของขนาด font ที่กำหนดให้ body ถ้า font ที่ body กำหนดเป็น 10px h1{fon-size:1.5em} h1 จะมีขนาดเป็น 1.5 เท่า ของ 10px = 15px h2{fon-size:1.4em} h2 จะมีขนาดเป็น 1.4 เท่า ของ 10px = 14px และถ้าเรากำหนดเป็น 1em ก็จะมีขนาดเท่ากับ 10px เหมือนเดิม ex (x-height, ความสูงของตัวอักษร "x") เช่น 1.5ex, 2ex % (percent, สัมพันธ์กับขนาดหน้าจอ หรือ container ที่บรรจุวัตถุนั้นๆ อยู่) เช่น 50%, 130%

หน่วยที่ใช้วัดค่าต่างๆ ใน CSS
หน่วยแบบ Absolute Length (กำหนดตายตัว) in (inches; 1in=2.54cm =72pt =6pc) เช่น 2in, 1.5in cm (centimeters; 1cm=10mm) เช่น 2cm, 1.11cm mm (millimeters) เช่น 50mm, 0.8mm pt (points; 1pt=1/72in, 10pt มีขนาดพอๆกับ 12px) เป็นหน่วยที่ใช้ในงานสิ่งพิมพเช่น 12pt, 20pt pc (picas; 1pc=12pt) เช่น 1pc, 2pc

CSS Position

Property การกำหนด Position
Description Values top ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านบน auto % length bottom ใช้กำหนดระยะของวัตถุ ว่าให้อยู่เหนือ หรือ ล่าง ขอบด้านล่าง left ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านซ้าย right ใช้กำหนดระยะของวัตถุ ว่าให้อยู่ขวา หรือ ซ้าย ของขอบด้านขวา

Description Values clip ใช้กำหนดการตัดส่วนต่างๆของวัตถุที่ไม่ต้องการออกไป rect (top, right, bottom, left) auto shape Default overflow ใช้กำหนดว่าถ้าข้อมูลเกินขอบเขตที่กำหนดไว้ จะให้มีการจัดการอย่างไร visible hidden scroll auto Default ไม่แสดง มี scroll bar เลื่อนดูได้ จะมี scroll bar เลื่อนดูได้ z-index ใช้กำหนดลำดับของวัตถุ Default z-index คือ 0 ถ้าต้องการให้อยู่ด้านล่างกว่า กำหนดเป็น -1 ถ้าต้องการให้อยู่ด้านบนกว่า กำหนดเป็น 1 auto number

Description Values position ใช้กำหนดรูปแบบการจัดวางวัตถุในลักษณะต่างๆ ทั้ง relative absolute และ fixed กำหนดตำแหน่งด้วยการใช้ property left, top, right, และ bottom static relative absolute fixed Default static การจัดวางตามปกติที่เป็น default relative การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และจะกำหนดตำแหน่งโดยนับจากจุดที่วัตถุนั้นๆอยู่ absolute การจัดวางให้อยู่เหนือ หรือซ้อนบนวัตถุอื่นๆในเว็บเพจ โดยวัตถุที่ถูกกำหนดขึ้นมาก่อนจะอยู่ด้านล่าง และวัตถุที่กำหนดทีหลังจะอยู่ด้านบน และจะกำหนดตำแหน่งจากขอบของ container ที่บรรจุ วัตถุนั้นๆ fixed การจัดวางที่กำหนดตำแหน่งจากขอบของ Window นั้นๆ * ต้องกำหนดตำแหน่งทั้งในแนวตั้ง และแนวนอน * ถึงแม้เมื่อเลื่อน scroll bar วัตถุจะยังอยู่ในตำแหน่งที่กำหนด (IE7)

Description Values vertical-align ใช้กำหนดการจัดวางแนวตั้ง baseline กำหนดเป็นค่าเริ่มต้นปกติ sub ตัวห้อย super ตัวยก top ข้อความอยู่ติดขอบด้านบน text-top ด้านบนของ Element ขึ้นอยู่กับ Element หลัก middle ข้อความอยู่กึ่งกลางแนวตั้ง bottom ข้อความอยู่ติดขอบด้านล่าง text-bottom ด้านล่างของ Element ขึ้นอยู่กับ Element หลัก length กำหนดตามความยาว % กำหนดเป็น %

ตัวอย่างการใช้งาน <html><head><style> div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21;} div.absolute { position: absolute; top: 80px; right: 0; width: 200px; height: 100px; border: 3px solid #73AD21;}</style></head> <body><h2>position: absolute;</h2> <p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p> <div class="relative">This div element has position: relative; <div class="absolute">This div element has position: absolute;</div> </div> </body> </html>

ตัวอย่างการใช้งาน

CSS กับการใช้งานในส่วน Background

CSS กับการใช้งานในส่วน BODY
Background สามารถกำหนดลักษณะพื้นหลังของ Element ต่างๆ เช่น <body>, <table>, <p>, <h1>, <h2>, <div> เป็นต้น

การใช้งาน Property Background
Description Values ความหมาย Value background-attachment กำหนดภาพพื้นหลังอยู่กับที่ หรือว่าเลื่อนไปตาม Scroll Bar fixed scroll fix อยู่กับที่ เลื่อนตาม Scroll Bar background-color กำหนดสีพื้นหลังของเว็บเพจหรือ ตาราง color-rgb color-hex color-name transparent รหัสสี ชื่อสี background-image กำหนดภาพพื้นหลังของเว็บเพจหรือตาราง url ของรูป เช่น url(images/bg.jpg) background-position ใช้กำหนดตำแหน่งการจัดวางรูปภาพพื้นหลัง top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos

การใช้งาน Property Background
Description Values ความหมาย Value background-repeat กำหนดรูปภาพพื้นหลังว่าต้องการให้มีการเรียงต่อรูปภาพหรือไม่ repeat repeat-x repeat-y no-repeat ไม่ให้มีการวางต่อรูปภาพ วางต่อรูปภาพแนวนอน วางต่อรูปภาพแนวตั้ง วางต่อรูปภาพทั้งแนวนอนและตั้ง background สามารถกำหนด property ให้กับ background ได้ในคำสั่งประกาศเดียว background-color background-image background-repeat background-attachment background-position

ตัวอย่างการใช้งาน Property Background
<style type ="text/CSS"> body { background-image: url("IMG/7.jpg"); background-repeat:no-repeat; background-position:200 50; background-attachment:fixed; } </style>

50 pixels 200 pixels

<!DOCTYPE html> <html><head><style> body { background: #ffffff url("img_tree.png") no-repeat right top; margin-right: 200px;}</style></head> <body> <h1>Hello World!</h1> <p>Now the background image is only shown once, and it is also positioned away from the text.</p> <p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p> </body> </html>

CSS กับการใช้งาน Image

Image Gallery <html><head><style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px;} div.img:hover { border: 1px solid #777;} div.img img { width: 100%; height: auto;} div.desc { padding: 15px; text-align: center;} </style></head> <body> <div class="img"> <a target="_blank" href="img/img_fjords.jpg"> <img src="img/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc">1</div> </div> <div class="img"> <a target="_blank" href="img/img_forest.jpg"> <img src="img/img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">2</div></div> </body> </html>

Image Gallery

Rounded Images การทำเส้นขอบรูปโค้งมน โดย property border-radius
border-radius:TOP RIGHT BOTTOM LEFT; ตัวอย่างเช่น border-radius:100%; border-radius: 8px; border-radius: 8px 20px 8px 20px;

ตัวอย่างการใช้งาน <!DOCTYPE html><html><head> <style> div.img { margin: 5px; border: 1px solid #ccc; float: left; width: 180px;} div.img:hover { border: 1px solid #777;} div.img img { width: 100%; border-radius: 50%;height: 180px;} div.desc { padding: 15px; text-align: center;} </style></head><body> <div class="img"> <a target="_blank" href="img/img_fjords.jpg"> <img src="img/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200"> </a> <div class="desc">1</div> </div> <a target="_blank" href="img/img_forest.jpg"> <img src="img/img_forest.jpg" alt="Forest" width="600" height="400"> <div class="desc">2</div> </body></html>

Responsive Images <!DOCTYPE html><html><head> <style> img { max-width: 100%; height: auto;}</style></head> <body> <h2>Responsive Images</h2> <p>Responsive images will automatically adjust to fit the size of the screen.</p> <p>Resize the browser window to see the effect:</p> <img src="img/trolltunga.jpg" alt="Norway" width=“1000" height="300"> </body> </html>

Responsive Images

Image text <!DOCTYPE html><html><head> <style> .container { position: relative;text-align: center;} .center { position: absolute; font-size: 18px; left: 0%; top: 50%; width: 100%;} .topleft { position: absolute; font-size: 18px; top: 8px; left: 16px;} .topright { position: absolute; font-size: 18px; top: 8px; right: 16px;} .bottomleft { position: absolute; font-size: 18px; bottom: 8px; left: 16px;} .bottomright { position: absolute; font-size: 18px; bottom: 8px; right: 16px;} img { width: 100%; height: auto; opacity: 0.3;} </style></head><body><h2>Image Text</h2> <p>Add some text to an image in the top left corner:</p> <div class="container"> <img src="img/trolltunga.jpg" alt="Norway" width="1000" height="300"> <div class="topleft">Top Left</div> <div class="topright">Top right</div> <div class="bottomleft">Bottom Left</div> <div class="bottomright">Bottom Right</div> <div class="center">CENTER</div> </div></body></html>

Image text

Responsive Image Gallery
<!DOCTYPE html><html><head><style> div.img { border: 1px solid #ccc;} div.img:hover { border: 1px solid #777;} div.img img { width: 100%; height: auto;} div.desc { padding: 15px; text-align: center;} * { box-sizing: border-box;} .responsive { padding: 0 6px; float: left; width: only screen and (max-width: 700px){ .responsive { width: %; margin:6px 0; only screen and (max-width: 500px){ .responsive { width: 100%; }} </style></head> <body> <h2 style="text-align:center">Responsive Image Gallery</h2> <div class="responsive"> <div class="img"><a target="_blank" href="img/img_fjords.jpg"> <img src="img/img_fjords.jpg" alt="Trolltunga Norway"> </a> <div class="desc">Add a description of the image here</div> </div>

Responsive Image Gallery

การกำหนดระยะขอบและระยะห่างจากขอบ
Margin และ Padding

Width Height Border Margin Padding Box Model Margin-- ระยะขอบ Padding -- ระยะห่างจากเส้น(Border) กำหนดได้หลาย Selectors เช่น หน้าเว็บ (body) เลเยอร์ (div) หรือ blockquote เป็นต้น

Property Description Values margin-top กำหนดระยะห่างระหว่างขอบของวัตถุด้านบน กับวัตถุอื่นๆ auto length เช่น 5px, 5pt,5cm margin-bottom กำหนดระยะห่างระหว่างขอบของวัตถุด้านล่าง กับวัตถุอื่นๆ margin-left กำหนดระยะห่างระหว่างขอบของวัตถุด้านซ้าย กับวัตถุอื่นๆ margin-right กำหนดระยะห่างระหว่างขอบของวัตถุด้านขวา กับวัตถุอื่นๆ margin กำหนดระยะห่างระหว่างขอบของวัตถุที่ต้องการ ทั้ง 4 ด้าน กับวัตถุอื่น ๆ padding-top กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นบน กับ ข้อความที่อยู่ในกรอบ padding-bottom กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นล่าง กับ ข้อความที่อยู่ในกรอบ padding-left กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นซ้าย กับ ข้อความที่อยู่ในกรอบ padding-right กำหนดระยะห่างระหว่างขอบของวัตถุด้านในเส้นขวา กับ ข้อความที่อยู่ในกรอบ padding กำหนดระยะห่างระหว่างขอบของวัตถุด้านใน กับ ข้อความที่อยู่ในกรอบ (ไม่เกี่ยวข้องกับวัตถุด้านนอก)

ตัวอย่างการกำหนดระยะขอบและระยะห่างจากขอบ
<html><head> <style type = "text/CSS"> body {margin-left: 10%; margin-right: 10%; } div {margin-right: 50; margin-left: 50; padding-right: 25; padding-left: 25; padding-top: 25; padding-bottom: 25; border:2px solid #009999; } </style></head>

ตัวอย่างการกำหนดระยะขอบและระยะห่างจากขอบ(ต่อ)
<body><h1>อินเทอร์เน็ต</h1> การดำเนินชีวิตของมนุษย์ในยุคปัจจุบัน หลีกเลี่ยงเทคโนโลยีที่ล้ำนำสมัยไม่ได้อย่าง เทคโนโลยีเครือข่ายอินเทอร์เน็ต ที่ทำให้วิธีการติดต่อสื่อสารของมนุษย์เปลี่ยนไปจากเดิม จากที่เขียนจดหมายส่งถึงกัน มาเป็นการส่งจดหมายอิเล็กทรอนิกส์ และการสร้างสังคมที่มีไว้สำหรับแลกเปลี่ยนข่าวสารระหว่างเพื่อนฝูงและคนที่รู้จักกันที่เรียกว่าสังคมออนไลน์ ทำให้สามารถติดต่อสื่อสารกันได้อย่างรวดเร็ว สามารถแบ่งปันข้อมูลกันได้อย่างแพร่หลายและไม่มีขีดจำกัดทั้งทางด้านเวลา สถานที่ และปริมาณข้อมูลที่ต้องการแบ่งปัน ทำให้ชีวิตมนุษย์มีความสะดวกสบายมากขึ้น ซึ่งเป็นช่องทางที่สามารถทำดำเนินงานในกิจกรรมต่างๆ ได้อย่างมากมาย <div><h1>ดังนั้นจึงจำเป็นอย่างยิ่ง</h1>ที่นักศึกษาจะต้องเรียนรู้และเข้าใจหลักการทำงานของเครือข่ายอินเทอร์เน็ต และเรียนรู้วิธีการพัฒนาโปรแกรมบนเครือข่ายอินเทอร์เน็ต เพื่อจะสามารถสร้างและพัฒนาระบบงานที่สามารถทำงานบนเครือข่ายอินเทอร์เน็ตได้ ในบทนี้จะเรียนรู้เกี่ยวกับประวัติและความเป็นมาของเครือข่ายอินเทอร์เน็ต ความรู้เบื้องต้นเกี่ยวกับเครือข่ายอินเทอร์เน็ต มาตรฐานเว็บและW3C ภาษาที่ใช้ในการพัฒนาเว็บไซต์ และลักษณะการทำงานของแอพพลิเคชั่นบนเครือข่ายอินเทอร็เน็ต</div> </body></html>

ตัวอย่างการกำหนดระยะขอบและระยะห่างจากขอบ(ต่อ)
margin-right: 10% margin-left: 10% padding-top: 25 margin-right: 50 margin-left: 50 padding-left: 25 padding-right: 25 padding-bottom: 25

Border สามารถกำหนดลักษณะเส้นกรอบของ Element ต่างๆ ได้ เช่น <p>, <div> เป็นต้น

การจัดการเส้นขอบ (Border)
Property Description Values border-width ใช้กำหนดขนาดของกรอบของวัตถุทั้ง 4 ด้าน thin medium thick length เช่น 5px, 5pt border-style ใช้การกำหนดลักษณะของกรอบของวัตถุทั้ง 4 ด้าน none hidden dotted dashed solid double groove ridge inset outset

Property Description Values border-color ใช้การกำหนดสีกรอบของวัตถุทั้ง 4 ด้าน *ต้องกำหนด style ก่อน color border สามารถกำหนด property ให้กับ border ได้ในคำสั่งประกาศเดียว border-width border-style border-color border-top-width border-top-style border-top-color border-top ใช้กำหนดคุณสมบัติให้กับกรอบด้านบน border-bottom-width border-bottom-style border-bottom-color border-bottom ใช้กำหนดคุณสมบัติให้กับกรอบด้านล่าง

Property Description Values border-left-width border-left-style border-left-color border-left ใช้กำหนดคุณสมบัติให้กับกรอบด้านซ้าย border-right-width bordr-right-style border-right-color border-righte ใช้กำหนดคุณสมบัติให้กับกรอบด้านขวา

ตัวอย่างการจัดการเส้นขอบ (Border)
<html><head> <style type = "text/CSS"> .box1{ width:80%;border:15px groove #73AD21;padding:10px;} </style> </head> <body> <div class="box1"> การดำเนินชีวิตของมนุษย์ในยุคปัจจุบัน หลีกเลี่ยงเทคโนโลยีที่ล้ำนำสมัยไม่ได้อย่าง เทคโนโลยีเครือข่ายอินเทอร์เน็ต ที่ทำให้วิธีการติดต่อสื่อสารของมนุษย์เปลี่ยนไปจากเดิม จากที่เขียนจดหมายส่งถึงกัน มาเป็นการส่งจดหมายอิเล็กทรอนิกส์ และการสร้างสังคมที่มีไว้สำหรับแลกเปลี่ยนข่าวสารระหว่างเพื่อนฝูงและคนที่รู้จักกันที่เรียกว่าสังคมออนไลน์ ทำให้สามารถติดต่อสื่อสารกันได้อย่างรวดเร็ว สามารถแบ่งปันข้อมูลกันได้อย่างแพร่หลายและไม่มีขีดจำกัดทั้งทางด้านเวลา สถานที่ และปริมาณข้อมูลที่ต้องการแบ่งปัน ทำให้ชีวิตมนุษย์มีความสะดวกสบายมากขึ้น ซึ่งเป็นช่องทางที่สามารถทำดำเนินงานในกิจกรรมต่างๆ ได้อย่างมากมาย </div></body></html>

ตัวอย่างการจัดการเส้นขอบ (Border)

CSS กับการใช้งาน Form

Property CSS กับการใช้งาน Form
Description Values Border กำหนดขนาดเส้นขอบ รูปแบบเส้นขอบ สีเส้นขอบ border: 2px solid red; Border-style รูปแบบของเส้นขอบ Solid , Dotted , Dashed Border-width ความกว้างของเส้นขอบ border-radius กำหนดความโค้งมนของเส้นขอบ Width ความกว้างของ Control ใน Form Height ความสูงของ Control ใน Form padding ระยะห่างข้อความกับขอบของ Control ใน form background-color สีพื้นของ Control background-image กำหนดรูปภาพพื้นหลัง Color สีตัวอักษรใน Control

CSS กับการใช้งาน Form ตัวอย่างเช่น
<INPUT TYPE="text" style="width:100px ; background-color:yellow ; border-style : solid"> <SELECT style="width:100px ; background-color:yellow ; border-style : solid"> </SELECT><BR><BR> <INPUT TYPE="submit" VALUE="send" style="width:100px ; background-color:yellow ; border-style : dotted">

CSS กับการใช้งาน Form ผลลัพธ์ที่ได้คือ
ได้กล่องข้อความพื้นหลังสีเหลือง และมีเส้นขอบแบบ solid กว้าง 100 pixel ได้ List Box ที่มีพื้นหลังสีเหลือง และมีเส้นขอบแบบ solid กว้าง 100 pixel ได้ปุ่ม Submit ที่มีพื้นหลังสีเหลือง และมีเส้นขอบแบบ จุด กว้าง 100 pixel

ตัวอย่างการใช้CSS กับการสร้างForm (1)
<!DOCTYPE html><html><style> input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;} input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;} input[type=submit]:hover { background-color: #45a049;} div { border-radius: 5px; background-color: #f2f2f2; padding: 40px;} </style>

ตัวอย่างการใช้CSS กับการสร้างForm (2)
<body> <h3>Using CSS to style a HTML Form</h3> <div> <form action="action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname"> <label for="lname">Last Name</label> <input type="text" id="lname" name="lastname"> <label for="country">State</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form> </div> </body></html>

ตัวอย่างการใช้CSS กับการสร้างForm

CSS กับการกำหนดการโต้ตอบ ในForm
<!DOCTYPE html><html><head><style> input[type=text] { width: 130px; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('img/searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; -webkit-transition: width 0.4s ease-in-out; transition: width 0.4s ease-in-out;} input[type=text]:focus { width: 100%;} </style> </head> <body><p>Animated search input:</p> <form> <input type="text" name="search" placeholder="Search.."> </form> </body> </html>

CSS กับการกำหนดการโต้ตอบ ในForm

การเขียน CSS ควบคุมตัวอักษร (Font)

Property CSS ควบคุมตัวอักษร (Font)
Description Values font-family ใช้กำหนดชนิด font ที่ต้องการจะให้แสดงผล โดยที่ font นั้นจะต้องมีอยู่ในเครื่องของผู้ใช้งานด้วย เช่น Arial, Helvetica, sans-serif font-size ใช้กำหนดขนาดของตัวอักษร ที่จะให้แสดงผล /td> xx-small x-small small medium large x-large xx-large smaller larger 18px 70% 150%

Description Values font-style ใช้กำหนดรูปแบบของตัวอักษรในลักษณะต่างๆ normal italic oblique เอียง 45 องศา font-variant ใช้แปลงตัวอักษรที่เป็นตัวพิมพ์เล็กให้เป็นพิมพ์ใหญ่ โดยที่ขนาดตัวอักษรยังคงเท่าตัวพิมพ์เล็ก normal Small-Caps font-weight ใช้กำหนดความหนาของตัวอักษร normal bold bolder lighter

Description Values color ใช้กำหนดสีให้ตัวอักษร red #000099 font สามารถกำหนด property ให้กับ font ได้ในคำสั่งประกาศเดียว font-style font-variant font-weight font-size font-family

ตัวอย่างการใช้งาน <!DOCTYPE html><html><head><style> body{ font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:150%;color:blue;font-weight:600; font-style:oblique;} .style1{font-variant:Small-Caps; font-style:normal;color:deeppink;} </style></head> <body> Hello world!! <div class="style1">Hello world!!</div> </body> </html>

การเขียน CSSจัดการเกี่ยวกับหัวข้อย่อย (List)

Property CSS จัดการเกี่ยวกับหัวข้อย่อย (List)
Description Values list-style-type ใช้กำหนดลักษณะที่ใช้นำหน้าแต่ละรายการย่อย none disc circle square decimal decimal-leading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha

Property CSS จัดการเกี่ยวกับหัวข้อย่อย (List)
Description Values list-style-position ใช้การกำหนดลักษณะการปัดขึ้นบรรทัดใหม่ของข้อความ กรณีที่มีความยาวเกิน 1 บรรทัด * ถ้าไม่กำหนดจะเป็นแบบ outside inside outside จัดให้ตรงแนวกับสัญลักษณ์ จัดให้ตรงแนวกับข้อความแถวแรก list-style-image ใช้การกำหนดรูปภาพเพื่อนำมาเป็นสัญลักษณ์รายการย่อย url ของรูปภาพ list-style สามารถกำหนด property ให้กับ list ได้ในคำสั่งประกาศเดียว list-style-type list-style-position list-style-image

ตัวอย่าง CSS จัดการเกี่ยวกับหัวข้อย่อย (List)
<!DOCTYPE html><html><head> <style> ul.a { list-style-type: circle;} ul.b { list-style-type: square;} ol.c { list-style-type: upper-roman;} ol.d { list-style-type: lower-alpha;} </style> </head> <body> <p>Example of unordered lists:</p> <ul class="a"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ul> <ul class="b"> <p>Example of ordered lists:</p> <ol class="c"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li></ol> <ol class="d"> </body></html>

ตัวอย่าง CSS จัดการเกี่ยวกับหัวข้อย่อย (List)

การสร้าง Navigation Bar จาก List
<html><head><style> h2{color:green; }</style></head> <body> <ul><li> Home</li><li>My town</li><li>Links</li><li>Sitemap</li></ul> <h2>XML คืออะไร</h2> เนื่องจากทุกวันนี้โลกของเรามีการนำเทคโนโลยีสารสนเทศเข้ามาใช้ในชีวิตประจำวันมากขึ้น และได้เข้ามาเป็นส่วนหนึ่งของการทำงานที่เห็นได้ชัดคือ เทคโนโลยีบนอินเทอร์เน็ต ไม่ว่าจะเป็นการเข้าไปเยี่ยมชมเว็บไซต์ต่างๆ หรือการส่งจดหมายอิเล็คโทรนิกส์ที่เรียกว่า ซึ่งกำลังเป็นมาตรฐานของการติดต่อสื่อสารสำหรับอนาคต ทำให้ต้องมีการคิดเพื่อพัฒนาให้มีความก้าวหน้ามากขึ้น การเขียนเว็บไซต์ในปัจจุบันนี้ โดยปกติแล้วสิ่งที่จะใช้สร้างเว็บได้คือ ภาษา HTML ที่เรารู้จักกันดีเท่านั้น แต่ว่าวันนี้โลกได้มีการพัฒนาเทคโนโลยีใหม่ที่ใช้สำหรับการเขียนเว็บ นั่นคือ XML ซึ่งเป็นสิ่งที่หลายผลิตภัณฑ์ให้การสนับสนุน </body></html>

การสร้าง Navigation Bar จาก List

ทำการย้ายลิสต์รายการ (เมนู) ลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมา ทางด้านขวา CSS Property ที่ใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู) <html> <style> body { font-size: 14pt; padding-left: 12em; } h2 {color: green; } ul.navibar { padding: 0;margin: 0; position: absolute; top: 2em;left: 1em; width: 9em;} </style> <body> <ul class="navibar"><li> Home</li><li>My town</li><li>Links</li><li>Sitemap</li></ul>  <h2>XML คืออะไร</h2> เนื่องจากทุกวันนี้โลกของเรามีการนำเทคโนโลยีสารสนเทศเข้ามาใช้ในชีวิตประจำวันมากขึ้น และได้เข้ามาเป็นส่วนหนึ่งของการทำงานที่เห็นได้ชัดคือ เทคโนโลยีบนอินเทอร์เน็ต ไม่ว่าจะเป็นการเข้าไปเยี่ยมชมเว็บไซต์ต่างๆ หรือการส่งจดหมายอิเล็คโทรนิกส์ที่เรียกว่า ซึ่งกำลังเป็นมาตรฐานของการติดต่อสื่อสารสำหรับอนาคต ทำให้ต้องมีการคิดเพื่อพัฒนาให้มีความก้าวหน้ามากขึ้น การเขียนเว็บไซต์ในปัจจุบันนี้ โดยปกติแล้วสิ่งที่จะใช้สร้างเว็บได้คือ ภาษา HTML ที่เรารู้จักกันดีเท่านั้น แต่ว่าวันนี้โลกได้มีการพัฒนาเทคโนโลยีใหม่ที่ใช้สำหรับการเขียนเว็บ นั่นคือ XML ซึ่งเป็นสิ่งที่หลายผลิตภัณฑ์ให้การสนับสนุน </body></html>

ทำการย้ายลิสต์รายการ (เมนู) ลงมาอยู่ด้านซ้ายและย้ายข้อความที่เหลือทั้งหมดมา ทางด้านขวา CSS Property ที่ใช้คือ 'padding-left' (สำหรับย้ายข้อความในส่วน body) และ 'position' 'left' และ 'top' (เพื่อย้ายเมนู)

กำหนด CSS แสดงผล UL และ li
<html><style> body { font-size: 14pt; padding-left: 12em; } h2 {color: green; } ul.navibar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em;left: 1em;width: 9em;} ul.navibar li{ text-decoration: none; background-color: #FFCC99; margin: 0.5em 0em; padding: 0.3em; border-left: 1em solid black ;border-right: 1em solid black ; text-align: center; } ul.navibar li a{text-decoration: none;} a:hover{ color: #FF3300; background-color:#FFFF33; display: block; padding: 0em 0em; } a:visited{color:#660000;} </style>

กำหนด CSS แสดงผล UL และ li
<body> <ul class="navibar"> <li> <a>Home</a></li> <li><a>My town</a></li> <li><a>Links</a></li> <li><a>Sitemap</a></li> </ul>  <h2>XML คืออะไร</h2> เนื่องจากทุกวันนี้โลกของเรามีการนำเทคโนโลยีสารสนเทศเข้ามาใช้ในชีวิตประจำวันมากขึ้น และได้เข้ามาเป็นส่วนหนึ่งของการทำงานที่เห็นได้ชัดคือ เทคโนโลยีบนอินเทอร์เน็ต ไม่ว่าจะเป็นการเข้าไปเยี่ยมชมเว็บไซต์ต่างๆ หรือการส่งจดหมายอิเล็คโทรนิกส์ที่เรียกว่า ซึ่งกำลังเป็นมาตรฐานของการติดต่อสื่อสารสำหรับอนาคต ทำให้ต้องมีการคิดเพื่อพัฒนาให้มีความก้าวหน้ามากขึ้น การเขียนเว็บไซต์ในปัจจุบันนี้ โดยปกติแล้วสิ่งที่จะใช้สร้างเว็บได้คือ ภาษา HTML ที่เรารู้จักกันดีเท่านั้น แต่ว่าวันนี้โลกได้มีการพัฒนาเทคโนโลยีใหม่ที่ใช้สำหรับการเขียนเว็บ นั่นคือ XML ซึ่งเป็นสิ่งที่หลายผลิตภัณฑ์ให้การสนับสนุน </body></html>

ผลลัพธ์การสร้าง Navigation Bar จาก List

ตัวอย่างที่ 8 การสร้างเมนูด้านบนเป็นแนวนอน ด้วย CSS

ตัวอย่างที่ 8 การสร้างเมนูด้านบนเป็นแนวนอน ด้วย CSS
<style> body { font-size: 14pt; padding-left: 1em; } h2 {color: green; } ul.navibar { list-style-type: none; padding:10px; margin: 0; } ul.navibar li{ text-decoration: none; background-color: #FFCC99; margin: 0.5em 0em;padding: 0.3em; border-left: 1em solid black ;border-right: 1em solid black ; text-align: center; display: inline; margin:10px; } ul.navibar li a{text-decoration: none;} a:hover{ color: #FF3300; background-color:#FFFF33; display: block; padding: 0em 0em; } a:visited{color:#660000;} </style>

การเขียน CSSจัดการเกี่ยวกับ Table

Property CSS Table Property Description Values table-layout
table-layout ใช้กำหนดความกว้างของตารางและคอลัมน์ automatic fixed Default กว้างตามที่กำหนด caption-side ใช้กำหนดตำแหน่งของชื่อตาราง top bottom left right Default empty-cells ใช้กำหนดว่าจะแสดง/ไม่แสดง เส้นขอบ เมื่อ cell นั้นไม่มีข้อความ (empty) hide show border-spacing ใช้กำหนดระยะระหว่างตาราง และขอบ แนวนอน และแนวตั้ง length length เช่น 2px 5px border-collapse ใช้กำหนดลักษณะเส้นขอบ separate collapse Default แยกเป็น 2 เส้น เป็นเส้นเดียว

ตัวอย่างการใช้งาน CSS จัดการ Table
<!DOCTYPE html><html><head> <style> table { border-collapse: collapse;width: 100%;} th, td {text-align: left; padding: 8px;} tr:nth-child(even){background-color: #f2f2f2} th { background-color: #4CAF50; color: white;} </style></head><body> <h2>Colored Table Header</h2> <div style="overflow-x:auto;"> <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Savings</th> </tr> <tr> <td>Peter</td> <td>Griffin</td> <td>$100</td> </tr> <tr> <td>Lois</td> <td>Griffin</td> <td>$150</td> </tr> <tr> <td>Joe</td> <td>Swanson</td> <td>$300</td> </tr> <tr> <td>Cleveland</td> <td>Brown</td> <td>$250</td></tr> </table></div></body></html> Responsive Table

ตัวอย่างการใช้งาน CSS จัดการ Table
Responsive Table

CSS CASCADING STYLE SHEET.

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "CSS CASCADING STYLE SHEET."— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ

เข้าสู่ระบบ

ลงทะเบียนผ่านเครือข่ายสังคม:

CSS CASCADING STYLE SHEET.

งานนำเสนอที่คล้ายกัน

งานนำเสนอเรื่อง: "CSS CASCADING STYLE SHEET."— ใบสำเนางานนำเสนอ:

งานนำเสนอที่คล้ายกัน

เรื่องโครงการ

การติดต่อกลับ