PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


แนวทางการเขียน CSS ในรูปแบบย่อ

25 September 2008 By
การเขียน css css แบบย่อ css

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ การเขียน css css แบบย่อ 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 (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; 
}







Tags:: การเขียน css css แบบย่อ css






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง