Cascading Style Sheets (CSS) คืออะไร?
อ่านด้านล่างสำหรับคำอธิบายทั้งหมดเกี่ยวกับวิธีการทำงานของสไตล์ชีตแบบเรียงซ้อน เราแสดงแอปของเราที่ด้านบนของหน้าเพื่อให้ง่ายต่อการค้นหาและใช้งาน หากคุณกำลังอ่านบทความนี้ทางอีเมลหรือฟีด ให้คลิกผ่านไปยัง บีบอัด CSS ของคุณ.
เว้นแต่ว่าคุณกำลังพัฒนาไซต์จริง ๆ คุณอาจไม่เข้าใจสไตล์ชีตแบบเรียงซ้อนทั้งหมด (CSS). CSS เป็นภาษาสไตล์ชีตที่ใช้อธิบายลักษณะที่ปรากฏและการจัดรูปแบบของเอกสารที่เขียน HTML or XML. สามารถใช้ CSS เพื่อระบุสไตล์สำหรับองค์ประกอบต่างๆ เช่น ฟอนต์ สี ระยะห่าง และเค้าโครง CSS ช่วยให้คุณสามารถแยกการนำเสนอเอกสาร HTML ของคุณออกจากเนื้อหาได้ ทำให้ง่ายต่อการบำรุงรักษาและอัปเดตรูปแบบภาพของเว็บไซต์ของคุณ
โครงสร้างภาษา CSS
พื้นที่ ผู้เลือก เป็นองค์ประกอบ HTML ที่คุณต้องการจัดรูปแบบ และ คุณสมบัติ และ ความคุ้มค่า กำหนดสไตล์ที่คุณต้องการใช้กับองค์ประกอบนั้น:
selector {
property: value;
}
ตัวอย่างเช่น CSS ต่อไปนี้จะทำให้ทั้งหมด <h1>
องค์ประกอบบนหน้ามีสีแดงและขนาดตัวอักษร 32px:
CSS
h1 {
color: red;
font-size: 32px;
}
เอาท์พุต
หัวข้อ
คุณยังสามารถระบุ CSS สำหรับ ID เฉพาะในองค์ประกอบ:
CSS
/* styles for an element with ID "intro" */
#intro {
font-weight: bold;
text-align: center;
}
เอาท์พุต
หรือใช้คลาสในหลายองค์ประกอบ:
CSS
/* styles for elements with class "highlight" */
.highlight {
background-color: yellow;
}
เอาท์พุต
ฉันต้องการ ไฮไลต์ คำในแท็กช่วง
คุณสามารถรวม CSS ในเอกสาร HTML ได้สามวิธี:
- Inline CSS โดยใช้
style
แอตทริบิวต์ในองค์ประกอบ HTML - CSS ภายใน โดยใช้ a
<style>
องค์ประกอบใน<head>
ของเอกสาร HTML ของคุณ - CSS ภายนอก โดยใช้ไฟล์ .css แยกต่างหากที่เชื่อมโยงกับเอกสาร HTML ของคุณโดยใช้ไฟล์ .css
<link>
องค์ประกอบใน<head>
ของเอกสาร HTML ของคุณ
CSS ที่ตอบสนอง
CSS มีความยืดหยุ่นอย่างเหลือเชื่อและสามารถใช้ปรับการแสดงองค์ประกอบตามความละเอียดของหน้าจอ ดังนั้นคุณจึงสามารถมี HTML เดียวกันแต่สร้างมันขึ้นมาได้ การตอบสนอง ความละเอียดของอุปกรณ์:
/* media query for responsive design */
@media (max-width: 768px) {
p {
font-size: 14px;
}
#intro {
font-size: 20px;
}
}
การบีบอัด CSS
คุณสามารถดูได้จากตัวอย่างด้านบนว่ามีความคิดเห็น ข้อความค้นหาสื่อ และสไตล์ต่างๆ ที่ใช้การเว้นวรรคและการป้อนบรรทัดเพื่อจัดระเบียบมุมมองของ CSS แนวทางปฏิบัติที่ดีคือการลดขนาดหรือบีบอัด CSS ของคุณบนไซต์เพื่อลดขนาดไฟล์ และเวลาที่ใช้ในการขอและแสดงสไตล์ของคุณ ไม่ใช่จำนวนเล็กน้อย… คุณสามารถดูการประหยัดได้มากกว่า 50% จากตัวอย่างบางส่วนด้านบน
การกำหนดค่าเซิร์ฟเวอร์จำนวนมากมีเครื่องมือที่จะบีบอัด CSS โดยอัตโนมัติทันทีและแคชไฟล์ที่ย่อขนาด คุณจึงไม่ต้องทำเอง
SCSS คืออะไร?
CSS หน้าด้าน (วทส) เป็นตัวประมวลผลล่วงหน้า CSS ที่เพิ่มฟังก์ชันและไวยากรณ์เพิ่มเติมให้กับภาษา CSS ขยายขีดความสามารถของ CSS โดยอนุญาตให้ใช้ตัวแปร มิกซ์อิน ฟังก์ชัน และคุณสมบัติอื่นๆ ที่ไม่มีใน CSS มาตรฐาน
ข้อดีของ SCSS
- ปรับปรุงการบำรุงรักษา: ด้วยการใช้ตัวแปร คุณสามารถเก็บค่าไว้ในที่เดียวและใช้ซ้ำได้ทั่วทั้งสไตล์ชีตของคุณ ทำให้ง่ายต่อการบำรุงรักษาและอัปเดตสไตล์ของคุณ
- จัดระเบียบได้ดีขึ้น: ด้วยมิกซ์อิน คุณสามารถจัดกลุ่มและนำชุดสไตล์กลับมาใช้ใหม่ ทำให้สไตล์ชีตของคุณเป็นระเบียบมากขึ้นและอ่านง่ายขึ้น
- ฟังก์ชันการทำงานที่เพิ่มขึ้น: SCSS มีคุณสมบัติมากมายที่ไม่มีใน CSS มาตรฐาน เช่น ฟังก์ชัน โครงสร้างการควบคุม (เช่น if/else) และการดำเนินการทางคณิตศาสตร์ วิธีนี้ทำให้ไดนามิกและมีสไตล์มากขึ้น
- ประสิทธิภาพที่ดีขึ้น: ไฟล์ SCSS ถูกคอมไพล์เป็น CSS ซึ่งสามารถปรับปรุงประสิทธิภาพโดยลดจำนวนโค้ดที่เบราว์เซอร์ต้องแยกวิเคราะห์
ข้อเสียของ SCSS
- เส้นโค้งการเรียนรู้: SCSS มีไวยากรณ์ที่แตกต่างจาก CSS มาตรฐาน และคุณจะต้องเรียนรู้ไวยากรณ์ใหม่นี้ก่อนจึงจะสามารถใช้งานได้อย่างมีประสิทธิภาพ
- ความซับซ้อนเพิ่มเติม: แม้ว่า SCSS สามารถทำให้สไตล์ชีตของคุณเป็นระเบียบมากขึ้นและดูแลรักษาได้ง่ายขึ้น แต่ก็สามารถเพิ่มความซับซ้อนเพิ่มเติมให้กับโค้ดเบสของคุณ โดยเฉพาะอย่างยิ่งหากคุณไม่คุ้นเคยกับคุณลักษณะและไวยากรณ์ใหม่
- เครื่องมือ: หากต้องการใช้ SCSS คุณจะต้องมีคอมไพเลอร์เพื่อแปลโค้ด SCSS เป็น CSS สิ่งนี้ต้องการการตั้งค่าและเครื่องมือเพิ่มเติม ซึ่งอาจเป็นอุปสรรคในการเริ่มต้นสำหรับนักพัฒนาบางราย
ในตัวอย่างนี้ด้านล่าง รหัส SCSS ใช้ตัวแปรเพื่อเก็บค่า ($primary-color
และ $font-size
) ที่สามารถใช้ซ้ำได้ตลอดทั้งสไตล์ชีต รหัส CSS ที่สร้างขึ้นจากรหัส SCSS นี้เทียบเท่า แต่ไม่รวมตัวแปร แต่จะใช้ค่าของตัวแปรโดยตรงใน CSS
$primary-color: blue;
$font-size: 16px;
body {
font-size: $font-size;
color: $primary-color;
h1 {
font-size: 2em;
color: $primary-color;
}
}
คุณลักษณะอื่นของ SCSS ที่แสดงในตัวอย่างนี้คือลักษณะที่ซ้อนกัน ในรหัส SCSS, the h1
สไตล์ซ้อนอยู่ภายใน body
สไตล์ซึ่งไม่สามารถทำได้ใน CSS มาตรฐาน เมื่อคอมไพล์โค้ด SCSS สไตล์ที่ซ้อนกันจะถูกขยายเป็นสไตล์ที่แยกจากกันในโค้ด CSS
โดยรวมแล้ว SCSS มีข้อดีหลายประการเหนือ CSS มาตรฐาน แต่สิ่งสำคัญคือต้องพิจารณาการแลกเปลี่ยนและเลือกเครื่องมือที่เหมาะสมสำหรับโครงการของคุณตามความต้องการและข้อจำกัดของคุณ