css คืออะไร
จำได้มั้ย โค้ดที่น้องๆ ชอบถาม ว่า ขอโค้ดใส่ background กล่องคอมเมนต์หน่อย อะไรทำนองนี้ โค้ดเหล่านั้นที่ ใช้ ก็คือ CSS นั่นเอง
จริงๆ แล้ว css ก็คือ ภาษา ที่ ใช้ในการกำหนด รูปร่างหน้าตา ของ HTML อีกทีนึง ไม่ต้องตกใจ มันไม่ได้ ยากอีกแระ เพราะทางเวบเตรียม โค้ด CSS ไว้ให้เรียบร้อยแล้ว
โอ้ะ สะดวกจิงๆ ที่เหลือ แก้ตาม อย่างเดียวเลยนะครับ
ดูโค้ดที่เตรียมไว้ให้กัน COPY ไปใช้ได้เลยนะครับ ถ้าอยากแก้ ก็อ่าน ดู พี่จะเขียนอธิบายไว้ ว่าอะไรเป็นอะไร
<!-------------------------------------------- CSS code ควรไว้ข้างบนสุดนะครับ ---------------------------------------->
<style>
/*ส่วนของ Body ใส่ Bg ได้*/
body{
margin:0px;
background:url(http://www.whenifallinlove.net/diary/images_background/bg17/bg_back6.jpg); /* เปลี่ยน url เอง*/
background-attachment:fixed;
}
/*สี และขนาด ฟอนท์ตัวอักษรทั้งหน้า */
td,th,div,body,li,ul,p {
color: #000000; /*สี*/
font-size:14px; /* ขนาด font*/
font-family: 'MS Sans Serif', 'Microsoft Sans Serif',sans-serif; /* จะเปลี่ยน font ทั้งหน้า แก้ที่นี่เลย*/
}
/* กล่อง กรอกชื่อผู้คอมเมนต์ */
input{
background:url(http://www.whenifallinlove.net/diary/images_background/bg4/15648_97246.gif); /* เปลี่ยน url เอง*/
}
/* กล่อง เขียน comment */
textarea{
background:url(http://www.whenifallinlove.net/diary/images_background/bg4/15648_97246.gif); /* เปลี่ยน url เอง*/
height:100px; /* ความสูงกล่อง*/
width: 300px;/*ความกว้างกล่อง*/
}
/*------------------------ส่วนลิงค์ของตัวอักษร ------------------------*/
a:link { /* สี ตัวอักษรลิงค์ */
color: blue;
text-decoration: none;
}
a:hover { /* สี ตัวอักษรเมื่อเอา เมาส์วาง*/
color: green;
text-decoration: underline;
}
a:visited {/* สี ตัวอักษรเมื่อคลิก link แล้ว*/
color: white;
text-decoration: none;
}
/*------------------------ส่วนกล่องโชว์คนที่มาคอมเมนต์ มันจะสลับสีกัน----------------------------------------*/
/* กล่องคอมเมนต์ แรก*/
#comment1{
overflow:hidden;
width:350px; /* ความกว้างของกล่องคอมเมนต์*/
margin:10px 0px 10px 0px;
background:url(http://www.whenifallinlove.net/diary/images_background/bg4/15648_97246.gif); /* ใส่สี ใส่ bg ภาพ ได้ */
}
/* กล่องคอมเมนต์ ที่สอง*/
#comment2{
overflow:hidden;
width:350px; /* ความกว้างของกล่องคอมเมนต์*/
margin:10px 0px 10px 0px;
background:white; /* ใส สี ใส่ bg ภาพ ได้ */
}
/* table กล่องเขียนคอมเมนต์ */
#comment_box{
overflow:hidden;
width:350px;
margin:10px 0px 10px 0px;
}
#detail_comment{
text-align:left;
border:dashed 1px #FFFFFF; /* ขอบ เส้นประ*/
margin:8px 8px 8px 8px;
}
/* เนื้อหาในกล่อง คอมเมนต์ */
#detail_comment div{
margin:4px 4px 4px 4px;
}
/* ส่วนที่โชว์โลโก้ของเพื่อน */
#logo_comment{
text-align:left;
float:left;
margin:1px 4px 0px 8px;
}
/* ส่วนที่โชว์ ชื่อของคนที่คอมเมนต์*/
#name_comment{
text-align:left;
float:left;
margin:1px 8px 0px 0px;
}
/*------------- ส่วน ไอคอนหน้าหัวข้อไดอารี่ -------------*/
ul{
list-style-type: none;
margin:0 0 0 2;
}
li{
margin:0 0 0 0;
padding:0 0 2 19; /* 2 กับ 19 เปลี่ยนได้ ท่า ไอคอนมันเบี้ยวไม่ตรงหัวข้อ เพราะแต่ละไอคอนจะไม่เท่ากัน */
background:url(http://www.whenifallinlove.net/images/icon_publication.gif) no-repeat 0 0;
}
/*------------- ส่วน เปลี่ยนสี ปฏิทิน-------------*/
calendarHeader {
background:red;
}
.calendarToday {
font-weight: bold;
background:red;
}
.calendar {
border:1px solid #cccccc;
}
</style>
<!--------------------------------------------Copy ไปใช้ถึงตรงนี้ ---------------------------------------->
|
