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

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
Q - ทำไม css ใช้งานไม่ได้ path ถูกไหมครับ
โดย Patipat ส 07 ก.ย. 2019 2:12 pm บอร์ด Joomla Development
3
125
ส 07 ก.ย. 2019 2:52 pm โดย Patipat
คุณสมบัติของนักแปล
โดย MiyukiEamrucksa ส 07 ก.ย. 2019 12:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
91
ส 07 ก.ย. 2019 12:03 pm โดย MiyukiEamrucksa
รวมข้อมูลของ แจ็ค หม่า ผู้ก่อตั้งกลุ่มอาลีบาบา ที่คุณอาจไม่เคยรู้มาก่อน ฺBy Drivemate
โดย nemo413 ส 07 ก.ย. 2019 8:09 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
80
ส 07 ก.ย. 2019 4:53 pm โดย nemo413
แจกโค้ดหน้าเว็บด้วย HTML และ css
โดย jamepiyawat ศ 06 ก.ย. 2019 6:44 pm บอร์ด CSS Knowledge
0
129
ศ 06 ก.ย. 2019 6:44 pm โดย jamepiyawat
Microsoft เอาอีกแล้ว ซื้อกิจการ Movere เสริมความแข็งแกร่งให้ Azure Migrate
โดย chatee supasand ศ 06 ก.ย. 2019 6:32 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
52
ศ 06 ก.ย. 2019 6:32 pm โดย chatee supasand
สร้างหน้าเว็บด้วย HTML และ css
โดย jamepiyawat ศ 06 ก.ย. 2019 6:02 pm บอร์ด CSS Knowledge
0
63
ศ 06 ก.ย. 2019 6:02 pm โดย jamepiyawat
Google Assistant สามารถสั่งพิมพ์ข้อความผ่านหน้าจอ Lock Screen ได้ โดยไม่ต้องปลดล็อคเครื่อง
โดย jamepiyawat ศ 06 ก.ย. 2019 5:21 pm บอร์ด Share Knowledge
0
55
ศ 06 ก.ย. 2019 5:21 pm โดย jamepiyawat
wireframe คืออะไร
โดย aninthana ศ 06 ก.ย. 2019 4:36 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
50
ศ 06 ก.ย. 2019 4:36 pm โดย aninthana
ทำไมกดปุ่ม wish list กับสินค้าที่มีให้เลือก attributes แล้วถึงได้ขึ้น Please select the product options
โดย jamepiyawat ศ 06 ก.ย. 2019 2:44 pm บอร์ด Joomla Development
1
63
ศ 06 ก.ย. 2019 2:48 pm โดย tsukasaz
เรื่อง หวย
โดย jataz2 ศ 06 ก.ย. 2019 11:20 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
50
ศ 06 ก.ย. 2019 11:20 am โดย jataz2
Meme ประจำวัน - จีเนียสสสสสสสไปเลยยยยยย
โดย chatee supasand พฤ 05 ก.ย. 2019 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
100
ศ 06 ก.ย. 2019 10:55 am โดย chatee supasand
ระบบช่วยนำทางตัวใหม่ของ google map ตัวใหม่ที่จะนำ AR เข้ามาช่วยบอกทาง
โดย jamepiyawat พฤ 05 ก.ย. 2019 5:38 pm บอร์ด Share Knowledge
0
60
พฤ 05 ก.ย. 2019 5:38 pm โดย jamepiyawat
สร้าง Infographics ด้วยโปรแกรม Edraw บน Windows
โดย chatee supasand พฤ 05 ก.ย. 2019 5:35 pm บอร์ด Share Knowledge
3
86
อ 08 ต.ค. 2019 10:45 am โดย mindphp
From นี้ใช้ดึงข้อมูลจากฐานข้อมูลหรือเปล่าครับ ?
โดย Patipat พฤ 05 ก.ย. 2019 5:34 pm บอร์ด Joomla Development
0
50
พฤ 05 ก.ย. 2019 5:34 pm โดย Patipat
อยากทราบโค้ดที่ ดึงค่าจาก xml มาใช้งานใน class ครับ
โดย Patipat พฤ 05 ก.ย. 2019 3:40 pm บอร์ด Joomla Development
0
43
พฤ 05 ก.ย. 2019 3:40 pm โดย Patipat
แนะนำเว็บไซต์โหลด Sound เสียงประกอบ VDO ฟรี ถูกลิขสิทธ์ พร้อมวิธีดาวน์โหลด
โดย chatee supasand พฤ 05 ก.ย. 2019 3:32 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
69
พฤ 05 ก.ย. 2019 3:32 pm โดย chatee supasand
Q - ต้องการแก้ไขรายการใบสำคัญจ่ายเงินสดย่อยที่ Approved แล้ว
โดย EyePornnipa พฤ 05 ก.ย. 2019 3:23 pm บอร์ด M.D.Soft Co.,Ltd. - Tester
0
4
พฤ 05 ก.ย. 2019 3:23 pm โดย EyePornnipa
ผมเปลี่ยนคำสั่ง css ใน class แล้วแต่ class นั้นกลับไปใช้คำสั่งเดิมไม่ยอยให้คำสั่งใหม่ที่ Overrides ไปครับ
โดย jamepiyawat พฤ 05 ก.ย. 2019 3:11 pm บอร์ด HTML CSS
2
76
พฤ 05 ก.ย. 2019 3:26 pm โดย jamepiyawat
Q - ทำไมภาพที่ดึงออกมาแสดงถึงมีขนาดเล็ก ครับ
โดย jamepiyawat พฤ 05 ก.ย. 2019 2:23 pm บอร์ด Joomla Dev
2
8
พฤ 05 ก.ย. 2019 3:23 pm โดย jamepiyawat
Q - แก้โค้ดอย่างไรครับ ส่วนของ html
โดย Patipat พฤ 05 ก.ย. 2019 1:37 pm บอร์ด Joomla Development
2
93
พฤ 05 ก.ย. 2019 3:40 pm โดย Patipat