โดย phennapa » 16/06/2020 6:20 am
ตัวอย่างการใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา (CSS) พื้นฐาน
โค้ด: เลือกทั้งหมด
<style type="text/css">
body{ //การกำหนด body
font-size: 80%; // font-size คือการกำหนดขนาดตัวอักษร
background: #075f69 ;//background คือการใส่สีพื้นหลัง กำหนดใส่สีฟ้าคราม
}
.ServerFrom {//ชื่อคลาส
float: center;//คือการกำหนดให้อยู่ในด้านไหนก็ได้
width: 20%;//ความกว้าง
height: 20px;//ความยาว
}
.submit{
padding: 7px 14px 7px 14px ;//ปรับระยะห่างของตัวอักษร
float: center;
margin-left: 3%;//คือในรูปแบบbutton ให้อยู่ในระยะขอบห่างกันเท่าใด
color: #000033;//สีตัวอักษร สีน้ำเงิน
background-color: Yellow;//สีพื้นหลังของbutton สีเหลือง
border-radius: 5px;//ขนาดของขอบ button
border: 0px;//ไม่กำหนดการสร้างกรอบ button
}
.button{
padding: 7px 14px 7px 14px ;
float: center;
margin-left: 3%;
color: #FF1493;//colorคือกำหนดสีตัวอักษร กำหนดเป็นสีชมพู
background-color: Plum;//สีพื้นหลังของตัวอักษร กำหนดเป็นสีพลัม
border-radius: 5px;//ขนาดของขอบ button
border: 0px;
}
h1{
color: purple;//สีตัวอักษรสีม่วง
margin-top: 80px;
}
div img{
float: center;
width:200px;//ความกว้าง
height:200px;//ความยาว
}
</style>
ตัวอย่างCodeในหน้าloginที่จะตกแต่งด้วย css ก็จะมี หัวข้อ, username, password, ปุ่มlogin, ปุ่มRegister
โค้ด: เลือกทั้งหมด
<body>
<center>
<h1>Login</h1><br/>
username<input type="test" name="text" class="ServerFrom"><br/><br/>
password</label> <input type="password" name="password" class="ServerFrom"><br/><br/><br/>
<br><button class="button" name="login" >login</button> <button class="submit">Register</button> <br><br/>
<div> <img src="img\123.jpg"/></div>
</center>
</body>
รูปแสดงผลการใช้Style ตกแต่งเว็บเพจ ด้วยภาษา (CSS)
- style.PNG (111.82 KiB) Viewed 3155 times
ตัวอย่างการใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา (CSS) พื้นฐาน
[code]<style type="text/css">
body{ //การกำหนด body
font-size: 80%; // font-size คือการกำหนดขนาดตัวอักษร
background: #075f69 ;//background คือการใส่สีพื้นหลัง กำหนดใส่สีฟ้าคราม
}
.ServerFrom {//ชื่อคลาส
float: center;//คือการกำหนดให้อยู่ในด้านไหนก็ได้
width: 20%;//ความกว้าง
height: 20px;//ความยาว
}
.submit{
padding: 7px 14px 7px 14px ;//ปรับระยะห่างของตัวอักษร
float: center;
margin-left: 3%;//คือในรูปแบบbutton ให้อยู่ในระยะขอบห่างกันเท่าใด
color: #000033;//สีตัวอักษร สีน้ำเงิน
background-color: Yellow;//สีพื้นหลังของbutton สีเหลือง
border-radius: 5px;//ขนาดของขอบ button
border: 0px;//ไม่กำหนดการสร้างกรอบ button
}
.button{
padding: 7px 14px 7px 14px ;
float: center;
margin-left: 3%;
color: #FF1493;//colorคือกำหนดสีตัวอักษร กำหนดเป็นสีชมพู
background-color: Plum;//สีพื้นหลังของตัวอักษร กำหนดเป็นสีพลัม
border-radius: 5px;//ขนาดของขอบ button
border: 0px;
}
h1{
color: purple;//สีตัวอักษรสีม่วง
margin-top: 80px;
}
div img{
float: center;
width:200px;//ความกว้าง
height:200px;//ความยาว
}
</style>[/code]
ตัวอย่างCodeในหน้าloginที่จะตกแต่งด้วย css ก็จะมี หัวข้อ, username, password, ปุ่มlogin, ปุ่มRegister
[code]
<body>
<center>
<h1>Login</h1><br/>
username<input type="test" name="text" class="ServerFrom"><br/><br/>
password</label> <input type="password" name="password" class="ServerFrom"><br/><br/><br/>
<br><button class="button" name="login" >login</button> <button class="submit">Register</button> <br><br/>
<div> <img src="img\123.jpg"/></div>
</center>
</body>[/code]
รูปแสดงผลการใช้Style ตกแต่งเว็บเพจ ด้วยภาษา (CSS)
[attachment=0]style.PNG[/attachment]