วิธีการเลือกปรับแก้ไข css เฉพาะจุดใดจุดหนึ่งเท่านั้น

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

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

User avatar
Ittichai_chupol
PHP VIP Members
PHP VIP Members
Posts: 5410
Joined: 19/09/2018 10:33 am

วิธีการเลือกปรับแก้ไข css เฉพาะจุดใดจุดหนึ่งเท่านั้น

Post by Ittichai_chupol »

- การปรับแก้ไข หรือปรับแต่งความสวยงามให้กับหน้าเว็บไซต์ นั้นจะต้องพึงพาความสามารถของภาษา css ที่สามารถปรับความสวยงามของผลการแสดงให้กับหน้าเว็บไซต์ได้ตามความต้องการ ทั้งขนาด ช่อง หรือ ขนาดอักษร รวมทั้งผลการแสดงอื่นๆอีกมากมาย โดย css ทำงานร่วมกับ html เพื่อที่จะส่วนต่างๆ ของ html ให้เป็นแบบที่ผู้พัฒนาได้ตรงตามต้องการ ซึ่งการกำหนดค่าของ html นั้น css จะกำหนดโดยการอิงตาม tag id และ class ที่จะกำหนดไว้ในตำแหน่งต่างๆใน หน้าเว็บไซต์


- โดยทั่วไปการกำหนดค่าของ css นั้นจะเป็นการกำหนดลงใน tag id หรือ class นั้นๆ จะสามารถมีผลต่อ tag id หรือ class ที่มีชื่อเดียวกันทุกๆตำแหน่ง

ตัวอย่างเช่น ถ้าหากกำนด ค่า ให้กับ tag input ให้มีค่า css ดังนี้

Code: Select all

<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>

ค่าของ tag input ทุกตัวก็จะแสดงผม เช่นเดียวกัน ทุกตำแหน่ง ดังรูป
CSS Knowledge-1.png
CSS Knowledge-1.png (6.27 KiB) Viewed 266 times

โดยถ้าหาก ไม่ต้องการที่จะให้ input มีค่าของสีขอบ แบบเดียวกัน ก็ให้กำหนด id หรือ class กำกับ ลงไปด้วย ใน tag input ดังตัวอย่างนี้

-- โดยถ้าหาก กำหนดเป็น id จะต้องใส่ เครื่องหมาย # กำกับที่หน้าชื่อ ของ id ทุกครั้ง
-- โดยถ้าหาก กำหนดเป็น class จะต้องใส่ เครื่องหมาย . กำกับที่หน้าชื่อ ของ class ทุกครั้ง

Code: Select all



<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>

ผลที่ได้ คือ ในช่อง input ที่กำหนด id ชื่อ fname จะมีขอบเป็น แดง และ input ที่กำหนด class ชื่อ lname จะมีขอบเป็นสีน้ำเงิน

CSS Knowledge-1.png
CSS Knowledge-1.png (6.39 KiB) Viewed 266 times


ในกรณีที่ ต้องการสร้าง form 2 อัน โดยที่ไม่อยากจะเป็นชื่อ id หรือ class แต่อยากให้มีสีที่แตกต่างจากของเดิม ก็ให้กำหนด id หรือ class ของ form อันที่ 2 แล้วทำการสร้าง css ระบุถึง ค่า id หรือ class ที่อยู่ภายใต้ form อันที่ 2 ดังนี้

Code: Select all


<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>

โดยผลที่ได้ ก็จะทำให้ ของ id หรือ class ที่อยู่ภายใต้ form อันที่ 2 เปลี่ยน ไปตามที่กำหนด โดยจะไม่มีผลกระทบ ต่อ form อันที่ 2 id หรือ class ที่มีชื่อเดียวกัน แต่อยู่ต่าง form
CSS Knowledge-1.png
CSS Knowledge-1.png (12 KiB) Viewed 266 times

มีการใส่ชื่อ class มากกว่า 1

ตัวอย่าง กำหนดให้ มี input อยู่ 2 ช่อง โดยทั้ง 2 ช่องจะมีขนาดที่เท่ากัน แต่ สี จะต่างกัน โดยจะต้องใช้เเค่ class เท่านั้น ซึ่งวิธีการเขียนโคดก็จะมีดังนี้

Code: Select all

<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 คลาสอยู่ด้วยกัน เวลาที่จะเรียกใช้งาน จะต้องเขียนชื่อติดกัน
CSS Knowledge-1.png
CSS Knowledge-1.png (6.39 KiB) Viewed 266 times


ตัวอย่างจากที่พบเจอจริง


1.กรณีที่ต้องการกำหนดค่า ของ ช่องค้นหา ในแต่ละหน้าให้มีความกว้างแตกต่างกัน ดังนี้

ในหน้าของ index จะหนดให้มีความกว้างของของนั้นมีขนาด 97px

Selection_283.png
Selection_283.png (74.53 KiB) Viewed 266 times


ในหน้าของ viewtopic จะหนดให้มีความกว้างของของนั้นมีขนาด 57px

Selection_284.png
Selection_284.png (79.46 KiB) Viewed 266 times
โดยทั้ง 2 หน้านั้นจะมีของ คลาส แรกเท่านั้นที่เป็นชื่อของหน้านั้นๆ แต่กต่างกันจึงสามารถนำมาระบุตำแหน่งว่า ถ้าหากอยู่ใน หน้านั้นๆจะมีขนาดของช่องค้นหาเท่าไร



บทความที่เกี่ยวข้อง

วิธีการการเขียน css เพื่อปรีบความกว้างในการสแดงประโยค
หน่วยของค่าที่ใช้ต่างๆ ใน CSS
การใช้ box-shadow เพื่อสร้างเงาให้ กรอบกล่องข้อความ
ขอให้วันนี้เป็นวันที่ดี

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 5 guests