Properties

#HelloFrontend #HelloErmine #HelloWorld2021

Properties เป็นคุณลักษณะต่าง ๆ ที่เราสามารถกำหนดเพื่อจัดการหน้าเว็บไซต์ของเราได้ เช่น สี ความกว้าง ขอบของข้อความ ฯลฯ โดยมีหลากหลาย properties ที่จำเป็นเเละน่าสนใจ โดยยกตัวอย่างที่สำคัญ ดังนี้

Background

background เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับภาพพื้นหลัง

• background-repeat กำหนดการเเสดงผลภาพพื้นหลังซ้ำ/การ repeat ภาพพื้นหลัง

• background-position กำหนดตำเเหน่งของภาพพื้นหลังว่าจะให้อยู่ตรงจุดไหน

• background-attachment กำหนดว่าจะให้ภาพพื้นหลังขยับตามการขยับเมาส์หรืออยู่นิ่งที่จุดเดิม

ตัวอย่างของ background

background-sample.png

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 นั้น ๆ

ตัวอย่าง

HTML

<p class="p1">text align example1</p>

CSS

.p1 {
    text-align: right;
}

ผลลัพธ์

• text-decoration กำหนดลักษณะเพิ่มเติมให้ข้อความเพื่อเน้น โดยเป็นการขีดเส้น เช่น ขีดเส้นใต้ข้อความ มักใช้คู่กับ tag a ที่เป็นลิงก์ข้อความ

สามารถกำหนดลักษณะอื่น ๆ เพิ่มให้เส้นที่เราขีดได้ เช่น กำหนดสี กำหนดแบบของเส้น ฯลฯ โดยเขียนใน property เดียวกันได้เลย

ตัวอย่าง

HTML

<p class="p2">text decoration example2</p>

CSS

.p2 {
    text-decoration: underline red dotted;
}

ผลลัพธ์

• text-shadow กำหนดค่าสำหรับการเเสดงเงาของตัวอักษร

วิธีการเขียนกำหนดค่า

ค่าตัวแรก เป็นระยะห่างที่เงาห่างจากตัวอักษรในแนวนอน

ค่าตัวที่สอง เป็นระยะห่างที่เงาห่างจากตัวอักษรในแนวตั้ง

ค่าตัวที่สาม เป็นความเบลอของเงา ยิ่งค่ามาก เงาก็จะยิ่งเบลอขึ้น

ค่าตัวสุดท้าย สีของเงา

ตัวอย่าง

HTML

<p class="pp">text shadow example</p>

CSS

.pp {
    text-shadow: 2px 2px 3px #f00;
}

ผลลัพธ์

Font

font เป็นการกำหนดลักษณะต่าง ๆ ของตัวอักษร

• font-family กำหนดรูปแบบของตัวอักษรที่ต้องการใช้ โดยปกติจะใช้ตัวอักษรที่มีอยู่ในเครื่องของผู้ใช้งาน และจะหลีกเลี่ยงการเลือกใช้ตัวอักษรที่ไม่แน่ชัด (กำหนดฟอนต์ที่เราจะพิมพ์ตัวอักษร)

เราสามารถกำหนดรูปแบบตัวอักษร หลายเเบบเรียงกันไป โดยเเบบเเรกสุด คือ รูปแบบที่เราต้องการใช้ ส่วนเเบบสุดท้าย คือ รูปแบบที่ทุกเครื่องสามารถเเสดงผลได้อย่างเเน่นอน

ตัวอย่าง

HTML

<p class="p1">font family example1</p>

<p class="p2">font family example2</p>

CSS

.p1 {
    font-family: "Times New Roman", Times, serif;
}

.p2 {
    font-family: "Lucida Console", "Courier New", monospace;
}

ผลลัพธ์

ฟอนต์ที่เเสดงผลเป็นฟอนต์ที่เครื่องสามารถเเสดงได้

• font-size กำหนดขนาดตัวอักษร

ตัวอย่าง

HTML

<p class="p1">font size example1</p>

<p class="p2">font size example2</p>

CSS

.p1 {
    font-size: 1em;
}

.p2 {
    font-size: 2em;
}

ผลลัพธ์

• font-style กำหนดลักษณะตัวอักษร เช่น ตัวเอียง เป็นต้น

ตัวอย่าง

HTML

<p class="p1">font style example1</p>

CSS

.p1 {
    font-style: italic;
}

ผลลัพธ์

• font-weight กำหนดความหนาของตัวอักษร

