تا بحال با خود فکر کرده اید یک وب سایت از چه چیزهایی درست شده است؟ و وقتی مرورگر خود را باز می‌کنید چه اتفاقی می افتد؟ در این پست قصد داریم مباحث پایه طراحی وب را بررسی کنیم و ساختار یک صفحه را توضیح دهیم. پس اگر میخواهید آشنایی اولیه با HTML و CSS داشته باشید، این پست برای شما تهیه شده است.
اگر یک صفحه وب را به سه بخش تقسیم کنیم که شامل: محتوا، نحوه ارایه و رفتار آن باشد، CSS را میتوان نحوه‌ی ارایه یک وب‌سایت در نظر بگیریم. بیایید مطلب را کمی بیشتر و عمیق‌تر بررسی کنیم.
اسکلت یک ساختمان را در نظر بگیرید که از این به بعد آن را HTML خواهیم خواند، نمای همان ساختمان را در نظر بگیرید که به مصداق CSS خواهد بود و کاربری آن ساختمان را هم JavaScript تعیین خواهد کرد.
محتوا یا همان اسکلت یک صفحه وب شامل کدهایی است که هیچ تزیین خاصی ندارند و صرفن میتوان انها را به صورت یک متن و یا عکس و یا ویدئو در مرورگر مشاهده کرد. در همین صفحه که الان مشاهده می‌کنید و در حال خواندن متن هستید، میتوانید ببینید که وب سایت در سه ستون طراحی شده است و چیزی که الان شما در حال مطالعه هستید از جنس متن است پس چه چیز این وب سایت را زیباتر کرده و تمامی ستون‌ها و قسمت‌های مختلف وب سایت را در کنار هم قرار داده و نظم خاصی به وب‌سایت داده است؟
جواب ما CSS است. کلمه CSS مخفف عبارت Cascading Style Sheets است و تاکنون در زبان فارسی معنی مناسبی برای این عبارت پیدا نشده است اما “الگوهای آبشاری” چیزی است که به آن اتلاق میشود. CSS یک زبان استایل دهی به کدهای نشانه گزاری (XHTML) است. شما میتوانید به هر المانی که در HTML وجود دارد یک کلاس (Class) یا آی‌دی (ID) تعریف کنید و با استفاده از آن class و یا id چند خط css برای آن قمست بنویسید یا به اصطلاح المان‌های صفحه وب خود را استایل دهی کنید.
میتوان از کدهای CSS در سه حالت بهره برد. یکی از این راه‌ها این است که هنگام نوشتن کد در HTML کدهای CSS را به صورت مستقیم وارد کنید، که به این حالت می‌گوییم InLine CSS . مانند نمونه زیر :
< h1 style="background-color:red"> سلام </h1>
در کد بالا شما به المان H1 در کدتان ویژگی رنگ قرمز را به پشت زمینه آن اضافه کرده‌اید یا به زبان خودمان آنرا استایل دهی کردید. در این حالت شما بدون تعریف class و یا id به المان خود استایل دادهاید و میتوانید همین روال را ادامه دهید اما تصور کنید پروژه شما کمی بزرگتر شده است و کنترل این همه کد به صورت Inline وقت شما را تلف می‌کند و کد را کثیف‌تر می‌کند، پس باید راه حلی باشد، و اینگونه هم هست. در قسمت Head کد HTML خود میتوانید تمامی المان‌ها استایل دهی کنید و تنها کار شما این است که آنها در المان‌های موجود فراخوانی کنید مانند نمونه زیر:
<html lang="fa" dir="rtl">
<head>
<title>بلاگ </title>
<meta charset="utf-8" />
<meta name="author" content="امین ضیا">
<style type="text/css">
h1{
background-color: red;
}
</style>
</head>
این روش هم مزیت‌های خودش را دارد ولی اگر پروژه ما به یک پروژه خیلی بزرگ تبدیل شود دیگر این روش هم کارایی خودش رو از دست میده و شما باید بلد باشید با Classها و idها و در مجموع CSSهای خارجی دست و پنجه نرم کنید. به نمونه کد زیر دقت کنید. در ضمن در یاد داشته باشید که برای تعریف کلاس در css از نقطه (.) استفاده میشود و برای تعریف id از هشتگ (#) استفاده میشود. در ادامه در مورد class و id بیشتر بحث می‌کنیم.
من کلاسی به نام
.colorOfElements
در یک فایل فرضی CSS قرار داده‌ام. اسم فایل استایل را هم style.css گذاشته‌ام تنها کاری که لازم است انجام دهم فراخوانی فایل استایل به صفحه HTML است.
style.css
.colorOfElements{
background-color:red;
}
test.html
<head>
<title>بلاگ </title>
<meta charset="utf-8" />
<meta name="author" content="امین ضیا">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
همانگونه که میبینید من فایل استایل را به صفحه وب خود الحاق کردم سپس تنها کاری که باید انجام دهم چسباندن همان کلاس به یک المان HTML است. مانند نمونه زیر:
< h1 class="colorOfElemets"> سلام </h1>
خوب تا این جای کار ایده‌ی کلی از اینکه CSS چگونه کار می‌کند و به طور کلی معنای CSS چیست گرفته‌اید و میتوانید از ان در پروژه‌های خود استفاده کنید. در مطالب آتی وارد مباحث پیشرفته‌تری در همین موضوع خواهیم شد. روز خوبی داشته باشید. 🙂
