style دادن به عناصر HTML
اگر بخواهیم به متون یا هر عنصر HTML یک استایل خاصی بدهیم باید از CSS استفاده کنیم.
با CSS می توان به متون رنگ داد، فونت HTML را مشخص کرد، یا اندازه متن را تغییر داد و ... .
3 روش برای تعریف CSS در سند HTML وجود دارد.
- روش Inline
- روش Internal
- روش External
روش Inline :
درون تگ یا عنصر <h1> از خاصیت style استفاده می کنیم. کد زیر متن را آبی نمایش می دهد.
برای مثال:
<h1 style="color:blue;">این یک تیتر آبی است</h1>
روش Internal :
در این روش با استفاده از تگ <style> درون تگ <head> می توانیم یک استایل ایجاد نماییم.
دقت نمایید حتما تگ <style> را درون تگ <head> بنویسید.
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
p {color:green;}
</style>
</head>
<body>
<p>آموزش برنامه نویسی تحت وب</p>
</body>
</html>
در مثال فوق به تگ <body> و <p> استایل رنگ داده ایم.
روش External :
در مثال زیر یک فایل با نام styles و پسوند css ایجاد کرده ایم. در این فایل استایل های خود را ایجاد کرده و سپس در سند html این فایل را الحاق می کنیم:
درون فایل styles.css:
body {
background-color: red;
}
p {
color:blue;
}
سپس فایل styles.css را به سند HTML الحاق می کنیم:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>این یک پاراگراف است</p>
</body>
</html>