การใช้ตัวย่อจะช่วยลดขนาดไฟล์ CSS และทำให้อ่านง่ายขึ้น กฎหลักสำหรับตัวย่อ CSS มีดังนี้:
สี
ค่าสีเลขฐานสิบหกหากค่าของแต่ละสองหลักเท่ากันสามารถย่อได้ครึ่งหนึ่ง เช่น #000000 สามารถย่อเป็น #000;
ขนาดกล่อง
โดยทั่วไปมีวิธีการเขียนสี่วิธี:
คุณสมบัติ:value1; หมายความว่าขอบทั้งหมดมีค่า value1;
คุณสมบัติ:value1 value2 หมายความว่าค่าของด้านบนและด้านล่างคือ value1 และค่าของด้านขวาและด้านซ้ายคือ value2
คุณสมบัติ:value1 value2 value3; หมายถึงค่าด้านบนคือ value1 ค่าของด้านขวาและด้านซ้ายคือ value2 และค่าด้านล่างคือ value3
คุณสมบัติ:value1 value2 value3 value4;
วิธีจำที่สะดวกคือตามเข็มนาฬิกา ขวาบน ซ้ายล่าง ตัวอย่างของการใช้งานเฉพาะในส่วนขอบและช่องว่างภายในมีดังนี้:
ระยะขอบ:1em 0 2em 0.5em;
ชายแดน
คุณสมบัติของเส้นขอบมีดังนี้:
เส้นขอบกว้าง: 1px;
สไตล์เส้นขอบ: ทึบ;
ขอบสี:#000;
สามารถย่อเป็นประโยคเดียว: border:1px solid #000;
ไวยากรณ์คือสีสไตล์เส้นขอบ: ความกว้าง;
พื้นหลัง
คุณสมบัติของพื้นหลังมีดังนี้:
สีพื้นหลัง:#f00;
ภาพพื้นหลัง: url (พื้นหลัง.gif);
พื้นหลังซ้ำ: ไม่ซ้ำ;
สิ่งที่แนบมากับพื้นหลัง: แก้ไข;
ตำแหน่งพื้นหลัง:0 0;
สามารถย่อได้เพียงประโยคเดียว: พื้นหลัง:#f00 url(พื้นหลัง.gif) no-repeat fix 0 0;
ไวยากรณ์คือพื้นหลัง: รูปภาพสีซ้ำตำแหน่งไฟล์แนบ;
คุณสามารถละเว้นค่าแอตทริบิวต์ได้ตั้งแต่หนึ่งค่าขึ้นไป หากละเว้น ค่าแอตทริบิวต์จะใช้ค่าเริ่มต้นของเบราว์เซอร์
สี: โปร่งใส
ภาพ: ไม่มี
ทำซ้ำ: ทำซ้ำ
ไฟล์แนบ: เลื่อน
ตำแหน่ง: 0% 0%
แบบอักษร
คุณสมบัติของฟอนต์มีดังนี้:
รูปแบบตัวอักษร:ตัวเอียง;
แบบอักษร: ตัวพิมพ์เล็ก;
แบบอักษรน้ำหนัก: ตัวหนา;
ขนาดตัวอักษร:1em;
ความสูงของเส้น:140%;
ตระกูลฟอนต์: "Lucida Grande", sans-serif;
สามารถย่อเป็นประโยคเดียว: แบบอักษร:ตัวเอียงตัวพิมพ์เล็กตัวหนา 1em/140% "Lucida Grande",sans-serif;
โปรดทราบว่าหากคุณย่อคำจำกัดความของแบบอักษร คุณต้องกำหนดค่าอย่างน้อยสองค่า: ขนาดแบบอักษร และตระกูลแบบอักษร
รายการ
หากต้องการยกเลิกจุดเริ่มต้นและหมายเลขซีเรียล คุณสามารถเขียน list-style:none;,
คุณสมบัติของรายการมีดังนี้:
รายการสไตล์ประเภท: สี่เหลี่ยม;
รายการสไตล์ตำแหน่ง: ภายใน;
รายการสไตล์ภาพ: url (image.gif);
สามารถย่อได้เพียงประโยคเดียว: list-style:square inside url(image.gif);