2006/Mar/26

Background
background-color: #00ff00 // สีบนพื้นหลัง
background-image: url('bgdesert.jpg'); // เลือก Background
background-repeat: repeat-x // ถ้าเป็น X จะ Repeat ตามแนวนอน, Y จะ Repeat ตามแนวตั้ง, no-repeat ไม่มีการ repeat
background-position: // เลือกตำแหน่งให้ภาพแสดงบน Browser
background-attachment: fixed // ?????????
background: #00ff00 url('smiley.gif') no-repeat fixed center; // รวบยอด

Text
p {letter-spacing: 0.5cm} // ระยะห่างระหว่าง Text
p {text-align: right} // ให้ text อยู่ Left, Right, Center
p {text-decoration: underline} // overline, line-through, none, underline
p {text-indent: 1cm} // ระยะห่างจาก Tab
p {text-transform: capitalize} // uppercase, lowercase, capitalize (อักษร ใหญ่, เล็ก, ปกติ)

Font
p {font-family: sans-serif} // Font Type
p {font-size: 100%} // ขนาด font
p {font-style: normal} // bold, italic
p {font-variant: small-caps} // ????
p {font-weight: normal} // ?????
p {font: italic small-caps 900 12px arial} // รวบยอด

Border
p {border-style: dotted} // dotted, dashed, solid, double, groove, ridge, inset, outset, solid double, double solid, groove double, solid double groove
p {border-color: #0000ff} // ใส่สีให้ border
p {border-bottom-width: 15px} // ใส่ความหนาให้ border ด้านล่าง
p {border-left-width: 15px} //
ใส่ความหนาให้ border ด้านซ้าย
p {border-right-width: 15px} // ใส่ความหนาให้ border ด้านขวา
p {border-top-width: 15px} // ใส่ความหนาให้ border ด้านบน
p {border-bottom: medium solid #ff0000} // ใส่ border ให้ด้านล่าง สีแดงด้านเดียว
p {border-left: medium solid #ff0000} // ใส่ border ให้ด้านซ้าย สีแดงด้านเดียว
p {border-right: medium solid #ff0000} // ใส่ border ให้ด้านขวา สีแดง
p {border-top: medium solid #ff0000} // ใส่ border ให้ด้านบน สีแดง
p {border-bottom: medium solid #ff0000} // ใส่ border ให้ด้านล่าง สีแดง
p {border-width: 5px 10px 1px medium} // ไล่ความกว้างให้กับ border ในแต่ละด้าน
p {border: medium double rgb(250,0,255)} // border แบบ double

Margin
p {margin-right: 8cm} // ขอบเขต (right, top, left, bottom)
p {margin: 2cm 4cm 3cm 4cm} // ?????

Padding
td {padding-right: 5cm} // padding (right, left, top, bottom)
td.test2 {padding: 0.5cm 2.5cm} // top-bottom = 0.5, right-left = 2.5

List
ul {list-style-type: disc} // รูปแบบของ list (disc, circle, square, none,
decimal, lower-roman, upper-roman, lower-alpha, upper-alpha)
ul {list-style-image: url('arrow.gif')} // แสดง list เป็นรูป
ul {list-style-position: inside} // inside, outside

Dimension
p {line-height: 0.9cm} // ความห่างระหว่าง line

Classification
p {display: inline} // inline = แสดง, none = ไม่แสดง(ซ่อน)
img {float:right} // แสดงผลเกี่ยวกับภาพ (align=right)
img {float:right; border:1px dotted black; margin:0px 0px 15px 20px;} // สร้าง border และความห่าง
ใช้ div, span
p {position:absolute; left:50px; top:150px} // ตำแหน่งบน Browser
p {position:relative; left:-20px} // left, right (ต่างจาก absolute ยังไงหว่า???)
p {visibility:visible} // visible, hidden
<span style="cursor:"> // เปลี่ยน cursor (auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, nw-resize, se-resize, sw-resize, s-resize, s-resize, text, wait, help)
img {position:absolute; clip:rect(0px 60px 50px 0px)} // Cut Image (งง กับ เลขข้างหลัง อะไรคือ Top, อะไรคือ Right, ??)
div {background-color:#00FFFF; width:150px; height:150px; overflow: scroll} // scroll
img {position:absolute; left:0px; top:0px; z-index:-1} // z-index = priority (-1,0,1,...)
a:link, a:visited, a:hover, a:active // Link
q:lang(no){quotes: "~" "~"}
text-decoration:none // None Underline
p:first-letter {color: #ff0000; font-size:xx-large} // First Letter
p:first-line {color: #ff0000; font-variant: small-caps} // First Line

Comment

Comment:

Tweet


Excellent & remarkable post!
I have been visiting various blogs for my Book report help. I have found your blog to be quite useful. Keep updating your blog with valuable information....... Regards
#1 by Book report help (182.178.0.2) At 2010-10-04 12:04,