ขั้นตอนการแต่ง CSSนะครับเราก็ต้องมารู้จักก่อนว่า CSS มีองค์ประกอบไรบ้างในการที่เราจะเอาไปใส่ใน HTML ของเรานะครับอันนี้ผมจะเอาเว็บเดิมที่เคยทำมาทำการแต่งเพิ่มนะครับ วิธีการสร้างเว็บแบบง่าย
<head>
<style> </style>
</head>คำว่า <style> และ </style> เป็นภาษา HTML และสิ่งที่อยู่ระหว่าง <style> และ </style> คือภาษา CSS นั้นเองครับซึ่งในส่วนนี้จะเป็นการเติมแต่งต่างๆของเว็บเรานั้นเองนะครับ
<html>
<head>
<title>JinYossatron</title>
<style>
body {
background-color: #000;
color: #eb8c4a;
}
</style>
</head>
<body>
<h1>Test CSS</h1>
</body>
</html>ในส่วนการเขียน CSS ต่างๆใน <style></style> เราจะทำการเติมคำสั่ง body เป็น HTML Elements จะเป็นตัวแสดงผลออก การปรับแต่งของ body นั้นเองครับ เรายังสามารถเลือกปรับ sizeต่างๆของขนาดตัวอักษร ได้อีกด้วย
<html>
<head>
<title>JinYossatron</title>
<style>
body {
background-color: #000;
color: #eb8c4a;
font-family: Arial;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<h1>Test CSS</h1>
</body>
</html>การปรับตำแหน่งของตัวอักษร ขนาดตัวอักษร ของเว็บ ซึ่งการประกาศแบบนี้จะมีผลต่อ <h1></h1> ทุกตัวนะครับ เราจึงต้องทำการประกาศ Attribute “class” ให้มันนะครับเพื่อทำการเจาะจงตัวที่เราจะตกแต่งให้มันนั้นเองนะครับ
<html>
<head>
<title>JinYossatron</title>
<style>
body {
background-color: #000;
color: #eb8c4a;
font-family: Arial;
font-size: 24px;
text-align: center;
}
.TestCss {
color: #50fd00;
font-family: Arial;
font-size: 62px;
text-align: center;
}
.TestCss1 {
color: #7700ff;
font-family: Arial;
font-size: 72px;
text-align: center;
}
</style>
</head>
<body>
<h1>Test CSS</h1>
<h1 class="TestCss">Test CSS</h1>
<h1 class="TestCss1">Yossattron</h1>
</body>
</html>แค่นี้เราก็จะได้ตัวอักษรที่แตกต่างกันเลือกที่จะปรับ ตกแต่งแต่ละตัวได้แล้วนะครับเราก็จะได้เว็บของเราดังภาพตัวอย่างนะครับผม
ขอบคุณที่เข้ามารับชมนะครับ :)
