การเรียกใช้งาน CSS แบบ (External)

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

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

ภาพประจำตัวสมาชิก
Dive Demo
PHP Sr. Member
PHP Sr. Member
โพสต์: 84
ลงทะเบียนเมื่อ: 01/02/2017 11:10 am

การเรียกใช้งาน CSS แบบ (External)

โพสต์โดย Dive Demo » 01/02/2017 3:57 pm

การเรียกใช้งาน CSS แบบ (External)จะเป็นการสร้างไฟล์ CSS ขึ้นมาอีกไฟล์หนึ่งเพื่อแยกคำสั่งของ CSS อย่างชัดเจน จากเดิมที่ต้องใช้คำสั่งไว้ในหน้าเดิม ปัญหาที่อาจเกิดคือหากเราทำการเปลี่ยนข้อมูล CSS บางส่วนจะต้องทำให้ต้องแก้ไขส่วนเดิมในทุก ๆ ไฟล์ประโยชน์ของ CSS แบบ (External) ก็เพื่อลดความซ้ำซ้อนของข้อมูล และความสะดวกในการแก้ไข

1.สร้างไฟล์ style_ex.css และเขียนคำสั่ง CSS ที่ต้องการลงไป

style_ex.css

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

body {background-color: lightgreen;}
h1 {color: BULE; text-align: center;}


2.สร้างไฟล์ css_external.html และทำการเรียกใช้คำสั่ง <link> เพื่อดึงคำสั่ง CSS จากไฟล์ style_ex.css มาแสดงผลดังตัวอย่าง(ที่อยู่ที่จัดเก็บไฟล์ css โดยในกรณีนี้ไฟล์อยู่โฟลดเดอร์เดียวกัน)

css_external.html

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

<!DOCTYPE html>
<html>
<head>
   <title>Basic Html</title>
   <link rel="stylesheet" type="text/css" href="style_min.css">
</head>
<body>
<h1>HELLO</h1>
</body>
</html>


Output

css_external.png
css_external.png (3.24 KiB) เปิดดู 57 ครั้ง



จากภาพจะเห็นว่าในส่วนของBody และ H1 แสดงผลตามคำสั่งcss ที่เราได้ประกาศไว้ :-D :-D

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

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

กำลังดูบอร์ดนี้: 2 และ บุคคลทั่วไป 0 ท่าน