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

1. ResetCss

คุณควรใช้การตั้งค่าไม่ว่าจะสามารถ Eric Meyer Reset, ยูอิตั้งหรือตั้งค่าที่กำหนดเองของคุณเองเพียงใช้สิ่ง.

เป้าหมายของสไตล์ตั้งอยู่เพื่อลด inconsistencies เบราว์เซอร์ในสิ่งที่ต้องการสูงสายปกติขอบและขนาดแบบอักษรของหัวเรื่องและเป็นต้น - Eric Meyer

  ร่างกาย html, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe, 
  ยกข้อความทั้งย่อหน้า, pre, abbr, คำย่อ, ที่อยู่, ใหญ่, เท้า, code, del, dfn, em, 
  font, img, ins, kbd, q, s, samp, เล็กย่อยย, strong, sup, tt, var, 
  fieldset dd, dl, DT, รูปแบบ, ป้าย, คำอธิบายตารางคำบรรยายภาพ, tbody, tfoot, 
  thead, tr, th, td, input, เลือก textarea 

  ; padding : 0 ; } (ขอบ: 0; ขยาย: 0;) 


  ; padding : 0 ; } * (ขอบ: 0; ขยาย: 0;) 

2. จดชวเลข CSS

หนึ่งในดีที่สุดและที่สำคัญคุณสมบัติของ CSS มีความสามารถในการเขียนรหัสในทางลด.

รหัสไม่ถูกต้อง

  ( 
  ขอบ-top: 10px; 
  ขอบ ขวา: 7px; 
  ขอบ-ด้าน ล่าง: 10px; 
  ขอบ ซ้าย: 7px; 

  ขยาย-top: 10px; 
  ขยาย สิทธิ: 7px; 
  ขยาย-ด้าน ล่าง: 10px; 
  ขยาย ซ้าย: 7px; 

  font-size: 12px; 
  font-น้ำหนัก: หนา; 
  ; font-ครอบครัว: Arial, Verdana, Tahoma, sans-serif; 
  ) 

รหัสแก้ไข

  ( 
  ; ขอบ: 10px 7px 10px 7px; 
  ; ขยาย: 10px 7px 10px 7px; 
   Arial, Verdana, Tahoma, sans-serif ; font: ตัวหนา 12px Arial, Verdana, Tahoma, sans-serif;  
  ) 

3. ไม่ใช้ชั้นเรียนมากดังนั้นและหมายเลขของ

ฉันได้พบว่าส่วนใหญ่เริ่มต้นเพิ่มชั้นเรียนและ ID ไปเกือบทุกองค์ประกอบบนหน้าเว็บที่ไม่ required.There เป็นตัวอย่างด้านล่างในสิ่งที่ฉันกล่าวขวัญ.

รหัสไม่ถูกต้อง

 class = "wrapper" > <p class = "heading" > <strong class = "subheading" > Welcome </strong> </p> <p class = "linka" > <a href = "#" class = "link" > Home </a> </p> <p class = "linkb" > <a href = "#" class = "link" > About </a> </p> <p class = "linkc" > <a href = "#" class = "link" > Services </a> </p> <p class = "linkd" > <a href = "#" class = "link" > Contact </a> </p> </div> <div id = ชั้น "wrapper" = "wrapper" ชั้น <p> = "heading"> ชั้น <strong = "subheading"> Welcome </ strong> </ p ชั้น <p> = "linka"> <href = "# ระดับ" = ลิงค์ ""> Home </ a> </ p ชั้น <p> = "linkb" href <a> = ชั้น "#" = "link"> เกี่ยวกับ </ a> </ p> <p href <a ชั้น = "linkc"> = ชั้น "#" = "link"> บริการ </ a> </ p ชั้น <p> = "linkd" href <a> = ชั้น "#" = "link"> ติดต่อ </ a> </ p> <div /> 

ที่นี่รหัสที่ถูกต้องคือ

รหัสแก้ไข

 > <h1> Welcome </h1> <ul> <li> <a href = "#" > Home </a> </li> <li> <a href = "#" > About </a> </li> <li> <a href = "#" > Services </a> </li> <li> <a href = "#" > Contact </a> </li> </ul> </div> <div id = "wrapper"> <h1> Welcome </ h1> <ul> href <a <li> = "#"> Home </ a> </ li> href <a <li> = "#"> เกี่ยวกับ </ a> </ li> href <a <li> = "#"> บริการ </ a> </ li> href <a <li> = "#"> ติดต่อ </ a> </ li> < / UL> <div /> 

4. องค์กรคุณสไตล์

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

  / * Reset * / 
   elements ลบ ขอบ และองค์ประกอบ ขยาย 

  / * องค์ประกอบพื้นฐาน * / 
  สไตล์กำหนดสำหรับองค์ประกอบพื้นฐาน: กาย h1, h2, h3, h4, h6, ol, UL, dl, p ฯลฯ 

  / * เรียน Generic * / 
  กำหนดรูปแบบเรียนทั่วไป: สิ่งง่ายๆเช่นลบ ด้านล่าง  
  ลอยไปรอบๆ  
  / * เลย์เอาต์ Basic * / 

  / * เลย์เอาต์ Basic * / 
  กำหนดลักษณะของรูปแบบขั้นพื้นฐาน: header.  ส่วนท้าย, แถบด้านข้างเป็นต้น 

  / * ส่วนหัว * / 
  กำหนดรูปแบบสำหรับส่วนหัว 

  / * เนื้อหา * / 
  กำหนดรูปแบบสำหรับพื้นที่ เนื้อหา 

  / * ส่วนท้าย * / 
  กำหนดรูปแบบสำหรับส่วนท้าย 

  / * ฯลฯ * / 
  ดำเนินการต่อ 

5. Stylesheets ใช้เงื่อนไข

Internet Explorer เป็นรถม้าชนิดเล็กที่สุดของเบราเซอร์ทุก. โชคดีที่คุณสามารถใช้เงื่อนไขความคิดเห็นในการจัดการ CSS ที่ทำหน้าที่ใน IE. ถ้าฉันต้องการมันฉันมีสไตล์ที่เรียกว่า ie6.css ที่กำหนดเป้าหมายว่าเวอร์ชันเก่ากว่าของ IE. มันช่วยให้ฉันไปจัดการ CSS สำหรับเบราว์เซอร์รุ่นเก่าอย่างรวดเร็วและง่ายดาย.

นี่เป็นตัวอย่าง

  <!--[ ถ้า lte IE 6]> 
 
 
  href = "ie6.css" type = "text/css" media = "screen"  / > rel <link = href = "stylesheet" ประเภท "ie6.css" = สื่อ "text/css" = "screen" /> 
 
  -- > <! [Endif] -> 

สรุป

เหล่านี้เป็นเพียงบางส่วนเคล็ดลับที่ช่วยเขียนโค้ดดีกว่า. ฉันหวังว่ากวดวิชาจะช่วยให้คุณเขียนดีกว่าและสะอาด code. ใช้เคล็ดลับเหล่านี้ไปยังโครงการปัจจุบันและต่อไปและคุณก็จะขอบคุณความพยายาม.

หากคุณคิดว่าการกวดวิชาได้มากขึ้นดีกว่าหุ้นโปรดของเรา. ความคิดเห็นเรา

หากคุณต้องการได้รับแรงบันดาลใจมากจากเราโปรดพิจารณาสมัครรับฟีดของเราโดย RSS หรือ อีเมล์.

ยื่น under: CSS, Tutorials โดยผู้ดูแลระบบ