CSS چیست و چه کاربردی دارد؟
پس از یادگیری HTML باید به المان‌های آن استایل‌دهی کرد که یکی از روش‌های مرسوم برای این عمل استفاده از CSS است که زبانی برای ساخت شیوه‌نامه می‌باشد.
اگر می‌خواهید بدانید که CSS چیست و چه کاربردی در صفحات HTML یا طراحی وب دارد، چطور می‌توانید از آن استفاد کنید این مقاله نیوسان‌وب را از دست ندهید. البته در اینجا بیشتر هدف ما معرفی CSS و ارائه تعاریف لازم و مقدماتی است که به صورت اختصاصی در مقالات آتی آن را تکمیل خواهیم کرد. پس تا اینجا می‌دانید که برای ورود به CSS، باید HTML را تا حدقابل قبولی فرا گرفته باشید.
CSS چیست؟
CSS یک زبان جهت ساخت شیوه‌نامه است که از آن برای استایل‌دهی یا جلوه‌بخشی ظاهری به المان‌ها یا عناصر HTML واقع در صفحات وب استفاده می‌شود. CSS مخفف Cascading Style Sheet است که اگر بخواهیم به معادل فارسی برگردانیم به معنی برگه جلوه‌بخشی آبشاری است. رنگ‌ها، جلوه‌های ظاهری، اندازه فونت، روش‌های مختلف نمایش المان‌ها و بسیاری از موارد دیگر توسط CSS قابل تغییر و تنظیم هستند. در واقع باید گفت که یک صفحهHTML که شامل چندین المان است، بدون استفاده از شیوه‌نامه‌های CSS خشک و بی‌روح است و کاربر هم ارتباطی با آن برقرار نمی‌کند. قبلا در خصوص صفت style در یک مقاله آموزشی نکاتی را ارائه کردیم و از استایل‌های inline که یک روش غیراستاندارد برای جلوه‌بخشی هستند، بهره گرفتیم؛ اما باید بدانید که استفاده از آن روش، یک شیوه منسوخ و البته غیراستاندارد است که مستلزم تکرار در المان‌های مشابه و حجم کدنویسی بالایی هم می‌شود. البته در آنجا چاره‌ای هم نداشتیم و با توجه به شروع کار یادگیری html، باید آن را ذکر می‌کردیم که از آن می‌توانید به عنوان پیش‌نیازی برای ورود به مبحث CSS هم بهره بگیرید. اگر بخواهید تمیز کد بنویسید، کنترل بهتری روی المان‌ها و حجم کدهای نوشته شده داشته باشید و مطابق اصول سئو کار کنید، یکی از روش‌ها استفاده از CSS است. البته در استفاده از CSS هم دو روش وجود دارد که در ادامه آنها را ذکر خواهیم کرد و روش استانداردتر را هم مشخص خواهیم کرد.
برای مثال دستور CSS زیر را ببینید که با استفاده از آن به صورت گروهی برای تغییر سایز و رنگ تمام تگهای H1 یک صفحه وب استفاده کرده‌ایم؛ در حالی که اگر میخواستیم از روش inline استفاده کنیم، باید برای تمامی تگهای h1، مقادیر لازم را در صفت style به آن نسبت می‌دادیم.
h1 {
color: red;
font-size: 30px;
}
ساختار یک دستور CSS
ساختار یک دستور CSS به سادگی همان صفت style در تگهای html است و اگر قبلا با آن آشنا باشید (در غیر اینصورت لینک اشاره شده در بالا را بررسی کنید) مشکلی برای شروع یادگیری CSS نخواهید داشت. در ساده‌ترین حالت ممکن، همانطور که در مثال بالا دیدید، برای نوشتن یک دستور Css، یاید در یک فایل CSS که پسوند css. دارد، ابتدا نام selector که ممکن است یک المان، آیدی، کلاس و هر چیز قابل انتخاب باشد، نوشته می‌شود، سپس یک آکولاد باز و بسته قرار می‌گیرد و آنگاه property یا خاصیت و در مقابل هر property، بعد از قرار دادن دو نقطه، مقدار آن نوشته می‌شود و در نهایت یک نقطه ویرگول هم قرار می‌گرد تا در صورتی که برای یک property دیگر هم لازم باشد، این propertyها از هم مجزا و برای مرورگر قابل تشخیص باشند. البته اگر تنها یک proprty در داخل هر آکولاد باز و بسته بخواهد قرار گیرد، اجباری به گذاشتن نقطه ویرگول هم نمی‌باشد.
در مثال بالا، سلکتور انتخابی ما h1 است. به همین دلیل هر خاصیتی از آن را تغییر دهیم، در تمام تگهای h1 صفحه html اعمال می‌شود. برای مثال در اینجا ما رنگ فونت آن را با استفاده از color : red به قرمز تغییر دادیم و اندازه فونت آن را هم روی 30 پیکسل تنظیم کردیم.
روش‌های استایل‌بخشی به html
اگر روش inline را که در داخل هر المان html نوشته می‌شود و مشکلاتی جدی از نظر طراحی دارد نادیده بگیریم، استایل‌بخشی در داخل بخش head فایل html نیز می‌تواند انجام شود که برای این منظور کافی است که توسط یک تگ باز و بسته style که در صفحه ظاهر نمی‌شود، آن را مشخص کرده و styleهای موردنظرتان را در آن بنویسید. مثال زیر را ببینید.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newsunweb.com</title>
<style>
#first-div {
background-color: cyan;
padding: 5px;
}
#second-div{
background-color: azure;
padding: 5px;
}
h1 {
color: blue;
}
h2 {
color: brown;
}
p {
color: red;
font-size: 20px;
text-align: justify;
}
.paragraph{
color:darkgray;
font-size: 15px;
}
</style>
</head>
<body>
<div id="first-div">
<h1>This is h1</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia facilis voluptatum modi veniam ad.
Nesciunt dolor illum excepturi quo, commodi repudiandae nobis eveniet consequatur, unde et esse incidunt
quia! Inventore.
</p>
<h2>This is h2</h2>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus fugiat, quis architecto esse libero
provident quisquam expedita facere assumenda unde tenetur culpa explicabo aliquam adipisci labore ex odio
cum hic.
</p>
<h2>This is another h2</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore reiciendis dolores in accusamus, eum ea
repellat rerum perspiciatis sunt? Dicta distinctio sequi tenetur repudiandae adipisci consequuntur quam sit
deleniti porro.
</p>
</div>
<div id="second-div">
<h2>This is the third h2</h2>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem perferendis, necessitatibus, quibusdam
doloremque similique ullam deleniti dolorum iusto autem blanditiis animi, ipsam non sit natus? Voluptate
unde voluptates eum suscipit!
</p>
<p class="paragraph">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis soluta beatae veritatis expedita rerum
distinctio, ullam perferendis porro necessitatibus consequuntur praesentium voluptates, itaque delectus
saepe minima. Dolor tenetur nobis porro?
</p>
</div>
</body>
</html>
خروجی کد بالا به شکل زیر است:
به دقت به کدهای نوشته شده در داخل style نگاه کنید. ما از سه نوع فراخوانی selectorها جهت استایل بخشی استفاده کردیم:
1- استفاده از نام کلی المان
اگر بخواهیم کلیه المان‌های یک نوع (مثلا h2 در مثال بالا) به یک شیوه مشخص در آیند، از نام کلی المان‌ها استفاده می‌کنیم.
2- استفاده از شناسه id اختصاص یافته به هر المان
چنانچه به المان مشخصی بخواهیم شیوه مشخصی نسبت دهیم (مثلا اولین div در مثال بالا)، ابتدا یک id به آن اختصاص می‌دهیم و سپس با استقاده از نام آن به شکل id#، به آن style لازم را می‌بخشیم.
3- استفاده از نام کلاس تخصیص داده شده به المان‌ها
در صورتی که به تعدادی از المان‌ها که ممکن است از یک نوع باشند یا نباشند (ممکن است مثلا به p و h2 یک کلاس یدهید) یک رنگ مشخص را بدهید می‌توانید از class و سپس استفاده از یک نقطه قبل از کلاس آن در داخل style استفاده کنید.
البته استفاده از این روش هم هنوز روش استانداردی نمی‌باشد و برای رعایت استاندارد در طراحی، استایل‌ها css باید در یک فایل مجزا با پسوند css قرار گیرند و سپس در داخل head فایل html با استفاده از تگ link به آن ارجاع داده شود. برای مثال چهت استفاده از این روش ما ابتدا تمام دستورات داخل تگهای style را در یک فایل با نام اختیاری style.css جانمایی کردیم و سپس در داخل head با استفاده از تگ link زیر به آن ارجاع دادیم.
<link rel="stylesheet" href="style.css" type="text/css" media="all"/>
در تگ بالا از href برای آدرس دهی نسبی به مکان فایل (style.css) استفاده کردیم که ممکن است برای شما در جای دیگر باید یا اینکه حتی به شکل آنلاین هم باشد. ممکن است شما چندین فایل css هم حتی داشته باشید که باید آنها را نیز آدرس‌دهی کنید یا در جایی از شیوه اول از import استفاه کنید و به سایر فایل‌های css ارجاع بدهید. البته هنگامی که قرار است فایل فعال شود، برای عملکرد بهتر، مناسب‌تر است که تنها یک فایل css داشته باشید.
در اینجا اجباری برای قرار دادن صفات type و media وجود ندارد، اما اگر بخواهید برای مدیای مشخصی، استایل متفاوتی داشته باشید، باید یک ارجاع به فایل آن نیز بدهید و نوع مدیا را مثلا print مشخص کنید تا به عنوان مثال در حالت پرینت این شیوه مشخص شده استفاده شود که در حالات خیلی خاص این حالت‌ها پیش می‌آید و شاید حتی هرگز از آن استفاده نکنید.
جمع بندی
اگر بخواهیم مطالب مقدماتی ارائه شده در این مقاله از وبسایت نیوسان‌وب را جمع‌بندی کنیم، باید بگوییم در اینجا ما ابتدا از اهمیت css گفتیم و سپس بعد از توضیحی در خصوص ساختار یک دستور css، روش‌های style بخشی را توضیح دادیم تا بتوانیم در مقالات آینده به طور تخصصی‌تری در خصوص css بحث کنیم.
لینک این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید.