เขียน css อย่างสั้น ง่ายๆ โหลดไวๆ
Apr 24th
แน่นอนครับ ถ้ามันสั้นได้ จะเขียนยาวไปทำไมให้เยิ่นเย้อ มาดูกันว่า 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 ครับ
จากโปรแกรมทำ CSS เมนูมันสั่งทำให้แล้วมันก็ย่อแบบนี้ครับ…..
ผมว่าแล้ว..ว่ามันต้องมีสูตร :d:d:d:d:d
ท่าน webmaster ครับผมใช้ มันไม่สนับสนุน Color Bar หรือครับ
พอเปลี่ยนเป็น
ใช้งานสี Color Bar ได้ปรกติ…..
งงง………….ครับ
กระจ่างเลยครับผม :)>-
งงสุดๆเลย ทำไมเวลาเขียน ccs แล้วบรรทัดมันหล่นลงไปยาวเยียดเลยกว่าจะหาเจอเม้าส์จาพังพอดี ช่วยตอบหน่อยนะคะพยายามหาทางแก้แล้วทำไม่ได้จริงๆ:((
คุณ likhi1 โปรแกรมทำ css ที่ว่า คือโปรแกรมอะไรหรอคะ ขอบคุณค่ะ o_o
โปรแกรม ที่ทำงานกับ CSS น่าจะ Adobe Dream CS3 ไม่ก็ Rapid CSS นะครับ 2 ตัวนี้เด่น
adad
Thank You!
สุดยอดครับ อ่านตั้งหลาย เอ็นทรี่แล้ว ผมว่า อันนี้โดนใจสุด
ขอกลับไปแก้ไข เว็บของตัวเองก่อน
แล้วจะกลับมาเยี่ยมบ่อยๆครับ
Thank Lai Lai
ระวังนะครับ การเขียนโค๊ด อย่าง สั้ง
บาง เบาว์เซอร์ อ่านไม่ออก เอายากๆ เข้าไว้ดีแล้วครับ
จากประสพการณ์จริง:-w
ขอบคุณครับ ทั้งการแนะนำ และคุณ degree ที่เตือน งั้นยาวๆ ไปก่อน ชัวร์…:-w
Thank you for good information
ข้อมูลดีๆแบบนี้หามาบอกกันเรื่อยๆนะครับ
ขอบคุณ
จะลองเอาไปใช้ดูบ้าง:d
แรกๆคงจะ งง เรื่องวางตำแหน่งของ property น่าดูเลย :((
มีประสบการณ์เรื่องการเขียน CSS ตัว background-position สลับตำแหน่งกัน จากที่เราเขียนไป top left แต่ที่ถูกมันต้อง left top ปรากฏว่า FF และ Safari แสดงผลได้ถูกต้อง แต่ IE ตัวเจ้าปัญหาตลอดกาล (แม่ง) ดันแสดงผลไม่ได้อีก จำได้ว่าวันนั้นหาตั้งนานนนนกว่าจะเจอว่ามันผิดมาจากค่า position ที่สลับกัน กำ ทำไม IE มันเรื่องมากหยั่งงี้น๊าา ห่วยมาก แต่คนดันใช้มันเยอะสุดอีก เซ็งๆๆๆๆ
ขอบคุณที่เขียนสิ่งดีๆให้อ่านนะครับ
วิท (http://www.tutorpoint.net)
ขอบคุณครับ กำลังศึกษาพวก CSS อยู่ครับ
ของดี css เจอแล้ววว ขอบคุณครับ