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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

by phennapa » 16/06/2020 6:20 am

ตัวอย่างการใช้ 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 186 times

Top