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

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

วิธีใช้ CSS (ซีเอสเอส) จัดการการแสดงผลให้เป็นระเบียบ

      CSS (Cascading Style Sheet (คาสคาดิ้ง สไตล์ ชีท)) คือคำสั่งที่ใช้ร่วมกับ html (เอชทีเอ็มเเอล) เพื่อควบคุม การแสดงผลของเว็บไซต์ ประโยชน์เพื่อให้เว็บไซต์ทำงานได้เร็วขึ้นและเป็นผลดีกับการทำ SEO (เอสอีโอ) การใช้ CSS (ซีเอสเอส) ควบคุมหน้าตาเว็บไซต์ เช่น การกำหนดสี Background (แบล็คกราวด์), กำหนดสีตัวอักษร, กำหนดขนาดต่างๆ รูป หรือตัวอักษร, ปรับแต่ง จัดตำแหน่งองค์ประกอบในหน้าเว็บไซต์

หลังจากที่รู้คร่าวๆแล้วว่า CSS คืออะไรทีนี้มาดูตัวอย่างวิธีจัด CSS ให้เป็นระเบียบ ผลของหน้าเว็บที่เราต้องการ

 วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

วิธีจัดการแสดงผลให้เป็นระเบียบ

1. คือภาพหน้าเว็บไซต์ที่ยังไม่มีการจัดระเบียบด้วย CSS จะเห็นว่า ตัวให้คะแนนนั้นยังไม่เป็นระเบียบ 

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ 

2.เริ่มแรกเราต้องการปิดคำว่า "ให้เรตสมาชิก: 5/5" ให้หายไปโดย โดยให้เราใส่ CSS ดังนี้

 วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

CSS ที่ทำการเพิ่มเข้าไปในไฟล์ CSS ของเรา

 

p.unseen.element-invisible {
display:none;
}

 

3.ผลที่ได้จากการใส่ CSS เพิ่มเข้าไปคือ

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

4.หลังจากได้ตามขั้นตอนที่ 3 แล้ว ต่อไปเราจะทำการปิด "กรุณาให้คะแนน"  โดยเราจะใส่ CSS ดังนี้

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

CSS ที่ทำการเพิ่มเข้าไปในไฟล์ CSS ของเรา

 

label.unseen.element-invisible {
display:none;
}

 

5.ผลที่ได้จากการใส่ CSS เพิ่มเข้าไปคือ

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

 6.หลังจากได้ตามขั้นตอนที่ 5 แล้ว ต่อไปเราจะทำการย้ายให้ไปอยู่บรรทัดเดียวกันกับ ตัว "ดาวให้คะแนน" โดยเราจะใส่ CSS ดังนี้

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

CSS ที่ทำการเพิ่มเข้าไปในไฟล์ CSS ของเรา

 

div.content_rating{
float:left;
margin-right:10px;
margin-top:4px;
}

 

7.ผลที่ได้จากการใส่ CSS เพิ่มเข้าไปคือ

 วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

8.หลังจากได้รูปตามขั้นตอนที่ 7 แล้ว เราจะเห็นว่า ตรงช่อง "โหวตให้คะแนน" มันยังยาวอยู่เราก็ไปทำการลดขนาด โดยเราจะใส่ CSS ดังนี้

 วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

CSS ที่ทำการเพิ่มเข้าไปในไฟล์ CSS ของเรา

 

select {
width:auto;
background-color:#fff;
border: 1px solid #ccc;
} 

 

 

7.ผลที่ได้จากการใส่ CSS เพิ่มเข้าไปคือ

 

วิธีใช้ CSS จัดการการแสดงผลให้เป็นระเบียบ

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ใบเสนอราคา (Quotation) คืออะไร
โดย Phakakrong อ 07 ก.ค. 2020 4:55 pm บอร์ด Share Knowledge
0
17
อ 07 ก.ค. 2020 4:55 pm โดย Phakakrong
วิธีการเดินทางจากอำเภอเชียงคำ จ.พะเยา มา กรุงเทพมหานคร
โดย Phakakrong อ 07 ก.ค. 2020 12:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
อ 07 ก.ค. 2020 12:03 pm โดย Phakakrong
Note
โดย Phakakrong อ 07 ก.ค. 2020 11:16 am บอร์ด M105 - ผกากรอง กุสาวดี
0
3
อ 07 ก.ค. 2020 11:16 am โดย Phakakrong
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย Phakakrong อ 07 ก.ค. 2020 11:01 am บอร์ด M105 - ผกากรอง กุสาวดี
3
24
อ 07 ก.ค. 2020 3:27 pm โดย Phakakrong
ให้เขียนประวัติ และ Job description ที่เคยทำมาแต่ละบริษัท โดยระบุประเภทธุรกิจที่เคยทำมา
โดย Phakakrong อ 07 ก.ค. 2020 11:01 am บอร์ด M105 - ผกากรอง กุสาวดี
1
11
อ 07 ก.ค. 2020 2:05 pm โดย Phakakrong
Work's on Hand ผกากรอง กุสาวดี M105
โดย Phakakrong อ 07 ก.ค. 2020 11:00 am บอร์ด M105 - ผกากรอง กุสาวดี
0
6
อ 07 ก.ค. 2020 11:00 am โดย Phakakrong
งานประจำวันที่ 7 กรกฏาคม 2563
โดย Phakakrong อ 07 ก.ค. 2020 10:58 am บอร์ด M105 - ผกากรอง กุสาวดี
2
36
อ 07 ก.ค. 2020 3:43 pm โดย thatsawan
ฟอร์มรับเงิน Omise เราสามารถเปลี่ยน logo ได้มั้ยคะ
โดย thatsawan ศ 03 ก.ค. 2020 6:03 pm บอร์ด Programming - PHP
0
25
ศ 03 ก.ค. 2020 6:03 pm โดย thatsawan
input type="date" ไม่เเสดงเป็นปฎิทินวันที่ให้ใน safari แก้ไขยังไงคะ
โดย thatsawan พฤ 02 ก.ค. 2020 2:31 pm บอร์ด HTML CSS
0
48
พฤ 02 ก.ค. 2020 2:31 pm โดย thatsawan
การสร้าง bot messenger ของ facebook โดยใช้ pymessenger
โดย jirawoot พฤ 02 ก.ค. 2020 1:44 pm บอร์ด Python Knowledge
0
51
พฤ 02 ก.ค. 2020 1:44 pm โดย jirawoot
Q - ทดลองทำเอกสารยื่นแบบผ่านเน็ตแล้ว ไฟล์ txt ใช้ไม่ได้
โดย natthanit.r2538 พ 01 ก.ค. 2020 4:59 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
3
62
พ 01 ก.ค. 2020 5:41 pm โดย natthanit.r2538
สรุปการยื่นแบบภาษีออนไลน์
โดย natthanit.r2538 อ 30 มิ.ย. 2020 5:32 pm บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
1
63
อ 30 มิ.ย. 2020 7:18 pm โดย natthanit.r2538
หลักการคิดค่าคอมมิชชั่น และวิธีการคิด รายได้จาก Commission
โดย natthanit.r2538 อ 30 มิ.ย. 2020 11:31 am บอร์ด Accounting software & ERP โปรแกรมบัญชี ระบบอีอาร์พี
0
55
อ 30 มิ.ย. 2020 11:31 am โดย natthanit.r2538
MJUpgrade อัพเกรดไม่สำเร็จ Error: zip file not found
โดย chaiyaphat ศ 26 มิ.ย. 2020 11:01 am บอร์ด Joomla Development
3
512
ศ 26 มิ.ย. 2020 1:24 pm โดย mindphp
ตั้งค่าใช้ Email ใน phpbb เเล้ว ไม่ทำงาน
โดย thatsawan พฤ 25 มิ.ย. 2020 5:37 pm บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
5
105
ส 27 มิ.ย. 2020 4:43 pm โดย thatsawan
เจอปัญหาตอนทำรายการ Omise เป็นบางครั้ง Error Uncaught OmiseInvalidChargeException
โดย thatsawan พฤ 25 มิ.ย. 2020 3:56 pm บอร์ด Programming - PHP
2
80
จ 29 มิ.ย. 2020 5:29 pm โดย thatsawan
ต้องการจะสร้างไฟล์ HTML เเต่นำค่า php ไป HTML โดย Twig เขียนใน phpbb จะทำยังไงคะ
โดย thatsawan พ 24 มิ.ย. 2020 5:45 pm บอร์ด Programming - PHP
3
83
พฤ 25 มิ.ย. 2020 3:49 pm โดย Sirayu
ถ้าเราต้องการแสดงค่าตอน onchange ใน option ที่มี value มากกว่า 1
โดย thatsawan อ 23 มิ.ย. 2020 12:51 pm บอร์ด JavaScript & Jquery Ajax
2
134
อ 23 มิ.ย. 2020 3:01 pm โดย thatsawan
4 จุดเช็คอิน เกาะล้าน ยอดฮิต
โดย A2d จ 22 มิ.ย. 2020 10:44 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
2
85
ส 27 มิ.ย. 2020 12:01 am โดย A2d
ต้องการจะเปลี่ยนคำปุ่ม omise จาก Pay with Omise เป็นคำที่เรากำหนดขึ้นเอง
โดย thatsawan จ 22 มิ.ย. 2020 5:18 pm บอร์ด PHP Knowledge
2
110
จ 22 มิ.ย. 2020 5:39 pm โดย thatsawan