Cascading Style Sheets คืออะไรและ CSS ใช้สำหรับอะไร?

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

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

CSS มีลักษณะอย่างไร

CSS เป็นภาษาที่ยิ่งใหญ่—มีหลายสิ่งหลายอย่างให้จัดสไตล์! แต่ไวยากรณ์ของมันตรงไปตรงมา โดยมีกฎเพียงไม่กี่ข้อที่ต้องเรียนรู้

องค์ประกอบ HTML มีคุณสมบัติต่างๆ ที่ CSS สามารถจัดรูปแบบได้ NS สี คุณสมบัติกำหนดสีพื้นหน้า (เช่นข้อความ) ขนาดตัวอักษรขึ้นอยู่กับ ขนาดตัวอักษร คุณสมบัติ.

แต่ละคุณสมบัติสามารถตั้งค่าเป็นค่าที่รองรับได้ การกำหนดค่าให้กับคุณสมบัติคือ 'การประกาศ' โดยทั่วไปแล้วจะมีลักษณะดังนี้:

property: value

ตัวอย่างเช่น:

วิธีค้นหาเซิร์ฟเวอร์ที่ไม่ลงรอยกัน

color: red

ค่าสำหรับคุณสมบัติที่แตกต่างกันอาจดูแตกต่างกันมาก แม้กระทั่งค่าสำหรับคุณสมบัติเดียวกัน ตัวอย่างเช่น ต่อไปนี้เป็นอีกสองวิธีในการเขียนประกาศก่อนหน้า:

color: #ff0000  
color: rgb(255, 0, 0)

HTML และสไตล์ชีตมารวมกันได้อย่างไร

คุณสามารถรวม HTML และ CSS ได้หลายวิธี โดยแต่ละแบบมีข้อดีของมัน

รูปแบบการเขียนแบบอินไลน์

วิธีที่ง่ายที่สุดคือแนบการประกาศรูปแบบโดยตรงกับองค์ประกอบในไฟล์ HTML คุณสามารถทำได้โดยใช้ สไตล์ คุณลักษณะเช่นนี้:

  
 Most of this text is red …
  
 … but this isn’t!

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

การฝังสไตล์ในหัว

คุณสามารถเริ่มดูว่าสไตล์ชีตเป็นอย่างไรด้วยกลไกที่สอง ฝัง . เมื่อใช้วิธีนี้ เราจะรวบรวมการประกาศสไตล์ทั้งหมดไว้ด้วยกันภายใน a สไตล์ องค์ประกอบใน ศีรษะ ของเอกสารของเรา มันจะมีลักษณะดังนี้:

  
  
  
  
 /* style instructions go here */  
  
  
  
 ...

คำแนะนำเกี่ยวกับสไตล์ของเราต้องการรายละเอียดมากกว่าเดิมเล็กน้อย เนื่องจากเราได้ย้ายพวกเขาไปที่ส่วนหัว กฎแต่ละข้อจะไม่เชื่อมโยงกับองค์ประกอบอีกต่อไป เราอาจได้ประกาศ สี: แดง แต่สิ่งที่ควรมีสีนั้น?

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

โอเค google เล่าเรื่องให้ฉันฟังหน่อย

selector {  
 declaration1;  
 declaration2;  
 /* etc. */  
}

ตัวอย่างเช่น เมื่อต้องการจัดรูปแบบข้อความของย่อหน้าเป็นสีน้ำเงิน เราสามารถระบุสิ่งต่อไปนี้:

p {  
 color: blue;  
}

ในตัวอย่างนี้ ตัวเลือกคือ NS ซึ่งตรงกับองค์ประกอบย่อหน้าทั้งหมดในเอกสารของเรา จะทำให้ข้อความเป็นสีน้ำเงินทั้งหมด ตราบใดที่อยู่ใน

การเชื่อมโยงสไตล์ชีตภายนอก

วิธีสุดท้ายที่จะครอบคลุมคือการเชื่อมโยง นี่เป็นแนวทางที่มีประโยชน์มากที่สุด และเป็นวิธีที่คุณควรเลือกใช้เป็นส่วนใหญ่ แทนที่จะฝังกฎ CSS ใน สไตล์ ในเอกสารของคุณโดยตรง คุณสามารถย้ายออกไปยังไฟล์แยกต่างหากได้

วางรหัสนี้ภายใน แท็กของไฟล์ HTML ของคุณเพื่อเชื่อมโยงสไตล์ชีตภายนอกของคุณ

