แสดงบทความที่มีป้ายกำกับ CSS แสดงบทความทั้งหมด

วันจันทร์ที่ 3 ตุลาคม พ.ศ. 2559

Contextual selectors

การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้น
Example

<html>
<head>
<style type="text/css">
h1 { color: blue; background-color:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body> <h1>วิธีรักษาสุขภาพ</h1>
<h1>วิธีลดน้ำหนัก</h1>
<h1><em>วิธีรักษาสุขภาพ</em></h1>
<h1><u>วิธีรักษาสุขภาพ</u></h1>
</body>
</html>

Output
ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่

วิธีรักษาสุขภาพ

วิธีลดน้ำหนัก

วิธีรักษาสุขภาพ

อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectors

Example

<html>
<head>
<style type="text/css">
/*ให้ img ทั่วไป ขอบสีเทา หนา2*/
img {
border:solid;
border-width:2px;
border-color:#999999;
}
/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำหนด HTML tag เฉพาะ*/
.borderimage {
border:solid;
border-width:5px;
border-color:red;
}

/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดง หนา5*/
#imgspecial_box img {
border:solid;
border-width:5px;
border-color:red;
}

</style>
</head>
<body>
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<br><br>
แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<img src="../images/star_icons.gif" class="borderimage" />
<br>
<br>
แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id="imgspecial_box">
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
<img src="../images/star_icons.gif" />
</div>
</body>
</html>

มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างที่ใช้ CSS มากเกินไป

Example

<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
a.boldlink { color:blue; font-weight:bold; }
</style>
</head>
<body>
<a href="http://www.enjoyday.net/webtutorial/html/index.html" class="boldlink">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html" class="boldlink">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html" class="boldlink">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html" class="boldlink">JavaScript</a>
</body>
</html>

แก้ไขใหม่เขียนแบบ Contextual selectors จะดีกว่าค่ะ

<html>
<head>
<title>ex_css_chapter07_3</title>
<style type="text/css">
#boldlink_box a { color:blue; font-weight:bold; }
</style>
</head>
<body>
<div id="boldlink_box">
<a href="http://www.enjoyday.net/webtutorial/html/index.html">HTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/css/index.html">CSS</a><br />
<a href="http://www.enjoyday.net/webtutorial/xhtml/index.html">XHTML</a><br />
<a href="http://www.enjoyday.net/webtutorial/javascript/index.html">JavaScript</a> </div>
</body>
</html>

Output

HTML
CSS
XHTML
JavaScript

การเขียนคำสั่ง Style Sheet

Selector ที่เป็น HTML Tag

Example

<html>
<body>
<head>
<style type="text/css">
<!-- 
   h1{color:red; font-family:Arial }
   p{color:black; font-family:Arial }
--> </style>
</head>

<body> 
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์  หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>

<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย 
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> 
</body>
</html>

ตัวอย่างนี้เห็นกันมาหลายรอบแล้วนะคะ เป็นการกำหนด style ให้กับ HTML Tag <h1> และ <p> หมายความว่าข้อความภายใน <h1> ทุกอันในหน้าเว็บเพจนี้ให้เป็นสีแดง และข้อความใน <p> ทุกอันให้เป็นสีดำ

มาดู selector แบบอื่นๆ กันบ้าง

Selector ที่เป็น Class attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน class attribute โดยเราสามารถตั้งชื่อ class ได้เอง

class ใช้เมื่อต้องการใช้แสดงผลรูปแบบนั้นซ้ำหลายๆ ครั้ง หรือต้องการใช้กับ element หลายๆ อัน การประกาศใช้้เครื่องหมาย "." นำหน้าชื่อ class

Example

<html>
<head>
<style type="text/css">
<!--
  .topic {color:red; 
 font-family:Arial; 
 font-weight:bold; 
 text-align:center 
  }        
  .content {color:black; 
 font-family:Arial; 
  } 
-->
</style>
</head>

<!-- การเรียกใช้งาน --> 
<body> 
  <div class="topic">บทความ</div>
  <p class="topic">วิธีดูแลรักษาสุขภาพ</p>
  <p class="content">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>

  <p class="topic">วิธีกินผลไม้ที่ถูกต้อง</p>
  <p class="content">ให้กินผลไม้แค่ทีละอย่าง เช่น จะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ
เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร 
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>

  <p>หันมาใส่ใจสุขภาพกันเถอะ</p> 
</body>

</html>

จากตัวอย่างสังเกตได้ว่า class topic ถูกเรียกใช้หลายครั้งใน <p> และ ถูกใช้้ในหลาย element ได้ คือ <p> และ <div>

