DEX  WAT  LEARN

LEARN  FOR  WEB  DESIGN  WITH  DEX  WAT  DEV

CSS

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

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

ตัวอย่าง การตกแต่งหน้าเว็บไซต์ ด้วย 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>

@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;
     }
} 		แยกการแสดงผลตามอุปกรณ์