รูปแบบและการจัดวางภาพของเว็บไซต์จะกำหนดโดย CSS หรือ Cascading Style Sheets เอกสารเหล่านี้เป็นเอกสารที่สร้างมาร์กอัป HTML ของเว็บเบราเซอร์เพื่อให้คำแนะนำเกี่ยวกับวิธีแสดงหน้าเว็บที่เป็นผลมาจากมาร์กอัพดังกล่าว CSS จัดการรูปแบบของหน้าเว็บรวมทั้งสีภาพพื้นหลังการ พิมพ์ตัวอักษร และอื่น ๆ อีกมากมาย
ถ้าคุณดูไฟล์ CSS คุณจะเห็นว่าเหมือนมาร์กอัปหรือภาษาเขียนโค้ดไฟล์เหล่านี้มีไวยากรณ์เฉพาะเจาะจงสำหรับไฟล์เหล่านี้ แผ่นงานแต่ละชุดประกอบด้วยกฎของ CSS จำนวนหนึ่ง กฎเหล่านี้เมื่อเต็มรูปแบบเป็นสิ่งที่รูปแบบเว็บไซต์
ส่วนของกฎ CSS
กฎ CSS ประกอบด้วยสองส่วนที่แตกต่างกันคือตัวเลือกและการประกาศ ตัวเลือกจะกำหนดสิ่งที่กำลังถูกจัดรูปแบบไว้ในหน้าเว็บและการประกาศเป็นวิธีที่ควรจัดรูปแบบ ตัวอย่างเช่น:
p {
สี: # 000;
}
นี่เป็นกฎ CSS ส่วนตัว เลือก คือ "p" ซึ่งเป็นตัวเลือกองค์ประกอบสำหรับ "ย่อหน้า" ดังนั้นจึงควรเลือกย่อหน้าทั้งหมดในไซต์และจัดเตรียมสไตล์เหล่านี้ (เว้นแต่จะมีย่อหน้าซึ่งกำหนดเป้าหมายโดยรูปแบบเฉพาะเจาะจงอื่น ๆ ในเอกสาร CSS ของคุณ)
ส่วนของกฎที่ระบุว่า "color: # 000;" คือสิ่งที่เรียกว่าการประกาศ การประกาศดังกล่าวประกอบด้วย 2 ส่วนคือทรัพย์สินและคุณค่า
ทรัพย์สินคือส่วน "สี" ของคำประกาศนี้ จะบอกให้ทราบว่าด้านใดของตัวเลือกจะเปลี่ยนไปทางสายตา
ค่าคือสิ่งที่คุณสมบัติ CSS ที่เลือกจะเปลี่ยนเป็น ในตัวอย่างของเราเราใช้ค่าฐานสิบหกของ # 000 ซึ่งเป็นตัวชวเลข CSS สำหรับ "ดำ"
ดังนั้นการใช้กฎ CSS นี้หน้าของเราจะมีหน้าตาเป็นสีดำแบบอักษร
ข้อมูลพื้นฐานเกี่ยวกับ CSS
เมื่อเขียนคุณสมบัติ CSS คุณจะไม่สามารถสร้างคุณสมบัติตามที่เห็นสมควรได้ สำหรับอินสแตนซ์ "color" เป็นคุณสมบัติ CSS จริงดังนั้นคุณจึงสามารถใช้งานได้ คุณสมบัตินี้เป็นตัวกำหนดสีข้อความขององค์ประกอบ หากคุณพยายามใช้ "text-color" หรือ "font-color" เป็นคุณสมบัติ CSS เหล่านี้จะล้มเหลวเนื่องจากไม่ใช่ส่วนที่เป็นจริงของภาษา CSS
อีกตัวอย่างหนึ่งคือคุณสมบัติ "background-image" คุณสมบัตินี้กำหนดภาพที่สามารถใช้เป็นพื้นหลังได้เช่นนี้:
.logo {
ภาพพื้นหลัง: url (/images/company-logo.png);
}
ถ้าคุณพยายามใช้ "background-picture" หรือ "background-graphic" เป็น property พวกเขาจะล้มเหลวเนื่องจากอีกครั้งไม่ใช่คุณสมบัติ CSS จริง
คุณสมบัติบางอย่างของ CSS
มีคุณสมบัติ CSS จำนวนหนึ่งที่คุณสามารถใช้เพื่อกำหนดสไตล์ไซต์ได้ ตัวอย่างคือ:
- เส้นขอบ (รวมถึงเส้นขอบเส้นขอบสีและความกว้างของเส้นขอบ)
- แพดดิ้ง (รวม padding-top, padding ด้านขวา padding ด้านล่างและ padding ซ้าย)
- ขอบ (รวม margin-top, margin-right, margin-bottom และ margin-left)
- font-family
- ขนาดตัวอักษร
- สีพื้นหลัง
- ความกว้าง
- ความสูง
คุณสมบัติ CSS เหล่านี้เป็นสิ่งที่ยอดเยี่ยมที่ใช้เป็นตัวอย่างได้เนื่องจากทั้งหมดนี้ตรงไปตรงมามากและแม้ว่าคุณจะไม่รู้จัก CSS แต่อย่างใดคุณอาจคาดเดาสิ่งที่พวกเขาทำตามชื่อ
มีคุณสมบัติ CSS อื่น ๆ ที่คุณจะพบเช่นกันซึ่งอาจจะไม่ชัดเจนเท่าไหร่ว่าพวกเขาทำงานตามชื่อของพวกเขาอย่างไร:
- ลอย
- ชัดเจน
- ล้น
- ข้อความเปลี่ยน
- ดัชนี Z
เมื่อคุณได้ลึกลงในการออกแบบเว็บคุณจะพบ (และใช้) คุณสมบัติทั้งหมดเหล่านี้และอื่น ๆ !
คุณสมบัติต้องค่า
ทุกครั้งที่คุณใช้พร็อพเพอร์ตี้คุณจะต้องให้มูลค่าและคุณสมบัติบางอย่างสามารถยอมรับค่าบางอย่างเท่านั้น
ในตัวอย่างแรกของคุณสมบัติ "color" เราจำเป็นต้องใช้ค่าสี ค่านี้อาจเป็น ค่า hex ค่า RGBA หรือแม้แต่ สี ค่าใด ๆ เหล่านี้จะใช้ได้อย่างไรก็ตามหากคุณใช้คำว่า "มืดมน" กับพร็อพเพอร์ตี้นี้ก็จะไม่ทำอะไรเลยเพราะคำอธิบายเป็นคำนั้นอาจไม่ใช่ค่าที่ยอมรับใน CSS
ตัวอย่างที่สองของ "background-image" ต้องใช้เส้นทางภาพเพื่อ เรียกภาพจริง จากไฟล์ของไซต์ นี่คือค่า / ไวยากรณ์ที่จำเป็น
คุณสมบัติ CSS ทั้งหมดมีค่าที่พวกเขาคาดหวังไว้ ตัวอย่างเช่น:
- สีขอบคาดค่าสี
- ขนาดเส้นขอบคาดว่าจะมีค่าการปรับขนาดเช่นพิกเซลหรือเปอร์เซ็นต์
- สไตล์ชายแดนคาดว่ารูปแบบที่สงวนไว้สำหรับรูปแบบนี้เช่น "แบบทึบ"
ถ้าคุณดูรายการคุณสมบัติ CSS คุณจะพบว่าแต่ละรายการมีค่าเฉพาะเจาะจงที่จะใช้เพื่อสร้างสไตล์ที่ต้องการ
แก้ไขโดย Jeremy Girard