Cascading Style Sheet (CSS) เป็นระบบสำหรับการเข้ารหัสเว็บไซต์ที่ช่วยให้นักออกแบบสามารถจัดการคุณสมบัติหลายอย่างพร้อมกันโดยกำหนดองค์ประกอบบางอย่างให้กับกลุ่ม ตัวอย่างเช่น โดยใช้โค้ดสำหรับพื้นหลังของเว็บไซต์ นักออกแบบสามารถเปลี่ยนสีพื้นหลังหรือรูปภาพบนทุกหน้าของเว็บไซต์โดยเปลี่ยนไฟล์ CSS เพียงครั้งเดียว ต่อไปนี้เป็นวิธีสร้าง CSS สำหรับเว็บไซต์พื้นฐาน
ขั้นตอน
ส่วนที่ 1 จาก 4: การเขียน CSS แบบอินไลน์
ขั้นตอนที่ 1 ตรวจสอบให้แน่ใจว่าคุณมีความเข้าใจพื้นฐานเกี่ยวกับแท็ก HTML
คุณควรรู้ว่าแท็กทำงานอย่างไรและของ
src
และ
href
คุณลักษณะ.
ขั้นตอนที่ 2 เรียนรู้คุณสมบัติ CSS พื้นฐานบางส่วน
คุณจะพบว่ามีคุณสมบัติมากมาย อย่างไรก็ตาม ไม่จำเป็นต้องเรียนรู้ทั้งหมด
-
คุณสมบัติ CSS พื้นฐานที่ดีที่ควรทราบคือ
สี
และ
ตระกูลอักษร
- .
ขั้นตอนที่ 3 เรียนรู้เกี่ยวกับค่าสำหรับแต่ละคุณสมบัติที่เกี่ยวข้อง
คุณสมบัติทั้งหมดต้องการค่า สำหรับ
สี
คุณสมบัติ เช่น คุณอาจใส่
สีแดง
ค่า.
ขั้นตอนที่ 4. เรียนรู้เกี่ยวกับ
สไตล์
แอตทริบิวต์ HTML
ใช้ภายในองค์ประกอบเช่น
href
หรือ
src
. หากต้องการใช้ ภายในเครื่องหมายคำพูดหลังเครื่องหมายเท่ากับ ให้ใส่แอตทริบิวต์ CSS เครื่องหมายทวิภาค แล้วตามด้วยค่าของคุณสมบัติ สิ่งนี้เรียกว่ากฎ CSS
ขั้นตอนที่ 5 ทำความเข้าใจว่า CSS แบบอินไลน์มักไม่ได้ใช้สำหรับเว็บไซต์โดยนักพัฒนาเว็บมืออาชีพ
CSS แบบอินไลน์สามารถเพิ่มความยุ่งเหยิงที่ไม่จำเป็นให้กับเอกสาร HTML อย่างไรก็ตาม เป็นวิธีที่ยอดเยี่ยมในการเรียนรู้วิธีการทำงานของ CSS
ส่วนที่ 2 จาก 4: การเขียน CSS พื้นฐาน
ขั้นตอนที่ 1. เปิดโปรแกรมที่คุณต้องการใช้
ควรอนุญาตให้คุณสร้างไฟล์ HTML และ CSS
หากคุณไม่ได้ติดตั้งโปรแกรมพิเศษไว้ คุณสามารถใช้ Notepad หรือโปรแกรมแก้ไขข้อความอื่นได้ เพียงบันทึกไฟล์ของคุณเป็นไฟล์ข้อความและไฟล์ CSS
ขั้นตอนที่ 2 เปิดไฟล์ HTML สำหรับเว็บไซต์ของคุณ
คุณควรเปิดสิ่งนี้ด้วยโปรแกรมแก้ไข HTML เช่นกัน หากคุณติดตั้งไว้
โปรแกรมแก้ไข HTML ช่วยให้คุณสามารถแก้ไข HTML และ CSS ได้ในเวลาเดียวกัน
ขั้นตอนที่ 3 สร้างแท็กภายในส่วนหัว HTML ของคุณ
วิธีนี้จะช่วยให้คุณเขียน CSS ได้โดยไม่ต้องใช้ไฟล์แยกต่างหาก
ขั้นตอนที่ 4 เลือกองค์ประกอบที่คุณต้องการเพิ่มสไตล์และพิมพ์ชื่อขององค์ประกอบตามด้วยชุดของวงเล็บปีกกา ({ })
เพื่อให้โค้ดของคุณอ่านง่ายยิ่งขึ้น ให้ใส่วงเล็บปีกกาที่สองในบรรทัดของตัวเองเสมอ
ขั้นตอนที่ 5. ระหว่างวงเล็บปีกกา พิมพ์กฎ CSS ของคุณตามที่คุณต้องการโดยใช้
สไตล์
คุณลักษณะ.
แต่ละบรรทัดต้องลงท้ายด้วยเครื่องหมายอัฒภาค (;) เพื่อให้โค้ดของคุณอ่านง่าย กฎแต่ละข้อควรเริ่มต้นในบรรทัดของตนเอง และควรเยื้องแต่ละบรรทัด
เป็นสิ่งสำคัญมากที่จะต้องทราบว่าการจัดสไตล์นี้จะส่งผลต่อองค์ประกอบทั้งหมดของประเภทที่เลือกบนหน้า สไตล์ที่เฉพาะเจาะจงมากขึ้นจะกล่าวถึงในหัวข้อถัดไป
ส่วนที่ 3 จาก 4: CSS ขั้นสูงเพิ่มเติม
ขั้นตอนที่ 1 สร้างไฟล์ CSS ไม่ใช่ไฟล์ HTML และบันทึกโดยใช้
.css
ส่วนขยาย.
เปิดไฟล์ HTML ของคุณด้วย
ขั้นตอนที่ 2 สร้างแท็กในส่วนหัว HTML ของคุณ
ซึ่งจะทำให้คุณสามารถเชื่อมโยงไฟล์ CSS แยกกับเอกสาร HTML ของคุณ แท็กลิงค์ของคุณต้องมีสามแอตทริบิวต์:
เรล
พิมพ์
และ
href
-
เรล
หมายถึง "ความสัมพันธ์" และบอกเบราว์เซอร์ว่าความสัมพันธ์กับเอกสาร HTML คืออะไร ที่นี่มันควรจะมีค่าของ
"สไตล์ชีต"
- .
-
พิมพ์
บอกว่าสื่อประเภทใดที่เชื่อมโยงกับ ที่นี่มันควรจะมีค่าของ
"ข้อความ/css"
-
href
- ที่นี่ใช้ในลักษณะเดียวกับที่ใช้ในองค์ประกอบ แต่ที่นี่ต้องลิงก์ไปยังไฟล์ CSS หากไฟล์ CSS อยู่ในโฟลเดอร์เดียวกับไฟล์ HTML จะต้องเขียนเฉพาะชื่อไฟล์ภายในเครื่องหมายคำพูด
ขั้นตอนที่ 3 เลือกองค์ประกอบประเภทต่างๆ ที่คุณต้องการเพิ่มสไตล์เดียวกัน
เพิ่ม
ระดับ
แอตทริบิวต์ขององค์ประกอบเหล่านี้และตั้งค่าให้เท่ากับชื่อคลาสที่คุณเลือก สิ่งนี้จะทำให้องค์ประกอบของคุณมีสไตล์เหมือนกัน
ขั้นตอนที่ 4 กำหนดสไตล์ที่คลาสจะได้รับ
พิมพ์ชื่อคลาสในไฟล์ CSS ของคุณด้วยจุด (.) นำหน้า (เช่น
.ระดับ
).
ขั้นตอนที่ 5. เลือกองค์ประกอบเดียวที่คุณต้องการเพิ่มสไตล์พิเศษและเพิ่ม an
NS
คุณลักษณะ.
รหัสถูกสร้างขึ้นใน CSS โดยใช้สัญลักษณ์ปอนด์ (#) แทนที่จะเป็นจุด
รหัสมีความเฉพาะเจาะจงมากกว่าคลาส ดังนั้น id จะแทนที่การจัดสไตล์คลาสใดๆ หากมีแอตทริบิวต์ที่มีค่าแตกต่างจากคลาส
ส่วนที่ 4 จาก 4: เรียนรู้เพิ่มเติม
ขั้นตอนที่ 1 เยี่ยมชมโรงเรียน w3
เป็นเว็บไซต์อย่างเป็นทางการที่มุ่งสอนทักษะการพัฒนาเว็บ w3 มีข้อมูลอ้างอิงมากมายสำหรับ HTML และ CSS รวมถึงภาษาเว็บอื่นๆ
ขั้นตอนที่ 2 ค้นหาไซต์อื่นๆ ที่มุ่งเป้าไปที่การเรียนรู้และการสอน HTML และ CSS โดยเฉพาะ
ไซต์เช่น CSS tricks.com มีวัตถุประสงค์เพื่อสอน CSS และทักษะการออกแบบเว็บโดยเฉพาะ การค้นหาแหล่งข้อมูลที่มีชื่อเสียงจะช่วยคุณในเส้นทางการเรียนรู้
ขั้นตอนที่ 3 ติดต่อกับนักออกแบบเว็บไซต์และนักพัฒนา
ประสบการณ์และความรู้ของพวกเขาสามารถสอนความรู้และทักษะอันมีค่าแก่คุณได้
ขั้นตอนที่ 4 ดูซอร์สโค้ดของเว็บไซต์ที่คุณเจอ
การดู CSS ของเว็บไซต์ที่พัฒนามาอย่างดีสามารถแสดงวิธีออกแบบส่วนต่างๆ ของเว็บไซต์ได้ การคัดลอกมันลงมาเป็นการฝึกฝนและเล่นซอกับโค้ดสามารถช่วยให้คุณเรียนรู้วิธีใช้แอตทริบิวต์ CSS ต่างๆ
วิดีโอ - การใช้บริการนี้ อาจมีการแบ่งปันข้อมูลบางอย่างกับ YouTube
