คืนค่าการตั้งค่าทั้งหมด
คุณแน่ใจว่าต้องการคืนค่าการตั้งค่าทั้งหมด ?
ลำดับตอนที่ #5 : how2 theme : ส่วนประกอบของโค้ดธีม
หลักสูตรที่ 2
ส่วนประกอบของโค้ดธีม
สวัสดีค่ะ วันนี้ยิ้มจะมาแนะนำเกี่ยวกับธีมกันนะคะ :)
งั้นเรามาดูกันเลยนะคะ ^^
อันดับแรก คือเฮดหลักนะคะ หน้าตาของเฮดหลักก็ประมาณนี้
<style type="text/css">
.head1 h1 { color:#โค้ดสี !important; } < - - - ตรงนี้คือสีตัวอักษรของเฮดหลักนะคะ
.head1 { background:#โค้ดสี; < - - - ตรงนี้คือสีพื้นหลังของเฮดหลักค่ะ
border-bottom:1px solid #โค้ดสี;
border-top:1px solid #โค้ดสี;
border-left:1px solid #โค้ดสี;
border-right:1px solid #โค้ดสี; }
ที่ทำตัวหนาทั้งหมดคือเส้นขอบนะคะ
ส่วนตรงที่ขีดเส้นใต้ไว้คือรูปแบบของเส้นขอบนะคะ เช่น dotted , soid , dashed
อันดับที่สอง คือเฮดรองนะคะ หน้าตาของเฮดรองก็ประมาณนี้
.head1 h2 { color:#โค้ดสี; } < - - - ตรงนี้คือสีตัวอักษรเฮดรองนะคะ
.head2 { background:#โค้ดสี; < - - - ตรงนี้คือพื้นหลังเฮดรองค่ะ
border-bottom:1px solid #โค้ดสี;
border-top:1px solid #โค้ดสี;
border-left:1px solid #โค้ดสี;
border-right:1px solid #โค้ดสี; }
ที่ทำตัวหนาทั้งหมดคือเส้นขอบของเฮดรองนะคะ
ที่ขีดเส้นใต้คือรูปแบบเส้นขอบค่ะ (รูปแบบอยู่ด้านบน)
span.small_title { color: #โค้ดสี; } < - - - โค้ดสีตัวอักษรเฮดรองค่ะ
อันดับที่สาม คือลิ้งค์ค่ะ ลิ้งค์ก็คือตัวอักษรที่คลิกแล้วจะไปหน้าที่ต้องการได้ค่ะ
<style type="text/css">
a:link { color:#โค้ดสี; } < - - - สีตัวอักษรของลิ้งค์ที่ยังไม่ได้ชี้
a:hover { color:#โค้ดสี; < - - - สีตัวอักษรของลิ้งค์เมื่อชี้
background-color:#โค้ดสี; < - - - สีพื้นหลังเมื่อชี้ลิ้งค์
border-top: 1px dashed #โค้ดสี;
border-bottom: 1px dashed #โค้ดสี; }
border-left:1px solid #โค้ดสี;
border-right:1px solid #โค้ดสี; }
ที่ทำตัวหนาทั้งหมดคือเส้นขอบของตัวอักษรเมื่อชี้ลิ้งค่ะ
a:visited { color:#โค้ดสี; } < - - - ตัวอักษรเมื่อคลิกลิ้งค์ไปแล้ว
a:active { color:#โค้ดสี; }</style> < - - - ตัวอักษรเมื่อคลิกลิ้งค์
อันดับที่สี่ ฟอนต์หน้าบทความ ฟอนต์คือตัวอักษรเมื่อเราพิมพ์ก็จะแสดงผล
<style type="text/css">
td,th,div,body,li,ul,p { color:#โค้ดสี!important; < - - สีตัวอักษรหน้าบทความ
font-family:Tahoma;font-size:11px; } < - - - ขนาดตัวอักษร
td font { color:#โค้ดสี!important; } < - - - สีตัวอักษรหน้าบทความ
table.story { border-color:#โค้ดสี; } < - - - สีตัวอักษรทั้งหน้าบทความ
span.desc_head { font-weight: bold;
color:#โค้ดสี; }</style> < - - - สีตัวอักษร
อันดับที่ห้า คือสกอบาร์ สกอร์บาร์คือตัวที่เลื่อนๆ(?) อยู่ด้านขวามือนี่เอง
::-webkit-scrollbar { height: 5px; width: 5px; background: #โค้ดสี; } < - - - โค้ดสีตัวเลื่อนค่ะ
::-webkit-scrollbar-thumb:vertical { background-color: #โค้ดสี; < - - - พื้นหลังตัวเลื่อน
height: 5px; border: 1px dashed #โค้ดสี; }</style> < - - - ขนาดและรูปแบบสกอบาร์
อันดับที่ 6 คือ พื้นหลังที่เขียนตัวอักษร
<style type="text/css">
table { background:#โค้ดสีพื้นหลังที่เขียนตัวอีกษร;border:0px; }
td { background:none;border:0px; }
อันดับที่ 7 คือ พื้นหลัง หรือ blackground
body { background: url(urlรูปภาพพื้นหลัง);
background-repeat:repeat;
background-position:center;
background-attachment:fixed }
hr { visibility:hidden; }</style>
อันดับที่ 8 คือ กล่องข้อความและกล่องโหวตคะแนน
<style type="text/css">
INPUT, SELECT, TEXTAREA {
background-color:#โค้ดสี !important; < - - - พื้นหลังกล่องข้อความและกล่องโหวต
color:#โค้ดสี!important; < - - - สีตัวอักษร
font-family: tahoma; < - - - รูปแบบตัวอักษร
border: dashed 1px #โค้ดสี; < - - - รูปแบบของกรอบและขนาด
font-size:11px; padding: 1;}
td font { color:#โค้ดสี!important; } < - - - สีตัวอักษร
td,th,div,body,li,ul,p { color:#โค้ดสี!important; < - - - สีตัวอักษร
font-family:Tahoma; letter-spacing:0.4px; font-size:12px;}</style>
อันดับสุดท้าย
คือการคลุมดำข้อความ การคลุมดำคือนำเม้าส์ไปลากข้อความใดข้อความหนึ่ง
<style type="text/css">
*::selection{
background:#โค้ดสีพื้นหลัง;
color:#โค้ดสีตัวอักษร;}
*::-moz-selection{
background:#โค้ดสีพื้นหลัง;
color:# โค้ดสีตัวอักษร ;}
*::-webkit-selection{
background:#โค้ดสีพื้นหลัง;
color:#โค้ดสีตัวอักษร;}</style>
----------------------------------------------------------------------
ตัวอักษรสีแดง ทำตัวหนา และขีดเส้นใต้คือเปลี่ยนได้นะคะ
แต่อื่นๆห้ามเปลี่ยนนะคะ ไม่งั้นโค้ดจะพัง ^^"
รับโค้ดได้ที่นี่ .............จิ้มเพื่อรับโค้ด
ต่อไปจะจัดกิจกรรมประกวดการทำธีมแบบเบสิคนะคะ อย่าลืมมาร่วมนะคะ ^^
ความคิดเห็น