ให้เรตสมาชิก: 2 / 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>

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ปฏิทินประจําปี 2563 มาในธีมปาร์ตี้และการเฉลิมฉลอง
โดย noppadonsk พฤ 26 ธ.ค. 2019 1:51 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
253
ส 04 ม.ค. 2020 4:38 am โดย mindphp
B - SQL ทำงานช้า
โดย mindphp พ 25 ธ.ค. 2019 10:07 pm บอร์ด Odoojob.com - Tester
0
1
พ 25 ธ.ค. 2019 10:07 pm โดย mindphp
ทิปเล็กๆ การใช้งาน Directadmin บน Ubuntu หรือ CentOS ใช้ .tar.gz จะทำงานได้เร็วกว่า..
โดย mindphp พ 25 ธ.ค. 2019 8:53 pm บอร์ด Linux - Web Server
0
35
พ 25 ธ.ค. 2019 8:53 pm โดย mindphp
เครื่องมือในการคำนวณภาษีหัก ณ ที่จ่าย ลดภาระการเสียภาษีก้อนใหญ่ได้ง่ายๆ
โดย prmindphp พ 25 ธ.ค. 2019 6:56 pm บอร์ด MindPHP News & Feedback
0
35
พ 25 ธ.ค. 2019 6:56 pm โดย prmindphp
วิธีการเขียน SQL เพื่อเปลี่ยนชื่อตาราง ในฐานข้อมูลเมื่อมีการเขียนชื่อตารางผิด
โดย Ittichai_chupol พ 25 ธ.ค. 2019 5:15 pm บอร์ด SQL Knowledge
0
32
พ 25 ธ.ค. 2019 5:15 pm โดย Ittichai_chupol
แก้ปัญหา ใช้ Python โอนย้ายไฟล์ข้ามเครื่อง ด้วย ftplib แล้วเจอ Connection timed out
โดย mindphp พ 25 ธ.ค. 2019 1:21 pm บอร์ด Python Knowledge
0
42
พ 25 ธ.ค. 2019 1:21 pm โดย mindphp
ตัวช่วยในคำนวณอัตราดอกเบี้ยสำหรับนักลงทุน
โดย prmindphp อ 24 ธ.ค. 2019 6:52 pm บอร์ด MindPHP News & Feedback
0
35
อ 24 ธ.ค. 2019 6:52 pm โดย prmindphp
วิธีการดึงกลุ่มของ phpbb มาสร้างเป็น listbox พร้อมเปลี่ยนชื่อกลุ่มตามภาษาที่กำหนด
โดย Ittichai_chupol อ 24 ธ.ค. 2019 6:35 pm บอร์ด PHP Knowledge
0
32
อ 24 ธ.ค. 2019 6:35 pm โดย Ittichai_chupol
R - ขั้นตอนการตรวจ สอบปัญหา ที่อาจจะเกิดขึ้น ตาม Systems Diagram
โดย mindphp อ 24 ธ.ค. 2019 12:12 pm บอร์ด MlineCRM Line + MD-CRM
0
2
อ 24 ธ.ค. 2019 12:12 pm โดย mindphp
ปฏิทินประจําปี 2563 มาในรูปแบบไซเบอร์ สำหรับคนสมัยใหม่ที่มีหัวคิดก้าวไกลเท่าทันเทคโนโลยี
โดย noppadonsk อ 24 ธ.ค. 2019 10:35 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
168
ส 04 ม.ค. 2020 4:38 am โดย mindphp
R - เพิ่ม Exception ตอน push ข้อมความ ไปที่ Line หรือ รับข้อความจาก Line ไม่ได้
โดย mindphp อ 24 ธ.ค. 2019 7:06 am บอร์ด MD-CRM - Tester
0
4
อ 24 ธ.ค. 2019 7:06 am โดย mindphp
B - เวลาใน Logs ไม่ตรง
โดย mindphp อ 24 ธ.ค. 2019 5:57 am บอร์ด MlineCRM Line + MD-CRM
0
3
อ 24 ธ.ค. 2019 5:57 am โดย mindphp
วางแผนเงินออมได้ง่ายๆ ด้วยโปรแกรมคำนวณหามูลค่าเงินในอนาคต
โดย prmindphp จ 23 ธ.ค. 2019 7:28 pm บอร์ด MindPHP News & Feedback
0
57
จ 23 ธ.ค. 2019 7:28 pm โดย prmindphp
ปฏิทินประจําปี 2563 ธีมแคมป์ กางเต้นท์ เดินป่า สายลุยๆไม่ควรพลาด
โดย noppadonsk จ 23 ธ.ค. 2019 5:10 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
890
พ 01 ม.ค. 2020 3:24 pm โดย mindphp
วิธีการปรับเปลี่ยนค่าการแสดงผลในหน้าแสดงบอร์ด ใน phpbb
โดย Ittichai_chupol ส 21 ธ.ค. 2019 5:48 pm บอร์ด PHP Knowledge
0
64
ส 21 ธ.ค. 2019 5:48 pm โดย Ittichai_chupol
จะทำอย่างไรจะแสดงข้อมูลในจำนวนตารางที่คงที่ได้ครับ
โดย jamepiyawat ส 21 ธ.ค. 2019 1:51 pm บอร์ด Programming - PHP
1
98
ส 21 ธ.ค. 2019 2:07 pm โดย thatsawan
วิธีการส่งค่า จาก Event หนึ่งไปยัง Event หนึ่ง ใน phpbb
โดย Ittichai_chupol ศ 20 ธ.ค. 2019 6:59 pm บอร์ด PHP Knowledge
0
65
ศ 20 ธ.ค. 2019 6:59 pm โดย Ittichai_chupol
โปรแกรมคำนวณหาจำนวนเงินผ่อนชำระ ตัวช่วยในการคำนวณเงินผ่อนเพื่อใช้ประกอบการตัดสินใจ
โดย prmindphp ศ 20 ธ.ค. 2019 5:58 pm บอร์ด MindPHP News & Feedback
0
65
ศ 20 ธ.ค. 2019 5:58 pm โดย prmindphp
ปฏิทินประจำปี 2563 ดอกไม้มงคลพืชสวยงาม -โหลดมาใช้กันเลยฟรี
โดย noppadonsk ศ 20 ธ.ค. 2019 1:55 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
4619
อ 24 ธ.ค. 2019 8:17 pm โดย mindphp
excel แบบวันที่เวลา ลงdatabase
โดย Anonymous ศ 20 ธ.ค. 2019 1:54 pm บอร์ด Programming - PHP
1
82
ศ 20 ธ.ค. 2019 2:03 pm โดย mindphp