แต่ถ้าต้องการกำหนดให้ class topic ใช้งานเฉพาะกับ <p> เท่านั้น ทำได้โดยใส่ "p." นำหน้าชื่อ class
จะมีผลทำให้ข้อความใน <div class="topic">บทความ</div> ไม่สามารถแสดงผลตามรูปแบบที่กำหนดใน class topic ได้

p.topic{color:red; font-family:Arial; font-weight:bold; text-align:center }

กรณีที่ต้องการให้แสดงผลตามรูปแบบที่กำหนดใน 2 class ก็สามารถทำได้

Example

<html>
<head>
<style type="text/css">
  p.center {text-align:center}
  p.bold{ font-weight:bold}
</style>
</head>

<body>
  <p class="center bold">ข้อความในพารากราฟนี้จะจัดวางกึ่งกลาง และเป็นตัวหนา</p>
</body>
</html>

Selector ที่เป็น ID attribute
เป็นการประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติแบบเฉพาะเจาะจง ให้กับ HTML element ผ่าน ID attribute เหมือนกับ Class แต่ต่างกันที่ ID จะใช้กับ element ที่มีเพียงอันเดียวในเอกสาร HTML การประกาศใช้ # นำหน้า ID

Example

<html>
<head>
<style type="text/css">
  p {text-align: center}
  #chapter {color:red; font-weight:bold}
  /*หรือเขียนเป็น p#chapter ก็ได้*/
</style>
</head>

<body>
  <p id="chapter">Chapter ข้อความในนี้จัดวางกึ่งกลาง และเป็นสีแดง ตัวหนา</p>
  <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
  <p>เนื้อหา ข้อความในนี้จัดวางกึ่งกลาง</p>
</body>
</html>

วิธีใช้งาน Style Sheet

1. Inline Styles
วิธีการนี้ควรใช้ในกรณีที่ต้องการกำหนด style ให้กับ element ของ HTML เีพียงอันเดียวเป็นการเฉพาะ โดยการแทรกคำสั่ง style sheet ใน HTML Tag อยู่ในคำสั่ง style="" ดังนี้

Example

<html>
<body>
<h1 style="color:red; font-family:Arial">วิธีดูแลรักษาสุขภาพ</h1>
<p style="color:black; font-family:Arial; font-weight:bold">รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

เราควรหลีกเลี่ยงการเขียน style=”" ฝังลงใน HTML Tag เพราะมันทำให้อ่านยาก และนำไปใช้ต่อไม่ได้ และเป็นการยากที่จะแก้ไข

2. Internal Style Sheet
วิธีการนี้ควรใช้ในกรณีที่มีเพียง HTML ไฟล์เดียวที่ใช้ style นี้ เมื่อประกาศคำสั่ง Style Sheet เพื่อกำหนดคุณสมบัติ ให้กับ HTML Tag ใดๆ แล้ว จะมีผลกับเอกสาร HTML ทั้งหน้า นิยมใส่ส่วนของคำสั่ง Style Sheet ไว้ระหว่าง <head>...</head>

สำหรับ Web Browser รุ่นเก่าที่ไม่สนับสนุนคำสั่ง Style Sheet หรือ Disable Style Sheet ไว้นั้น ให้ใส่ Comment ของ ภาษา HTML ไว้ด้วย เพื่อให้เว็บเบราเซอร์นั้นทราบว่าไม่ใช่คำสั่งภาษา HTML

คำสั่งที่ใช้เริ่มต้น และจบ Style Sheet มีโครงสร้างดังนี้

Example

<html>
<body>
<head>
<style type="text/css">
<!-- 
   h1{color:red; font-family:Arial }
   p{color:black; font-family:Arial; font-weight:bold }
--> 
</style>
</head>

<body> 
<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์  หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>

<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย 
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> 
</body>
</html>

3. External Style Sheet
วิธีการนี้เหมาะกับกรณีที่มีเพียง 1 style แล้วต้องการนำไปใช้กับเอกสาร HTML หลายๆ ไฟล์ โดยนำเอาคำสั่ง Style Sheet ที่อยู่ใน <style type="text/css"> ... </style> มาบันทึกเป็นไฟล์ใหม่ นามสกุล .css จากนั้นจึงทำการผนวกไฟล์ของ Style Sheet นี้ลงไปในเอกสาร HTML ทุกไฟล์ที่ต้องการใช้งาน Style Sheet ชุดนี้ ไว้ในส่วน <head>...</head> โดยใช้คำสั่ง

ตัวอย่างนี้จะสร้าง Style Sheet เก็บไว้ในไฟล์หนึ่ง แล้วให้ไฟล์เอกสาร HTML หลายๆ หน้ามาเรียกใช้
Example
ในไฟล์ mystyle.css ให้เขียน code ดังนี้

h1{ color:red; font-family:Arial }
p{ color:black; font-family:Arial; font-weight:bold }

ในไฟล์ HTML ex_css_chapter05_3.html เรียกใช้ style sheet จากภายนอก

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body> 
  <h1>วิธีดูแลรักษาสุขภาพ</h1>
  <p>รับประทานอาหารที่มีประโยชน์  หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>

ในไฟล์ HTML ex_css_chapter05_4.html เรียกใช้ style sheet จากภายนอก

<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body> 
  <h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
  <p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย 
ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p> 
</body>
</html>

การที่เราใช้งาน CSS โดยเรียกใช้จากภายนอก จะทำให้ไฟล์เวบเพจของเรามีขนาดเล็ก และการแก้ไขคำสั่ง style sheet เพียงที่เดียว จะมีผลกับเอกสารทุกหน้าได้

Cascading Order

1. กรณีที่มีการกำหนด style ด้วยชื่อ selector เดียวกันทั้งแบบ 3 แบบ Style sheet ที่จะถูกใช้คือแบบไหน

ลำดับความสำคัญ เรียงจากมากไปหาน้อย
Inline style (inside an HTML element),
Internal style sheet (inside the <head> tag)
และ External style sheet ตามลำดับ

จากลำดับความสำคัญดังกล่าว Style ที่จะถูกใช้คือแบบ Inline style

2. กรณีที่มีการเขียน style ซ้ำ selector เดิม อันที่อยู่ด้านล่าง จะถูกทำเป็นลำดับสุดท้าย

ตัวอย่าง ไฟล์ mystyle.css
p{ color:black }
p{ color:blue }
เมื่อเราเรียกใช้ <p> ใน HTML เช่น
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
จะได้ตัวอักษรใน Tag <p> เป็นสีน้ำเงิน

แต่หากเรากำหนด !important ไว้ใน value เช่น
p{color:black!important}
p{color:blue}
เมื่อเขียนแบบนี้ ใน Tag <p> จะได้ตัวอักษรสีดำ

หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet

จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน 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%

หน่วยแบบ 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

โครงสร้างคำสั่ง

คำสั่งของ CSS ประกอบด้วย selector, property และ value

selector { property:value }
selector { property1:value1; property2:value2 }

- selector สามารถเป็น HTML Tag ต่างๆ เช่น <body>, <p> หรือเป็น Class name หรือ ID ที่เราตั้งชื่อให้ก็ได้
- property คือ คุณสมบัติในการจัดรูปแบบการแสดงผล เช่น color สำหรับกำหนดสี, font-size สำหรับกำหนดขนาดตัวอักษร
- value เป็น ค่า ที่เรากำหนดให้กับ property ต่างๆ เช่น color:white, font-size:14px
ตัวอย่างคำสั่ง CSS
กำหนดให้ข้อความที่อยู่ใน Tag <p> เป็นสีดำ และวางอยู่กึ่งกลาง

/* selector ที่เป็น HTML Tag */
p {
color:#000000;
text-align:center
}

กำหนดให้ข้อความที่ class name topic เป็นสีแดง ชนิดอักษรเป็น Arial ตัวหนา และจัดวางอยู่กึ่งกลาง

/* selector ที่เป็น Class name */
.topic{
color:red;
font-family:Arial;
font-weight:bold;
text-align:center
}

กรณีที่ selector มีค่า property เหมือนกัน สามารถเขียนรวมกันได้ โดยใช้เครื่องหมาย "," คั่นระหว่าง selector
กำหนดให้ข้อความใน Tag <h1>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif

h1, h2, h3 {
color:red;
font-family:sans-serif
}

สำหรับเรื่อง property และ value จะได้ศึกษาอย่างละเอียดในหัวข้อต่อๆ ไป

Comment

ใน Style Sheet Comment จะใช้เครื่องหมาย "/*" เป็นการเปิด และ "*/" เป็นการปิด เช่น

/* นี่คือ comment กำหนดสีตัวอักษรเป็นสีดำ ขนาด14px */
body {
color:#000000;
font-size:14px
}

CSS คืออะไร

CSS คืออะไร?

CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ และถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) เช่นเดียวกับ HTML และ XHTML ใช้สำหรับตกแต่งเอกสาร HTML/ XHTML ให้มีหน้าตา สีสัน ตัวอักษร เส้นขอบ พื้นหลัง ระยะห่าง ฯลฯ อย่างที่เราต้องการ ด้วยการกำหนดคุณสมบัติให้กับ Element ต่างๆ ของ HTML เช่น <body>, <p>, <h1> เป็นต้น

