เคล็ดลับสิบประการสำหรับการออกแบบสไตล์ชีต CSS

1. กฎการย่อแบบอักษร CSS

เมื่อกำหนดแบบอักษรโดยใช้ css คุณอาจทำสิ่งนี้:

ที่จริงแล้ว คุณสามารถย่อคุณสมบัติเหล่านี้ได้:

แบบอักษร: 1em/1.5em ตัวหนา ตัวเอียง ตัวพิมพ์เล็ก verdana,serif

ตอนนี้ดีขึ้นมากแล้ว แต่มีสิ่งหนึ่งที่ควรทราบ: หากต้องการใช้วิธีจดชวเลขนี้ อย่างน้อยคุณต้องระบุแอตทริบิวต์ขนาดแบบอักษรและตระกูลแบบอักษร หากแอตทริบิวต์อื่นๆ (เช่น น้ำหนักแบบอักษร รูปแบบแบบอักษร แบบอักษร- ตัวแปร) ไม่ได้ระบุ แต่จะมีการใช้ค่าเริ่มต้นโดยอัตโนมัติ

2. ใช้สองคลาสพร้อมกัน

โดยปกติแล้วเราจะระบุเพียงคลาสเดียวสำหรับแอตทริบิวต์ แต่ไม่ได้หมายความว่าคุณสามารถระบุได้เพียงคลาสเดียว ที่จริงแล้ว คุณสามารถระบุได้มากเท่าที่คุณต้องการ ตัวอย่างเช่น:

<p class="text side">...</p>โดยการใช้สองคลาสในเวลาเดียวกัน (คั่นด้วยช่องว่างแทนลูกน้ำ) ย่อหน้านี้จะใช้กฎที่ระบุในทั้งสองคลาส หากกฎข้อใดทับซ้อนกัน กฎข้อหลังจะมีความสำคัญกว่า

3. ค่าเริ่มต้นของเส้นขอบใน CSS

เมื่อเขียนกฎเส้นขอบ คุณจะต้องระบุสี ความกว้าง และสไตล์ (ตามลำดับใดก็ได้) ตัวอย่างเช่น: border: 3px solid #000 (เส้นขอบทึบสีดำกว้าง 3 พิกเซล) ค่าเดียวที่ต้องระบุในตัวอย่างนี้คือสไตล์ หากคุณระบุสไตล์เป็นสีทึบ ค่าเริ่มต้นจะถูกนำมาใช้กับค่าที่เหลือ: ความกว้างเริ่มต้นคือปานกลาง (เท่ากับ 3 ถึง 4 พิกเซล) สีเริ่มต้นคือสีของข้อความในเส้นขอบ . หากนี่คือสิ่งที่คุณต้องการ คุณไม่จำเป็นต้องระบุเป็น css

4. !important จะถูกละเว้นโดย IE

ใน CSS โดยปกติกฎสุดท้ายที่ระบุจะมีความสำคัญกว่า อย่างไรก็ตาม สำหรับเบราว์เซอร์อื่นที่ไม่ใช่ IE คำสั่งใดๆ ที่มีเครื่องหมาย !important จะได้รับลำดับความสำคัญที่แน่นอน เช่น: margin-top: 3.5em !important; margin-top: 2em ในเบราว์เซอร์ทั้งหมดยกเว้น IE ระยะขอบด้านบนจะเป็น 3.5em เสมอ ในขณะที่ IE คือ 2em บางครั้งสิ่งนี้ก็มีประโยชน์ โดยเฉพาะอย่างยิ่งเมื่อใช้ค่ามาร์จิ้นสัมพัทธ์ (เช่นตัวอย่างนี้) เพื่อแสดงความแตกต่างเล็กน้อยระหว่าง IE และเบราว์เซอร์อื่นๆ (หลายคนอาจสังเกตเห็นว่าตัวเลือกย่อย CSS ก็ถูกละเว้นโดย IE เช่นกัน)

5. ทักษะการเปลี่ยนรูปภาพ

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

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

<h1><img src="/widget-image.gif" alt="ซื้อวิดเจ็ต" /></h1>

นี่เป็นเรื่องจริงอย่างแน่นอน แต่มีหลักฐานว่าเครื่องมือค้นหาให้ความสำคัญกับข้อความจริงมากกว่าข้อความแสดงแทน (เนื่องจากมีเว็บไซต์จำนวนมากเกินไปที่ใช้ข้อความแสดงแทนเป็นคำหลักอยู่แล้ว) ดังนั้นเราจึงต้องใช้วิธีอื่น: <h1><span >ซื้อวิดเจ็ต< /span></h1> แล้วฟอนต์สวยๆ ของคุณล่ะ CSS ต่อไปนี้สามารถช่วยได้:

ตอนนี้คุณมีทั้งภาพที่สวยงามและการซ่อนข้อความจริงที่ดี - ด้วยความช่วยเหลือของ CSS ข้อความจะอยู่ในตำแหน่ง -2,000 พิกเซลจากด้านซ้ายของหน้าจอ

6. ตัวเลือกอื่นสำหรับการแฮ็กโมเดลกล่อง CSS

การแฮ็กโมเดลกล่อง CSS ใช้เพื่อแก้ปัญหาการแสดงผลของเบราว์เซอร์ก่อน IE6 เวอร์ชันก่อน IE6.0 จะรวมค่าเส้นขอบและค่าช่องว่างภายในขององค์ประกอบภายในความกว้าง (แทนที่จะเพิ่มลงในค่าความกว้าง) ตัวอย่างเช่น คุณอาจใช้ CSS ต่อไปนี้เพื่อระบุขนาดของคอนเทนเนอร์:

จากนั้นนำไปใช้ใน html:

<div id="box">...</div>

ความกว้างรวมของกล่องคือ 150 พิกเซลในเบราว์เซอร์เกือบทั้งหมด (ความกว้าง 100 พิกเซล + เส้นขอบ 5 พิกเซลสองอัน + ช่องว่างภายใน 20 พิกเซลสองอัน) ยกเว้นในเบราว์เซอร์ก่อน IE6 จะยังคงเป็น 100 พิกเซล (ค่าเส้นขอบและค่าช่องว่างภายในจะรวมอยู่ใน ค่าความกว้าง) การแฮ็กโมเดลกล่องได้รับการออกแบบมาเพื่อแก้ไขปัญหานี้ แต่ก็จะทำให้เกิดปัญหาเช่นกัน วิธีที่ง่ายกว่ามีดังนี้:

ซึ่งจะส่งผลให้ความกว้างรวมของกล่องอยู่ที่ 150 พิกเซลในทุกเบราว์เซอร์

7. จัดองค์ประกอบบล็อกให้อยู่ตรงกลาง

สมมติว่าเว็บไซต์ของคุณใช้เลย์เอาต์ที่มีความกว้างคงที่ โดยมีเนื้อหาทั้งหมดวางไว้ตรงกลางหน้าจอ ก็สามารถใช้ได้

ซีเอสต่อไปนี้:

คุณสามารถวางรายการใดก็ได้ภายในเนื้อหาของ HTML และรายการนั้นจะได้รับค่าขอบเขตซ้ายและขวาเท่ากันโดยอัตโนมัติเพื่อให้แน่ใจว่าจอแสดงผลอยู่กึ่งกลาง อย่างไรก็ตาม นี่ยังคงเป็นปัญหาในเบราว์เซอร์ก่อน IE6 และจะไม่อยู่ตรงกลาง ดังนั้นจึงต้องแก้ไขดังนี้:

การตั้งค่าเนื้อหาจะทำให้เนื้อหาหลักอยู่ตรงกลาง แต่แม้แต่ข้อความทั้งหมดก็จะอยู่ตรงกลาง นี่อาจไม่ใช่เอฟเฟกต์ที่คุณต้องการ ด้วยเหตุนี้ div ของ #content จึงต้องระบุค่า: text-align: left

8. ใช้ CSS เพื่อให้มีศูนย์กลางแนวตั้ง

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

เพื่อแก้ไขปัญหานี้ เพียงตั้งค่าความสูงของเส้นของกล่องให้เท่ากับความสูงของกล่อง ในตัวอย่างนี้ ความสูงของกล่องคือ 2em จากนั้นเพิ่มความสูงของบรรทัดอีกอัน: 2em ให้กับ css ในแนวตั้ง !

9. การวางตำแหน่ง CSS ภายในคอนเทนเนอร์

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

จากนั้นองค์ประกอบใดๆ ภายในคอนเทนเนอร์จะถูกวางตำแหน่งให้สัมพันธ์กับคอนเทนเนอร์ สมมติว่าคุณใช้โครงสร้าง html ต่อไปนี้:

หากคุณต้องการวางตำแหน่งการนำทางภายในคอนเทนเนอร์ 30 พิกเซลจากขอบด้านซ้ายและ 5 พิกเซลจากด้านบน คุณสามารถใช้คำสั่ง css ต่อไปนี้:

10. สีพื้นหลังขยายไปที่ด้านล่างของหน้าจอ

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

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

ภาพพื้นหลังควรเป็นภาพสีน้ำเงินกว้าง 150 พิกเซล ข้อเสียของวิธีนี้คือไม่สามารถใช้ em เพื่อระบุความกว้างของคอลัมน์ด้านซ้ายได้ เมื่อผู้ใช้เปลี่ยนขนาดของข้อความและความกว้างของเนื้อหาขยาย ความกว้างของสีพื้นหลังจะไม่เปลี่ยนแปลงตามไปด้วย

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