1. กฎการย่อแอตทริบิวต์แบบอักษร CSS
โดยทั่วไป CSS ใช้เพื่อตั้งค่าแอตทริบิวต์แบบอักษร:
แบบอักษรน้ำหนัก: ตัวหนา;
รูปแบบตัวอักษร:ตัวเอียง;
แบบอักษรที่แตกต่าง: ตัวพิมพ์เล็ก;
ขนาดตัวอักษร:1em;
ความสูงของเส้น: 1.5em;
ตระกูลแบบอักษร: verdana, sans-serif;
คุณสามารถเขียนทั้งหมดในบรรทัดเดียว:
ตัวอักษร: ตัวหนา ตัวเอียง ตัวพิมพ์เล็ก 1em/1.5em verdana,sans-serif;
ดูเหมือนไม่ง่ายกว่านี้มากนักหรือ มีเพียงสิ่งเดียวที่ควรทราบ: วิธีการจดชวเลขนี้จะใช้ได้เฉพาะเมื่อมีการระบุคุณสมบัติขนาดแบบอักษรและตระกูลแบบอักษรในเวลาเดียวกัน นอกจากนี้ หากคุณไม่ได้ตั้งค่าน้ำหนักแบบอักษร ลักษณะแบบอักษร และรูปแบบแบบอักษร สิ่งเหล่านี้จะใช้ค่าเริ่มต้น ดังนั้น โปรดคำนึงถึงเรื่องนี้ด้วย
2. ค่าเริ่มต้นของเส้นขอบ CSS
โดยปกติคุณสามารถกำหนดสี ความกว้าง และรูปแบบของเส้นขอบได้ เช่น:
เส้นขอบ: 3px ทึบ #000;
ทำให้เส้นขอบปรากฏกว้าง 3 พิกเซล สีดำ และทึบ แต่ในความเป็นจริง คุณเพียงต้องระบุสไตล์ที่นี่เท่านั้น
หากระบุเฉพาะสไตล์ ค่าเริ่มต้นจะถูกนำไปใช้กับคุณสมบัติอื่น โดยทั่วไป ความกว้างเริ่มต้นของเส้นขอบคือขนาดกลาง ซึ่งโดยทั่วไปจะเท่ากับ 3 ถึง 4 พิกเซล สีเริ่มต้นคือสีของข้อความ หากค่านี้ถูกต้อง ก็ไม่จำเป็นต้องตั้งค่ามากมาย
3. ใช้สองคลาสสำหรับองค์ประกอบในเวลาเดียวกัน
โดยทั่วไป องค์ประกอบหนึ่งจะถูกตั้งค่าเป็นหนึ่งคลาส (คลาส) แต่ไม่ได้หมายความว่าไม่สามารถใช้สององค์ประกอบได้ ที่จริงแล้ว คุณสามารถทำได้:
<p class="ด้านข้อความ"">…</p>
กำหนดให้องค์ประกอบ P เป็นสองคลาสในเวลาเดียวกัน โดยคั่นด้วยช่องว่าง เพื่อให้แอตทริบิวต์ทั้งหมดของข้อความและคลาสด้านข้างจะถูกเพิ่มให้กับองค์ประกอบ P หากมีข้อขัดแย้งระหว่างแอตทริบิวต์ในทั้งสองคลาส ชุดหนึ่งในภายหลังจะมีผล นั่นคือแอตทริบิวต์ของคลาสที่วางในภายหลังในไฟล์ CSS จะมีผล
ภาคผนวก: สำหรับ ID คุณไม่สามารถเขียน <p id="text side">…</p> หรือเขียนแบบนี้ไม่ได้
4. CSS สำหรับการพิมพ์เอกสาร
เว็บไซต์หลายแห่งมีเวอร์ชันเฉพาะสำหรับการพิมพ์ แต่ไม่จำเป็นจริงๆ เนื่องจากสามารถจัดรูปแบบการพิมพ์ได้โดยใช้ CSS
กล่าวอีกนัยหนึ่ง คุณสามารถระบุไฟล์ CSS สองไฟล์สำหรับเพจ หนึ่งไฟล์สำหรับการแสดงผลหน้าจอ และอีกไฟล์สำหรับการพิมพ์:
<ประเภทลิงก์ =”ข้อความ/css” rel=”สไตล์ชีท” href=”stylesheet.css” สื่อ=”หน้าจอ” />
<ประเภทลิงก์ =”ข้อความ/css” rel=”สไตล์ชีท” href=”printstyle.css” สื่อ=”พิมพ์” />
บรรทัดที่ 1 ใช้สำหรับการแสดงผล บรรทัดที่ 2 ใช้สำหรับการพิมพ์ โปรดใส่ใจกับแอตทริบิวต์ของสื่อ
แต่สิ่งที่ควรเขียนใน CSS การพิมพ์? คุณสามารถตั้งค่าได้เช่นเดียวกับที่คุณออกแบบ CSS ปกติ ขณะออกแบบ คุณสามารถตั้งค่า CSS นี้ให้แสดง CSS เพื่อตรวจสอบเอฟเฟกต์ได้ บางทีคุณอาจใช้จอแสดงผล: ไม่มีคำสั่งให้ปิดภาพตกแต่งบางภาพ ปิดปุ่มนำทางบางปุ่ม ฯลฯ
5. ทักษะการเปลี่ยนรูปภาพ CSS
โดยทั่วไปขอแนะนำให้ใช้ HTML มาตรฐานเพื่อแสดงข้อความแทนรูปภาพ ซึ่งไม่เพียงแต่เร็วขึ้นเท่านั้น แต่ยังอ่านง่ายขึ้นอีกด้วย แต่ถ้าคุณต้องการใช้ฟอนต์พิเศษ คุณสามารถใช้ได้เฉพาะรูปภาพเท่านั้น
ตัวอย่างเช่น หากคุณต้องการสร้างไอคอนสำหรับขายของ คุณจะใช้รูปภาพนี้:
<h1><img src=”widget-image.gif” alt=”ซื้อวิดเจ็ต” /></h1>
แน่นอนว่าสิ่งนี้เป็นไปได้ แต่สำหรับเครื่องมือค้นหา เมื่อเทียบกับข้อความปกติ พวกเขาไม่ค่อยสนใจข้อความแทนที่ใน alt เนื่องจากนักออกแบบจำนวนมากใส่คำหลักจำนวนมากที่นี่เพื่อหลอกลวงเครื่องมือค้นหา ดังนั้นวิธีการควรจะเป็นดังนี้:
<h1>ซื้อวิดเจ็ต</h1>
แต่ไม่มีแบบอักษรพิเศษ เพื่อให้บรรลุผลแบบเดียวกัน คุณสามารถออกแบบ CSS ได้ดังนี้:
h1 { พื้นหลัง: url (widget-image.gif) ไม่ซ้ำ; ความสูง: ความสูงของรูปภาพ เยื้องข้อความ: -2000px }
ให้ความสนใจกับการแทนที่ความสูงของภาพด้วยความสูงของภาพจริง ที่นี่ รูปภาพจะแสดงเป็นพื้นหลัง และเนื่องจากตั้งค่าการเยื้องเป็น -2000 พิกเซล ข้อความจริงจะปรากฏ 2,000 จุดทางด้านซ้ายของหน้าจอ และจะมองไม่เห็น แต่สำหรับคนที่ปิดภาพอาจจะมองไม่เห็นเลยจึงควรระวัง
6.อีกเทคนิคของโมเดลกล่อง CSS
การปรับโมเดล Box นี้มีไว้สำหรับเบราว์เซอร์ IE ก่อน IE6 เป็นหลัก ซึ่งจะนับความกว้างของเส้นขอบและช่องว่างลงในความกว้างขององค์ประกอบ ตัวอย่างเช่น:
#box { ความกว้าง: 100px; เส้นขอบ: 5px;
เรียกมันว่า:
<div id="box">…</div>
ความกว้างเต็มของช่องควรเป็น 150 พอยต์ ซึ่งถูกต้องในทุกเบราว์เซอร์ ยกเว้น IE ก่อน IE6 แต่สำหรับเบราว์เซอร์เช่น IE5 ความกว้างเต็มยังคงเป็น 100 จุด ความแตกต่างนี้สามารถจัดการได้โดยใช้วิธีการปรับกล่องที่คิดค้นโดยคนก่อนหน้านี้
แต่สามารถบรรลุวัตถุประสงค์เดียวกันได้ด้วย CSS เพื่อให้แสดงผลสอดคล้องกัน
#box { ความกว้าง: 150px }
#box div { เส้นขอบ: 5px; การขยาย: 20px }
เรียกว่าดังนี้:
<div id="box"><div>…</div></div>
ด้วยวิธีนี้ไม่ว่าเบราว์เซอร์ใดจะมีความกว้าง 150 จุด
7. CSS ตั้งค่าองค์ประกอบบล็อกให้จัดวางในแนวนอนตรงกลาง
หากคุณต้องการสร้างหน้าเว็บที่มีความกว้างคงที่ และต้องการให้หน้าเว็บอยู่กึ่งกลางในแนวนอน โดยทั่วไปจะมีลักษณะดังนี้:
#content { ความกว้าง: 700px; ระยะขอบ: 0 อัตโนมัติ }
คุณจะใช้ <div id="content"> เพื่อล้อมรอบองค์ประกอบทั้งหมด นี่เป็นวิธีง่ายๆ แต่ไม่ดีพอ และเวอร์ชันก่อน IE6 จะไม่แสดงเอฟเฟกต์นี้ เปลี่ยน CSS ดังนี้:
body { text-align: center } #content { text-align: left; width: 700px; ระยะขอบ: 0 อัตโนมัติ }
ซึ่งจะทำให้เนื้อหาของหน้าเว็บอยู่ตรงกลาง ดังนั้น text-align: left จะถูกเพิ่มเข้าไปในเนื้อหา
8. ใช้ CSS เพื่อจัดการการจัดตำแหน่งตามแนวตั้ง
การจัดตำแหน่งแนวตั้งสามารถทำได้ง่ายโดยใช้ตาราง เพียงตั้งค่าหน่วยตารางให้จัดแนวตั้ง: ตรงกลาง แต่นี่ไม่มีประโยชน์กับ CSS หากคุณต้องการตั้งค่าแถบนำทางให้สูง 2 เมตร และต้องการให้ข้อความการนำทางอยู่ตรงกลางในแนวตั้ง การตั้งค่าแอตทริบิวต์นี้ไม่มีประโยชน์
วิธีการ CSS คืออะไร? อย่างไรก็ตาม ให้ตั้งค่าความสูงของบรรทัดของคำเหล่านี้เป็น 2em: line-height: 2em เท่านี้ก็เรียบร้อย
9. การวางตำแหน่ง CSS ภายในคอนเทนเนอร์
ข้อดีอย่างหนึ่งของ CSS ก็คือ คุณสามารถวางตำแหน่งองค์ประกอบต่างๆ ได้ตามใจชอบ แม้จะอยู่ภายในคอนเทนเนอร์ก็ตาม ตัวอย่างเช่น สำหรับคอนเทนเนอร์นี้:
#container { ตำแหน่ง: ญาติ }
ด้วยวิธีนี้ องค์ประกอบทั้งหมดในคอนเทนเนอร์จะถูกจัดตำแหน่งให้ค่อนข้างเหมาะสม ซึ่งสามารถใช้ได้ดังนี้:
<div id="container"><div id="navigation">…</div></div>
หากคุณต้องการค้นหา 30 จุดจากด้านซ้ายและ 5 จุดจากด้านบน คุณสามารถทำได้ดังนี้:
#navigation { ตำแหน่ง: ซ้ายแน่นอน: 30px; ด้านบน: 5px }
แน่นอน คุณยังสามารถทำสิ่งนี้ได้:
ระยะขอบ: 5px 0 0 30px
โปรดทราบว่าลำดับของตัวเลขทั้งสี่คือ บน ขวา ล่าง ซ้าย แน่นอนว่าบางครั้งการวางตำแหน่งมากกว่าระยะขอบจะดีกว่า
สำหรับรูปแบบและเทคนิค CSS เพิ่มเติม โปรดดูบทช่วยสอนจำนวนมากที่ 52CSS.com
10. สีพื้นหลังตรงไปที่ด้านล่างของหน้าจอ
การควบคุมทิศทางแนวตั้งนั้นเกินความสามารถของ CSS หากคุณต้องการให้แถบนำทางไปที่ด้านล่างของหน้าโดยตรงเหมือนกับแถบเนื้อหา การใช้ตารางจะสะดวกมาก แต่ถ้าคุณใช้ CSS แบบนี้เท่านั้น:
#navigation { พื้นหลัง: สีน้ำเงิน; ความกว้าง: 150px }
แถบนำทางที่สั้นกว่าไม่ได้ไปจนสุดด้านล่าง แต่จะจบลงเพียงครึ่งทางของเนื้อหา จะทำอย่างไร?
น่าเสียดายที่วิธีเดียวที่จะโกงได้คือการเพิ่มภาพพื้นหลังให้กับคอลัมน์ที่สั้นกว่า โดยมีความกว้างเท่ากับความกว้างของคอลัมน์ และทำให้เป็นสีเดียวกับสีพื้นหลังที่ตั้งไว้
เนื้อความ { พื้นหลัง: url (blue-image.gif) 0 0 ซ้ำ -y }
คุณไม่สามารถใช้ em เป็นหน่วยได้ในขณะนี้ เพราะเคล็ดลับจะถูกเปิดเผยเมื่อผู้อ่านเปลี่ยนขนาดตัวอักษร และคุณสามารถใช้ได้เฉพาะ px เท่านั้น