CSS คืออะไร?

เผยแพร่แล้ว: 2019-03-08

แก้ไขล่าสุดเมื่อ 22 เมษายน 2020

Cascading Style Sheets for the web ในเวิลด์ไวด์เว็บ (www) CSS เป็นตัวย่อสำหรับ Cascading Style Sheets CSS เป็นภาษาสไตล์ชีตที่ใช้สำหรับอธิบายการนำเสนอของเอกสารที่เขียนด้วยภาษามาร์กอัป โดยทั่วไปคือ HTML CSS กำหนดวิธีการแสดงเค้าโครงและเนื้อหาของหน้าเว็บบนหน้าจอ กระดาษ หรือสื่ออื่นๆ CSS ช่วยประหยัดงานได้มากเพราะควบคุมเลย์เอาต์ของหน้าเว็บหลายหน้าพร้อมกัน

เอกสารมักเป็นไฟล์ข้อความที่มีโครงสร้างโดยใช้ภาษามาร์กอัป เช่น HTML การนำเสนอเอกสารหมายถึงการแปลงเอกสารให้อยู่ในรูปแบบที่ใช้งานได้ซึ่งแสดงบนหน้าจอคอมพิวเตอร์ผ่านเว็บเบราว์เซอร์ เช่น Chrome, Firefox, Opera, Microsoft Edge และอื่นๆ เว็บเบราว์เซอร์ใช้กฎ CSS กับเอกสารเพื่อส่งผลต่อวิธีการแสดง

บล็อกนี้เป็นบทนำทั่วไปเกี่ยวกับ Cascading Style Sheets (CSS) กำหนดว่าคืออะไร และใช้สำหรับอะไรบนเว็บ นี่คือบทนำที่ตอบคำถามพื้นฐานเกี่ยวกับเรื่องนี้โดยไม่ต้องเข้าสู่โลกที่ยอดเยี่ยมและน่าสนใจของ CSS

ที่! บริษัทให้บริการออกแบบเว็บไซต์ที่ดึงดูดใจและมีประสิทธิภาพสำหรับหน่วยงานทั่วโลก เรียนรู้เพิ่มเติมเกี่ยวกับ White Label Web Design Services และวิธีที่เราสามารถช่วยคุณและลูกค้าของคุณในการสร้างหรือปรับปรุงตัวตนบนเว็บของพวกเขา เริ่มต้นวันนี้!

CSS เริ่มต้นในปี 1994 มันถูกสร้างขึ้นและดูแลโดย W3C คณะทำงาน CSS ของ W3C สร้างเอกสารที่เรียกว่าข้อกำหนด หลังจากที่ได้มีการหารือเกี่ยวกับข้อกำหนดและให้สัตยาบันอย่างเป็นทางการจากสมาชิก W3C แล้ว พวกเขาจะกลายเป็นข้อเสนอแนะ

Cascading Style Sheets ระดับ 1 (CSS1) ออกมาจาก W3C เป็นคำแนะนำในเดือนธันวาคม 1996 CSS2 กลายเป็นคำแนะนำ W3C ในเดือนพฤษภาคม 1998 CSS ระดับ 3 ซึ่งเริ่มในปี 1998 ยังอยู่ระหว่างการพัฒนา CSS3 คือการรวมกันของข้อกำหนด CSS2 และข้อกำหนดใหม่ที่เรียกว่าโมดูล ข้อกำหนด CSS สร้างขึ้นจากชุดของคุณสมบัติ ซึ่งมีการตั้งค่าไว้เพื่ออัปเดตวิธีการแสดงเนื้อหา HTML

CSS มาเพื่อลดความซับซ้อนของกระบวนการนำเสนอเอกสารภาษามาร์กอัปของเรา คุณสามารถควบคุมคุณสมบัติต่างๆ เช่น:

  • สีของข้อความ,
  • รูปแบบของฟอนต์,
  • ระยะห่างระหว่างย่อหน้า
  • ขนาดของคอลัมน์และการจัดวางคอลัมน์
  • ภาพพื้นหลังหรือสี
  • การออกแบบเลย์เอาต์,
  • รูปแบบการแสดงผลตามขนาดหน้าจอ (Media Queries)

