---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# Properties

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

## Background

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

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

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

![background-sample.png](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTYbG_bPAWSuvT8Aof%2Fbackground-sample.png?alt=media\&token=bbb76d86-0981-42c0-b33e-2e40cac1239e)

```css
body {
    background-image: url("background-sample.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top right;
}
```

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Me05uuZ2Kw6VszdHXnU%2F-Mfvy5kUGcs09WkzBiZL%2F-Mfvz5LywMOLl48jc08f%2Fimage.png?alt=media\&token=95ba5393-4e0c-49cc-9db3-f35447d25ca9)

> ในการใส่ภาพพื้นหลังที่นำมาจากไฟล์ภาพเเหล่งอื่น ๆ จะใช้ background-image ในการเขียน เเละตามด้วย url ของภาพ เเละจะเห็นว่าภาพจะเเสดงผลเพียงรูปเดียว ไม่มีการซ้ำรูปให้เต็มหน้าเว็บไซต์ เนื่องจากกำหนดไว้ให้เป็นเเบบ no-repeat เเละภาพจะเเสดงผลบริเวณด้านบนขวาของเว็บไซต์ตามที่ตั้ง position เอาไว้ ในส่วนของ attachment นั้น หากหน้าเว็บไซต์มีความยาวมากจนต้องทำการ scroll เมาส์ ในการตั้งค่า fixed นี้จะทำให้ภาพพื้นหลังไม่ขยับไปตามการเลื่อนของเรา เเต่จะยังคงอยู่ในตำเเหน่งเดิม

## Text

text เป็นการกำหนดลักษณะต่าง ๆ ที่เกี่ยวข้องกับข้อความ

* `text-align` กำหนดตำเเหน่งของข้อความว่าจะให้อยู่ส่วนไหนของหน้าเว็บไซต์/block นั้น ๆ

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">text align example1</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    text-align: right;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU019vOiUKp0AtNAN%2F16.png?generation=1627230321055709\&alt=media)

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

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p2">text decoration example2</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p2 {
    text-decoration: underline red dotted;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01CTwm7ntMC02IE%2F19.png?generation=1627230321023172\&alt=media)

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

{% hint style="info" %}
วิธีการเขียนกำหนดค่า

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

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

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

**ค่าตัวสุดท้าย** สีของเงา
{% endhint %}

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="pp">text shadow example</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.pp {
    text-shadow: 2px 2px 3px #f00;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01FkxnvjVESqZH4%2F22.png?generation=1627230321000267\&alt=media)

## Font

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

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

{% hint style="info" %}
เราสามารถกำหนดรูปแบบตัวอักษร หลายเเบบเรียงกันไป โดยเเบบเเรกสุด คือ รูปแบบที่เราต้องการใช้ ส่วนเเบบสุดท้าย คือ รูปแบบที่ทุกเครื่องสามารถเเสดงผลได้อย่างเเน่นอน
{% endhint %}

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">font family example1</p>

<p class="p2">font family example2</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    font-family: "Times New Roman", Times, serif;
}

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

&#x20;ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01IgpVBEFfkBTlP%2F25.png?generation=1627230321006276\&alt=media)

{% hint style="info" %}
ฟอนต์ที่เเสดงผลเป็นฟอนต์ที่เครื่องสามารถเเสดงได้
{% endhint %}

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">font size example1</p>

<p class="p2">font size example2</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    font-size: 1em;
}

.p2 {
    font-size: 2em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01RzLTEIrz1DJQZ%2F34.png?generation=1627230321016598\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">font style example1</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    font-style: italic;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01U4GQ2fZ4K1ZuX%2F37.png?generation=1627230321007260\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">font weight example1</p>

<p class="p2">font weight example2</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    font-weight: bolder;
}

.p2 {
    font-weight: lighter;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01XDG0IJoxZUEPu%2F40.png?generation=1627230321017351\&alt=media)

## &#x20;                                                 **\*BOX MODEL\***

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01YCpbsKdQ9b_B-%2F41.png?generation=1627230321068639\&alt=media)

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

## Float

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

