ทำความรู้จักกับ css เบื้องต้น

PHP Knowledge เป็น บอร์ดรวามความรู้ php เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderator: mindphp, ผู้ดูแลกระดาน

จันนุสรณ์ ดีแก่
PHP VIP Members
PHP VIP Members
โพสต์: 1478
ลงทะเบียนเมื่อ: 15/11/2018 10:01 am

ทำความรู้จักกับ css เบื้องต้น

โพสต์ที่ยังไม่ได้อ่าน โดย จันนุสรณ์ ดีแก่ »

ทำความรู้จักกับ css เบื้องต้น

css เป็นส่วนที่ทำให้เว็บเพจมีความสวยงาม มีสีสัน เพิ่มมากขึ้น


ตัวอย่าง css

โค้ด: เลือกทั้งหมด

[code]
<html>
    <head>
        <title>CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <h1>Css เบื้องต้น </h1>
    
    <style type="text/css">
        h1{color:orange;
        font-family:Arial;
        text-aligm: center;
        font-size: 150px}
        .test{color:pink;
              font-family:Arial;
              font-weight:bold;
              text-align: center;
              font-size: 80px}
        #test-id{
              color:yellow;
              font-weight:bold;
              font-size: 50px;
              text-align:center;}
        
   </style> 
   </head>
   <body>
       <div
           <p class="test">hellophp</p><br>
           <p id="test-id">ทดสอบ css</p>
       </div>
       </body>
</html>
Screenshot (223).png
ความแตกต่างระหว่าง h1 , .test และ test-id
- h1 นั้น เป็นการเรียกใช้ css ของ h1
- .test เป็นตัวแทนของคลาสและการเรียกใช้งาน (.) คือตัวแทนของคลาส
- # test.id เป็นตัวแทนของ id


ผลลัพธ์ โปรแกรม
Screenshot (226).png
สามารถดูข้อมูลเพิ่มเติมได้จาก บทที่ 30 สอน php7 วิดีโอ สอน พื้นฐาน CSS เพิ่มความสวยงาม ให้เว็บที่เขียนด้วย php

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 75