CSS (Cascading Style Sheets) เป็นภาษาสไตล์ที่ใช้ในการออกแบบหน้าเว็บ ช่วยให้คุณสามารถแยกเนื้อหาของหน้าออกจากงานนำเสนอ ทำให้ง่ายต่อการทำงานกับเค้าโครงและการออกแบบ
CSS ประกอบด้วยชุดของกฎ ซึ่งแต่ละกฎจะกำหนดว่าองค์ประกอบบางอย่างบนหน้าเว็บควรจะมีสไตล์อย่างไร กฎรวมถึงการเลือกองค์ประกอบโดยใช้ตัวเลือกและการตั้งค่าคุณสมบัติในองค์ประกอบเหล่านั้น มาดูองค์ประกอบหลักของ CSS – กฎ ตัวเลือก และคุณสมบัติ
กฎ
กฎ CSS ประกอบด้วยตัวเลือกและบล็อกคุณสมบัติ กฎจะบอกเบราว์เซอร์ว่าควรจัดองค์ประกอบใดของหน้าเว็บและควรจัดรูปแบบอย่างไร กฎแต่ละข้อจะเริ่มต้นด้วยตัวเลือกที่เลือกองค์ประกอบและสิ้นสุดด้วยกลุ่มคุณสมบัติที่ใช้กับองค์ประกอบที่เลือก
นี่คือตัวอย่างกฎง่ายๆ:
p{
color: blue;
font-size: 16px;
}
ที่นี่ `p` คือตัวเลือกสำหรับเลือกทุกย่อหน้าในหน้า ภายในบล็อกคุณสมบัติ มีการตั้งค่าสไตล์สำหรับย่อหน้า: สีข้อความสีน้ำเงินและขนาดฟอนต์ 16 พิกเซล
ตัวเลือก
ตัวเลือกช่วยให้คุณสามารถเลือกองค์ประกอบหนึ่งหรือหลายรายการบนหน้าเว็บเพื่อใช้สไตล์บางอย่างได้ ตัวเลือกอาจเรียบง่ายหรือซับซ้อนกว่านั้น และอนุญาตให้คุณเลือกองค์ประกอบตามประเภท คลาส รหัส คุณลักษณะ และแม้แต่ตำแหน่งบนหน้า
ตัวอย่างของตัวเลือกอย่างง่าย:
- `p` – เลือกย่อหน้าทั้งหมด
- `.header` – เลือกองค์ประกอบทั้งหมดที่มีคลาส “ส่วนหัว”
- `#logo` – เลือกองค์ประกอบที่มี id “logo”
ตัวอย่างของตัวเลือกที่ซับซ้อนมากขึ้น:
- `ul li` – เลือกองค์ประกอบทั้งหมดของรายการ `li` ที่เป็นลูกขององค์ประกอบ `ul`
- `input` – เลือกช่องข้อความทั้งหมดในหน้า
คุณสมบัติ
คุณสมบัติกำหนดลักษณะที่ปรากฏขององค์ประกอบที่เลือกโดยใช้ตัวเลือก แต่ละคุณสมบัติมีค่าที่ระบุลักษณะองค์ประกอบ
ตัวอย่างคุณสมบัติ:
- `color` – กำหนดสีข้อความขององค์ประกอบ
- `font-size` – กำหนดขนาดตัวอักษร
- `สีพื้นหลัง` – กำหนดสีพื้นหลังขององค์ประกอบ
- `border` – กำหนดรูปแบบ ความหนา และสีของเส้นขอบขององค์ประกอบ
นี่คือตัวอย่างการใช้คุณสมบัติ:
h1 {
color: red;
font-size: 24px;
background-color: yellow;
border: 1px solid black;
}
กฎนี้เลือกส่วนหัว h1 ทั้งหมดและตั้งค่าสีข้อความเป็นสีแดง ขนาดตัวอักษร 24px พื้นหลังสีเหลือง และขอบสีดำหนา 1px
ตัวผสม
Combinator ใน CSS ช่วยให้คุณสามารถรวม Selector และสร้างกฎที่เฉพาะเจาะจงมากขึ้นได้ นี่คือตัวอย่างบางส่วนของ combinators:
- `div p` – เลือกองค์ประกอบ `p` ทั้งหมดที่เป็นลูกขององค์ประกอบ `div`
- `.menu-item > a` – เลือกองค์ประกอบ `a` ทั้งหมดที่เป็นลูกหลานโดยตรงขององค์ประกอบที่มีคลาส `.menu-item`
- `h2 + p` – เลือกองค์ประกอบ `p` ทั้งหมดที่อยู่หลังองค์ประกอบ `h2` โดยตรง
การใช้ combinators ช่วยให้คุณปรับแต่งลักษณะที่จะใช้กับองค์ประกอบในหน้าได้อย่างละเอียด
คลาสหลอกและองค์ประกอบหลอก
คลาสหลอกและองค์ประกอบหลอกให้คุณเลือกองค์ประกอบที่อยู่ในสถานะบางอย่างหรือมีส่วนเฉพาะ ซึ่งระบุไว้หลังตัวเลือกหลักและแสดงด้วยเครื่องหมายทวิภาค
ตัวอย่างคลาสหลอก:
- `:hover` – ใช้รูปแบบเมื่อเคอร์เซอร์อยู่เหนือองค์ประกอบ
- `:active` – ใช้สไตล์เมื่อองค์ประกอบทำงานอยู่ (เช่น การคลิกปุ่ม)
- `:focus` – ใช้รูปแบบเมื่อองค์ประกอบมีโฟกัส (เช่น ช่องป้อนข้อมูลเมื่อมีการคลิก)
ตัวอย่างขององค์ประกอบหลอก:
- `::before` – เพิ่มเนื้อหาก่อนเนื้อหาขององค์ประกอบที่เลือก
- `::after` – เพิ่มเนื้อหาหลังจากเนื้อหาขององค์ประกอบที่เลือก
- `::first-line` – ใช้สไตล์กับข้อความบรรทัดแรกในองค์ประกอบ
- `::first-letter` – ใช้สไตล์กับตัวอักษรตัวแรกของข้อความในองค์ประกอบ
นำเข้าไฟล์ CSS
เพื่อให้โค้ดของคุณมีโครงสร้างมากขึ้นและดูแลรักษาง่ายขึ้น CSS อนุญาตให้คุณนำเข้าสไตล์จากไฟล์อื่นๆ สิ่งนี้ทำได้ด้วยคำสั่ง `@import` ซึ่งสามารถวางไว้ที่ด้านบนของไฟล์ CSS
ด้วยวิธีนี้ คุณสามารถแยกสไตล์ออกเป็นไฟล์ต่างๆ ซึ่งจะทำให้แก้ไขและลดขนาดของแต่ละสไตล์ได้ง่ายขึ้น
การเรียงลำดับและลำดับความสำคัญ
CSS อิงตามหลักการของการเรียงซ้อน ซึ่งหมายความว่าสไตล์สามารถกำหนดได้จากที่ต่างๆ และแหล่งที่มา และเบราว์เซอร์จะตัดสินใจว่าจะใช้สไตล์ใดตามลำดับความสำคัญ เรียงซ้อนรวมถึง:
- ลำดับความสำคัญของตัวเลือก: เบราว์เซอร์เคารพความเฉพาะเจาะจงของตัวเลือก ยิ่งตัวเลือกมีความเฉพาะเจาะจงมากเท่าใด ลำดับความสำคัญก็จะยิ่งสูงขึ้นเท่านั้น
- ลำดับรูปแบบ: หากกฎสองข้อมีความเฉพาะเจาะจงเหมือนกัน กฎข้อสุดท้ายจะถูกนำไปใช้กับองค์ประกอบ
- ความสำคัญของสไตล์: คุณสามารถกำหนดความสำคัญของสไตล์ได้โดยใช้ `!important` สิ่งนี้ทำให้สไตล์มีความสำคัญเหนือกว่า
p{
color: red !important;
}
สิ่งสำคัญคือต้องใช้ `!important` อย่างระมัดระวังเพื่อหลีกเลี่ยงปัญหาการบำรุงรักษาโค้ดในอนาคต
ข้อความค้นหาสื่อ
CSS อนุญาตให้ปรับสไตล์ตามการตั้งค่าอุปกรณ์ เช่น ความกว้างและความละเอียดของหน้าจอ ข้อความค้นหาสื่อช่วยให้คุณสร้างการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ที่ดูดีบนอุปกรณ์ต่างๆ ตั้งแต่โทรศัพท์มือถือไปจนถึงเดสก์ท็อป
ตัวอย่างแบบสอบถามสื่อ:
@media screen and (max-width: 768px) {
/* styles for devices with screen widths up to 768px */
body {
font-size: 14px;
}
}
ในตัวอย่างนี้ สไตล์จะถูกนำไปใช้กับองค์ประกอบของหน้าเมื่อความกว้างของหน้าจอไม่เกิน 768 พิกเซล
CSS เป็นเครื่องมือจัดรูปแบบเว็บที่มีประสิทธิภาพ และพื้นฐานเหล่านี้จะช่วยให้คุณเริ่มต้นใช้งานเพื่อสร้างการออกแบบที่สวยงามและใช้งานได้จริง การฝึกฝนและประสบการณ์จะช่วยให้คุณพัฒนาทักษะและกลายเป็นนักพัฒนาส่วนหน้าที่มีประสบการณ์
