บทนำ CSS

สารบัญ

    แสดงสารบัญ

CSS เป็นภาษาที่เราใช้จัดรูปแบบเว็บเพจ

ซีเอสเอสคืออะไร?

  • CSS ย่อมาจาก Cascading Style Sheets

  • CSS อธิบายวิธีการแสดงองค์ประกอบ HTML บนหน้าจอ กระดาษหรือสื่ออื่นๆ

  • CSS ช่วยประหยัดงานได้มาก สามารถควบคุมการจัดวางของ หน้าเว็บหลายหน้าพร้อมกัน

  • สไตล์ชีทภายนอกจะถูกจัดเก็บไว้ในไฟล์ CSS

การสาธิต CSS - หน้า HTML หนึ่งหน้า - หลายสไตล์!

ที่นี่เราจะแสดงหน้า HTML หนึ่งหน้าที่แสดงด้วยสไตล์ชีตที่แตกต่างกันสี่แบบ คลิกที่ "สไตล์ชีท 1", "สไตล์ชีท 2", "สไตล์ชีท 3", "สไตล์ชีท 4" ลิงค์ด้านล่างเพื่อดูสไตล์ต่างๆ:

ทำไมต้องใช้ CSS?

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

ตัวอย่าง CSS

body
{
  background-color: lightblue;
}

h1
{
  color: white;
  text-align: center;
}

p
{
   
font-family: verdana;
  font-size: 20px;
}

ลองด้วยตัวคุณเอง →

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</style>
</head>
<body>

<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>

</body>
</html>

CSS แก้ไขปัญหาใหญ่

HTML ไม่เคยมีจุดมุ่งหมายให้มีแท็กสำหรับการจัดรูปแบบหน้าเว็บ!

HTML เคยเป็น สร้างขึ้นเพื่ออธิบายเนื้อหาของหน้าเว็บ เช่น

<h1>นี่คือส่วนหัว</h1>

<p>นี่คือย่อหน้า</p>

เมื่อมีการเพิ่มแท็กเช่น และแอตทริบิวต์สีลงใน HTML 3.2 ข้อมูลจำเพาะมันเริ่มต้นฝันร้ายสำหรับนักพัฒนาเว็บ การพัฒนาขนาดใหญ่ เว็บไซต์ที่มีการเพิ่มแบบอักษรและข้อมูลสีลงในทุก ๆ เว็บไซต์ กลายเป็นกระบวนการที่ยาวนานและมีราคาแพง

เพื่อแก้ไขปัญหานี้ World Wide Web Consortium (W3C) ได้สร้าง CSS

CSS ลบการจัดรูปแบบสไตล์ออกจากหน้า HTML!

หากคุณไม่ทราบว่า HTML คืออะไร เราขอแนะนำให้คุณอ่านบทช่วยสอน HTML ของเรา

CSS ประหยัดงานได้มาก!

โดยปกติคำจำกัดความของสไตล์จะถูกบันทึกในไฟล์ .css ภายนอก

ด้วยไฟล์สไตล์ชีตภายนอก คุณสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ทั้งหมดได้ด้วยการเปลี่ยนเพียงไฟล์เดียว!