สรุป CSS พื้นฐาน (ฉบับรวม)

26 มกราคม 2565 · 16 min read

cssfundamentals

Table of contents

CSS พื้นฐาน
CSS พื้นฐาน PART-1: ความหมายของ CSS และการใช้งานเบื้องต้น
CSS พื้นฐาน PART-2: Selector ของ CSS
CSS พื้นฐาน PART-3: Inline และ Block, CSS Box Model Padding และ Margin
CSS พื้นฐาน PART-4: Text,List,Link ปรับแต่งข้อความให้สวยงามด้วย CSS
CSS พื้นฐาน PART-5: Image ปรับแต่งรูปภาพ
CSS พื้นฐาน PART-6: Table ปรับแต่งตารางให้สวยงามด้วย CSS
CSS พื้นฐาน PART-7: Form ปรับแต่งฟอร์มให้สวยงามด้วย CSS

บทความเก่า — เขียนไว้ตั้งแต่ต้นปี 2022 บนเว็บเดิมของผม เอามารวมเก็บไว้ที่นี่ เนื้อหาพื้นฐานยังใช้ได้ทั้งหมด

CSS พื้นฐาน

CSS พื้นฐาน PART-1: ความหมายของ CSS และการใช้งานเบื้องต้น

Introduction

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

การเรียนรู้ CSS จะเน้นไปที่ว่า เราต้องการให้เนื้อหาของเรามีลักษณะเป็นอย่างไร เช่น หัวข้อควรมีสีฟ้าเข้ม มีพื้นหลังสีดำ รูปภาพมีความกว้างและสูง 500px

CSS คืออะไร

ย่อมาจาก Cascading Style Sheets มันเรียกกันว่า CSS
ทำหน้าที่เป็นภาษาที่กำหนดลักษณะของเว็บไซต์

หลักการทำงาน

เขียน HTML
เขียน CSS เพื่อกำหนดลักษณะของ Element
บราวเซอร์แปลงรหัสที่เราเขียนมาแสดงผล

จะมีบาง Element ที่ บราวเซอร์กำหนดค่าเริ่มต้นไว้ ซึ่งเราสามารถเขียน css เพื่อทับกฏนั้นได้

Chrome DevTools

Chrome นำเสนอตัวช่วยสำหรับการพัฒนาเว็บของเรา ซึ่งจะช่วยให้เราดู code html,css ของเว็บไซต์อื่นๆได้ด้วย เราสามารถทดลองใช้งานได้ดังนี้ครับ

เปิดหน้าเว็บที่เราต้องการ
คลิกขวาเลือก Inspect หรือ กด F12
จะปรากฏ code ในส่วนของหน้เว็บครับ โดยประกอบไปด้วย html, css
สามารถปรับแต่งตำแหน่งได้ โดยคลิกที่รูปจุดสามจุด หรือ กดที่รูปลูกศร เพื่อเลือก Element ที่ต้องการดู

First CSS

มาเริ่มต้นเขียน css ตัวแรกกันครับ โดยจะเขียนได้ เราต้องมี html ก่อน ดังนั้นจะมีขั้นตอนดังนี้ครับ

สร้างไฟล์ index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello CSS!</h1>
  </body>
</html>

เพิ่มส่วนของ css ไปดังนี้ครับ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello CSS!</h1>
  </body>
</html>

ผลลัพธ์

Rule ของ CSS

จากรูป CSS จะประกอบไปด้วย 2 ส่วนคือ

Selector : หมายถึงเป้าหมายของเราที่เราต้องการจะกำหนด ในตัวอย่างต้องการกำหนด Tag h1
Declaration : จะอยู่ภายใน {} หมายถึงส่วนที่เราจะกำหนดลักษณะต่างๆของ Selector ที่เราเลือกครับ ประกอบไปด้วย 2 ส่วน
- Property : คุณลักษณะที่ต้องการกำหนด เช่น สี ขนาดตัวอักษร ภาพพื้นหลัง ในที่นี้ color หมายถึง สีของตัวหนังสือ
- value : เป็นค่าของ Property ซึ่งจะสัมพันธ์กัน ค่าของ property จะแตกต่างกัน ในที่นี้เราต้องการกำหนด color ก็จะสามารถพิมพ์ชื่อสีลงไปได้ครับ

การใช้งาน CSS

หลังจากรู้จักกฏการเขียน css แล้ว มาดูวิธีการเรียกใช้ css กันครับ เราสามารถทำได้ 3 วิธี ดังนี้ครับ

