เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ

แน่นอนครับ ถ้ามันสั้นได้ จะเขียนยาวไปทำไมให้เยิ่นเย้อ มาดูกันว่า property ตัวไหน ย่อได้บ้าง

Background

แบบปกติ
background-color: #87CEFA; ———————–/*สีแบ็คกราวน์*/
background-position: left top; ———————-/*ตำแหน่งชิดซ้าย บน*/
background-repeat: no-repeat;——————– /*ใส่ไปรูปเดียว ไม่ต้องทำซ้ำ*/
background-image: url(images/arrow.gif); ——–/*เอารูปจากที่นี่นะ*/
background-attachment: fixed; —————-/*ใส่ตรงไหน fix ไว้ตรงนั้นเลย ต่อให้เลื่อน scroll bar ลงมาก็ยังเห็น*/

แบบย่อแล้ว
background: #87CEFA url(images/arrow.gif) no-repeat fixed left top; ควรเรียงตามลำดับครับ ไม่เช่นนั้น IE6 อาจไม่แสดงในบางกรณี

ถ้าเขียนแบบนี้
background: #87CEFA url(images/arrow.gif) no-repeat fixed 5px 10px; ตัวเลขค่าแรกคือระยะห่างแบ็คกราวน์ในแนวแกน x อันที่2 คือแนวแกน y

Border

แบบปกติ
border-width:1px;
border-style:solid;
border-color:#87CEFA;

แบบย่อแล้ว
border: 1px solid #87CEFA; อันนี้สลับที่กันได้ ไม่มีปัญหา

Font

แบบปกติ
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
line-height: 20px;——————/*ระยะห่างระหว่างบรรทัด*/

แบบย่อแล้ว
font: bold 14px/20px Verdana, Geneva, Arial, Helvetica, sans-serif; ห้ามสลับตำแหน่ง ไม่งั้น ie6 ไม่ทำงาน

Margin

แบบปกติ
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;

แบบย่อแล้ว
margin: 1px 2px 3px 4px; เรียง บน ขวา ล่าง ซ้าย ตามเข็มนาฬิกาครับ

แบบย่อของย่ออีกที
หากเป็น margin: 10px 5px 10px 5px; จะได้ margin: 10px 5px; ค่าแรกคือ บนล่าง ค่าที่สองคือ ซ้ายขวา

Padding

แบบปกติ
padding-top: 1px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 4px;

แบบย่อแล้ว
padding: 1px 2px 3px 4px; เรียง บน ขวา ล่าง ซ้าย ตามเข็มนาฬิกาครับ

แบบย่อของย่ออีกที
หากเป็น padding: 10px 5px 10px 5px; จะได้ padding: 10px 5px; ค่าแรกคือ บนล่าง ค่าที่สองคือ ซ้ายขวา

Color

แบบปกติ
#ffffff
#ff66ee
#cc00ee

แบบย่อแล้ว
#fff
#f6e
#c0e

ค่าสี จะแบ่งเป็น #ff 66 ee คือ R G B นั่นเอง ถ้าซ้ำกัน ดึงมา 1 ตัว เขียนย่อได้เลยครับ

ในเรื่องการเรียงลำดับ ถ้าจำลำดับไม่ได้ ให้เปิดดูในตัว Top style ครับ

Related Articles

• เรียนรู้การใช้ ul li step by step (28)
• มารู้จักกับ xhtml กันก่อน (4)
• พื้นฐาน กับ CSS Box Model (16)
• ทำกล่องขอบโค้งด้วย css (15)
• จัดตำแหน่งด้วย position (27)