Number 1 website platform in Thailand

ทำเว็บ

ทำเว็บไซต์

สร้างเว็บ

สร้างเว็บไซต์

เว็บไซต์สำเร็จรูป

เว็บสำเร็จรูป

ออกแบบเว็บ

ออกแบบเว็บไซต์

เขียนเว็บไซต์

สร้างเว็บฟรี

เว็บฟรี

ร้านค้าออนไลน์

ทำเว็บ

ทำเว็บไซต์

สร้างเว็บ

สร้างเว็บไซต์

เว็บไซต์สำเร็จรูป

เว็บสำเร็จรูป

ออกแบบเว็บ

ออกแบบเว็บไซต์

เขียนเว็บไซต์

สร้างเว็บฟรี

เว็บฟรี

ร้านค้าออนไลน์

สถานะหน้าปัจจุบัน

language
www.

ทำความรู้จัก id และ class ใน CSS เพื่อแต่งเว็บให้สวยงาม

ทำความรู้จัก id และ class ใน CSS เพื่อแต่งเว็บให้สวยงาม

จำนวนเข้าชม: 9,907 | 11/06/2015

ก่อนที่จะแต่งเว็บให้สวยงามจะต้องรู้จักกับ CSS ก่อน CSS นั้นย่อมาจาก Cascading Style Sheets ที่มี syntax เฉพาะและถูกกำหนดมาตรฐานโดย W3C (World Wide Web Consortium) syntax ของ CSS ค่อนข้างสื่อถึงความหมาย อย่างเช่น

body {

     color: red;

     font-size: 13px;

}

ความหมายของโค้ดด้านบนก็คือ หากมีการใช้ tag ที่ชื่อว่า body แบบนี้ <body>ข้อความ</body>

หน้าเว็บจะไปเรียก CSS ที่ชื่อว่า body { โค้ด CSS } มาใช้ ดึงส่วนโค้ด CSS ที่อยู่ด้านในออกมาด้วย

ตัวอย่าง

color: red; หมายความว่า ตัวหนังสือในหน้านั้นจะมีสีแดง

font-size: 13px; หมายความว่า ตัวหนังสือจะมีขนาด 13 พิกเซล

สำหรับ class และ id จะเขียนแตกต่างกันโดย class จะมีจุดอยู่ข้างหน้า

ส่วน id จะมีเครื่องหมาย # อยู่ข้างหน้า สามารถตั้งชื่อได้ตามต้องการ การตั้งชื่อควรคำนึงถึงเวลาจะกลับมาพัฒนาต่อ หรือแก้ด้วยนะครับ ^^!

การเขียนแบบ id

#myID {

     color: red;

     font-size: 13px;

}

การเขียนแบบ class

.myClass {

     color: red;

     font-size: 13px;

}

การใช้งานร่วมกับ HTML

<div class="myClass">กำหนดเรียก class ใน div</div>

<span class="myClass">กำหนดเรียก class ใน span</span>

<div id="myID">กำหนดเรียก id ใน div</div>

<p id="myID">กำหนดเรียก id ใน p</p>

ความแตกต่างระหว่างการใช้ id กับ class

1. การใช้ id ส่วนมากจะใช้กับส่วนหลักๆบนหน้าเว็บเช่น header footer ซึ่งทำให้เวลาเรียกส่วนต่างๆผ่าน URL ได้สะดวกยิ่งขึ้น ไม่ต้อง scroll เม้าส์ไปยังส่วนนั้นเอง

2. class สามารถเรียกได้หลาย class ในครั้งเดียว เช่น <div class="myClass1 myClass2 myClass3"></dv> แต่ละคลาสที่เขียนโค้ดต่างกัน เช่น เขียนกำหนดขนาดตัวหนังสือใน myClass1 13px ในคลาส myClass2 กำหนดสีเป็นสีแดง myClass3 กำหนดแบบตัวหนังสือเป็น tahoma ทั้งหมดนี้จะถูกเรียกมาใช้ ซึ่งแตกต่างจาก id จะเรียกได้แค่ id เดียว

ที่นี้ก็ขึ้นอยู่ที่ว่าเพื่อนๆจะนำไปใช้แล้วนะครับ ขอให้สนุกกับการใช้ CSS ทำเว็บให้สวยงาม


คำค้นหาที่เกี่ยวข้อง: ร้านค้าออนไลน์, ทำเว็บ, สร้างเว็บ, ออกแบบเว็บไซต์

Number 1 Website Platform in Thailand

จำนวนเว็บไซต์
230,926
จำนวนสินค้า
2,055,887
จำนวนบทความ
42,362,640
จำนวนรูปภาพ
1,884,138
Pageviews
159,486,855
ปรับปรุงเมื่อ
16/07/2020
ออนไลน์
1,521
uptime
นโยบายข้อมูลละเมิดลิขสิทธิ์ในเว็บไซต์ iGetWeb.com

โฆษณาสินค้า