บทช่วยสอน CSS: เรียนรู้ CSS จาก Scratch

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

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

เรียนรู้ หลักสูตรการพัฒนาซอฟต์แวร์ ออนไลน์จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม Executive PG โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว

CSS คืออะไร?

Cascading สไตล์ชีต (CSS) เป็นส่วนสำคัญของเว็บไซต์ เป็นภาษาเขียนโค้ดที่ใช้ร่วมกับ HTML และ JavaScript เพื่อออกแบบเลย์เอาต์ทั้งหมดของเว็บไซต์ ไม่ว่าจะเป็นหน้าเว็บ สี ขนาดฟอนต์ ช่องว่างระหว่างข้อความ องค์ประกอบต่างๆ และการวางตำแหน่ง พื้นหลัง และขนาดหน้าจอ

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

สำรวจหลักสูตรวิศวกรรมซอฟต์แวร์ยอดนิยมของเรา

ต่อไปนี้เป็นข้อดีที่สำคัญอื่นๆ ของ CSS:

• ความเร็วที่เพิ่มขึ้น:

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

• บำรุงรักษาง่าย:-

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

• ความเข้ากันได้ของอุปกรณ์:-

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

CSS ประเภทต่าง ๆ มีอะไรบ้าง

• CSS แบบอินไลน์:-

  ใช้เพื่อจัดรูปแบบองค์ประกอบเดียวใน HTML แทนที่จะเป็นทั้งส่วน นักออกแบบใช้ CSS แบบอินไลน์เพื่อจัดรูปแบบองค์ประกอบเดียวอย่างต่อเนื่อง

• CSS ภายใน:-

  เรียกอีกอย่างว่า CSS แบบฝังและพร้อมใช้งานในสไตล์ ใช้ในหน้าเดียวโดยรวมไว้ที่ด้านบนของเอกสาร

• CSS ภายนอก: -

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

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

ไวยากรณ์ใน CSS

ไวยากรณ์ใน CSS หมายถึงกฎหรือองค์ประกอบการจัดรูปแบบต่างๆ ที่เบราว์เซอร์ตีความในขณะที่ออกแบบหน้าเว็บ ต่อไปนี้เป็นองค์ประกอบหลักสามประการของ CSS:

• ตัวเลือก:-

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

• ตัวเลือกสากล:-

  ไม่ได้เลือกองค์ประกอบตามประเภท แต่จะเลือกองค์ประกอบทั้งหมดที่มีชื่อเดียวกันแทน

• ตัวเลือกทายาท:-

  ตัวเลือกเหล่านี้ใช้สำหรับการนำกฎของสไตล์ไปใช้กับองค์ประกอบเฉพาะเมื่อมีอยู่ในองค์ประกอบอื่นโดยเฉพาะ

• ตัวเลือกคลาส:-

  ตามชื่อที่แนะนำ ตัวเลือกเหล่านี้ใช้กฎการจัดรูปแบบกับองค์ประกอบทั้งหมดของชั้นเรียนหนึ่งๆ ตัวอย่างเช่น องค์ประกอบทั้งหมดในหน้าเว็บที่มีเครื่องหมาย H2 จะต้องมีขนาดแบบอักษร 12

• ตัวเลือก ID:-

  ตัวเลือกเหล่านี้ใช้กฎการจัดรูปแบบตามรหัสที่คล้ายคลึงกัน

• คุณสมบัติ:-

  คุณสมบัติ CSS จะอ้างถึงแอตทริบิวต์หรือคุณลักษณะต่างๆ ของแท็ก HTML เช่น สี ขนาด เส้นขอบ และการจัดตำแหน่ง

• ค่า:-

  ค่าเหล่านี้เป็นค่าที่กำหนดให้กับคุณสมบัติ CSS ตัวอย่างเช่น สีหรือขนาดเฉพาะต้องมีค่า #A2A2

รหัสสี CSS

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

• รหัสฐานสิบหก:-

  รหัสเหล่านี้เป็นรหัสหกหลักที่ใช้แทนค่าสี ตัวเลขสองหลักเริ่มต้นของรหัส (RR) แทนค่าสีแดง และตามด้วยค่าสีเขียว 2 ค่า (GG) และ 2 ค่าสุดท้ายสำหรับสีน้ำเงิน (BB) คุณสามารถใช้ค่าเลขฐานสิบหกจากซอฟต์แวร์กราฟิกต่างๆ เช่น Adobe และ Advanced Paint Brush สิ่งสำคัญคือต้องสังเกตว่ารหัสฐานสิบหกใน CSS เริ่มต้นด้วยเครื่องหมายแฮช

