ข้อใดคือ css สำหรับสร้างเส้นขอบ

3.5 เส้นคั่นในแนวนอน

สารบัญ Show

หน้าแรก
เกร็ดความรู้
CSS คืออะไร มีประโยชน์ อย่างไร
สอน CSS ตอนที่ 1 การเขียน CSS เบื้องต้น
CSS คืออะไร?
โครงสร้างคำสั่ง
หน่วยที่ใช้วัดค่าต่างๆ ใน Style Sheet
วิธีใช้งาน Style Sheet
การเขียนคำสั่ง Style Sheet

ในการจัดรูปแบบเอกสาร นั้น เรายังสามารถนำเส้นมาช่วยตกแต่งเอกสารได้โยกำหนดให้เป็นเส้นคั่นในหน้าเอกสาร HTML เส้นที่จะใช้คือ เส้นขีดคั่นแนวนอน (Horizontal rule) ซึ่งอาจใช้เป็นเส้นแบ่งเนื้อหาระหว่างบท หรือเป็นเส้นขีดคั่นเพื่อความสวยงามและเป็นระเบียบของเนื้อหา ได้

คำสั่งที่ใช้กำหนดเส้นคั่น จะเป็นคำสั่งที่ไม่ต้องมีคำสั่งปิด (Single Tag) คือคำสั่ง <hr>โดยคำสั่ง <hr> จะมีคุณสมบัติของคำสั่ง (Attribute) หลายตัว ดังนี้

      width       เป็นการกำหนดความยาวของเส้น มีหน่วยเป็น Pixel หรือ % ก็ได้
      align        เป็น การจัดวางตำแหน่งของเส้น
      size          เป็นการกำหนดขนาดความหนาของเส้นกำหนดเป็น pixel
      noshade ไม่ต้องแสดงเป็นแบบ 3 มิติ
      color        เป็นการระบุสีของเส้น

ตัวอย่าง

      <hr width="60 %">
      <hr width="80">
      <hr width="n" align="left/right/center" size="ขนาด (n)" noshade color="สี">ทดสอบการใส่เส้นคั่นแนวนอน

หมายเหตุ ใน tag คำสั่ง ไม่ต้องใส่ เครื่องหมาย "...." ก็ได้

หน้าแรก
เกร็ดความรู้
CSS คืออะไร มีประโยชน์ อย่างไร

CSS คืออะไร

CSS คือ ภาษาที่ใช้สำหรับตกแต่งเอกสาร HTML/XHTML ให้มีหน้าตา สีสัน ระยะห่าง พื้นหลัง เส้นขอบและอื่นๆ ตามที่ต้องการ CSS ย่อมาจาก Cascading Style Sheets มีลักษณะเป็นภาษาที่มีรูปแบบในการเขียน Syntax แบบเฉพาะและได้ถูกกำหนดมาตรฐานโดย W3C เป็นภาษาหนึ่งในการตกแต่งเว็บไซต์ ได้รับความนิยมอย่างแพร่หลาย

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

CSS มีประโยชน์อย่างหลากหลาย ซึ่งได้แก่

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

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

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

4.ช่วยในการกำหนดการแสดงผลในรูปแบบที่มีความเหมาะกับสื่อต่างๆ ได้เป็นอย่างดี

5.ทำให้เว็บไซต์มีความเป็นมาตรฐานมากขึ้นและมีความทันสมัย สามารถรองรับการใช้งานในอนาคตได้ดี

ขอบคุณแหล่งที่มา: www.SoGoodWeb.com

วิดีโอ YouTube

สอน CSS ตอนที่ 1 การเขียน CSS เบื้องต้น

CSS คืออะไร?

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

ประโยชน์ของ 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

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

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

</body>
</html>

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

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

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

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

</body>
</html>

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

คำสั่งของ 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 <h2>,<h2> และ <h3> เป็นสีแดง ชนิดตัวอักษรเป็น sans-serif

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

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

Comment

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

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

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

จาก syntax ของคำสั่ง CSS ค่า value ของ property บางค่าจะต้องมีการระบุหน่วยด้วย หน่วยที่ใช้งานใน CSS มีอะไรบ้าง มาดูกันค่ะ

หน่วยแบบ Relative Length (กำหนดแบบอัตราส่วน)

px (pixels, สัมพันธ์กับค่าความละเอียดของหน้าจอ) เช่น 1px, 4px
em (emphasize, ความสูงของตัวอักษร) เป็นขนาดจำนวนเท่าของขนาด font ที่กำหนดให้ body
ถ้า font ที่ body กำหนดเป็น 10px
h2{fon-size:1.5em} h2 จะมีขนาดเป็น 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

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

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

Example

<html>
<body>
<h2 style="color:red;font-family:Arial">วิธีดูแลรักษาสุขภาพ</h2>
<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">
<!-- 
   h2{color:red; font-family:Arial }
   p{color:black; font-family:Arial; font-weight:bold }
--> 
</style>
</head>

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

<h2>วิธีกินผลไม้ที่ถูกต้อง</h2>
<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 ดังนี้

h2{ 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> 
  <h2>วิธีดูแลรักษาสุขภาพ</h2>
  <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> 
  <h2>วิธีกินผลไม้ที่ถูกต้อง</h2>
  <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

Selector ที่เป็น HTML Tag

Example

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

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

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

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

ข้อใดคือ css สำหรับสร้างเส้นขอบ

หน้าแรก

เกร็ดความรู้

CSS คืออะไร มีประโยชน์ อย่างไร

วิดีโอ YouTube

สอน CSS ตอนที่ 1 การเขียน CSS เบื้องต้น

CSS คืออะไร?

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

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

Comment

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

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

Cascading Order

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

กระทู้ที่เกี่ยวข้อง

การโฆษณา

ข่าวล่าสุด

Pirelli scorpion verde ดี ไหม

Ssd notebook ยี่ห้อ ไหน ดี 2023

ทา ทา ซีนอน ดี ไหม

กรมแรงงานปทุมธานี

ชั้น เก็บ ของ ติด ผนัง

อิ นิ เชีย ล ดี หนัง

ตู้ ห้อง ครัว ติด ผนัง

โรงพยาบาลลาดกระบัง เส้นทาง

พาต้า ดี ดี ปิ่น เกล้า

ซื้อ หุ้น อะไร ดี วัน นี้

การโฆษณา

ผู้มีอำนาจ

การโฆษณา

เกี่ยวกับ

ถูกกฎหมาย

ช่วย

ทางสังคม