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

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
path way เมือกด step ถัดไปstep ที่เคยผ่านมาจะมีแท็ก a เพิ่มขึ้นทำให้ไปปิดตัวอักษร ครับ
โดย jamepiyawat ส 21 ก.ย. 2019 3:30 pm บอร์ด HTML CSS
0
45
ส 21 ก.ย. 2019 3:30 pm โดย jamepiyawat
อยากทราบวิธีที่จะทำให้คำสั่ง css เปลี่ยนไปตามการตั้งค่าสีของ tamplate ครับ
โดย jamepiyawat ส 21 ก.ย. 2019 2:55 pm บอร์ด Joomla Development
2
70
ส 21 ก.ย. 2019 3:19 pm โดย jamepiyawat
Q - อยากทราบวิธีคำนวณค่าสกุลเงินครับ
โดย birdkritsna ส 21 ก.ย. 2019 11:01 am บอร์ด Programming - PHP
19
263
จ 23 ก.ย. 2019 4:57 pm โดย birdkritsna
การ Install ส่วนขยาย
โดย Anonymous ส 21 ก.ย. 2019 11:11 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
3
83
พฤ 03 ต.ค. 2019 1:47 pm โดย Pannarai2015
การบันทึกบัญชี รับเงินมัดจำในเดือนกับข้ามเดือน บันทึกยังไง แตกต่างกันมั้ยค่ะ
โดย thatsawan ศ 20 ก.ย. 2019 8:08 pm บอร์ด ถาม - ตอบ ธุรกิจ กฏหมาย ภาษี บัญชี
3
106
ส 28 ก.ย. 2019 5:29 pm โดย thatsawan
ทำความรู้จัก Cloud
โดย aninthana ศ 20 ก.ย. 2019 8:01 pm บอร์ด Linux - Web Server
1
70
จ 23 ก.ย. 2019 9:29 am โดย LEG
เปรียบเทียบ smart watch รุ่นต่างๆ จากหลายๆค่าย รุ่นไหนโดน รุ่นไหนดี มารับชมกันได้เลย
โดย chatee supasand ศ 20 ก.ย. 2019 5:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
115
จ 23 ก.ย. 2019 9:31 am โดย LEG
วิธีสมัครและใช้งาน api อัตราแลกเปลี่ยนเงินตรา จาก ธนาคารแห่งประเทศไทย ด้วย php
โดย birdkritsna ศ 20 ก.ย. 2019 4:14 pm บอร์ด PHP Knowledge
0
82
ศ 20 ก.ย. 2019 4:14 pm โดย birdkritsna
จะทำ path way เป็นลูกศรชีต้องทำยังไงครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 3:50 pm บอร์ด HTML CSS
0
47
ศ 20 ก.ย. 2019 3:50 pm โดย jamepiyawat
อยากทราบวิธีที่จะทำให้เมือเรากดปุ่มซื้อสินค้าแล้วจะมีหน้า pop เด้งขึ้นมาครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 3:30 pm บอร์ด HTML CSS
0
36
ศ 20 ก.ย. 2019 3:30 pm โดย jamepiyawat
อยากทราบวิธีทำปุ่มกดสลับค่าระหว่าง list box ครับ
โดย birdkritsna ศ 20 ก.ย. 2019 2:59 pm บอร์ด Programming - PHP
8
172
จ 23 ก.ย. 2019 2:29 pm โดย birdkritsna
ระดับ User นี้มีข้อจำกัดอะไรบ้างครับ
โดย Patipat ศ 20 ก.ย. 2019 2:45 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
1
48
ศ 20 ก.ย. 2019 2:50 pm โดย tsukasaz
ทำไมโค้ดของผมแสดงผลชื่อจังหวัดชื่ออำเภอผิดครับ
โดย jamepiyawat ศ 20 ก.ย. 2019 2:20 pm บอร์ด JavaScript & Jquery Ajax
8
122
ศ 20 ก.ย. 2019 3:22 pm โดย jamepiyawat
ทำความรู้จักกับ Google Lighthouse ตรวจสอบคุณภาพเว็บไซต์
โดย birdkritsna พฤ 19 ก.ย. 2019 6:37 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
49
พฤ 19 ก.ย. 2019 6:37 pm โดย birdkritsna
ส่วนประกอบของเว็บไซต์ มีอะไรบ้าง
โดย aninthana พฤ 19 ก.ย. 2019 6:12 pm บอร์ด Web Hosting Review - Free Host Share Host VPS
0
52
พฤ 19 ก.ย. 2019 6:12 pm โดย aninthana
วิธีทำภาพให้มีขอบโค้งมนด้วยโปรแกรม คล้าย photoshop ออนไลน์ freephototool.com
โดย jamepiyawat พฤ 19 ก.ย. 2019 5:51 pm บอร์ด Graphic design
1
58
พฤ 19 ก.ย. 2019 11:15 pm โดย pipoipi
วิธีการอัพเกรด Ubuntu server เพื่อให้ support และ เพิ่มความสามารถใหม่ๆ ของระบบปฏิบัติการ
โดย jirawoot พฤ 19 ก.ย. 2019 4:14 pm บอร์ด Linux - Web Server
1
101
ศ 20 ก.ย. 2019 12:06 am โดย cocomax
form มันซ้อนกันอยู่ทำให้ form ที่อยู่ด้านในส่งข้อมูลไม่ได้ทำยังไงดี ครับ
โดย jamepiyawat พฤ 19 ก.ย. 2019 3:57 pm บอร์ด Programming - PHP
2
62
พฤ 19 ก.ย. 2019 4:20 pm โดย jamepiyawat
เฟสบุ๊แฟนเพจ กับ ทำเว็บไซต์ให้คนเข้า อะไรคุ้มกว่าในระยะยาว
โดย zend_framework พฤ 19 ก.ย. 2019 11:06 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS CRM
2
74
อ 24 ก.ย. 2019 11:30 am โดย mindphp
Q - อยากทราบวิธีการดึงค่า api อัตราการแลกเปลี่ยนสกุลเงิน มาใช้อย่างไรครับ
โดย birdkritsna พฤ 19 ก.ย. 2019 10:50 am บอร์ด Programming - PHP
18
276
ส 21 ก.ย. 2019 4:35 pm โดย birdkritsna