ให้เรตสมาชิก: 3 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

บทที่ 10 HTML CSS

HTML CSS คือ การจัดรูปแบบด้วย CSS

CSS ย่อมาจาก Cascading Style Sheets ซึ่งใช้ในการกำหนดรูปแบบต่าง ๆ ให้กับแท็ก html ต่าง ๆ

1.การใส่สีพื้นหลัง และสีตัวอักษร

   - การใส่สีพื้นหลังให้หน้าเว็บเพจ จะใส่ในแท็ก body

<body style="background-color:=ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้ ;">

 

 - การใส่สีพื้นหลังให้ตัวอักษร ใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>       

<p style="background-color:ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้;">ใส่ข้อความที่ต้องการตรงนี้</p>


   - การใส่สีให้ตัวอักษร ใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>     

<p style="color:ชื่อสีเป็นภาษาอังกฤษ หรืออาจใส่เครื่องหมายสี่เหลี่ยมตามด้วยด้วยตัวเลขบอกค่าสีก็ได้;">ใส่ข้อความที่ต้องการตรงนี้</p>

ตัวอย่าง

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
<p style="color: blue;">This text is in Times and blue</p>

</body>
</html>

ผลลัพธ์ที่ได้คือ

2.การเลือกแบบตัวอักษร และขนาดตัวอักษร

   - การเลือกรูปแบบตัวอักษร สามารถใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p>   

<p style="font-family:ชื่อฟอนต์;">ใส่ข้อความที่ต้องการตรงนี้</p>


   - การใส่ขนาดตัวอักษร สามารถใส่ได้ทั้งในส่วน head คือ Tag <p> และส่วน paragraph คือ Tag <p> 

 <p style="font-size:ใส่ตัวเลขบอกขนาด;">ใส่ข้อความที่ต้องการตรงนี้</p>


   - หากต้องการใส่ทั้ง แบบตัวอักษร ขนาด และสี ทำได้ดังนี้  

 <p style="font-family:ชื่อตัวอักษร;color:ชื่อสี;font-size:เลขบอกขนาดตัวอักษร;">ใส่ข้อความที่ต้องการ</p>

ตัวอย่าง

<html>
<body>
<h1 style="font-family:Tahoma;">กำหนดแท็ก h1 เป็นตัวอักษร Tahoma</h1>
<p style="font-family:arial;color:red;font-size:20px;">ย่อหน้านี้ใช้ตัวอักษร Arial ขนาด 20 px และตัวอักษรสีแดง</p>
</body>
</html>

ผลลัพธ์ที่ได้คือ

3.การจัดวางแนวตัวอักษร
  การจัดวางเเนวตัวอักษร เช่น ซ้าย ,ขวา ,กลาง จัดได้ดังนี้

   style="text-align:กำหนด left หรือ right หรือ center

  ตัวอย่าง

<html>
<body>

<h1 style="text-align:right;">กำหนดให้ข้อความนี้อยู่ด้านขวามือ</h1>
<p>ย่อหน้านี้จัดวางแบบปกติ</p>

</body>
</html>

