Css tutorial : General-Header

posted on 03 Nov 2007 23:40 by bbears in TutorialCss

โหมด : เริ่มฤกษ์เปิดบลอคใหม่ !
คำเตือน : ห้ามนำงานของผักออกไปแพร่เองนะคะ !!!
โปรแกรมที่ควรใช้ดูบลอคนี้ : Firefox เท่านั้น

-----------------------------------------------------------------------

ที่มาอัพบลอคใหม่ก็เนื่อง มาจาก อันเก่ามันเป็นอะไรก็ไม่ทราบคะ
ผักก็เลยเอาเรื่องที่เคยอัพมาแล้ว (เกี่ยวกะ css) ที่บลอคเดิมมาลงนะ

ตามสัญญาคะ มาสอน css แล้วน้า
แต่ผักคงขอสอนทีละเรื่องอะคะ เพราะสอนครั้งเดียวไม่ไหว
5555555 5555 ตามด้วยบลอคตัวอย่างคะ ~จิ้มคะ
แล้ววันนี้ขอสอนเพียงสองหัวข้อนะคะ ...

เป็นส่วนหลัก และแรกสุดของโค้ด css ของเอ็กทีนนะคะ
ก็เป็นส่วนที่ว่าด้วยเรื่องทั่วไปของบลอคอ้ะคะ อย่างเช่นขนาดหรือแบบของตัวอักษรที่บลอคทั้งหมด
หรือจะเป็นการแสดงสีของลิงค์ทั้งหน้าบลอค อะไรประมาณนี้อ้ะคะ ~

"/* Simple Reset - Not Editable*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0; <<เป็นระยะห่างของเฮดอ่ะคะ ,, ดูรูปอธิบายเพิ่มเติมคะ
padding: 0;
border: 0;
outline: 0;
font-weight:normal; <<ตัวอักษรทั้งหน้า ว่าให้มีลักษณะยังไง เช่น ตัวเอียง, ตัวหนา แต่อันนี้ตั้วค่าว่าปกติคะ
}

/* General */
body {
background:#c7e1e9 url(http://g.exteen.com/t/darkapollo/bck.gif) repeat top left; <<ตัวนี้หมายถึง BG ด้านหลังสุด ซึ่งสามารถลงรูปเป็น url ของรูปโดยการใส่ลิงค์ของรูปที่ต้องการในวงเล็บคะ
color:#333; <<หมายถึง สีของตัวหนังสือทั้งหน้าบลอคอ่ะคะ
font:12px Tahoma, "MS Sans Serif"; <<อันนี้ก็ตั้งค่า ตัวหนังสืออ่ะ ว่าขนาดเท่าไร? ตัวหนังสือของอะไร?
line-height:1.5em; <<เป็นการตั้งค่าของความห่างของบรรทัดแต่ละบรรทัดคะ ,, ดูรูปอธิบายเพิ่มเติมคะ
text-align:center;
}
a:link, a:visited{
color:#ac968f; <<สีของตัวหนังสือ (ที่เป็นลิงค์) ก่อนเอาเมาส์มาชี้
text-decoration:none;
}
a:hover, a:active{
color:#ebdbd7;<<สีของตัวหนังสือ (ที่เป็นลิงค์) หลังเอาเมาส์มาชี้
}
#page{
margin:auto;
padding-top:15px; <<ระยะห่างของบนสุดของบลอค
text-align:left;
width:780px; <<ความกว้างของบลอคทั้งหมด
}
#header, #neck, #belly, #leg, #footer{
float:left;
width:780px; <<ความกว้างของหน้าบลอคทั้งหมด (ต้องตั้งค่าให้เหมือนกับความกว้างเมื่อกี้นะคะ)
}

เป็นส่วนของแสดงเฮดนั่นแหละคะ แต่จากโค้ด css พื้นฐานนี้ก็จะมี 2 บีจีหลักๆ นะคะ
ส่วนที่เป็นสีเขียวๆ กับส่วนสีขาวๆ นะ รวมไปถึงข้อความชื่อบลอคของเราด้วยนะคะ

" /* Header */
#header{
background:url(http://g.exteen.com/t/darkapollo/header.png) top left no-repeat; << อันนี้เป็นไอ้ตัวสี ขาวๆ อยู่ตรงข้างบนของรูปเฮดอ่ะจ๊ะ ,, ดูรูปอธิบายเพิ่มเติมคะ
padding:32px 0px 0px 25px;
}
#header h1 a{
color:#666; << สีตัวหนังสือที่เป็นชื่อของบลอค อยู่ด้านบนสุดคะ ~ที่อยู่ตรงข้างบนของรูปภาพ (เป็นสีที่ก่อนเอาเมาส์ไปชี้นะคะ)
font-size:24px; <<ขนาดของ ตัวหนังสือที่ว่าคะ
}
#header h1 a:hover{
color:#999; << สีตัวหนังสือที่เป็นชื่อของบลอค อยู่ด้านบนสุดคะ ~ที่อยู่ตรงข้างบนของรูปภาพ {เป็นสีที่หลังเอาเมาส์ไปชี้นะคะ} ,, มี tip เพิ่มเติมคะ
}
#header h2{
font-size:12px;
margin:5px 0px 5px 0px;
}
#coverimage{
background:url(http://g.exteen.com/t/darkapollo/cover.jpg) no-repeat; <<ตรงนี้ก็เป็น เฮด (รูปภาพของหัวบลอคนั่นเองคะ) สามารถเปลี่ยนลิงค์ ได้ในวงเล็บเลยนะคะ
height:180px; <<ความสูงของรูปเฮด
width:730px; <<ความกว้าง ของรูปเฮด
margin-bottom:5px; <<เป็นระยะห่างของด้านล่างของรูปเฮด
}

อื้ม... พอจะเก็ทกันไหมคะ?
แบบว่าตอนนี้สอนพื้นฐานก่อนอ่ะ เดี๋ยวไว้สอนธีมนี้เสร็จจะหาธีมเจ๋งๆ มาสอนอ่ะ (ดีไหมคะ?)
โอเคคะ ~เดี๋ยวผักไปเล่นเกมต่อก่อน ... 5555 555 *โดนถีบ*
ขอบคุณสำหรับทุกคอมเมนต์นะคะ ♥

7 Comments