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

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

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

Post Reply
จันนุสรณ์ ดีแก่
PHP VIP Members
PHP VIP Members
Posts: 1478
Joined: 15/11/2018 10:01 am

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

Post by จันนุสรณ์ ดีแก่ » 22/11/2018 6:42 pm

ทำความรู้จักกับ 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

Post Reply

Return to “PHP Knowledge”

Users browsing this forum: No registered users and 11 guests