กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

CSS บทนำ


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


CSS คืออะไร?

  • CSS ย่อมาจาก Cascading Style Sheets
  • CSS อธิบายวิธีการแสดงองค์ประกอบ HTML บนหน้าจอ กระดาษ หรือสื่ออื่นๆ
  • CSS ช่วยประหยัดงานได้มาก สามารถควบคุมเลย์เอาต์ของหน้าเว็บหลาย ๆ หน้าได้พร้อมกัน
  • สไตล์ชีตภายนอกถูกเก็บไว้ในไฟล์ CSS

CSS Demo - หนึ่งหน้า 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;
}

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

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

HTML ถูกสร้างขึ้นเพื่ออธิบายเนื้อหาของหน้าเว็บ เช่น:

<h1>นี่คือหัวเรื่อง</h1>

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

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

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

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

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


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

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

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