• ค่า RGB:-

  ในคุณสมบัตินี้ มีค่าเฉพาะสำหรับแต่ละสีสามสี ได้แก่ แดง เขียว และน้ำเงิน

วิธีการตั้งค่าสีพื้นหลังด้วย CSS?

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

<p style=”background-color: blue;”>. จะทำให้ข้อความหรือแท็กนั้นมีสีพื้นหลังสีน้ำเงิน ในทำนองเดียวกัน คุณต้องใช้คุณสมบัติ "background-image" เพื่อตั้งค่าภาพพื้นหลัง ในการทำซ้ำรูปภาพในพื้นหลัง คุณสามารถใช้คุณสมบัติ "background-repeat"

ต่อไปนี้เป็นคุณสมบัติ CSS ต่างๆ ที่ใช้ในการจัดรูปแบบฟอนต์:

• Font-family เปลี่ยนหน้าตาของฟอนต์
• ขนาดแบบอักษรใช้เพื่อเพิ่มหรือลดขนาดข้อความราคา
• Font-variant ทำให้ข้อความเป็นตัวพิมพ์เล็ก
• คุณสมบัติลักษณะแบบอักษรทำให้แบบอักษรเป็นตัวหนาหรือตัวเอียง น้ำหนักแบบอักษรช่วยเพิ่มหรือลดความเป็นตัวหนาของข้อความ

คุณสมบัติ CSS เพื่อจัดรูปแบบข้อความและรูปภาพ

CSS ยังมีคุณสมบัติต่างๆ ในการจัดรูปแบบข้อความขององค์ประกอบ

• คุณสมบัติ 'สี' กำหนดสี ในขณะที่คุณสมบัติทิศทางใช้เพื่อจัดรูปแบบ 'ทิศทาง' ของข้อความ
• คุณสมบัติ text-indent และ text-align ใช้เพื่อตั้งค่าการเยื้องของข้อความและจัดแนวข้อความตามลำดับ
• คุณสมบัติ Letter-space ช่วยเพิ่มหรือลดช่องว่างระหว่างคำ
• คุณสามารถใช้คุณสมบัติการตกแต่งข้อความเพื่อขีดเส้นใต้หรือขีดทับข้อความได้
• คุณสมบัติการแปลงข้อความช่วยแปลงข้อความจากตัวพิมพ์เล็กเป็นตัวพิมพ์ใหญ่และในทางกลับกัน
• คุณยังสามารถใช้คุณสมบัติ text-shadow เพื่อจัดเรียงเงารอบๆ ข้อความได้

รูปภาพของหน้าเว็บสามารถกำหนดสไตล์ได้โดยใช้คุณสมบัติ CSS ต่อไปนี้

• คุณสมบัติความสูงและความกว้างกำหนดความสูงและความกว้างของรูปภาพตามลำดับ
• คุณสามารถใช้คุณสมบัติเส้นขอบเพื่อกำหนดความกว้างของเส้นขอบรูปภาพได้
• คุณสมบัติ -moz-opacity ช่วยแก้ไขความโปร่งใสหรือความทึบของรูปภาพ

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

• คุณสมบัติ List-style-type ช่วยกำหนดรูปร่างของสัญลักษณ์แสดงหัวข้อย่อย ตัวเลข หรือเครื่องหมายอื่นๆ
• คุณยังสามารถใช้คุณสมบัติ list-style-image แทนคุณสมบัติด้านบนเพื่อเพิ่มรูปภาพแทนสัญลักษณ์แสดงหัวข้อย่อยหรือตัวเลข
• คุณสมบัติ List-style-position ควบคุมการจัดตำแหน่งหรือการเยื้องของจุดต่างๆ

อ่านบทความยอดนิยมของเราเกี่ยวกับการพัฒนาซอฟต์แวร์

บทสรุป

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

หากคุณต้องการประกอบอาชีพด้านการออกแบบเว็บไซต์ คุณสามารถเรียน หลักสูตรวิทยาศาสตรมหาบัณฑิตสาขาวิทยาการคอมพิวเตอร์ โดย upGrad