ผลลัพธ์ที่ได้คือ

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
MOD_MTB_NEWS_RECENT
เชื่อมต่อ Server ใน pgadmin ไม่ได้ค่ะ
โดย Panchalee พ 22 พ.ย. 2017 2:59 pm บอร์ด PostgreSQL
1
7
พ 22 พ.ย. 2017 2:59 pm โดย mindphp
context diagram ระบบบริหารบัญชีครัวเรือน
โดย Maprang Kannika พ 22 พ.ย. 2017 11:24 am บอร์ด SQL - Database
1
11
พ 22 พ.ย. 2017 11:24 am โดย jataz2
เมื่อค้น Google ว่า How to fixed Error 500 ?
โดย Before Dong พ 22 พ.ย. 2017 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
9
พ 22 พ.ย. 2017 10:27 am โดย Before Dong
ปัญหา ออกแบบพัฒนา
โดย บุคคลทั่วไป อ 21 พ.ย. 2017 8:15 pm บอร์ด Programming - PHP
0
15
อ 21 พ.ย. 2017 8:15 pm โดย บุคคลทั่วไป
รันโค้ดแล้ว Error ค่ะ
โดย Wallapa อ 21 พ.ย. 2017 5:24 pm บอร์ด Programming - C/C++ & java & Python
4
35
อ 21 พ.ย. 2017 5:24 pm โดย Wallapa
รันโค้ดแล้ว Error ค่ะ
โดย Wallapa อ 21 พ.ย. 2017 4:58 pm บอร์ด Programming - C/C++ & java & Python
1
23
อ 21 พ.ย. 2017 4:58 pm โดย mindphp
PostgreSQL คืออะไร MySQL คืออะไร
โดย Panchalee อ 21 พ.ย. 2017 1:40 pm บอร์ด PostgreSQL
1
18
อ 21 พ.ย. 2017 1:40 pm โดย jataz2
PostgreSQL กับ MySQL ต่างกันยังไงค่ะ?
โดย Wallapa อ 21 พ.ย. 2017 1:40 pm บอร์ด PostgreSQL
0
11
อ 21 พ.ย. 2017 1:40 pm โดย Wallapa
แจกฟรี!! ปฏิทิน CMS 2018
โดย Before Dong อ 21 พ.ย. 2017 11:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
อ 21 พ.ย. 2017 11:23 am โดย Before Dong
ขอทราบวิธีติดตั้ง แพ็กเกจ FFmpeg บน Windows หน่อยค่ะ
โดย Panchalee อ 21 พ.ย. 2017 10:32 am บอร์ด Python Knowledge
2
18
อ 21 พ.ย. 2017 10:32 am โดย nuattawoot
เมื่อเอาคำว่า What is Error 500 ไปแปลภาษา
โดย Before Dong อ 21 พ.ย. 2017 9:37 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
19
อ 21 พ.ย. 2017 9:37 am โดย Before Dong
ถ้าเราต้องการเริ่มต้นการหัดเขียน php ประกอบเข้าใน html เราควรเริ่มต้นยังไงคะ ไปทางไหนก่อนดี
โดย shadowzega จ 20 พ.ย. 2017 6:56 pm บอร์ด Programming - PHP
0
22
จ 20 พ.ย. 2017 6:56 pm โดย shadowzega
โปรแกรมเมอร์ต่างประเทศกับโปรแกรมเมอร์ไทย
โดย Before Dong จ 20 พ.ย. 2017 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
945
จ 20 พ.ย. 2017 10:35 am โดย Before Dong
รับสร้างแอพปาวครับ
โดย นุ พาลั่น จ 20 พ.ย. 2017 10:11 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
จ 20 พ.ย. 2017 10:11 am โดย นุ พาลั่น
ถาม- โน๊ดบุคของผมช้าผิดปกติ เกิดจากอะไร ควรแก้ไขยังไงครับ
โดย nuattawoot ศ 17 พ.ย. 2017 7:08 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
35
ศ 17 พ.ย. 2017 7:08 pm โดย konseo
วันหยุด 2561 วันหยุดราชการ 2561 / 2018
โดย Before Dong ศ 17 พ.ย. 2017 5:19 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
32
ศ 17 พ.ย. 2017 5:19 pm โดย konseo
แจกฟรี!! ปฏิทิน 2018 ประจำปีนักษัตรปีจอ
โดย Before Dong ศ 17 พ.ย. 2017 1:22 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
81
ศ 17 พ.ย. 2017 1:22 pm โดย Before Dong
สภาพหลังจากแก้ bug ของโปรแกรมเมอร์
โดย Before Dong ศ 17 พ.ย. 2017 10:06 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
4
116
ศ 17 พ.ย. 2017 10:06 am โดย Before Dong
ไฟฟ้าสถิต หรือ พรหมลิขิต
โดย Before Dong พฤ 16 พ.ย. 2017 10:15 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
87
พฤ 16 พ.ย. 2017 10:15 am โดย konseo
โปรแกรมไว้ สำหรับเชค ว่าไฟล์ ไหน บน Linux Ubuntu กำลังอ่านเขียนอยู่
โดย mindphp พ 15 พ.ย. 2017 2:56 pm บอร์ด Linux - Web Server
1
37
พ 15 พ.ย. 2017 3:57 pm โดย mindphp