1. กฎการย่อแอตทริบิวต์แบบอักษร CSS

โดยทั่วไป CSS ใช้เพื่อตั้งค่าแอตทริบิวต์แบบอักษร:
แบบอักษรน้ำหนัก: ตัวหนา;
รูปแบบตัวอักษร:ตัวเอียง;
แบบอักษรที่แตกต่าง: ตัวพิมพ์เล็ก;
ขนาดตัวอักษร:1em;
ความสูงของเส้น: 1.5em;
ตระกูลแบบอักษร: verdana, sans-serif;
คุณสามารถเขียนทั้งหมดในบรรทัดเดียว:
ตัวอักษร: ตัวหนา ตัวเอียง ตัวพิมพ์เล็ก 1em/1.5em verdana,sans-serif;
ดูเหมือนไม่ง่ายกว่านี้มากนักหรือ มีเพียงสิ่งเดียวที่ควรทราบ: วิธีการจดชวเลขนี้จะใช้ได้เฉพาะเมื่อมีการระบุคุณสมบัติขนาดแบบอักษรและตระกูลแบบอักษรในเวลาเดียวกัน นอกจากนี้ หากคุณไม่ได้ตั้งค่าน้ำหนักแบบอักษร ลักษณะแบบอักษร และรูปแบบแบบอักษร สิ่งเหล่านี้จะใช้ค่าเริ่มต้น ดังนั้น โปรดคำนึงถึงเรื่องนี้ด้วย

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

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

3. ใช้สองคลาสสำหรับองค์ประกอบในเวลาเดียวกัน

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

…

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

…

หรือเขียนแบบนี้ไม่ได้

4. CSS สำหรับการพิมพ์เอกสาร

เว็บไซต์หลายแห่งมีเวอร์ชันเฉพาะสำหรับการพิมพ์ แต่ไม่จำเป็นจริงๆ เนื่องจากสามารถจัดรูปแบบการพิมพ์ได้โดยใช้ CSS
กล่าวอีกนัยหนึ่ง คุณสามารถระบุไฟล์ CSS สองไฟล์สำหรับเพจ หนึ่งไฟล์สำหรับการแสดงผลหน้าจอ และอีกไฟล์สำหรับการพิมพ์:
<ประเภทลิงก์ =”ข้อความ/css” rel=”สไตล์ชีท” href=”stylesheet.css” สื่อ=”หน้าจอ” />
<ประเภทลิงก์ =”ข้อความ/css” rel=”สไตล์ชีท” href=”printstyle.css” สื่อ=”พิมพ์” />
บรรทัดที่ 1 ใช้สำหรับการแสดงผล บรรทัดที่ 2 ใช้สำหรับการพิมพ์ โปรดใส่ใจกับแอตทริบิวต์ของสื่อ
แต่สิ่งที่ควรเขียนใน CSS การพิมพ์? คุณสามารถตั้งค่าได้เช่นเดียวกับที่คุณออกแบบ CSS ปกติ ขณะออกแบบ คุณสามารถตั้งค่า CSS นี้ให้แสดง CSS เพื่อตรวจสอบเอฟเฟกต์ได้ บางทีคุณอาจใช้จอแสดงผล: ไม่มีคำสั่งให้ปิดภาพตกแต่งบางภาพ ปิดปุ่มนำทางบางปุ่ม ฯลฯ

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

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

แน่นอนว่าสิ่งนี้เป็นไปได้ แต่สำหรับเครื่องมือค้นหา เมื่อเทียบกับข้อความปกติ พวกเขาไม่ค่อยสนใจข้อความแทนที่ใน alt เนื่องจากนักออกแบบจำนวนมากใส่คำหลักจำนวนมากที่นี่เพื่อหลอกลวงเครื่องมือค้นหา ดังนั้นวิธีการควรจะเป็นดังนี้:

ซื้อวิดเจ็ต

แต่ไม่มีแบบอักษรพิเศษ เพื่อให้บรรลุผลแบบเดียวกัน คุณสามารถออกแบบ CSS ได้ดังนี้:
h1 { พื้นหลัง: url (widget-image.gif) ไม่ซ้ำ; ความสูง: ความสูงของรูปภาพ เยื้องข้อความ: -2000px }
ให้ความสนใจกับการแทนที่ความสูงของภาพด้วยความสูงของภาพจริง ที่นี่ รูปภาพจะแสดงเป็นพื้นหลัง และเนื่องจากตั้งค่าการเยื้องเป็น -2000 พิกเซล ข้อความจริงจะปรากฏ 2,000 จุดทางด้านซ้ายของหน้าจอ และจะมองไม่เห็น แต่สำหรับคนที่ปิดภาพอาจจะมองไม่เห็นเลยจึงควรระวัง

6.อีกเทคนิคของโมเดลกล่อง CSS

การปรับโมเดล Box นี้มีไว้สำหรับเบราว์เซอร์ IE ก่อน IE6 เป็นหลัก ซึ่งจะนับความกว้างของเส้นขอบและช่องว่างลงในความกว้างขององค์ประกอบ ตัวอย่างเช่น:
#box { ความกว้าง: 100px; เส้นขอบ: 5px;
เรียกมันว่า:

ความกว้างเต็มของช่องควรเป็น 150 พอยต์ ซึ่งถูกต้องในทุกเบราว์เซอร์ ยกเว้น IE ก่อน IE6 แต่สำหรับเบราว์เซอร์เช่น IE5 ความกว้างเต็มยังคงเป็น 100 จุด ความแตกต่างนี้สามารถจัดการได้โดยใช้วิธีการปรับกล่องที่คิดค้นโดยคนก่อนหน้านี้
แต่สามารถบรรลุวัตถุประสงค์เดียวกันได้ด้วย CSS เพื่อให้แสดงผลสอดคล้องกัน
#box { ความกว้าง: 150px }
#box div { เส้นขอบ: 5px; การขยาย: 20px }
เรียกว่าดังนี้:

ด้วยวิธีนี้ไม่ว่าเบราว์เซอร์ใดจะมีความกว้าง 150 จุด

7. CSS ตั้งค่าองค์ประกอบบล็อกให้จัดวางในแนวนอนตรงกลาง

หากคุณต้องการสร้างหน้าเว็บที่มีความกว้างคงที่ และต้องการให้หน้าเว็บอยู่กึ่งกลางในแนวนอน โดยทั่วไปจะมีลักษณะดังนี้:
#content { ความกว้าง: 700px; ระยะขอบ: 0 อัตโนมัติ }
คุณจะใช้