ประโยชน์ของ CSS

1. การใช้ CSS ในการจัดรูปแบบการแสดงผล จะช่วยลดการใช้ภาษา HTML ในการตกแต่งเอกสารเว็บเพจ ทำให้ code ภายในเอกสาร HTML เหลือเพียงส่วนเนื้อหา ทำให้เข้าใจง่ายขึ้น การแก้ไขเอกสารทำได้ง่ายและรวดเร็ว

2. เมื่อ code ภายในเอกสาร HTML ลดลง ทำให้ขนาดไฟล์เล็กลง จึงดาวน์โหลดได้เร็ว

3. สามารถกำหนดรูปแบบการแสดงผลจากคำสั่ง style sheet ชุดเดียวกัน ให้มีผลกับเอกสาร HTML ทั้งหน้า หรือทุกหน้าได้ ทำให้เวลาแก้ไขหรือปรับปรุงทำได้ง่าย ไม่ต้องไล่ตามแก้ที่ HTML tag ต่างๆ ทั่วทั้งเอกสาร

4. สามารถควบคุมการแสดงผลให้เหมือนกัน หรือใกล้เคียงกัน ได้ในหลาย Web Browser

5. สามารถกำหนดการแสดงผลในรูปแบบที่เหมาะกับสื่อชนิดต่างๆ ไม่ว่าจะเป็นการแสดงผลบนหน้าจอ, บนกระดาษเมื่อสั่งพิมพ์, บนมือถือ หรือบน PDA โดยที่เป็นเนื้อหาเดียวกัน

6. ทำให้เป็นเว็บไซต์ที่มีมาตรฐาน ปัจจุบันการใช้ attribute ของ HTML ตกแต่งเอกสารเว็บเพจ นั้นล้าสมัยแล้ว W3C แนะนำให้เราใช้ CSS แทน ดังนั้นหากเราใช้ CSS กับเอกสาร HTML ของเรา ก็จะทำให้เข้ากับเว็บเบราเซอร์ในอนาคตได้ดี

ตัวอย่างกรณีที่จัดรูปแบบการแสดงผลด้วยภาษา HTML

<html>
<body>

<h1><font color="red" face="Arial">วิธีดูแลรักษาสุขภาพ</font></h1>
<p><font color="black" face="Arial"><b>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</b></font></p>

<h1><font color="red" face="Arial">วิธีกินผลไม้ที่ถูกต้อง</font></h1>
<p><font color="black" face="Arial"><b>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</b></font></p>

</body>
</html>

ตัวอย่างเมื่อเปลี่ยนมาใช้ คำสั่ง style sheet จัดรูปแบบการแสดงผลแทนการใช้ code ภาษา HTML ทำให้ code ภายในเอกสารอ่านเข้าใจง่าย และแก้ไขได้ง่ายขึ้น ^^

<html>
<head>
<style type="text/css">
h1{color:red; font-family:Arial; }
p{color:black; font-family:Arial; font-weight:bold }
</style>
</head>
<body>

<h1>วิธีดูแลรักษาสุขภาพ</h1>
<p>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>

<h1>วิธีกินผลไม้ที่ถูกต้อง</h1>
<p>ให้กินผลไม้แค่ทีละอย่าง เช่นจะกินมะม่วงก็มะม่วงอย่างเดียวทั้งมื้อ เพื่อให้ร่างกายจัดเตรียมการย่อยได้ง่าย ไม่สับสน นอกจากนี้ยังไม่ควรกินผลไม้ทันทีหลังอาหาร
ถ้าทานมื้อหลักแล้วควรรออย่างน้อย 20 นาที</p>

</body>
</html>

Computer2know

วันจันทร์ที่ 3 ตุลาคม พ.ศ. 2559

Contextual selectors

Contextual selectors

วิธีรักษาสุขภาพ

วิธีลดน้ำหนัก

วิธีรักษาสุขภาพ

วิธีรักษาสุขภาพ

การเขียนคำสั่ง Style Sheet

การเขียนคำสั่ง Style Sheet

วิธีใช้งาน Style Sheet

วิธีใช้งาน Style Sheet

Cascading Order

หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet

หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet

โครงสร้างคำสั่ง CSS

โครงสร้างคำสั่ง

Comment

CSS คืออะไร

CSS คืออะไร?

ประโยชน์ของ CSS

Laravel

เว็บอื่นๆครับ