พลังของ CSS

ด้วยวิธีการเชื่อมโยง เรากำลังควบคุมพลังหลักของ CSS: การแยกข้อกังวล ข้อมูลเชิงความหมายทั้งหมด—ความหมายของเนื้อหา—มีอยู่ในเอกสาร HTML การจัดสไตล์—มีลักษณะอย่างไร—อยู่ในไฟล์ที่แยกจากกัน นั่นคือสไตล์ชีต

นี่เป็นเพียงประโยชน์บางประการของการแยกนี้:

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

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

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

เมื่อทำงานร่วมกัน ทีมต่างๆ สามารถทำงานได้อย่างเต็มกำลัง สร้างและแก้ไขไฟล์แยกกันโดยไม่ส่งผลกระทบซึ่งกันและกัน

อธิบายคาสเคด

คุณได้เรียนรู้มากมายเกี่ยวกับสไตล์และสไตล์ชีตแล้ว แต่ส่วนการเรียงซ้อนของ CSS ล่ะ

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

คุณอาจเคยสงสัยเกี่ยวกับรูปแบบเริ่มต้นแล้ว ตัวอย่างเช่น an . ทำอย่างไร H1 องค์ประกอบดูใหญ่และหนา แม้จะไม่มีสไตล์ชีตของผู้เขียนก็ตาม ต้องขอบคุณชุดกฎพิเศษที่ประกอบขึ้นเป็นสไตล์ชีตตัวแทนผู้ใช้ เว็บเบราว์เซอร์ของคุณเริ่มใช้กฎเหล่านี้กับทุกหน้าที่คุณเข้าชม

คาสเคดระบุว่าสไตล์ชีตของผู้เขียนนำไปใช้หลังสไตล์เอเจนต์ผู้ใช้ หากเบราว์เซอร์ของเราระบุว่าส่วนหัวเป็นตัวหนา แต่ผู้เขียนหน้าเว็บระบุว่าส่วนหัวในหน้านี้เป็นแบบเบา แสดงว่าส่วนหัวนั้นสว่าง

มีแหล่งสไตล์ชีตอื่นที่มอบการควบคุมบางอย่างให้กับผู้อ่าน ตามทฤษฎีแล้ว ผู้ใช้เว็บทุกคนสามารถรักษาสไตล์ชีตของผู้ใช้ด้วยกฎที่กำหนดเองได้ สิ่งเหล่านี้อยู่ตรงกลาง: กฎของผู้ใช้จะแทนที่การตั้งค่าเบราว์เซอร์เริ่มต้น แต่สไตล์ผู้เขียนจะถูกแทนที่ด้วยตัวมันเอง น่าเศร้าที่การสนับสนุนสไตล์ชีตของผู้ใช้ไม่เคยมีแพร่หลายมากนัก

กำหนดเป้าหมายสื่อต่างๆ

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

ที่เกี่ยวข้อง: วิธีท่องเว็บหากคุณตาบอดหรือพิการทางสายตา
วิธีติดตั้ง google play store บน amazon fire

ไซต์ต่างๆ เช่น Wikipedia ใช้ CSS เพื่อควบคุมรูปแบบการพิมพ์ ซ่อนองค์ประกอบที่ไม่ต้องการ และทำให้รูปแบบง่ายขึ้น

CSS ทำให้ HTML ดูดี

Cascading Style Sheets ครอบคลุมหลายอย่าง: น้ำตก, การสืบทอด, ตัวเลือก, แหล่งที่มา, สื่อ ฯลฯ แต่พลังของมันช่วยให้เว็บสมัยใหม่ นี่คือสื่อที่ให้คุณสมบัติในการนำมาใช้ใหม่ ความยืดหยุ่น และการเข้าถึงได้ในตัว

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

การเขียนโปรแกรม

การพัฒนาเว็บ

CSS

เกี่ยวกับผู้เขียน Bobby Jack(58 บทความเผยแพร่)
Bobby เป็นผู้ที่ชื่นชอบเทคโนโลยีซึ่งทำงานเป็นนักพัฒนาซอฟต์แวร์มาเกือบสองทศวรรษ เขาหลงใหลในการเล่นเกม ทำงานเป็นบรรณาธิการบทวิจารณ์ที่ Switch Player Magazine และหมกมุ่นอยู่กับทุกแง่มุมของการเผยแพร่ออนไลน์และการพัฒนาเว็บ
เพิ่มเติมจาก Bobby Jack
สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก