- โดยทั่วไปการกำหนดค่าของ css นั้นจะเป็นการกำหนดลงใน tag id หรือ class นั้นๆ จะสามารถมีผลต่อ tag id หรือ class ที่มีชื่อเดียวกันทุกๆตำแหน่ง
ตัวอย่างเช่น ถ้าหากกำนด ค่า ให้กับ tag input ให้มีค่า css ดังนี้
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
input {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 2px solid red;
border-radius: 4px;
}
</style>
</head>
<body>
<p>ทดสอบ</p>
<form>
<label for="fname">First Name</label>
<input type="text" name="fname">
<label for="lname">Last Name</label>
<input type="text" name="lname">
</form>
</body>
</html>
โดยถ้าหาก ไม่ต้องการที่จะให้ input มีค่าของสีขอบ แบบเดียวกัน ก็ให้กำหนด id หรือ class กำกับ ลงไปด้วย ใน tag input ดังตัวอย่างนี้
-- โดยถ้าหาก กำหนดเป็น id จะต้องใส่ เครื่องหมาย # กำกับที่หน้าชื่อ ของ id ทุกครั้ง
-- โดยถ้าหาก กำหนดเป็น class จะต้องใส่ เครื่องหมาย . กำกับที่หน้าชื่อ ของ class ทุกครั้ง
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
}
.lname{
border: 2px solid red;
}
#fname{
border: 2px solid blue;
}
</style>
</head>
<body>
<p>ทดสอบ</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" class="lname" name="lname">
</form>
</body>
</html>
ในกรณีที่ ต้องการสร้าง form 2 อัน โดยที่ไม่อยากจะเป็นชื่อ id หรือ class แต่อยากให้มีสีที่แตกต่างจากของเดิม ก็ให้กำหนด id หรือ class ของ form อันที่ 2 แล้วทำการสร้าง css ระบุถึง ค่า id หรือ class ที่อยู่ภายใต้ form อันที่ 2 ดังนี้
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
}
.lname{
border: 2px solid red;
}
#fname{
border: 2px solid blue;
}
#form2 .lname{
border: 2px solid #006600;
}
#form2 #fname{
border: 2px solid #FF0099;
}
</style>
</head>
<body>
<p>ทดสอบ</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" class="lname" name="lname">
</form>
<center>------------------ form 2 --------------------------</center>
<form id="form2">
<label for="fname">First Name 2</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name 2</label>
<input type="text" class="lname" name="lname">
</form>
</body>
</html>
มีการใส่ชื่อ class มากกว่า 1
ตัวอย่าง กำหนดให้ มี input อยู่ 2 ช่อง โดยทั้ง 2 ช่องจะมีขนาดที่เท่ากัน แต่ สี จะต่างกัน โดยจะต้องใช้เเค่ class เท่านั้น ซึ่งวิธีการเขียนโคดก็จะมีดังนี้
โค้ด: เลือกทั้งหมด
<html>
<head>
<style>
.input{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border-radius: 4px;
}
.input.color1{
border: 2px solid red;
}
.input.color2{
border: 2px solid blue;
}
</style>
</head>
<body>
<p>ทดสอบ</p>
<form>
<label for="fname">First Name</label>
<input type="text" class="input color1" name="fname">
<label for="lname">Last Name</label>
<input type="text" class="input color2" name="lname">
</form>
</body>
</html>
โดยถ้าหากมี 2 คลาสอยู่ด้วยกัน เวลาที่จะเรียกใช้งาน จะต้องเขียนชื่อติดกัน
ตัวอย่างจากที่พบเจอจริง
1.กรณีที่ต้องการกำหนดค่า ของ ช่องค้นหา ในแต่ละหน้าให้มีความกว้างแตกต่างกัน ดังนี้
ในหน้าของ index จะหนดให้มีความกว้างของของนั้นมีขนาด 97px
ในหน้าของ viewtopic จะหนดให้มีความกว้างของของนั้นมีขนาด 57px
โดยทั้ง 2 หน้านั้นจะมีของ คลาส แรกเท่านั้นที่เป็นชื่อของหน้านั้นๆ แต่กต่างกันจึงสามารถนำมาระบุตำแหน่งว่า ถ้าหากอยู่ใน หน้านั้นๆจะมีขนาดของช่องค้นหาเท่าไร
บทความที่เกี่ยวข้อง
วิธีการการเขียน css เพื่อปรีบความกว้างในการสแดงประโยค
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