CSS อธิบายถึงคำศัพท์พื้นฐานเบื้องต้น
CSS หรือ Cascading Stylesheets ดำเนินการกำหนดภาษาของกฎการออกแบบสำหรับเว็บของเราให้สมบูรณ์ ศิลปินทุกที่ใช้ CSS ทุกวันเพื่อสร้างจัดระเบียบและเข้ารหัสชุดของกฎสำหรับเค้าโครงเว็บไซต์พื้นฐาน นี่เป็นภาษาที่ได้รับความนิยมมากที่สุดสำหรับการออกแบบส่วนหน้าและมอบความสามารถที่น่าทึ่งด้วย CSS3 รุ่นล่าสุด แต่รหัสทั้งหมดนี้หมายความว่าอย่างไร?
ภาษานั้นได้รับการพัฒนาอย่างเต็มที่ในเวลาไม่กี่ปีที่ผ่านมา ความสับสนสามารถเกิดขึ้นได้ส่วนใหญ่เกิดจากการสื่อสารผิดพลาดและการใช้คำที่คล้ายกันในทางที่ผิด CSS นำแนวคิดใหม่มากมายมาสู่ตาราง เราจะครอบคลุมคำศัพท์ที่ได้รับความนิยมมากที่สุดเพื่อให้เชี่ยวชาญในฐานะกูรู CSS.
ทำไมต้องเป็นผู้เชี่ยวชาญด้วย CSS?
คำถามนี้ได้รับการโพสต์ก่อนหน้านี้และแม้กระทั่งการป้อน 2011 เราสามารถเห็นผลลัพธ์เดียวกันโผล่ขึ้นมา CSS เป็นภาษาที่แข็งแกร่งไม่ชอบการเขียนสคริปต์หรือการเขียนโปรแกรม เป็นภาษาสไตล์รหัสพิเศษที่ใช้เพื่ออธิบายว่าหน้าเว็บควรทำงานอย่างไร.
การใช้ CSS เราสามารถจัดการแอตทริบิวต์จากองค์ประกอบ HTML แต่ละรายการได้โดยตรง บล็อกย่อหน้าลิงก์และรูปภาพทั้งหมดอาจได้รับผลกระทบผ่านกฎ CSS การปรับความหมายของงานนำเสนอสำหรับเว็บเป็นขั้นตอนที่ยิ่งใหญ่เสมอ นี่คือเหตุผลหลักว่าทำไม CSS ยังคงเป็นผู้เล่นชั้นนำสำหรับนักออกแบบ - ไม่มีใครสร้างสิ่งที่ดีกว่า!
คุณสมบัติและค่า
นี่เป็นวิธีที่ง่ายที่สุดในการเจาะเข้าไปใน CSS รหัสทั้งหมดแบ่งออกเป็นสองการกระทำ: การเลือกองค์ประกอบเพื่อใช้การออกแบบและสิ่งที่จะนำไปใช้ หลังถูกสร้างผ่านคู่ของคุณสมบัติ / ค่า.
ตัวอย่างเช่น สี: แดง; เป็นคู่ของคุณสมบัติ / ค่าที่ง่ายมาก คุณสมบัติที่เราใช้คือ สี ซึ่งช่วยให้เราสามารถผ่านในการยอมรับใด ๆ ราคา เพื่อเปลี่ยนสีข้อความ นี่อาจเป็นรหัสฐานสิบหกหรือข้อมูลสี RGB (แดงเขียวน้ำเงิน) หลายครั้งที่นักออกแบบจะไม่พูดถึงแนวคิดเรื่องค่าเพราะมันอาจทำให้เข้าใจผิด.
คุณสมบัติและค่านิยมเป็นแนวคิดเดียวที่แท้จริง การประกาศคุณสมบัติทุกครั้งต้องมีค่าและค่าด้วยตัวเองนั้นไม่มีความหมาย มีเอกสารจำนวนมากแบบออนไลน์ซึ่งผ่านคุณสมบัติที่แตกต่างกันมากมายและมีผลต่อองค์ประกอบ HTML อย่างไร ฉันขอแนะนำให้ซื้อหนังสืออ้างอิง CSS จากร้านหนังสือใกล้ ๆ พวกเขาค่อนข้างถูกและเก็บข้อมูลทั้งหมดที่คุณต้องการ.
ค่าตัวเลือก
ตัวเลือกจำเป็นสำหรับการกรอกรหัส CSS ให้สมบูรณ์ นี่คือสิ่งที่เราประกาศเพื่อกำหนดประเภทขององค์ประกอบที่เรากำหนดเป้าหมาย มีตัวเลือกมากมายและหลายคนเชื่อว่านักออกแบบทั่วไปไม่ต้องการทักษะ ตรวจสอบเอกสารตัวเลือกของ W3 หากคุณต้องการข้อมูลเพิ่มเติม.
วิธีที่ง่ายที่สุดในการเริ่มต้นนิยามสไตล์คือใช้อิลีเมนต์เปลือยเป็นตัวเลือกคุณสมบัติ นี่หมายถึงการจัดการโค้ดรูตเช่น พี สำหรับย่อหน้า, div สำหรับหน่วยงานและแม้กระทั่ง ร่างกาย และ HTML สามารถใช้เพื่อจัดการเอกสารหน้าเว็บทั้งหมด ด้านล่างเป็นตัวอย่างรวดเร็วของการจัดแต่งทรงผมองค์ประกอบย่อหน้าทั้งหมด.
p font-family: Arial, sans-serif; สี: # 222; น้ำหนักตัวอักษร: ตัวหนา;
สิ่งที่ให้น้ำหนักจริงของ CSS คือความแม่นยำของการเลือกตัวเลือก วิธีที่ดีที่สุดในการบรรลุสไตล์เป้าหมายคือ 2 วิธีที่รู้จักกันในชื่อ ชั้นเรียน และ รหัส. สิ่งเหล่านี้เป็นแนวคิดธรรมดาใน HTML ที่คุณสามารถตั้งค่าองค์ประกอบใด ๆ ให้มี ID และค่าของคลาสผ่านแอตทริบิวต์ จากนั้นใช้ CSS มันง่ายที่จะใช้สไตล์กับบล็อกนั้น.
p # firstpar font-size: 14px; / * ย่อหน้าสไตล์พร้อม ID ของ "firstpar" * / p.comment font-size: 1.0em; ความสูงของเส้น: 1.3em; / * ย่อหน้าสไตล์พร้อมคลาส "comment" * /
หน่วยความยาวและค่า
บ่อยครั้งที่คำเหล่านี้ปะปนกันมาไม่แปลกใจเลย มีการอธิบายค่าก่อนหน้านี้เป็นตำแหน่งที่เราใช้เพื่ออธิบายคุณสมบัติ หน่วยความยาวยังเป็นค่าที่ใช้เพื่ออธิบายคุณสมบัติ.
ความแตกต่างคือค่าเหล่านี้ต้องการข้อมูลตัวเลขดังนั้นจึงต้องส่งคืนบางรูปแบบของหน่วย พิกเซล (px) เป็นรูปแบบที่แพร่หลายมากที่สุดและสามารถนำไปใช้ได้กับทุกสิ่ง: ความกว้าง / ความสูง, ขนาดตัวอักษร, ช่องว่างภายใน / ระยะขอบ, เพื่อชื่อไม่กี่.
นอกเหนือจากนี้คุณอาจเห็นเปอร์เซ็นต์ (%) ที่ใช้บ่อย ๆ ผ่านเลย์เอาต์ของเหลว เมื่อตั้งค่าความกว้างเป็นเปอร์เซ็นต์คอมไพเลอร์จะถือว่า 100% เป็นความกว้างทั้งหมดของเว็บเบราว์เซอร์ สิ่งนี้ให้ความแม่นยำกับนักออกแบบเมื่อนำสไตล์ไปใช้กับโครงสร้างเค้าโครงและแม้กระทั่งการพิมพ์หน้า.
บล็อกการประกาศ
ตอนนี้หลังจากที่ใส่คำเหล่านี้ทั้งหมดเข้าด้วยกันเราก็สามารถพูดคุยแนวคิดหลักที่อยู่เบื้องหลังสไตล์ชีต บล็อกของรหัสที่ใช้ในการวิเคราะห์พื้นที่หัวข้อและระบุรายละเอียดองค์ประกอบ ตัวอย่างเช่นด้านล่างคือบรรทัดของรหัสสำหรับคอนเทนเนอร์การนำทางแบบง่าย:
div # nav display: block; ความกว้าง: 100%; การขยาย: 3px 6px; ระยะขอบล่าง: 20px;
วิธีที่ง่ายที่สุดในการแสดงรหัสนี้คือคุณสมบัติของสายหนึ่งหลังจากที่อื่น ๆ นักพัฒนา CSS ได้ใช้บล็อคของรหัสเพื่อแยกแต่ละคุณสมบัติออกเป็นบรรทัดของมันเอง วาระนี้ไม่เพียง แต่จะใช้พื้นที่มากขึ้น แต่ช่วยลดความสามารถในการ “เรียด” แผ่นงานของคุณเพื่อค้นหาสิ่งที่คุณต้องการ.
วิธีที่ดีกว่าในการแยกกลุ่มของรหัสคือการแยกองค์ประกอบที่ซับซ้อนลงในของตนเองหลังจากที่ถึงเกณฑ์ หมายเลขนี้เป็นส่วนบุคคลและจะแตกต่างกันระหว่างนักพัฒนา มันเป็นจุดเปลี่ยนที่ตรรกะบอกให้มันโง่เพื่อให้ทุกอย่างอยู่ในบรรทัดเดียวส่วนใหญ่เป็นเพราะความสามารถในการอ่าน.
ด้านล่างฉันได้เขียนตัวอย่างของคุณสมบัติการนำทางทั้งหมดไว้ด้วยกัน การปฏิบัตินี้ช่วยให้องค์ประกอบที่ลึกกว่าอยู่ในตำแหน่งเดียวกันดังนั้นการแก้ไของค์ประกอบการนำทางทั้งหมดนั้นง่ายกว่ามาก.
div # nav display: block; ความกว้าง: 100%; การขยาย: 3px 6px; ระยะขอบล่าง: 20px; div # nav ul list-style: none; จอแสดงผล: บล็อก; div # nav ul li float: left; ระยะขอบขวา: 10px; ขนาดตัวอักษร: 12px; div # nav ul li a color: # 0f0f0f; การตกแต่งข้อความ: ไม่มี; จอแสดงผล: บล็อกแบบอินไลน์; การขยาย: 2px 5px;
ความก้าวหน้าที่เป็นไปได้จาก CSS2 / CSS3
ในหัวข้อเมื่อเร็ว ๆ นี้ได้รับการพูดคุยไม่หยุดเกี่ยวกับประโยชน์ที่น่าอัศจรรย์จาก CSS3 แต่สิ่งที่มีจริงๆ การเปลี่ยนแปลง ในภาษา? เห็นได้ชัดว่ารหัสเก่าจะยังคงทำงานได้ดี อย่างน้อยก็แสดงความเข้ากันได้อย่างสมบูรณ์แบบย้อนหลังระหว่างคอมไพเลอร์ (เป็นสิ่งที่ดีเสมอ).
ความแตกต่างที่สำคัญส่วนใหญ่เกี่ยวข้องกับคุณสมบัติใหม่ สิ่งเหล่านี้ช่วยให้มุมมนและเอฟเฟกต์เงาถูกแสดงผลในเบราว์เซอร์ CSS3 ยังมีเครื่องมือใหม่สำหรับการอธิบายสีในเอกสาร HSL (Hue-Saturation-Lightness) เป็นรุ่นใหม่ล่าสุดนอกเหนือจาก HSLA ซึ่งรวมถึงช่องอัลฟ่าเพื่อลดความทึบ.
ตัวเลือกแอททริบิวต์เป็นก้าวสำคัญในการกำหนดมาร์กอัปแบบตรง ด้วยโค้ดลักษณะนี้คุณสามารถกำหนดเป้าหมายชื่อองค์ประกอบเฉพาะซึ่งมีแอตทริบิวต์ที่มีค่าบางอย่าง สิ่งเหล่านี้ส่วนใหญ่มีประโยชน์เมื่อทำงานกับมาร์กอัพเช่น XML ซึ่งไม่มีหลักการออกแบบมาตรฐานเพื่อจัดการกับโหนด ตัวอย่างด้านล่างเป็นแนวคิดที่ค่อนข้างง่าย:
div [attrib ^ = "1"] / * สไตล์ที่นี่ * /
รหัสข้างต้นเป็นส่วนหนึ่งของไลบรารี CSS selectors สิ่งนี้จะส่งผลกระทบต่อองค์ประกอบ div ทั้งหมดด้วยแอตทริบิวต์ “attrib” ซึ่งยังเก็บค่า “1”. หากยังคงทำให้สับสนอ้างอิงตัวอย่างด้านล่างเพื่อชี้แจง ตามทฤษฎีแล้วตัวเลือกทั้งสองนี้ควรทำสิ่งเดียวกัน.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
ข้อสรุป
หลังจากแยกคำศัพท์ CSS ที่สับสนมากเกินไปออกไปดูเหมือนว่ากำลังเดินอยู่ในสวนสาธารณะ ภาษานั้นใช้งานง่ายมากและผู้เริ่มต้นสามารถเริ่มออกแบบได้ภายในสองสามชั่วโมงแรก นี่คือสิ่งที่ทำให้ CSS เป็นที่นิยมในหมู่นักพัฒนาเว็บ.
ประโยชน์ของ CSS3 เพิ่งจะเริ่มมีผล ในช่วงไม่กี่ปีที่ผ่านมาการพัฒนาแนวโน้มของเว็บจะแสดงให้เราเห็นว่าเรามีการควบคุมการออกแบบหน้าเว็บมากเพียงใด CSS ปัจจุบันมีความภาคภูมิใจในฐานะภาษาหลักสำหรับการออกแบบเว็บไซต์ส่วนหน้า การฝึกฝนทักษะระดับกลางขั้นพื้นฐานสามารถสร้างประสบการณ์การออกแบบที่กว้างขวางและความรู้เพิ่มเติม.
