سلام همشهریان عزیز صفادشتی! اگر به فکر داشتن یک وب سایت شخصی یا کسب و کار کوچک خودتان هستید، اما دانش برنامه نویسی پیچیده ای ندارید، این آموزش مخصوص شماست. ما در این راهنما به زبان ساده به شما آموزش می دهیم که چگونه با استفاده از CSS یک وب سایت زیبا و کاربردی طراحی کنید.
CSS مخفف Cascading Style Sheets است و به شما کمک می کند تا ظاهر وب سایت خود را کنترل کنید. با استفاده از CSS می توانید رنگ ها، فونت ها، اندازه ها، فاصله ها و بسیاری از جنبه های دیگر طراحی را تغییر دهید. مهم تر از همه، یادگیری CSS نسبتاً آسان است و نیاز به دانش برنامه نویسی عمیق ندارد.
برای شروع، باید با مفاهیم اولیه HTML آشنا باشید. HTML ساختار وب سایت شما را مشخص می کند (مثلاً عنوان ها، پاراگراف ها، تصاویر و غیره). CSS سپس این ساختار را زیبا و قابل مشاهده می کند.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>عنوان صفحه</title>
</head>
<body>
<h1>عنوان اصلی</h1>
<p>این یک پاراگراف است.</p>
</body>
</html>
سه روش اصلی برای استفاده از CSS وجود دارد:
استایل ها را مستقیماً در تگ های HTML اعمال می کنید.
مثال: <p style="color: blue;">این متن آبی است.</p>
استایل ها را در تگ <style> در قسمت <head> صفحه HTML تعریف می کنید.
مثال:
<head>
<style>
p {
color: blue;
}
</style>
</head>
استایل ها را در یک فایل جداگانه با پسوند .css ذخیره می کنید و سپس آن را به صفحه HTML خود لینک می کنید.
مثال: <link rel="stylesheet" href="style.css">
در این آموزش، برای سادگی از CSS درون خطی استفاده می کنیم.
بیایید یک پاراگراف را آبی رنگ و فونت آن را به Arial تغییر دهیم:
<p style="color: blue; font-family: Arial;">این یک پاراگراف آبی رنگ با فونت Arial است.</p>
به همین سادگی! شما می توانید استایل های مختلفی را به عناصر HTML خود اعمال کنید.
<p style="font-size: 16px;">این یک پاراگراف با اندازه فونت 16 پیکسل است.</p>
<div style="background-color: #f0f0f0; padding: 10px;">این یک div با پس زمینه خاکستری روشن است.</div>
<div style="border: 1px solid black; padding: 10px;">این یک div با حاشیه مشکی است.</div>
<p style="color: red;">این یک پاراگراف قرمز رنگ است.</p>
حالا بیایید یک صفحه معرفی ساده برای خودمان بسازیم. این صفحه شامل نام، تصویر و یک توضیح کوتاه درباره ما خواهد بود.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>صفحه معرفی من</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 20px; line-height: 1.6;">
<h1 style="font-size: 2em; color: #333; margin-bottom: 20px; text-align: center;">نام شما</h1>
<img src="your-image.jpg" alt="تصویر شما" style="width: 200px; height: 200px; border-radius: 50%; display: block; margin: 0 auto; margin-bottom: 20px;">
<p style="font-size: 1.1em; color: #555; margin-bottom: 20px; text-align: center;">
توضیح کوتاهی درباره خودتان (مثلاً شغل، علاقه مندی ها و غیره).
</p>
</body>
</html>
به جای your-image.jpg، آدرس تصویر خود را قرار دهید. همچنین می توانید استایل های دیگری را به این صفحه اضافه کنید تا زیباتر شود.
<head> صفحه HTML خود قرار دهید.امیدواریم این آموزش برای شما مفید بوده باشد. اگر سوالی دارید، می توانید با ما تماس بگیرید.
برای مشاوره رایگان در زمینه طراحی سایت و سئو با ما تماس بگیرید: 09190994063 - 09376846692