Home > เริ่มต้นกับ CSS > เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ

เขียน 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


Share
Categories: เริ่มต้นกับ CSS
Tags:

About the author

Webmaster ของเว็บนี้และ www.toysmile.com กับ www.wondercutie.com ความสามารถ : web design, graphic design, CSS, PHP programming, wordpress, magento ตอนนี้กำลังสนใจ : การออกแบบ ตัวการ์ตูน คาแรคเตอร์ ^^

Website : http://www.divland.com

Facebook : http://www.facebook.com/divland

Twiter : http://twitter.com/divland


  1. likhi1
    April 25th, 2007 at 01:43 | #1

    จากโปรแกรมทำ CSS เมนูมันสั่งทำให้แล้วมันก็ย่อแบบนี้ครับ…..

    ผมว่าแล้ว..ว่ามันต้องมีสูตร :d:d:d:d:d

  2. likhi1
    April 25th, 2007 at 01:49 | #2

    ท่าน webmaster ครับผมใช้ มันไม่สนับสนุน Color Bar หรือครับ

    พอเปลี่ยนเป็น

    ใช้งานสี Color Bar ได้ปรกติ…..

    งงง………….ครับ

  3. June 7th, 2007 at 07:49 | #3

    กระจ่างเลยครับผม :)>-

  4. mim
    December 1st, 2007 at 16:11 | #4

    งงสุดๆเลย ทำไมเวลาเขียน ccs แล้วบรรทัดมันหล่นลงไปยาวเยียดเลยกว่าจะหาเจอเม้าส์จาพังพอดี ช่วยตอบหน่อยนะคะพยายามหาทางแก้แล้วทำไม่ได้จริงๆ:((

  5. fi1e
    May 14th, 2008 at 00:05 | #5

    คุณ likhi1 โปรแกรมทำ css ที่ว่า คือโปรแกรมอะไรหรอคะ ขอบคุณค่ะ o_o

  6. ์NattaCo
    September 28th, 2008 at 18:22 | #6

    โปรแกรม ที่ทำงานกับ CSS น่าจะ Adobe Dream CS3 ไม่ก็ Rapid CSS นะครับ 2 ตัวนี้เด่น

  7. dfdf
    November 26th, 2008 at 15:53 | #7

    adad

  8. March 29th, 2009 at 15:39 | #8

    Thank You!

  9. May 29th, 2009 at 19:01 | #9

    สุดยอดครับ อ่านตั้งหลาย เอ็นทรี่แล้ว ผมว่า อันนี้โดนใจสุด

    ขอกลับไปแก้ไข เว็บของตัวเองก่อน

    แล้วจะกลับมาเยี่ยมบ่อยๆครับ

    Thank Lai Lai

  10. Degree
    June 18th, 2009 at 19:14 | #10

    ระวังนะครับ การเขียนโค๊ด อย่าง สั้ง
    บาง เบาว์เซอร์ อ่านไม่ออก เอายากๆ เข้าไว้ดีแล้วครับ

    จากประสพการณ์จริง:-w

  11. October 7th, 2009 at 16:47 | #11

    ขอบคุณครับ ทั้งการแนะนำ และคุณ degree ที่เตือน งั้นยาวๆ ไปก่อน ชัวร์…:-w

  12. December 6th, 2009 at 17:55 | #12

    Thank you for good information

  13. December 6th, 2009 at 17:55 | #13

    ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ

  14. March 13th, 2010 at 15:25 | #14

    ขอบคุณ
    จะลองเอาไปใช้ดูบ้าง:d

    แรกๆคงจะ งง เรื่องวางตำแหน่งของ property น่าดูเลย :((

  15. April 22nd, 2010 at 03:26 | #15

    มีประสบการณ์เรื่องการเขียน CSS ตัว background-position สลับตำแหน่งกัน จากที่เราเขียนไป top left แต่ที่ถูกมันต้อง left top ปรากฏว่า FF และ Safari แสดงผลได้ถูกต้อง แต่ IE ตัวเจ้าปัญหาตลอดกาล (แม่ง) ดันแสดงผลไม่ได้อีก จำได้ว่าวันนั้นหาตั้งนานนนนกว่าจะเจอว่ามันผิดมาจากค่า position ที่สลับกัน กำ ทำไม IE มันเรื่องมากหยั่งงี้น๊าา ห่วยมาก แต่คนดันใช้มันเยอะสุดอีก เซ็งๆๆๆๆ

    ขอบคุณที่เขียนสิ่งดีๆให้อ่านนะครับ
    วิท (http://www.tutorpoint.net)

  16. December 19th, 2010 at 07:22 | #16

    ขอบคุณครับ กำลังศึกษาพวก CSS อยู่ครับ

  17. May 20th, 2011 at 00:45 | #17

    ของดี css เจอแล้ววว ขอบคุณครับ

  1. No trackbacks yet.