inline เขียนที่ element โดยตรง
internal เขียนด้วยการสร้าง tag <style></style> ไว้ในส่วนของ <head> จากนั้นทำการเขียน css
external สร้างไฟล์ .css แยกออกมาจากนั้นเรียกใช้ผ่าน tag link

วิธี external เป็นที่นิยมที่สุดเพราะทำให้สามารถดูแลรักษา code ได้ง่าย และยังแยกส่วนของ html, css ออกจากกันเป็นคนละไฟล์ด้วยครับ

Inline

เขียนโดยตรงกับ Element Tag โดยใช้ property ที่ชื่อว่า style

<body>
  <h1 style="color: red">Hello CSS!</h1>
</body>

Internal

เริ่มต้นด้วยการสร้าง <style> ไว้ในส่วนของ <head> จากนั้นทำการสร้าง rule ของ css ภายใน

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello CSS!</h1>
  </body>
</html>

External

หลักการคือการสร้างไฟล์ .css แยกต่างหาก จากนั้น ทำการเข้าไฟล์เพื่อมาใช้งาน

สร้างไฟล์ styles.css

h1 {
  color: red;
}

ไฟล์ external.html ทำการนำเข้าไฟล์ stylesheet ด้วย tag <link>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Hello</h1>
  </body>
</html>

ปรับแต่ง Hello World

body {
  background-color: black;
}
h1 {
  color: white;
  text-align: center;
}
p {
  color: white;
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <h1>Hello</h1>
    <p>ยินดีต้อนรับเข้าสู่เว็บไซต์</p>
  </body>
</html>

ผลลัพธ์

CSS พื้นฐาน PART-2: Selector ของ CSS

Selector

อย่างที่เราได้เรียนรู้ไปในบทที่แล้ว การจะใช้ css เพื่อมากำหนดลักษณะให้กับหน้าเว็บ เราจำเป็นจะต้องใช้ Selector ในการเข้าถึง Element ซึ่งได้เราได้ทำไป เป็นวิธีการ Secltor เฉพาะ Tag ในบทนี้เราจะมาลองดู Selector ตัวอื่นๆที่เรามักจะใช้กันบ่อยครับ

Type selector

Select Element ตามชื่อของ Element
รูปแบบ : elementname

<h1>Hello</h1>

h1 {
  color: red;
}

Class Selector

Select Element ตาม class ซึ่งเป็น attributes
รูปแบบ : .class

<h1 class="header-red">Hello</h1>

.header-red {
  color: red;
}

ID Selector

Select Element ตาม id ซึ่งเป็น attributes
#id

<h1 id="header-first">Hello</h1>

.header-first {
  color: red;
}

Universal selector

Select Element ทั้งหมด มักใช้ในการกำหนดค่าเริ่มต้น
รูปแบบ *

<h1>Hello 1</h1>
<p>Hello 2</p>

* {
  color: blue;
}

Attribute selector

เลือกเฉพาะ elemetn ที่ attribute ตามที่กำหนด
รูปแบบ [attr] [attr=value] [attr~=value] [attr^=value] [attr$=value] [attr*=value]
- [attr] มี attribute นี้อยู่
- [attr=value] มีค่าตรงตาม value เท่านั้น ห้ามมีคำอื่นอยู่
- [attr~=value] ต้องมี value อยู่เป็นคำอยู่ (มีช่องว่าง)
- [attr*=value] ต้องมี value อยู่อย่างน้อย ไม่จำเป็นต้องมีช่องว่าง
- [attr^=value] ต้องมี value นำหน้าอยู่
- [attr$=value] ต้องมี value ต่อท้าย
จากตัวอย่างก็คือเลือกเฉพาะ input ที่มี type เป็น text เท่านั้น

<input type="text" value="TEST TEXT" /> <input type="number" value="50" />

input[type='text'] {
  color: red;
}

Grouping selectors

เลือกหลายตัวให้มี css เดียวกัน
เช่นต้องการให้ h1,h2 มีสีเดียวกันจะเขียนได้แบบนี้ครับ

<h1>Hello 1</h1>
<h2>Hello 2</h2>

h1,
h2 {
  color: blue;
}

ความหมายเหมือนกับการเขียนแบบนี้ครับ

h1 {
  color: blue;
}
h2 {
  color: blue;
}

Descendant Combinators

เลือก Element ทั้งหมดที่อยู่ภายในตัวที่กำหนด
รูปแบบ ใช้ช่องว่าง
จากตัวอย่างก็คือ ให้เลือกเฉพาะ li ที่อยู่ใน div

<div>
  <ul class="fruits">
    <li>
      <span> A1 </span>
    </li>
    <li>A2</li>
    <li>A3</li>
  </ul>
  <ul class="water">
    <li>W1</li>
    <li>W2</li>
    <li>W3</li>
  </ul>
</div>

div li {
  color: red;
}

Child Combinator

เลือก Element ทั้งหมดที่มี parent ตามที่กำหนดเท่านั้น
รูปแบบ ใช้ >
จากตัวอย่างก็คือ ให้เลือกเฉพาะ li ที่มี parent เป็น div เท่านั้น

<div>
  <ul class="fruits">
    <li>
      <span> A1 </span>
    </li>
    <li>A2</li>
    <li>A3</li>
  </ul>
  <ul class="water">
    <li>W1</li>
    <li>W2</li>
    <li>W3</li>
  </ul>
</div>
<div>
  <li>Hello</li>
</div>

div > li {
  color: red;
}

General sibling combinator

ใช้เลือก Element ที่อยู่ถัดจากกัน และอยู่ระดับเดียวกัน
ใช้ ~
จากตัวอย่างหมายถึงเลือก span ที่อยู่ถัดจาก p ทั้งหมด มีตัวมาคั่นได้

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<h2>that's all.</h2>
<span>And yet again this is a red span!</span>
<div>
  <span>TEST </span>
</div>

p ~ span {
  color: red;
}

Adjacent sibling combinator

ใช้เลือก Element ที่อยู่ถัดจากกัน
ใช้ +
จากตัวอย่างคือเลือกเฉพาะ span ที่อยู่ถัดจาก p ห้ามมีตัวมาคั่น

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a red span!</span>
<span>And this is a red span!</span>
<code>More code...</code>
<span>And this is a red span!</span>
<div>How are you?</div>
<p>Whatever it may be, keep smiling.</p>
<h1>Dream big</h1>
<h2>that's all.</h2>
<span>And yet again this is a red span!</span>
<div>
  <span>TEST </span>
</div>
<div>
  <p>TEST</p>
  <span>TEST 2 </span>
</div>

p + span {
  color: red;
}

Pseudo classes

สำหรับส่วน element ที่เป็น State เช่น เมื่อเอาเมาส์ไปวางที่ element จะให้ขึ้นอะไร
ใช้ : เพียงตัวเดียว จากนั้นเลือกสถานะที่ต้องการ
จากตัวอย่างคือเลือก button สถานะที่เป็น hover คือสถานะที่เราเอาเมาส์ไปวางไว้ตรง element

<button>Test</button>

button {
  color: black;
}
button:hover {
  color: red;
}

Pseudo elements

ใช้สร้าง element ที่ไม่มีอยู่ใน HTML
ใช้ ::
จากตัวอย่างก็คือ ที่ บรรทัดแรกของ p ให้มี color สีฟ้า

<p>Hello 1</p>
<p>Hello 2</p>

p::first-line {
  color: blue;
  text-transform: uppercase;
}

Inheritance การสืบทอดของ CSS

CSS มีความสามารถอย่างหนึ่งคือสามารถส่งต่อ ลักษณะให้กับ children ได้

<body>
  <p>Hello</p>
  <p>Hello 2</p>
  <div>
    <h1>Hello In Div</h1>
  </div>
</body>

body {
  color: red;
}

จากตัวอย่างก็จะหมายถึง element ใดก็ตามที่อยู่ใน body จะมี color เป็นสีแดง

Conflex ปัญหาการชนกันของ CSS

จากตัวอย่างด้านบนลองดูโค้ดส่วนนี้เพื่อความเข้าใจมากยิ่งขึ้นครับ

<body>
  <p>Hello</p>
  <p>Hello 2</p>
  <div>
    <h1>Hello In Div</h1>
  </div>
</body>

body {
  color: red;
  text-transform: uppercase;
}
p {
  color: blue;
}

เราจะเห็นว่า p ทุกตัวมีสีฟ้า นั้นเพราะ p ได้ทำการ overide (เขียนทับ) property กัน ลองมาดูรายละเอียดกันครับว่า css มีกฏในเรื่องนี้อย่างไรครับ

Last Rule

หาก selector เหมือนกัน (ชนิดเดียวกัน) Selector ตัวสุดท้ายจะชนะ
จากตัวอย่าง p ตัวสี blue จะชนะ

p {
  color: red;
}
p {
  clor: blue;
}

Specificity

ต่อไปเป็นกรณีที css ได้ให้ลำดับของความสำคัญแต่ละแบบไว้ครับว่า กรณีแบบใด มีความสำคัญมากกว่ากัน โดยกฏ Last Rule จะไม่มีผล

!importance;
Inline Style
ID #
Class, Attributes
Type selector

ด้านบนจะเรียงจากสำคัญมากไปหาสำคัญน้อย

แนะนำเกมสำหรับฝึก CSS Selector

https://flukeout.github.io/

อ้างอิง

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
https://www.w3schools.com/cssref/css_selectors.asp
Jon Duckett (2011), HTML and CSS: Design and Build Websites.

CSS พื้นฐาน PART-3: Inline และ Block, CSS Box Model Padding และ Margin

ประเภทของ HTML Tag / Element

ในบทของ HTML เราได้ลองใช้ Tag เราพบพฤติกรรมบางอย่างของ Tag ที่แตกต่างกัน เช่น ทำไม เราใช้ h1 ต่อกัน ตัวหนังสือจะขึ้นบรรทัดใหม่อัตโนมัติ แต่พอใช้ img ภาพ จะเรียงต่อกัน

เราสามารถแบ่งออกเป็น 2 ประเภท คือ

Block
Inline

เราลองมาดูรายละเอียดในแต่ละแบบกันครับ

Block

ลักษณะคือจะใช้พื้นที่แนวนอนทั้งหมด หากมี Element อื่นมาใช้ จะทำการขึ้นบรรทัดใหม่อัตโนมัติ (ลองนึกถึงเวลาใช้ Tag h1 )

Element ชนิดนี้ได้แก่ <div>, <section>, <article>, <nav>, <h1>-<h2>, <p>, <ul>, <li>
มี padding, margin (เราจะได้เรียนต่อไปครับ)
Block-Level Elements ทั้งหมด
- https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements

<h1>Hello</h1>
<!-- ขึ้นบรรทัดใหม่อัตโนมัติ -->
<h2>Hello</h2>

Inline

ตรงกันข้ามกับ Block จะใช้พื้นที่และแนวนอนเท่าที่เนื้อหามี, การกำหนด width, height จะไม่มีผล Element จะใช้พื้นที่แบบอัตโนมัติ

Element ชนิดนี้ได้แก่ <img>, <a>, <input>, <br>, <span>, <strong>
margin-top,margin-bottom จะไม่มีผล padding-top, padding-bottom ไม่มีผลกับ Inline
Inline Elements ทั้งหมด
- https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#changing_element_levels

<a href="#">Link 1</a>
<!-- จะเรียงต่อกัน -->
<a href="#">Link 2</a>

CSS Box Model

ใน css เมื่อเราพูดถึง box model จะเป็นการปรับแต่งลักษณะที่ wrap ใน element นั้น ลองดูภาพประกอบด้านล่างนี้ครับ

จากภาพจะเห็นว่าเราสามารถแบ่งส่วนต่างได้ดังนี้ครับ

Content ส่วนของ Element นั้นๆ
Padding พื้นที่ล้อมรอบ content
Border เส้นขอบสิ่งจะอยู่รอบ padding
Margin พื้นที่ล้อมรอบนอกตัว border

เมื่อเราเขียน css เราไม่จำเป็นต้องกำหนดทุกตัว เราสามารถเลือกได้เลยว่าจะกำหนด padding อย่างเดียว หรือจะกำหนด margin อย่างเดียว

Padding & Margin

คำสั่งของ padding, margin จะมีรูปแบบที่เหมือนกัน โดยเราเปลี่ยนแค่ keyword padding, margin เท่านั้น

.box {
  /* Apply to all four sides */
  padding: 1em;

  /* vertical | horizontal */
  padding: 5px 10px;

  /* top | horizontal | bottom */
  padding: 1px 2px 2px;

  /* top | right | bottom | left */
  padding: 5px 1px 0 2px;
}

หรือจะใช้คำสั่งโดยระบุเฉพาะตัวก็ได้ครับ

.box {
  padding-top: 1px
  padding-right: 4px
  padding-bottom: 2px
  padding-left: 3px;
}

Border

คำสั่งที่ใช้

.box {
  /* style */
  border: solid;

  /* width | style */
  border: 2px dotted;

  /* style | color */
  border: outset #f33;

  /* width | style | color */
  border: 10px solid red;
}

เรื่องที่น่าสนใจ

กรณี margin-top , margin-bottom ชนกัน

<div class="box-1">Hello 1</div>
<div class="box-2">Hello 2</div>

.box-1 {
  margin-bottom: 5px;
}

.box-2 {
  margin-top: 5px;
}

css จะป้องกันขนาด margin มากเกินไป มันจะทำยุบรวม margin ให้ครับ

อ้างอิง

CSS พื้นฐาน PART-4: Text,List,Link ปรับแต่งข้อความให้สวยงามด้วย CSS

Text

ได้แก่ Tag ที่ทำหน้าที่แสดง ข้อความทั้งหมดภายในเว็บไซต์ตัวอย่างเช่น h1 - h6, p เป็นต้น ซึ่งมีคำสั่งที่ผมมักจะใช้บ่อยๆดังนี้ครับ

p {
  font-size: 24px;
  /* กำหนดขนาด */
  font-weight: 500;
  /* กำหนดความหนาของ ตัวอักษร */
}

แนะนำ Property สำหรับ Ul List

ได้แก่ สิ่งที่เรียงเป็นรายการ เช่น ul,ol li เป็นต้น ซึ่งมีคำสั่งที่ผมมักจะใช้บ่อยๆดังนี้ครับ

ol {
  list-style-type: circle;
  /* กำหนดเป็นวงกลม */
}

ul {
  list-style-image: url("sqpurple.gif");
  /* กำหนดเป็นรูปภาพ */
}

Link

หมายถึง a tag ซึ่งทำหน้าที่นำทางเราไปยังไฟล์อื่นๆ ทั้งภายในและภายนอกเว็บไซต์ โดยในการกำหนด css เรามีเรื่องที่น่าสนใจคือ a tag มีทั้งหมด 4 state ได้

a:link - สำหรับค่าเริ่มต้น
a:visited - แสดงเมื่อ link ที่เราเยี่ยมชมแล้ว
a:hover - แสดงเมื่อ เราเอาเมาส์ไปวางไว้
a:active - แสดงเมื่อเรา click เมาส์ไว้

สถานะแบบนี้ เราเรียกว่า pseudo-class หรือ คลาสหลอก เราใช้มันกำหนด element อื่นได้ด้วยนะครับ

a:link {
  color: red;
}

a:visited {
  color: green;
}

a:hover {
  color: hotpink;
}

a:active {
  color: blue;
}

ลองมาดูตัวอย่างจริงๆกันครับ คือเรามักจะให้ :link กับ :visited มีลักษณะเหมือนกัน และในส่วน :hover กับ active ก็เช่นเดียวกันครับ

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

CSS พื้นฐาน PART-5: Image ปรับแต่งรูปภาพ

Image

หมายถึง tag img ซึ่งทำหน้าที่แสดงรูปภาพของเราครับ แต่ในเว็บไซต์ของเรา ก็มีการแสดงภาพหลายแบบครับ บางครั้งเราต้องการใช้ ภาพเป็นพื้นหลังหรือใช้แสดงเป็นภาพทั่วไป

ภาพปกติ

img {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
  object-fit: cover;
}

ภาพพื้นหลัง

ภาพพื้นหลังนั้น เราจะไม่ใช้ img ครับ เราจะใช้กับ element อื่น โดยจะใช้ css property ที่ชื่อว่า background ครับ

.div {
  /* Using a <background-color> */
  background: green;

  /* Using a <bg-image> and <repeat-style> */
  background: url("test.jpg") repeat-y;

  /* Using a <box> and <background-color> */
  background: border-box red;

  /* A single image, centered and scaled */
  background: no-repeat center/80% url("../img/image.png");
}

CSS พื้นฐาน PART-6: Table ปรับแต่งตารางให้สวยงามด้วย CSS

Table

เราเคยทำ table มาแล้ว ลองมาปรับแต่ง Table ให้สวยงามมากยิ่งขึ้นด้วย css กันครับ

<table>
  <thead>
    <tr>
      <th colspan="3">สรุป HTML Element</th>
    </tr>
    <tr>
      <th>ชื่อ Element</th>
      <th>ความหมาย</th>
      <th>ตัวอย่างการใช้งาน</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>h1</td>
      <td>ทำหน้าที่แสดงหัวเรื่อง</td>
      <td>&lt;h1&gt; หัวเรื่อง &lt;/h1&gt;</td>
    </tr>
    <tr>
      <td>p</td>
      <td>สำหรับแสดงเนื้อหาข้อความ</td>
      <td>&lt;p&gt; เนื้อหาข้อความ.... &lt;/p&gt;</td>
    </tr>
  </tbody>
</table>

CSS พื้นฐาน PART-7: Form ปรับแต่งฟอร์มให้สวยงามด้วย CSS

Form

เราเคยทำ form แบบปกติด้วย html ธรรมดา ตอนนี้เราลองมาใช้ css เพื่อปรับแต่งให้สวยงามกันครับ

← Blog · RSS