Properties
#HelloFrontend #HelloErmine #HelloWorld2021
Properties เป็นคุณลักษณะต่าง ๆ ที่เราสามารถกำหนดเพื่อจัดการหน้าเว็บไซต์ของเราได้ เช่น สี ความกว้าง ขอบของข้อความ ฯลฯ โดยมีหลากหลาย properties ที่จำเป็นเเละน่าสนใจ โดยยกตัวอย่างที่สำคัญ ดังนี้
Background
background เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับภาพพื้นหลัง
background-repeatกำหนดการเเสดงผลภาพพื้นหลังซ้ำ/การ repeat ภาพพื้นหลังbackground-positionกำหนดตำเเหน่งของภาพพื้นหลังว่าจะให้อยู่ตรงจุดไหนbackground-attachmentกำหนดว่าจะให้ภาพพื้นหลังขยับตามการขยับเมาส์หรืออยู่นิ่งที่จุดเดิม
ตัวอย่างของ background
body {
background-image: url("background-sample.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}ผลลัพธ์
ในการใส่ภาพพื้นหลังที่นำมาจากไฟล์ภาพเเหล่งอื่น ๆ จะใช้ background-image ในการเขียน เเละตามด้วย url ของภาพ เเละจะเห็นว่าภาพจะเเสดงผลเพียงรูปเดียว ไม่มีการซ้ำรูปให้เต็มหน้าเว็บไซต์ เนื่องจากกำหนดไว้ให้เป็นเเบบ no-repeat เเละภาพจะเเสดงผลบริเวณด้านบนขวาของเว็บไซต์ตามที่ตั้ง position เอาไว้ ในส่วนของ attachment นั้น หากหน้าเว็บไซต์มีความยาวมากจนต้องทำการ scroll เมาส์ ในการตั้งค่า fixed นี้จะทำให้ภาพพื้นหลังไม่ขยับไปตามการเลื่อนของเรา เเต่จะยังคงอยู่ในตำเเหน่งเดิม
Text
text เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับข้อความ
text-alignกำหนดตำเเหน่งของข้อความว่าจะให้อยู่ส่วนไหนของหน้าเว็บไซต์/block นั้น ๆ
ตัวอย่าง
<p class="p1">text align example1</p>.p1 {
text-align: right;
}ผลลัพธ์
text-decorationกำหนดลักษณะเพิ่มเติมให้ข้อความเพื่อเน้น โดยเป็นการขีดเส้น เช่น ขีดเส้นใต้ข้อความ มักใช้คู่กับ tag a ที่เป็นลิงก์ข้อความ
ตัวอย่าง
<p class="p2">text decoration example2</p>.p2 {
text-decoration: underline red dotted;
}ผลลัพธ์
text-shadowกำหนดค่าสำหรับการเเสดงเงาของตัวอักษร
ตัวอย่าง
<p class="pp">text shadow example</p>.pp {
text-shadow: 2px 2px 3px #f00;
}ผลลัพธ์
Font
font เป็นการกำหนดลักษณะต่าง ๆ ของตัวอักษร
font-familyกำหนดรูปแบบของตัวอักษรที่ต้องการใช้ โดยปกติจะใช้ตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้งาน และจะหลีกเลี่ยงการเลือกใช้ตัวอักษรที่ไม่แน่ชัด (กำหนดฟอนต์ที่เราจะพิมพ์ตัวอักษร)
ตัวอย่าง
<p class="p1">font family example1</p>
<p class="p2">font family example2</p>.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: "Lucida Console", "Courier New", monospace;
}ผลลัพธ์
font-sizeกำหนดขนาดตัวอักษร
ตัวอย่าง
<p class="p1">font size example1</p>
<p class="p2">font size example2</p>.p1 {
font-size: 1em;
}
.p2 {
font-size: 2em;
}ผลลัพธ์
font-styleกำหนดลักษณะตัวอักษร เช่น ตัวเอียง เป็นต้น
ตัวอย่าง
<p class="p1">font style example1</p>.p1 {
font-style: italic;
}ผลลัพธ์
font-weightกำหนดความหนาของตัวอักษร
ตัวอย่าง
<p class="p1">font weight example1</p>
<p class="p2">font weight example2</p>.p1 {
font-weight: bolder;
}
.p2 {
font-weight: lighter;
}ผลลัพธ์
*BOX MODEL*
จะเกี่ยวกับการกำหนดรูปแบบของกรอบหรือขอบเขตของ element ซึ่งเป็นเรื่องที่สำคัญอันดับต้น ๆ ในการออกแบบเว็บไซต์
Float
float มีหน้าที่ทำให้ element นั้นอยู่ในตำแหน่งที่เรากำหนด และอนุญาตให้ text หรือ element อื่น ๆ ล้อมรอบ float ได้
โดยที่เราจะใช้คำสั่งนี้ได้ element นั้นต้องมี div ครอบไว้
ก่อนกำหนดค่า float
หลังกำหนดค่า float
ตัวอย่าง
<div><p class="p1">float example1</p></div>
<div><p class="p2">float example2</p></div>.p1 {
border: solid;
border-color: red;
text-align: center;
float: left;
}
.p2 {
background-color: seagreen;
text-align: center;
float: left;
}ผลลัพธ์
Margin
margin ใช้กำหนดพื้นที่ภายนอกเส้นขอบ (border) หรือก็คือระยะห่างระหว่างเส้นขอบกับสิ่งอื่น ๆ ภายนอก (มักใช้คู่กับ float)
ก่อนกำหนดค่า margin (มีการกำหนดค่า float ให้เป็น left)
marginใช้การกำหนดระยะห่าง/พื้นที่ว่างในทุก ๆ ด้านพร้อมกัน
ตัวอย่าง
<div><p class="p2">margin example2</p></div>.p2 {
background-color: seagreen;
text-align: center;
float: left;
margin: 3em;
}ผลลัพธ์
จะเห็นได้ว่า element “margin example2” ที่ทำการตั้งค่า margin จะขยับออกห่างจาก element อื่น ๆ ในทุก ๆ ด้านเป็นค่า 3 em
margin-top/right/bottom/leftใช้กำหนดระยะห่างในแต่ละด้าน
ตัวอย่าง
<div><p class="p2">margin example2</p></div>.p2 {
background-color: seagreen;
text-align: center;
float: left;
margin-top: 3em;
}ผลลัพธ์
จะเห็นได้ว่า element “margin example2” ที่ทำการตั้งค่า margin-top จะขยับออกห่างจาก element อื่น ๆ ด้านบนด้านเดียวเป็นค่า 3 em
ที่ element “example2” อยู่ทางด้านขวา เนื่องจากตอนที่กำหนดค่า float นั้นกำหนดให้ทั้ง “example1” เเละ “example2” เป็นค่า left เเละ div ของ “example2” เขียนอยู่ด้านหลัง div ของ “example1” ทำให้ไปอยู่ด้านขวา
Border
border เป็นการกำหนดลักษณะของขอบ
border-styleกำหนดลักษณะรูปแบบของเส้นขอบ เช่น ขอบแบบเส้นปะ ขอบแบบจุดไข่ปลา ขอบแบบเส้นทึบ เป็นต้น
ตัวอย่าง
<p class="p1">border style example1</p>.p1 {
border-style: dotted;
}ผลลัพธ์
border-widthกำหนดขนาด/ความกว้างของเส้นขอบ
ตัวอย่าง
<p class="p1">border width example1</p>
<p class="p2">border width example2</p>.p1 {
border: solid;
border-width: 0.2em;
}
.p2 {
border: solid;
border-width: 0.6em;
}ผลลัพธ์
border-colorกำหนดสีของเส้นขอบ
ตัวอย่าง
<p class="p1">border color example1</p>.p1 {
border: solid;
border-color: red;
}ผลลัพธ์
borderใช้กำหนดทั้งรูปแบบเส้นขอบ ขนาด และสีพร้อมกันได้ โดยพิมพ์ค่าที่ต้องการเรียงตามลำดับ (รูปเเบบ-ขนาด-สี)
ตัวอย่าง
<p class="p1">border example1</p>.p1 {
boder-top-style: double;
}ผลลัพธ์
Padding
padding เป็นการกำหนดระยะห่างระหว่างพื้นที่ของเนื้อหา (content area) กับเส้นขอบ (border)
paddingใช้ในการกำหนดระยะห่างในทุก ๆ ด้านพร้อมกัน
ตัวอย่าง
<p class="p1">..............padding example1..............</p>
<p class="p2">..............padding example2..............</p>.p1 {
border: solid;
border-color: red;
text-align: center;
padding: 2em;
}
.p2 {
background-color: seagreen;
text-align: center;
padding: 1em;
}ผลลัพธ์
padding-top/right/bottom/leftใช้กำหนดระยะห่างในแต่ละด้าน
ตัวอย่าง
<p class="p1">..............padding example1..............</p>.p1 {
border: solid;
border-color: red;
text-align: center;
padding-top: 2em;
}ผลลัพธ์
จะเห็นได้ว่ามีเเค่ด้านบนที่มีระยะห่างมากกว่าด้านอื่น เนื่องจากเรากำหนดให้เเตกต่างด้านเดียว
Color
color กำหนดสีของ element ต่าง ๆ 
ตัวอย่าง
<p class="test1">hello new student</p>.test {
color: red;
}ผลลัพธ์
Last updated
Was this helpful?