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

Post a reply

Smilies
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
View more smilies

BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON

Topic review
   

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

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

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

Top