20 เคล็ดลับ CSS ที่มีประโยชน์สำหรับผู้เริ่มต้น

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

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

1. ใช้ reset.css

   เมื่อพูดถึงการแสดงสไตล์ CSS เบราว์เซอร์เช่น Firefox และ Internet Explorer จะมีวิธีการจัดการที่แตกต่างกัน. reset.css รีเซ็ตสไตล์พื้นฐานทั้งหมดดังนั้นคุณเริ่มต้นด้วยสไตล์ชีตใหม่ที่ว่างเปล่าจริง.

   นี่คือบางส่วนที่ใช้กันทั่วไป reset.css กรอบ - Yahoo รีเซ็ต CSS, รีเซ็ต CSS ของ Eric Meyer, ตริโปลี

2. ใช้ CSS ย่อ

   Shorthand CSS ช่วยให้คุณสามารถเขียนรหัส CSS ของคุณได้สั้นลงและที่สำคัญที่สุดคือทำให้โค้ดมีความชัดเจนและเข้าใจง่ายขึ้น.

   แทนที่จะสร้าง CSS แบบนี้

   .header background-color: #fff; ภาพพื้นหลัง: url (image.gif); พื้นหลังซ้ำ: ไม่ทำซ้ำ; พื้นหลังตำแหน่ง: บนซ้าย; 

   มันสามารถส่งสั้น ๆ ต่อไปนี้:

   .header background: #fff url (image.gif) ไม่มีการซ้ำซ้ายบน

   มากกว่า - รู้เบื้องต้นเกี่ยวกับ CSS ชวเลข, คุณสมบัติชวเลข CSS ที่มีประโยชน์

3. ความเข้าใจ ชั้น และ ID

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

   มากกว่า - Class กับ ID | เมื่อใดจึงจะใช้ Class, ID | การใช้ Class และ ID ร่วมกัน

4. พลังของ

