Content Marketing

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 ได้สามวิธี:

  1. Inline CSS โดยใช้ style แอตทริบิวต์ในองค์ประกอบ HTML
  2. CSS ภายใน โดยใช้ a <style> องค์ประกอบใน <head> ของเอกสาร HTML ของคุณ
  3. 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 มาตรฐาน แต่สิ่งสำคัญคือต้องพิจารณาการแลกเปลี่ยนและเลือกเครื่องมือที่เหมาะสมสำหรับโครงการของคุณตามความต้องการและข้อจำกัดของคุณ

Douglas Karr

Douglas Karr เป็น CMO ของ เปิดข้อมูลเชิงลึก และผู้ก่อตั้ง Martech Zone. Douglas ได้ช่วยเหลือสตาร์ทอัพ MarTech ที่ประสบความสำเร็จหลายสิบราย ได้ช่วยเหลือในการตรวจสอบสถานะมูลค่ากว่า 5 พันล้านดอลลาร์ในการซื้อกิจการและการลงทุนของ Martech และยังคงช่วยเหลือบริษัทต่างๆ ในการปรับใช้และทำให้กลยุทธ์การขายและการตลาดเป็นไปโดยอัตโนมัติ Douglas เป็นผู้เชี่ยวชาญด้านการเปลี่ยนแปลงทางดิจิทัลและ MarTech ที่ได้รับการยอมรับในระดับสากล ดักลาสยังเป็นผู้เขียนหนังสือ Dummie's Guide และหนังสือความเป็นผู้นำทางธุรกิจที่ได้รับการตีพิมพ์อีกด้วย

บทความที่เกี่ยวข้อง

กลับไปด้านบนปุ่ม
ปิดหน้านี้

ตรวจพบการบล็อกโฆษณา

Martech Zone สามารถจัดหาเนื้อหานี้ให้คุณโดยไม่มีค่าใช้จ่าย เนื่องจากเราสร้างรายได้จากไซต์ของเราผ่านรายได้จากโฆษณา ลิงก์พันธมิตร และการสนับสนุน เรายินดีอย่างยิ่งหากคุณจะลบตัวปิดกั้นโฆษณาของคุณเมื่อคุณดูไซต์ของเรา