CSS

           การตกแต่งหน้าเว็บไซต์ ด้วย CSS

           การกำหนด CSS มีอยู่ 2 วิธี
1 กำหนดให้กับวัตถุทีละตัวโดยการใช้ style=""
2 เขียนคำสั่ง CSS ไว้แล้วใช้ id หรือ class ในการเรียกใช้คำสั่ง โดยใช้ tag <style> </style>

ตัวอย่าง การตกแต่งหน้าเว็บไซต์ ด้วย CSS

Title CSS


<style>
    .header1{
        border:1px solid black;
        height:20px;
        background-color:#FF3333;
        clear: both;
    }
    
    #body1{
        float:left; 
        border:1px solid black;
        width:20%;
        height:140px;
        margin-top:5px;
        margin-bottom:5px;
        background-color:#99CCFF;
    }

    #body2{
        float:right; 
        border:1px solid black;
        width:79%;
        height:140px;
        margin-top:5px;
        margin-bottom:5px;
        background-color:#CC6633;
    }
</style>
<div class="header1">
    header
</div>
<div id="body1">
    menu
</div>
<div id="body2">
    body
</div>
<div class="header1">
    footer
</div>
CSS

คำอธิบาย CSS

@font-face {
     font-family:'myFirstFontB';
     src: url('font/BangkokBankSet-Bold.otf');
}
h1,h2,h3,h4,h5,h6{
     font-family: 'myFirstFontB';
} 		กำหนด Font
width : 10px กำหนดความกว้างของวัตถุ
height : 10px; กำหนดความกว้างของวัตถุ
border : 1px solid black; กำหนด ขนาด ประเภท สี เส้นขอบวัตถุ
border-radius: 2em;
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em; 		กำหนด ส่วนโค้ง เส้นขอบวัตถุ
background-image: url("ที่อยู่ไฟล์"); กำหนดพื้นหลังเป็นรูปภาพ
background-color:#FF0000;
background-color:rgb(0,0,255);
background-color:rgba(0,0,255.0.5);
background-color:red;
 กำหนดสีพื้นหลัง
color:#FF0000;
color:rgb(0,0,255);
color:red;
 กำหนดสีให้ตัวอักษร
margin : 5px 5px 5px 5px;
margin-top : 5px;
margin-right : 5px;
margin-bottom : 5px;
margin-left : 5px;
 กำหนดระยะห่างภายนอก เรียง บน ขวา ล่าง ซ้าย
กำหนดระยะห่างภายนอกด้านบน
กำหนดระยะห่างภายนอกด้านขวา
กำหนดระยะห่างภายนอกด้านล่าง
กำหนดระยะห่างภายนอกด้านซ่าย
padding : 5px 5px 5px 5px;
padding-top : 5px;
padding-right : 5px;
padding-bottom : 5px;
padding-left : 5px;
 กำหนดระยะห่างภายใน เรียง บน ขวา ล่าง ซ้าย
กำหนดระยะห่างภายในด้านบน
กำหนดระยะห่างภายในด้านขวา
กำหนดระยะห่างภายในด้านล่าง
กำหนดระยะห่างภายในด้านซ่าย
display: block;
pdisplay: inline-block;
display: inline;
display: none;
ทำให้แท็กเป็นกล่องที่กินพื้นที่ตามแนวกว้างทั้งหมด
มีลักษณะเหมือน block ปกติแต่อนุญาตให้แท็กอื่นมาอยู่ข้างได้
อนุญาตให้แท็กอื่นมาอยู่ข้างได้ และกินพื้นที่เท่าที่จำเป็น
ทำให้แท็กหายไปจากหน้าจอ
float: left;
float: right;
 ทำให้แท็กเป็นกล่องที่กินพื้นที่ตามแนวกว้างทั้งหมด
มีลักษณะเหมือน block ปกติแต่อนุญาตให้แท็กอื่นมาอยู่ข้างได้
clear: left;
clear: right;
clear: both;
ถ้าทับกับแท็กที่มี float: left; จะขยับแท็กนี้ ไว้ด้านล่าง
ถ้าทับกับแท็กที่มี float: right; จะขยับแท็กนี้ ไว้ด้านล่าง
เป็นทั้งสองแบบรวมกัน
.test{
     height:450px;
     height:80px;
}
@media (max-width: 640px) and (min-width: 320px) {
     .test{
          height:600px;
          height:100px;
     }
}
@media (max-width: 2000px) and(min-width: 640px) {
     .test{
          height:900px;
          height:200px;
     }
} 		แยกการแสดงผลตามอุปกรณ์
position: fixed;
 ทำให้แท็กอยู่กับที่แม้เราจะเลื่อนหน้าจอไปมา