5. รายการลิงก์ a.k.a มีประโยชน์มากเมื่อใช้อย่างถูกต้องด้วย
   หรือ
   , โดยเฉพาะอย่างยิ่งกับสไตล์เมนูนำทาง.

   • ลืม , ลอง

     หนึ่งในข้อได้เปรียบที่ยิ่งใหญ่ที่สุดของ CSS คือการใช้

     เพื่อให้เกิดความยืดหยุ่นโดยรวมในแง่ของการออกแบบ.

     แตกต่าง

     , ที่เนื้อหาถูก 'ล็อค' ภายใน

     เซลล์ของ ปลอดภัยที่จะพูดมากที่สุด รูปแบบสามารถทำได้ด้วยการใช้ และจัดแต่งทรงผมที่เหมาะสมอาจจะยกเว้นเนื้อหาตารางขนาดใหญ่. มากกว่า - โต๊ะตายแล้ว, ตารางเทียบกับ CSS, CSS เทียบกับตาราง เครื่องมือแก้จุดบกพร่อง CSS มันดีเสมอที่จะได้รับการแสดงตัวอย่างแบบทันทีในขณะที่ปรับแต่ง CSS มันช่วยให้เข้าใจและแก้ไขจุดบกพร่อง CSS ได้ดีขึ้น ต่อไปนี้เป็นเครื่องมือการดีบัก CSS ฟรีที่คุณสามารถติดตั้งบนเบราว์เซอร์ของคุณ: FireFox Web Developer, DOM Inspector, แถบเครื่องมือสำหรับนักพัฒนา Internet Explorer และ Firebug. หลีกเลี่ยง Selectors ที่ฟุ่มเฟือย บางครั้งการประกาศ CSS ของคุณอาจจะง่ายกว่าซึ่งหมายความว่าถ้าคุณพบว่าตัวเองกำลังเขียนโค้ดต่อไปนี้: ul li … ol li … table tr td … พวกเขาสามารถย่อให้เหลือเพียง หลี่ … td … คำอธิบาย: จะมีอยู่ภายในเท่านั้น หรือ และ และ จะอยู่ข้างในเท่านั้น ดังนั้นจึงไม่จำเป็นต้องใส่กลับเข้าไปใหม่. รู้ดี !สำคัญ สไตล์ใด ๆ ที่มีเครื่องหมาย !สำคัญ จะถูกนำไปใช้โดยไม่คำนึงว่ามีกฎการเขียนทับด้านล่างหรือไม่. .หน้า background-color: blue! สำคัญ; สีพื้นหลัง: สีแดง; ในตัวอย่างด้านบน, สีพื้นหลัง: สีฟ้า จะถูกปรับเพราะมันถูกทำเครื่องหมายด้วย !สำคัญ, แม้ว่าจะมี สีพื้นหลัง: สีแดง; ด้านล่าง. !สำคัญ ใช้ในสถานการณ์ที่คุณต้องการบังคับให้สไตล์โดยไม่มีสิ่งใดเขียนทับมันอย่างไรก็ตามมันอาจไม่ทำงานใน Internet Explorer. แทนที่ข้อความด้วยรูปภาพ นี่คือการปฏิบัติโดยทั่วไปเพื่อแทนที่ หัวข้อ จากชื่อข้อความไปยังรูปภาพ นี่คือวิธีที่คุณทำ. h1 ข้อความเยื้อง: -9999px; พื้นหลัง: url ("title.jpg") ไม่ทำซ้ำ; ความกว้าง: 100px; ความสูง: 50px; คำอธิบาย: ข้อความเยื้อง: -9999px; โยนหน้าจอชื่อข้อความของคุณออกมาแทนที่ด้วยภาพที่ประกาศโดย พื้นหลัง: … ด้วยการแก้ไข ความกว้าง และ ความสูง. ทำความเข้าใจกับการวางตำแหน่ง CSS บทความต่อไปนี้ช่วยให้คุณเข้าใจอย่างชัดเจนในการใช้การวางตำแหน่ง CSS - ตำแหน่ง: … มากกว่า - เรียนรู้การวางตำแหน่ง CSS ในสิบขั้นตอน CSS @import VS มี 2 ​​วิธีในการเรียกไฟล์ CSS ภายนอก - ตามลำดับโดยใช้ @import และ . หากคุณไม่แน่ใจว่าจะใช้วิธีการใดต่อไปนี้เป็นบทความเล็ก ๆ น้อย ๆ ที่จะช่วยคุณตัดสินใจ. มากกว่า - ความแตกต่างระหว่าง @import และลิงก์ การออกแบบฟอร์มใน CSS เว็บฟอร์มสามารถออกแบบและปรับแต่งได้อย่างง่ายดายด้วย CSS บทความต่อไปนี้แสดงให้คุณเห็นว่า: มากกว่า - รูปแบบตารางน้อย, สวนฟอร์ม, จัดแต่งทรงผมควบคุมรูปแบบมากยิ่งขึ้น ได้รับแรงบันดาลใจ หากคุณกำลังมองหาเว็บไซต์ที่ออกแบบโดย CSS เพื่อเป็นแรงบันดาลใจหรือเพียงแค่เรียกดูเพื่อค้นหา UI ที่ดีนี่คือเว็บไซต์แสดง CSS ที่เราแนะนำ: CSS Remix CSS Beauty CSS Elite CSS Mania CSS รั่วไหล รักษารหัส CSS ให้สะอาด หากรหัส CSS ของคุณยุ่งคุณกำลังจะสิ้นสุดการเขียนโค้ดด้วยความสับสนและมีเวลายากในการอ้างอิงรหัสก่อนหน้า สำหรับผู้เริ่มต้นคุณสามารถสร้างการเยื้องที่เหมาะสมแสดงความคิดเห็นได้อย่างถูกต้อง. มากกว่า - 12 หลักการรักษารหัสของคุณให้สะอาด, ฟอร์แมตโค้ด CSS ออนไลน์ การวัดตัวอักษร: px VS em มีปัญหาในการเลือกใช้หน่วยการวัดเมื่อใด px หรือ em? บทความต่อไปนี้อาจช่วยให้คุณเข้าใจหน่วยการพิมพ์ได้ดียิ่งขึ้น. ตารางความเข้ากันได้ของเบราว์เซอร์ CSS เราทุกคนรู้ว่าแต่ละเบราว์เซอร์มีวิธีการแสดงสไตล์ CSS ที่แตกต่างกัน เป็นการดีที่มีการอ้างอิงแผนภูมิหรือรายการที่แสดงความเข้ากันได้ CSS ทั้งหมดสำหรับแต่ละเบราว์เซอร์. ตารางการสนับสนุน CSS: # 1, # 2, # 3, # 4. ออกแบบหลายคอลัมน์ใน CSS มีปัญหาในการรับคอลัมน์ซ้ายกลางและขวาเพื่อจัดตำแหน่งอย่างถูกต้องหรือไม่ นี่คือบทความบางส่วนที่อาจช่วยได้: ในการค้นหาจอกศักดิ์สิทธิ์ เสา Faux เหตุผลอันดับต้น ๆ ที่คอลัมน์ CSS ของคุณยุ่งเหยิง กล่อง Litte (ตัวอย่าง) การจัดวางหลายคอลัมน์ปีนออกจากกล่อง คอลัมน์สัมบูรณ์ รับบรรณาธิการ CSS ฟรี บรรณาธิการเฉพาะดีกว่าโน้ตแพดเสมอ นี่คือบางส่วนที่เราแนะนำ: มากกว่า - CSS อย่างง่าย, Notepad ++, ตัวแก้ไข CSS สไตล์ การทำความเข้าใจประเภทสื่อ มีสื่อประเภทน้อยเมื่อคุณประกาศ CSS ด้วย . การพิมพ์การฉายและหน้าจอเป็นประเภทที่ใช้บ่อย การทำความเข้าใจและใช้งานด้วยวิธีการที่เหมาะสมช่วยให้ผู้ใช้สามารถเข้าถึงได้ง่ายขึ้น บทความต่อไปนี้อธิบายวิธีจัดการกับประเภทสื่อ CSS. มากกว่า - CSS และประเภทสื่อ, ประเภทสื่อ W3, CSS Media Types, ประเภทสื่อ CSS2 20 แอพ iPhone ที่มีประโยชน์สำหรับนักพัฒนาและนักออกแบบ 20 เครื่องมือ SVG ที่มีประโยชน์สำหรับกราฟิกที่ดีกว่า 20 แบบอักษรที่บางเบาและสวยงามสำหรับนักออกแบบเว็บไซต์ บทความต่อไป 20 ส่วนเสริม Firefox Sidebar ที่เป็นประโยชน์ บทความก่อนหน้า 20 แอพที่มีประโยชน์เพื่อรับประโยชน์สูงสุดจาก Instagram