CSS چیست؟
CSS بخشی ضروری از سه رکن اصلی توسعه وب جلویی است. HTML ساختار و شالوده وب سایت، عناصری است که محتوا را در بر می گیرد. CSS سبک و طراحی وب سایت، رنگ، فونت، اندازه و چیدمان است. در نهایت، جاوا اسکریپت عملکرد، دکمه ها، فرم ها و پردازش داده های وب سایت است.
یک قیاس رایج که برای توضیح نحوه کار این سه با هم استفاده می شود، نحوه ساخت یک خانه است. HTML پایه، آجر و ملات است، CSS رنگ و طراحی داخلی است، و جاوا اسکریپت برق و لوله کشی است که وقتی کلید چراغ را روشن می کنید یا سینک آشپزخانه را روشن می کنید.
هر سه ابزار در ایجاد وب‌سایت‌های کاربردی جامد و زیبا با هم کار می‌کنند، اما تمرکز روی یک زبان در یک زمان مفید است، مخصوصاً وقتی تازه شروع می‌کنید.
این راهنما بر روی CSS تمرکز دارد که مخفف Cascading Style Sheet است و در اوایل دهه 90 ایجاد شد. قبل از CSS، وب سایت ها کاملاً به طراحی ضعیف و محدود HTML متکی بودند. در حالی که HTML حیاتی است و محتوای سایت مانند متن و تصاویر را فراهم می کند، CSS سبک محتوا را ارائه می دهد.
به همین دلیل است که به عنوان یک زبان سبک شناخته می شود. قسمت اول نام «آبشار» مخفف الگوریتمی است که CSS هنگام انتخاب قوانین استایلینگ و به چه ترتیبی از آن استفاده می‌کند.
نحوه اضافه کردن CSS به وب سایت
همانطور که قبلا ذکر شد، CSS به محتوای موجود در HTML که در یک عنصر موجود است اعمال می شود. یک عنصر از برچسب ها، ویژگی ها و محتوا تشکیل شده است.
<h1>This is my heading</h1>
عنصر = باز کردن برچسب، محتوا، و برچسب بسته شدن.
سه راه برای اعمال استایل CSS به عنصر HTML وجود دارد: Inline، Internal و External.
H2 Inline
همانطور که از نام آن پیداست، این روش شامل اعمال CSS به طور مستقیم در همان خط عنصر HTML است. CSS به عنوان یک ویژگی به عنصر با استفاده از سبک کلمه کلیدی اعمال می شود.
<h1 style="color:red">This is my heading</h1>
-شما استایل CSS را در تگ آغازین عنصر اعمال می کنید.
این روش ساده و آسان برای افزودن است، اما برای استایل دادن به کل وب سایت توصیه نمی شود، بلکه برای هدف قرار دادن یک عنصر منفرد توصیه می شود.
درونی؛ داخلی
این روش شامل قرار دادن تمام قوانین استایل CSS در قسمت هدر فایل HTML است.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
با استفاده از این روش، می توانید چندین عنصر را هدف قرار دهید و قوانین سبک متفاوتی را برای هر کدام اعمال کنید. اینترنال زمانی عالی است که شما فقط نیاز به استایل یک فایل html داشته باشید، با این حال، برای هدف قرار دادن وب سایت های چند صفحه ای توصیه نمی شود. دلیل این امر این است که استایل CSS که در قسمت head فایل قرار دارد فقط برای فایل html منفرد اعمال می شود و نه بقیه.
خارجی
این روش شامل ایجاد یک شیوه نامه خارجی، قرار دادن یک استایل CSS در داخل شیت و سپس پیوند دادن همه فایل های html به این شیت است. طبق قرارداد، اکثر توسعه دهندگان این برگه را “styles.css” نامگذاری می کنند. تا زمانی که پسوند به CSS ختم می شود، می توانید نام فایل را هر چه دوست دارید نام گذاری کنید.
برای پیوند دادن فایل های HTML خود به شیوه نامه، از عنصر پیوند با ویژگی rel و href استفاده کنید. این دستور به فایل می گوید که قوانین استایل CSS را از کجا بکشد.
<link rel="stylesheet" href="style.css">
-rel نشان دهنده رابطه و href نشان دهنده محل استایل شیت است.
این روش به طور کلی توصیه می شود، اما به خصوص زمانی که با یک وب سایت چند صفحه کار می کنید. در غیر این صورت، باید هر صفحه را به صورت جداگانه استایل کنید و این می تواند منجر به پیچیدگی و ناهماهنگی غیر ضروری در وب سایت شما شود.
دستور H2 CSS
فرمت استایل CSS شامل یک انتخابگر CSS، براکت‌های فرفری، یک رابطه ویژگی/مقدار جدا شده با دو نقطه، و یک نیم‌دونقطه برای پایان دادن به خط دستورالعمل است.
انتخابگر CSS چیزی است که ما استایل CSS را روی آن اعمال می کنیم. این می تواند یک عنصر، کلاس یا شناسه باشد.
h3 {
background-color: blanchedalmond;
font-size: 24px;
border-radius: 10%;
}
برای استفاده از یک عنصر به عنوان انتخابگر، کافی است نام عنصر را تایپ کنید
.container {
display: grid;
gap: 20px;
row-gap: 40px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
برای استفاده از یک کلاس به‌عنوان انتخابگر، قبل از تایپ نام کلاس، حتماً یک نقطه قرار دهید. نکته: کلاس باید دقیقاً همانطور که در فایل HTML ظاهر می شود تایپ شود.
#intro {
height: 200px;
width: 200px;
}
برای استفاده از شناسه به‌عنوان انتخابگر، قبل از تایپ نام شناسه، حتماً یک علامت پوند قرار دهید. توجه: شناسه نمی تواند با شماره شروع شود.
براکت های فرفری
هنگام استفاده از روش داخلی یا خارجی، استایل CSS باید در مجموعه‌ای از براکت‌های مجعد قرار گیرد.
{…}
دارایی/ارزش
قوانین سبک CSS با استفاده از یک رابطه ویژگی/مقدار بیان شده است. این جفت با استفاده از کولون از هم جدا می شوند.
color:red;
رنگ ویژگی عنصری است که می‌خواهید استایل بدهید و قرمز مقداری است که می‌خواهید عنصر باشد.
نیم دونقطه
نقطه ویرگول در انتهای خط آموزش در بسیاری از زبان های برنامه نویسی رایج است. این به رایانه دستور می دهد که دیگر تغییری وجود ندارد و باید به خط بعدی بروید.
گزینه های یک ظاهر طراحی CSS
اکنون که با نحوه افزودن CSS به وب‌سایت خود و قوانین نحوی مناسب CSS آشنا شدیم، بیایید روی آنچه می‌توانیم با CSS استایل دهی کنیم تمرکز کنیم.
رنگ ها
CSS به شما امکان می دهد رنگ همه چیز را از رنگ متن گرفته تا رنگ پس زمینه را تنظیم کنید. سه راه برای حاشیه نویسی رنگ ها در سینتکس CSS وجود دارد. اینها شامل رنگهای نامگذاری شده، هگزادسیمال و RGB می باشد.
رنگهای نامگذاری شده ساده‌ترین روش هستند زیرا به شما اجازه می‌دهند به سادگی با ذکر نام رنگ به CSS استایل بدهید. با این حال، در حال حاضر 147 رنگ نامگذاری شده موجود است که اکثر مرورگرها آنها را می شناسند.
color:blanchedalmond;
رنگهای هگزادسیمال با علامت هگزادسیمال نشان داده می‌شوند و با علامت پوند شروع می‌شوند. بیش از 16 میلیون گزینه رنگ برای انتخاب وجود دارد.
color: #874f87;
RGB مخفف قرمز، سبز و آبی است. هر رنگ با عددی از 0 تا 255 نشان داده می شود که نشان دهنده شدت هر رنگ است. هرچه این عدد بیشتر باشد رنگ تندتر است.
color:rgb(73, 124, 23);
فونت H##
نوع فونتی که برای وب سایت خود انتخاب می کنید بر حال و هوای وب سایت شما تأثیر می گذارد، بنابراین بسیار مهم است که گزینه های زیادی برای انتخاب داشته باشید. CSS به شما انعطاف‌پذیری زیادی در مورد استایل کردن فونت می‌دهد.
p {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 12pt;
font-weight: 700;
font-style: italic;
text-align: center;
}
CSS چندین مقدار ویژگی مختلف را ارائه می دهد که می توانید آنها را تنظیم کنید، از جمله خانواده فونت، اندازه، وزن و سبک.
از fonts.google.com دیدن کنید و از بین هزاران سبک مختلف فونت را انتخاب کنید. سبک فونت را انتخاب کنید و پیوند را در فایل HTML خود کپی کنید.
این به وب‌سایت شما می‌گوید که چه سبک قلمی را انتخاب کرده‌اید و فونتی را که انتخاب کرده‌اید کجا پیدا کنید.
نتیجه
CSS یک زبان طراحی فوق العاده است که انعطاف پذیری و طراحی مورد نیاز وب سایت شما را به شما ارائه می دهد. اکنون که اصول CSS را پوشش داده‌ایم، حتماً منتظر مقاله‌های بعدی باشید که در آن من سایز، نمایش، شناور، فلکس‌باکس، گرید، بوت استرپ و سایر موضوعات مرتبط با CSS را پوشش می‌دهم.
