คำสั่ง พื้นฐาน CSS ในการ แต่ง hi5

[admin]

การที่จะศึกษา CSS จำเป็นต้องมีพื้นฐานของ HTML มาแล้ว เพราะว่าภาษา CSS นี้จะมีความยากมากกว่า HTML อยู่ แต่ว่าไม่ถึงกับมากครับ หากว่าใครที่ยังไม่มีความรู้เรื่องของ HTML ก่อนที่จะมาศึกษา CSS ผมแนะนำให้ศึกษา HTML ก่อนนะครับ

CSS ย่อมาจาก Cascading Style Sheets



background-color : สีพื้นหลัง
background-color: #fff !important;

----------

background-image : รูปพื้นหลัง
background-image: url(http://www.whoaddme.com/images/bg.jpg);

----------

background-repeat: ทำซ้ำหรือไม่;
background-repeat: repeat; หรือ background-repeat: no-repeat;

----------

background-position: ตำแหน่ง;
background-position: left top;

----------

background : พื้นหลัง
เช่น
background: url(http://www.whoaddme.com/welcome.jpg) no-repeat top left #fff;}
url คือ ที่อยู่รูป
no-repeat คือ ไม่ทำภาพซ้ำซ้อนไปเรื่อยๆ
repeat คือทำภาพซ้ำๆกันไปเรื่อย
top-left คือ เริ่มจากบนสุด ซ้ายสุด
สุดท้าย คือ สี ของ bg ครับ
* อันนี้เป็นวิธีเขียนแบบทีเดียวจบครับ

----------

border : ขอบ

border-width : 4px;
border-style : ลักษณะขอบ;
ตัวอย่าง http://www.w3schools.com/css/pr_border-style.asp
border-color: #000;
สามารถเขียนทีเดียวออกมาได้เป็น
border: 4px solid #000;

----------

color : สีอักษร
color: #fff; สีขาว

----------

cursor : เมาส์
cursor : url("first.cur"), url("second.cur"), pointer
ตัวอย่าง http://www.w3schools.com/CSS/pr_class_cursor.asp

----------

direction : ทิศทาง
เช่น
direction: ltr;
ltr ค่าปรกติซ้ายไปขวา
rtl ขวาไปซ้าย

----------

display : หน้าต่าง
เช่น
display:none;
อ่านเพิ่มเติมได้ที่ http://www.w3schools.com/css/pr_class_display.asp

----------

font : อักษร
font-family: verdana; แบบอักษร
font-size:14px; ขนาดอักษร
font-style: normal; หรือ italic,oblique
font-weight: bold; ตัวหนา
เพิ่มเติม
http://www.w3schools.com/css/css_font.asp

----------

width : ความกว้าง เช่น 300px;
height : ความสูง เช่น 100px;

----------

letter-spacing : ระยะห่าง ตัวอักษร เช่น 12px;
อ่านเพิ่มเติม http://www.w3schools.com/css/pr_text_letter-spacing.asp

----------

line-height : ระยะห่าง ระหวางบรรทัด เช่น 14pt;
เพิ่มเติม http://www.w3schools.com/css/pr_dim_line-height.asp

----------

position : รูปแบบการว่างของส่วนนั้นๆ
position : absolute; hi5 ใช้ไม่ได้ครับคำสั่งนี้
กำหนดตำแหน่งให้สัมพัทธ์กับหน้าต่าง (เช่น img ใน div เหมือนอันแรก ถ้ากำหนด top: 10px มันจะนับจากขอบหน้าต่างของ browser จากใต้ toolbar ลงมา 10px)

----------

position: relative; กำหนดตำแหน่งให้สัมพัทธ์กับ object แม่ของมัน (เช่น img ใน div ถ้ากำหนด top: 10px ก็จะเว้นระยะจากขอบของ div ลงมา 10px)

position:fixed; เหมือน absolute แต่เวลา scroll ลง มันไม่เลื่อนตามไปด้วย

เพิ่มเติม http://www.w3schools.com/Css/pr_class_position.asp

ระวัง เรื่อง position: fixed หน่อยนะครับ เหมือน IE จะไม่ยอมเล่นด้วยซักเท่าไร
แต่ ก็มีคนหา workaround สำหรับปัญหานี้มาให้แล้วครับ ลองดูได้ถ้าสนใจ

http://www.cssplay.co.uk/layouts/fixed.html
http://tagsoup.com/-dev/null-/css/fixed/

----------

text-align : รูปแบบตัวหนังสือ เช่น left; center; right;

text-decoration : รูปแบบอักษร
เช่น
text-decoration: underline; ขีดเส้นใต้
เพิ่ม เติม http://www.w3schools.com/Css/pr_text_te ... ration.asp

----------

word-spacing : ขนาดช่องไฟ เช่น 30px;
เพิ่มเติม http://www.w3schools.com/CSS/pr_text_word-spacing.asp

----------


ลอง ดูนะครับ หรือ ศึกษาจาก
http://www.w3schools.com ได้เลยครับผม