ออกแบบเว็บไซต์ เขียนโปรแกรม ทำเว็บไซต์

การเขียน-css-ในรูปแบบย่อ

by admin on พ.ย..08, 2010, under Tip and Trick

ลองเขียน css ให้สั้นลงแต่ยังสามารถทำงานได้ตามปกติ

/——– Background (พื้นหลัง) ค่าคุณสมบัติ Background ——–/
element {
    background-color: #FF0000;
    background-image: url(image.png);
    background-repeat: repeat;
    background-position: top left;
    background-attachment: scroll;
}
ตัวอย่างการเขียน CSS ของ Background แบบย่อ
element {
    background:#FF0000 url(image.png) repeat top left scroll;
}

/——– font (ตัวอักษร) ค่าคุณสมบัติ font ——–/
element {
    font-style:normal;
    font-variant:normal;
    font-weight:bold;
    font-size:1em;
    line-height:1.2em;
    font-family:georgia,”times new roman”,serif
}
ตัวอย่างการเขียน CSS ของ Font แบบย่อ
element {
    font:bold 1em/1.2em georgia,”times new roman”,serif;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (1) ——–/
element {
    border-width:1px;
    border-style:solid;
    border-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ
element {
    border:1px solid #000;
}

/——– Border (ขอบ เส้นขอบ) ค่าคุณสมบัติของ Border (2) ——–/
element {
    border-top-width:1px;
    border-top-style:solid;
    border-top-color:#000;
}
ตัวอย่างการเขียน CSS ของ Border แบบย่อ (2)
element {
    border-top:1px solid #000;
}

/——– List (สิสท์รายการ) ค่าคุณสมบัติของ List ——–/
element {
    list-style-type:square;
    list-style-position:inside;
    list-style-image:url(image.gif);
}
ตัวอย่างการเขียน CSS ของ List แบบย่อ
element {
    list-style:square inside url(image.gif);
}

/——– Margin (บริเวณนอกเส้นขอบออกไป) ค่าคุณสมบัติของ Margin ——–/
element {
    margin-top:1em;
    margin-right:0;
    margin-bottom:2em;
    margin-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Margin แบบย่อ
element {
    margin:1em 0 2em 0.5em;
}

/——– Padding (บริเวณในเส้นขอบเข้ามา) ——–/
ค่าคุณสมบัติของ Padding
element {
    padding-top:1em;
    padding-right:0;
    padding-bottom:2em;
    padding-left:0.5em;
}
ตัวอย่างการเขียน CSS ของ Padding แบบย่อ
element {
    padding:1em 0 2em 0.5em;
}

การเขียนเราต้องเรียงลำดับให้ถูกต้อง ลองเอาไปใช้กันดูนะครับ วันนี้แค่นี้ก่อนนะครับ

G-Kid


Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...