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

Who is online

Users browsing this forum: facebook.com [Crawler] and 31 guests