เราจะใช้ CSS ได้อย่างไร

Cascading Style Sheets for the web มีสี่วิธีในการใช้สไตล์กับเอกสาร HTML ของเรา วิธีที่ใช้บ่อยที่สุดคือไฟล์ CSS ภายนอกที่ฝังอยู่ในองค์ประกอบ <style> ภายในเอกสาร HTML ของเรา หากมีการระบุสไตล์ชีตที่แตกต่างกัน สไตล์จะเรียงต่อกันเป็นสไตล์ใหม่โดยมีลำดับความสำคัญดังต่อไปนี้ (จำนวนที่สูงกว่ามีความสำคัญน้อยกว่า):

ลำดับความสำคัญ 4: ค่าเริ่มต้นของเบราว์เซอร์

เบราว์เซอร์มีสไตล์ที่เขียนไว้ล่วงหน้าสำหรับเรา บางครั้งเราไม่ต้องการสไตล์ที่โหลดไว้ล่วงหน้าเหล่านี้ ดังนั้นเราจึงสามารถแทนที่ได้ มีเบราว์เซอร์บางตัวที่ไม่รองรับข้อกำหนด CSS สมัยใหม่ หรือมีรูปแบบการใช้คุณสมบัติ CSS ของตัวเอง ด้วยเหตุนี้ เราจึงควรระมัดระวังในการเขียน CSS ของเราในเอกสาร HTML

That! Company White Label Services

ลำดับที่ 3: ไฟล์สไตล์ชีตภายนอก

องค์ประกอบ <link> สามารถใช้เพื่อรวมไฟล์สไตล์ชีตภายนอกในเอกสาร HTML ของคุณ สไตล์ชีตภายนอกเป็นไฟล์ข้อความแยกต่างหากที่มีนามสกุล ".css" เรากำหนดกฎของรูปแบบทั้งหมดภายในไฟล์ข้อความนี้ จากนั้นเรารวมไฟล์นี้ในเอกสาร HTML ใดๆ ภายในแท็ก <head>…</head> โดยใช้องค์ประกอบ <link>

 <link rel="stylesheet" type="text/css" href="style.css" />

ลำดับความสำคัญ 2: ฝังอยู่ในเอกสาร HTML

เราสามารถใส่กฎ CSS ของเราลงในเอกสาร HTML โดยใช้องค์ประกอบ <style> เพื่อให้มีกฎ แท็ก <style>…</style> จะอยู่ในแท็ก <head>…</head>

 <style>
 ตัวเลือก {
 คุณสมบัติ: ค่า;
 }
 </style>

ลำดับความสำคัญ 1: อินไลน์ในองค์ประกอบ HTML ของเรา

เราสามารถใช้แอตทริบิวต์ style ขององค์ประกอบ HTML ใดก็ได้เพื่อกำหนดกฎของรูปแบบ กฎเหล่านี้จะใช้กับองค์ประกอบนั้นเท่านั้น

 <p>สวัสดีชาวโลก!</p>

การแทนที่กฎ CSS

เราได้อธิบายสี่วิธีในการใช้กฎของสไตล์ชีตกับเอกสาร HTML ของเรา นี่คือกฎที่จะแทนที่กฎของสไตล์ชีต:

สไตล์ชีตแบบอินไลน์จะมีลำดับความสำคัญสูงสุด ดังนั้น จะแทนที่กฎที่กำหนดไว้ในแท็ก <style>…</style> หรือกฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก

กฎใดๆ ที่กำหนดไว้ในแท็ก <style>…</style> จะแทนที่กฎที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอก

กฎใดๆ ที่กำหนดไว้ในไฟล์สไตล์ชีตภายนอกจะมีลำดับความสำคัญต่ำสุด และกฎที่กำหนดไว้ในไฟล์นี้จะถูกนำไปใช้ก็ต่อเมื่อกฎสองข้อข้างต้นไม่มีผลบังคับใช้

