หน่วยที่ 3 การตกแต่งเว็บไซต์ด้วย CSS

เรียนรู้การใช้ CSS เพื่อกำหนดรูปแบบเว็บไซต์

3.1 CSS คืออะไร

CSS (Cascading Style Sheets) คือ ภาษาที่ใช้ตกแต่งเว็บไซต์ เช่น สี ขนาด และตำแหน่ง

CSS ทำให้เว็บไซต์สวยงามและน่าสนใจ

3.2 การเปลี่ยนสีข้อความ

<p style="color:red;">ข้อความสีแดง</p>

ผลลัพธ์:

ข้อความสีแดง

3.3 การเปลี่ยนสีพื้นหลัง

<div style="background:blue;color:white;"> ข้อความ </div>

ผลลัพธ์:

ข้อความ

3.4 การเปลี่ยนขนาดตัวอักษร

<p style="font-size:30px;">ตัวใหญ่</p>

ตัวใหญ่

3.5 การจัดตำแหน่งข้อความ

<p style="text-align:center;">กึ่งกลาง</p>

กึ่งกลาง

3.6 การใส่เส้นขอบ

<div style="border:2px solid black;"> มีเส้นขอบ </div>
มีเส้นขอบ

3.7 CSS แบบ Internal

<style>
p {
 color:blue;
}
</style>

3.8 การใช้ Class

<style>
.box {
 background:red;
 color:white;
}
</style>

<div class="box">Hello</div>
Hello

Workshop

สร้างกล่องสวยงาม
<div style="background:green;color:white;padding:20px;border-radius:10px;">
Welcome
</div>

ผลลัพธ์:

Welcome
Workshop: สร้างโปรไฟล์
<div style="border:1px solid gray;padding:20px;width:200px;">
<h3>สมชาย</h3>
<p style="color:gray;">Student</p>
</div>

สมชาย

Student

สรุป

ก่อนหน้า Workshop ถัดไป