การใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา(CSS)ขั้นพื้นฐาน

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

phennapa
PHP Jr. Member
PHP Jr. Member
Posts: 20
Joined: 15/06/2020 10:27 am

การใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา(CSS)ขั้นพื้นฐาน

Post by phennapa »

ตัวอย่างการใช้ Style ตกแต่งเว็บเพจ ด้วยภาษา (CSS) พื้นฐาน

Code: Select all

<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

Code: Select all

<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
style.PNG (111.82 KiB) Viewed 300 times
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 9 guests