. สร้างเว็บไซต์จากรอยขีดข่วน Part II: การเพิ่มสไตล์ (CSS)
สิ่งที่เราจะทำ
ในบทนี้เราจะ:
- สร้างแผ่นลักษณะ CSS สำหรับเว็บไซต์
- เพิ่มการเชื่อมโยงไปยังสไตล์ชีในหน้าเว็บของเรา
สร้างแผ่นสไตล์ CSS
ในโฟลเดอร์ demoweb ให้สร้างไฟล์ชื่อ site.css ใหม่
ใส่รหัสต่อไปนี้ภายใน CSS แฟ้ม:
site.css
body {
font-family: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 5px;
padding-left: 15px;
padding-right: 15px;
background-color: #ffffff;
border-radius:
0 0 5px 5px;
}
h1 {
font-family: Georgia, serif;
border-bottom: 3px
solid #cc9900;
color: #996600;
font-size: 30px;
}ไฟล์ CSS ข้างต้นกำหนดรูปแบบที่จะใช้สำหรับ:
- องค์ประกอบร่างกาย HTML <body>
- องค์ประกอบ HTML ที่มี id = "หลัก"
- องค์ประกอบหัวข้อ HTML <h1>
แก้ไขหน้าแรก
ในโฟลเดอร์ demoweb แก้ไขไฟล์ index.html
เปลี่ยนเนื้อหาของแฟ้มที่จะต่อไปนี้:
index.html
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>Welcome to Our Company</h1>
<h2>Web Site Main Ingredients</h2>
<p>Pages (HTML)</p>
<p>Style Sheets (CSS)</p>
<p>Computer Code (JavaScript)</p>
<p>Live Data (Files and
Databases)</p>
</div>
</body>
</html>
ลองตัวเอง»หน้าบ้านดังกล่าวข้างต้นเป็นสำเนาของหน้าบ้านจากบทก่อนหน้านี้
เราได้เพิ่มการเชื่อมโยงไปยังแผ่นสไตล์และ <div id = "หลัก"> องค์ประกอบที่จะกำหนด "ส่วน" ในเนื้อหา
การเปลี่ยนแปลงที่มีการทำเครื่องหมายสีแดง
แก้ไขหน้าเกี่ยวกับ
เพื่อให้การทำงานของคุณจะมีการเปลี่ยนแปลงเหมือนกันใน about.html
1. เพิ่มการเชื่อมโยงไปยังสไตล์ชี
2. เพิ่ม <div id = "หลัก"> องค์ประกอบ
about.html
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<link href="site.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1>About Us</h1>
<p>Lorem Ipsum Porem Lorem Ipsum Porem</p>
</div>
</body>
</html>
ลองตัวเอง»อ่านเพิ่มเติม
อ่านข้อมูลเพิ่มเติมเกี่ยวกับ CSS ของเรา สอน CSS