{% hint style="warning" %}
โดยที่เราจะใช้คำสั่งนี้ได้ element นั้นต้องมี div ครอบไว้
{% endhint %}

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

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01Za_58PnnaSnWT%2F42.png?generation=1627230321014670\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<div><p class="p1">float example1</p></div>

<div><p class="p2">float example2</p></div>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border: solid;
    border-color: red;
    text-align: center;
    float: left;
}

.p2 {
    background-color: seagreen;
    text-align: center;
    float: left;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01bQwvA1HcivnBD%2F45.png?generation=1627230321027570\&alt=media)

## Margin

margin ใช้กำหนดพื้นที่ภายนอกเส้นขอบ (border) หรือก็คือระยะห่างระหว่างเส้นขอบกับสิ่งอื่น ๆ ภายนอก (มักใช้คู่กับ float)

&#x20;ก่อนกำหนดค่า margin (มีการกำหนดค่า float ให้เป็น left)

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01cCL6I8TaOVwmt%2F46.png?generation=1627230321073998\&alt=media)

* `margin` ใช้การกำหนดระยะห่าง/พื้นที่ว่างในทุก ๆ ด้านพร้อมกัน

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<div><p class="p2">margin example2</p></div>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p2 {
    background-color: seagreen;
    text-align: center;
    float: left;
    margin: 3em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01ft6F9WuRvGgN1%2F49.png?generation=1627230321041854\&alt=media)

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

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<div><p class="p2">margin example2</p></div>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p2 {
    background-color: seagreen;
    text-align: center;
    float: left;
    margin-top: 3em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01iTvUdVqqw6BJN%2F52.png?generation=1627230321039967\&alt=media)

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

> ที่ element “example2” อยู่ทางด้านขวา เนื่องจากตอนที่กำหนดค่า float นั้นกำหนดให้ทั้ง “example1” เเละ “example2” เป็นค่า left เเละ div ของ “example2” เขียนอยู่ด้านหลัง div ของ “example1” ทำให้ไปอยู่ด้านขวา

## Border

border เป็นการกำหนดลักษณะของขอบ

* `border-style` กำหนดลักษณะรูปแบบของเส้นขอบ เช่น ขอบแบบเส้นปะ ขอบแบบจุดไข่ปลา ขอบแบบเส้นทึบ เป็นต้น

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">border style example1</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border-style: dotted;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01lfWv6LT0sFeHp%2F55.png?generation=1627230321064931\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">border width example1</p>

<p class="p2">border width example2</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border: solid;
    border-width: 0.2em;
}

.p2 {
    border: solid;
    border-width: 0.6em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01o0ahDtPgOjvyp%2F58.png?generation=1627230321038311\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">border color example1</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border: solid;
    border-color: red;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01r4pN34RsySBVO%2F61.png?generation=1627230321053808\&alt=media)

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

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">border example1</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    boder-top-style: double;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01u4VEIEm97tg6a%2F64.png?generation=1627230321042481\&alt=media)

## Padding

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

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">..............padding example1..............</p>

<p class="p2">..............padding example2..............</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border: solid;
    border-color: red;
    text-align: center;
    padding: 2em;
}

.p2 {
    background-color: seagreen;
    text-align: center;
    padding: 1em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU01xQiwhGZfk4iE4%2F67.png?generation=1627230321027544\&alt=media)

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

ตัวอย่าง

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="p1">..............padding example1..............</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.p1 {
    border: solid;
    border-color: red;
    text-align: center;
    padding-top: 2em;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU02-Fq-gDUpoooyY%2F70.png?generation=1627230321048321\&alt=media)

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

## Color

color กำหนดสีของ element ต่าง ๆ ![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU020mvh3Kg5GCJ1h%2F71.png?generation=1627230321034833\&alt=media)

ตัวอย่าง&#x20;

{% tabs %}
{% tab title="HTML" %}
```markup
<p class="test1">hello new student</p>
```
{% endtab %}

{% tab title="CSS" %}
```css
.test {
    color: red;
}
```
{% endtab %}
{% endtabs %}

ผลลัพธ์

![](https://1572294076-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fhelloermine%2F-Mf9FMVyl_H7rUMXTOSs%2F-MfTU021qQvLc05UZg_I%2F72.png?generation=1627230321063412\&alt=media)

##