ตัวอย่าง

HTML

<p class="p1">font weight example1</p>

<p class="p2">font weight example2</p>

CSS

.p1 {
    font-weight: bolder;
}

.p2 {
    font-weight: lighter;
}

ผลลัพธ์

*BOX MODEL*

จะเกี่ยวกับการกำหนดรูปแบบของกรอบหรือขอบเขตของ element ซึ่งเป็นเรื่องที่สำคัญอันดับต้น ๆ ในการออกแบบเว็บไซต์

Float

float มีหน้าที่ทำให้ element นั้นอยู่ในตำแหน่งที่เรากำหนด และอนุญาตให้ text หรือ element อื่น ๆ ล้อมรอบ float ได้

โดยที่เราจะใช้คำสั่งนี้ได้ element นั้นต้องมี div ครอบไว้

ก่อนกำหนดค่า float

หลังกำหนดค่า float

ตัวอย่าง

HTML

<div><p class="p1">float example1</p></div>

<div><p class="p2">float example2</p></div>

CSS

.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 ใช้การกำหนดระยะห่าง/พื้นที่ว่างในทุก ๆ ด้านพร้อมกัน

ตัวอย่าง

HTML

<div><p class="p2">margin example2</p></div>

CSS

.p2 {
    background-color: seagreen;
    text-align: center;
    float: left;
    margin: 3em;
}

ผลลัพธ์

จะเห็นได้ว่า element “margin example2” ที่ทำการตั้งค่า margin จะขยับออกห่างจาก element อื่น ๆ ในทุก ๆ ด้านเป็นค่า 3 em

• margin-top/right/bottom/left ใช้กำหนดระยะห่างในแต่ละด้าน

ตัวอย่าง

HTML

<div><p class="p2">margin example2</p></div>

CSS

.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 กำหนดลักษณะรูปแบบของเส้นขอบ เช่น ขอบแบบเส้นปะ ขอบแบบจุดไข่ปลา ขอบแบบเส้นทึบ เป็นต้น

ตัวอย่าง

HTML

<p class="p1">border style example1</p>

CSS

.p1 {
    border-style: dotted;
}

ผลลัพธ์

• border-width กำหนดขนาด/ความกว้างของเส้นขอบ

ตัวอย่าง

HTML

<p class="p1">border width example1</p>

<p class="p2">border width example2</p>

CSS

.p1 {
    border: solid;
    border-width: 0.2em;
}

.p2 {
    border: solid;
    border-width: 0.6em;
}

ผลลัพธ์

• border-color กำหนดสีของเส้นขอบ

ตัวอย่าง

HTML

<p class="p1">border color example1</p>

CSS

.p1 {
    border: solid;
    border-color: red;
}

ผลลัพธ์

• border ใช้กำหนดทั้งรูปแบบเส้นขอบ ขนาด และสีพร้อมกันได้ โดยพิมพ์ค่าที่ต้องการเรียงตามลำดับ (รูปเเบบ-ขนาด-สี)

จากที่กล่าวมาจะเป็นการกำหนดทั้ง 4 ด้าน แต่หากต้องการกำหนดแค่ด้านใดด้านหนึ่ง เช่น ต้องการกำหนดรูปแบบด้านบน จะใช้ border-top-style

ตัวอย่าง

HTML

<p class="p1">border example1</p>

CSS

.p1 {
    boder-top-style: double;
}

ผลลัพธ์

Padding

padding เป็นการกำหนดระยะห่างระหว่างพื้นที่ของเนื้อหา (content area) กับเส้นขอบ (border)

• padding ใช้ในการกำหนดระยะห่างในทุก ๆ ด้านพร้อมกัน

ตัวอย่าง

HTML

<p class="p1">..............padding example1..............</p>

<p class="p2">..............padding example2..............</p>

CSS

.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 ใช้กำหนดระยะห่างในแต่ละด้าน

ตัวอย่าง

HTML

<p class="p1">..............padding example1..............</p>

CSS

.p1 {
    border: solid;
    border-color: red;
    text-align: center;
    padding-top: 2em;
}

ผลลัพธ์

จะเห็นได้ว่ามีเเค่ด้านบนที่มีระยะห่างมากกว่าด้านอื่น เนื่องจากเรากำหนดให้เเตกต่างด้านเดียว

Color

color กำหนดสีของ element ต่าง ๆ

ตัวอย่าง

HTML

<p class="test1">hello new student</p>

CSS

.test {
    color: red;
}

ผลลัพธ์