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

เขียนเมื่อ 12 ปีก่อน โดย Ninenik Narkdee
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; 
}



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











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











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