Page 1 of 1

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

Posted: 22/11/2018 6:42 pm
by จันนุสรณ์ ดีแก่
ทำความรู้จักกับ css เบื้องต้น

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


ตัวอย่าง css

Code: Select all

[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