1.กำหนด DIV
วิเคราะห์ตัวอย่าง div คำจำกัดความทั่วไป:
#sample { ระยะขอบ: 10px 10px 10px 10px;
การขยาย:20px 10px 10px 20px;
ขอบด้านบน: #CCC 2px ทึบ;
เส้นขอบขวา: #CCC 2px ทึบ;
ขอบล่าง: #CCC 2px ทึบ;
เส้นขอบซ้าย: #CCC 2px ทึบ;
พื้นหลัง: url(images/bg_poem.jpg) #FEFEFE ไม่ทำซ้ำด้านล่างขวา;
สี: #666;
จัดข้อความ: กึ่งกลาง;
ความสูงบรรทัด: 150%; ความกว้าง: 60%;
คำแนะนำมีดังนี้:
ชื่อของเลเยอร์คือตัวอย่าง คุณสามารถเรียกสไตล์นี้ได้โดยใช้ <div id="sample"> บนเพจ
MARGIN หมายถึงพื้นที่ว่างที่ทิ้งไว้นอกขอบของเลเยอร์ ซึ่งใช้สำหรับระยะขอบของหน้าหรือเพื่อสร้างช่องว่างกับเลเยอร์อื่นๆ "10px 10px 10px 10px" แสดงถึงระยะขอบทั้งสี่ของ "บน ขวา ล่าง และซ้าย" ตามลำดับ (ทิศทางตามเข็มนาฬิกา) หากเหมือนกันทั้งหมด ก็สามารถย่อเป็น "MARGIN: 10px;" ได้ หากระยะขอบเป็นศูนย์ ให้เขียนว่า "MARGIN: 0px;" หมายเหตุ: เมื่อค่าเป็นศูนย์ ยกเว้นค่าสี RGB 0% ซึ่งจะต้องตามด้วยเครื่องหมายเปอร์เซ็นต์ ในกรณีอื่นๆ ไม่จำเป็นต้องตามหน่วย "px" MARGIN เป็นองค์ประกอบโปร่งใสและไม่สามารถกำหนดสีได้
PADDING หมายถึงช่องว่างระหว่างเส้นขอบของเลเยอร์และเนื้อหาของเลเยอร์ เช่นเดียวกับระยะขอบ ให้ระบุระยะห่างจากเส้นขอบบน ขวา ล่าง และซ้ายไปยังเนื้อหาตามลำดับ หากเหมือนกันทั้งหมด คุณสามารถย่อให้เป็น "PADDING:0px" ได้ หากต้องการระบุด้านซ้ายแยกกัน คุณสามารถเขียนว่า "PADDING-LEFT: 0px;" PADDING เป็นองค์ประกอบโปร่งใสและไม่สามารถกำหนดสีได้
BORDER หมายถึงเส้นขอบของเลเยอร์ "BORDER-RIGHT: #CCC 2px solid" กำหนดสีเส้นขอบด้านขวาของเลเยอร์เป็น "#CCC" ความกว้างเป็น "2px" และรูปแบบเป็นเส้นตรง "ทึบ" .
หากคุณต้องการรูปแบบเส้นประ คุณสามารถใช้ "จุด"
BACKGROUND กำหนดพื้นหลังของเลเยอร์ กำหนดไว้เป็นสองระดับ ขั้นแรก กำหนดพื้นหลังของรูปภาพ และใช้ "url(../images/bg_logo.gif)" เพื่อระบุเส้นทางของรูปภาพพื้นหลัง ประการที่สอง กำหนดสีพื้นหลัง "#FEFEFE" "no-repeat" หมายความว่าไม่จำเป็นต้องทำซ้ำภาพพื้นหลังซ้ำในแนวนอน ให้ใช้ "repeat-x" เพื่อทำซ้ำในแนวตั้ง ใช้ "repeat-y" และทำซ้ำเพื่อครอบคลุม พื้นหลังทั้งหมด ให้ใช้ "ทำซ้ำ" "ด้านล่างขวา" ต่อไปนี้หมายความว่าภาพพื้นหลังเริ่มต้นจากมุมขวาล่าง หากไม่มีรูปภาพพื้นหลัง คุณสามารถกำหนดได้เฉพาะสีพื้นหลัง พื้นหลัง: #FEFEFE
COLOR ใช้เพื่อกำหนดสีแบบอักษร ซึ่งได้แนะนำไปแล้วในส่วนก่อนหน้านี้
TEXT-ALIGN ใช้เพื่อกำหนดการจัดเรียงเนื้อหาในเลเยอร์ โดยให้กึ่งกลางอยู่ตรงกลาง ซ้ายอยู่ทางซ้าย และขวาอยู่ทางขวา
LINE-HEIGHT กำหนดความสูงของเส้น 150% หมายความว่าความสูงคือ 150% ของความสูงมาตรฐาน นอกจากนี้ยังสามารถเขียนเป็น: LINE-HEIGHT:1.5 หรือ LINE-HEIGHT:1.5em ซึ่งมีความหมายเหมือนกัน
WIDTH คือความกว้างของเลเยอร์ที่กำหนด ซึ่งสามารถเป็นค่าคงที่ เช่น 500px หรือเปอร์เซ็นต์ เช่น "60%" ที่นี่ โปรดทราบว่าความกว้างนี้หมายถึงความกว้างของเนื้อหาของคุณเท่านั้น และไม่รวมระยะขอบ เส้นขอบ และช่องว่างภายใน แต่บางเบราว์เซอร์ไม่ได้กำหนดลักษณะนี้ ดังนั้นคุณต้องลองมากกว่านี้
2.รูปแบบกล่อง CSS2
นับตั้งแต่เปิดตัว CSS1 ในปี 1996 องค์กร W3C ได้แนะนำให้วางออบเจ็กต์ทั้งหมดบนหน้าเว็บไว้ในกล่อง นักออกแบบสามารถควบคุมคุณสมบัติของกล่องนี้ได้โดยการสร้างคำจำกัดความ ออบเจ็กต์เหล่านี้ประกอบด้วยย่อหน้า รายการ และชื่อ รูปภาพ และเลเยอร์ <div> โมเดลกล่องส่วนใหญ่จะกำหนดสี่ส่วน: เนื้อหา ช่องว่างภายใน เส้นขอบ และระยะขอบ เลเยอร์ตัวอย่างที่เราพูดถึงข้างต้นเป็นกล่องทั่วไป สำหรับผู้เริ่มต้น พวกเขามักจะสับสนเกี่ยวกับระดับ ความสัมพันธ์ และอิทธิพลร่วมกันระหว่างระยะขอบ สีพื้นหลัง ภาพพื้นหลัง ช่องว่างภายใน เนื้อหา และเส้นขอบ นี่คือแผนผัง 3 มิติของโมเดลกล่อง ฉันหวังว่าคุณจะเข้าใจและจดจำได้ง่ายขึ้น
เมื่อใช้เค้าโครง XHTML+CSS มีเทคโนโลยีที่คุณอาจไม่คุ้นเคยในตอนแรก ควรกล่าวว่านี่เป็นวิธีคิดที่แตกต่างจากเค้าโครงตารางแบบเดิม นั่นคือ: รูปภาพเสริมทั้งหมดถูกนำมาใช้กับ พื้นหลัง บางสิ่งเช่นนี้:
พื้นหลัง: url(images/bg_poem.jpg) #FEFEFE ไม่ทำซ้ำด้านล่างขวา;
แม้ว่าจะสามารถแทรก <img> ลงในเนื้อหาได้โดยตรง แต่ไม่แนะนำให้ทำเช่นนี้ "รูปภาพเสริม" ในที่นี้หมายถึงรูปภาพที่ไม่ได้เป็นส่วนหนึ่งของเนื้อหาที่จะแสดงในเพจ แต่ใช้เพื่อการตกแต่ง ช่วงเวลา และการเตือนความจำเท่านั้น ตัวอย่างเช่น รูปภาพในอัลบั้มรูปภาพ รูปภาพในรูปภาพข่าว และรูปภาพโมเดลกล่อง 3 มิติด้านบนล้วนเป็นส่วนหนึ่งของเนื้อหา สามารถแทรกลงในเพจได้โดยตรงโดยใช้องค์ประกอบ <img> ในขณะที่รูปภาพอื่นๆ จะคล้ายกับโลโก้และชื่อเรื่อง รูปภาพและรูปภาพคำนำหน้ารายการทั้งหมดจะต้องแสดงโดยใช้โหมดพื้นหลังหรือวิธี CSS อื่น ๆ
มี 2 เหตุผลสำหรับสิ่งนี้:
แยกประสิทธิภาพออกจากโครงสร้างโดยสิ้นเชิง (โปรดอ่านบทความอื่น: "การทำความเข้าใจการแยกประสิทธิภาพออกจากโครงสร้าง") และใช้ CSS เพื่อควบคุมลักษณะที่ปรากฏและประสิทธิภาพทั้งหมดเพื่อให้แก้ไขได้ง่าย
ทำให้เพจใช้งานได้และเป็นมิตรมากขึ้น ตัวอย่างเช่น หากคนตาบอดใช้โปรแกรมอ่านหน้าจอ รูปภาพที่ใช้งานโดยใช้เทคโนโลยีพื้นหลังจะไม่ถูกอ่านออกเสียง