ตัวเลือก CSS

เบราว์เซอร์ตีความกฎ CSS แล้วนำไปใช้กับองค์ประกอบที่เกี่ยวข้องในเอกสาร HTML ของเรา กฎสไตล์ประกอบด้วยสามส่วน:

  • Selector - ใช้เพื่อ "ค้นหา" (หรือเลือก) องค์ประกอบ HTML ตามชื่อองค์ประกอบ id คลาส คุณลักษณะและอื่น ๆ
  • คุณสมบัติ - เป็นประเภทของรูปแบบ CSS อาจเป็นสี เส้นขอบ พื้นหลัง แบบอักษร การแสดงผล การจัดตำแหน่งข้อความ ระยะขอบ ระยะห่างบรรทัด ฯลฯ
  • ค่า - ถูกกำหนดให้กับคุณสมบัติ ตัวอย่างเช่น คุณสมบัติสีพื้นหลังสามารถมีค่าเป็นสีแดงหรือสีเขียว

ไวยากรณ์กฎ CSS

ไวยากรณ์ของกฎ CSS ประกอบด้วยตัวเลือกและการประกาศคุณสมบัติและค่า:

 ตัวเลือก { คุณสมบัติ: ค่า; }

ตัวเลือกชี้ไปที่องค์ประกอบ HTML เพื่อจัดรูปแบบ

บล็อกการประกาศ (ในวงเล็บปีกกา) มีการประกาศตั้งแต่หนึ่งรายการขึ้นไปโดยคั่นด้วยเครื่องหมายอัฒภาค

การประกาศแต่ละรายการมีชื่อคุณสมบัติ CSS และค่า โดยคั่นด้วยเครื่องหมายทวิภาค

เราสามารถเขียนกฎ CSS แล้วใช้กฎเดียวกันซ้ำในองค์ประกอบและเอกสาร HTML หลายรายการ เมื่อใช้ CSS เราไม่จำเป็นต้องเขียนแอตทริบิวต์แท็กแบบอินไลน์ HTML ทุกครั้งที่ใช้เฉพาะกับองค์ประกอบที่มีสไตล์เท่านั้น เราเพียงแค่เขียนกฎ CSS หนึ่งกฎและนำไปใช้กับทุกสิ่งที่เกิดขึ้นขององค์ประกอบแท็กนั้น ดังนั้นโค้ดที่น้อยลงหมายถึงหน้าเว็บที่เร็วขึ้น

การเปลี่ยนแปลงและการบำรุงรักษาเอกสาร HTML ของเราทำได้ง่ายเมื่อเราใช้กฎลักษณะภายนอกหรือแบบฝัง เราเพียงแค่เปลี่ยนกฎของสไตล์ และองค์ประกอบทั้งหมดในเอกสาร HTML ของเราจะได้รับการอัปเดตโดยอัตโนมัติ ด้วย CSS เราสามารถเข้าถึงหน้าจออุปกรณ์ได้หลายขนาดผ่าน Media Queries แบบสอบถามสื่อช่วยให้เราเพิ่มประสิทธิภาพเอกสาร HTML ของเราสำหรับอุปกรณ์มากกว่าหนึ่งประเภท ด้วยการใช้เอกสาร HTML เดียวกัน เราสามารถนำเสนอเวอร์ชันต่างๆ ของหน้าเว็บของเราได้

อ่านเพิ่มเติม

อีกครั้ง โพสต์นี้แทบจะไม่เปิดความสนใจของผู้อ่านในการเรียนรู้เกี่ยวกับ CSS และความหลากหลายของสิ่งต่าง ๆ ที่มีในการควบคุมเอกสาร HTML ของเรา เป็นส่วนที่ทรงพลังและสำคัญมากของเว็บ แหล่งข้อมูลหลักบางส่วนที่คุณสามารถเจาะลึกลงไปได้คือ:

โรงเรียน W3C

MDN

กวดวิชา CSS