آشنایی با مراحل ابتدایی CSS

در این مقاله با تعریف CSS و اینکه چه کارهایی می تواند انجام دهد، آشنا می شوید. نمونه CSS، چندین سبک یا استایل را در یک صفحه HTML می بینید. چرا از CSS استفاده می شود؟ CSS یک مشکل بزرگ را حل کرد! و اینکه موجب صرفه جویی در کارهای زیادی می شود. در ادامه با نحو یا سینتکس CSS ، انتخابگرهای CSS و دسته بندی انتخابگرها آشنا می شوید.

CSS زبانی است که استایل یا سبک سند HTML را توصیف می کند.

CSS توصیف می کند که چگونه عناصر HTML باید نمایش داده شوند.

CSS مخفف Cascading Style Sheets به معنی برگه‌های سبک آبشار یا برگه‌های آبشاری است. آبشاری بودن به این معنی است که استایل یا هر چیزی که به یک برگه CSS داده شود روی عناصر فرزند این برگه ها نیز تاثیرگذار خواهد بود مثلا اگر رنگ متن را در یک برگه  تغییر دادید، رنگ تمام هدینگ ها و پاراگراف های متنی که قرار است در این برگه CSS نوشته شود، تغییر می کند.

CSS مسئولیت ایجاد ظاهر سایت را به عهده دارد و رنگ، اندازه و محل قرارگیری متن و دیگر تگ های HTML را تعیین می کند که چگونه بر روی صفحه نمایش، کاغذ یا دیگر جاها نمایش داده شود. پس CSS برای زیباتر و قابل فهم تر کردن یک سند نوشته شده به زبان نشانه گذاری به کار برده می شود.

با کلیک بر روی اغلب تصاویر، می توانید آنها را در اندازه بزرگتر مشاهده کنید.

در این مثال رنگ پشت زمینه آبی کمرنگ، تیتر به رنگ سفید و در مرکز، فونت متن، نازنین بولد با اندازه 20 پیکسل تعیین شده است.

آشنایی با مراحل ابتدایی CSS

حال اگر همین گزینه ها را تغییر دهید، ظاهر صفحه تغییر می کند، در مثال زیر رنگ پشت زمینه سبز، تیتر به رنگ قرمز و در سمت چپ، فونت متن، تاهما با اندازه 50 پیکسل تغییر یافته است.

تغییر ظاهر صفحه با CSS

CSS کارهای زیادی را ذخیره می کند. این می تواند طرح صفحات وب چندگانه را در یک زمان کنترل کند.

نمونه CSS – یک صفحه HTML – چندین سبک یا استایل!

در اینجا یک صفحه HTML بدون استایل یا سبک و با چهار سبک مختلف نشان داده شده است.

بدون استایل:

 صفحه HTML بدون استایل

استایل شیت 1:

استایل 1 در صفحه HTML

استایل شیت2:

استایل 2 در صفحه HTML

استایل شیت3:

استایل 3 در صفحه HTML

استایل شیت 4:

استایل 4 در صفحه HTML


چرا از CSS
استفاده می شود؟

CSS برای تعیین سبک یا استایل برای صفحات وب شما، از جمله طراحی، طرح بندی و تغییرات در صفحه نمایش برای دستگاه های مختلف و اندازه صفحه نمایش استفاده می شود.

CSS یک مشکل بزرگ را حل کرد

برای HTML هرگز در نظر نگرفته نشده که حاوی برچسب هایی برای قالب بندی یک صفحه وب باشد!

HTML برای توصیف محتوای یک صفحه وب است مانند:

<h1> این یک عنوان است </ h1>

<p> این یک پاراگراف است. </ p>

وقتی برچسب هایی مانند <font> و ویژگی های رنگی به مشخصات HTML 3.2 اضافه شدند، یک کابوس برای توسعه دهندگان وب آغاز شد. توسعه وب سایت های بزرگ، که در آن فونت ها و اطلاعات رنگی به هر صفحه اضافه شده، تبدیل به یک روند طولانی و گران قیمت شد.

برای حل این مشکل، (W3C)، کنسرسیوم جهانی وب، CSS را ایجاد کرد.

CSS فرمت سبک یا استایل را از صفحه HTML حذف کرد!

CSS موجب صرفه جویی در کارهای زیادی می شود!

تعاریف سبک یا استایل به طور معمول در ظاهر فایل های .css ذخیره می شود.

با استفاده از یک فایل استایل شیت ظاهری، می توانید ظاهر کل وب سایت را با تغییر تنها یک فایل تغییر دهید!

نحو یا سینتکس CSS

مجموعه قاعده CSS شامل یک انتخابگر (selector) و یک بلوک اعلامیه (declaration block) است:

نحو یا سینتکس CSS


انتخابگر به عنصر HTML که می خواهید سبک
یا استایلی به آن بدهید اشاره می کند.

بلوک اعلامیه حاوی یک یا چند اعلامیه جدا شده با نقطه‌ و ویرگول‌ (;) است.

هر اعلامیه شامل یک نام مشخصه CSS و یک مقدار است که توسط دو نقطه (:) از یکدیگر جدا شده است.

یک اعلامیه CSS همیشه با یک (;) به پایان می رسد، و بلوک های اعلامیه توسط پرانتز های پیچیده احاطه شده اند.

در مثال زیر، تمام عناصر <p> به صورت مرکزی با رنگ متن قرمز قرار گرفته اند:

عناصر <p> به صورت مرکزی با رنگ متن قرمز


انتخابگرهای CSS

انتخابگرهای CSS برای پیدا کردن (یا انتخاب) عناصر HTML بر اساس نام عنصر، id، کلاس، صفت و غیره استفاده می شوند.


انتخاب
گر عنصر

انتخابگر عنصر، عناصر را براساس نام عنصر انتخاب می کند.

شما می توانید تمام عناصر <p> را بر روی یک صفحه مانند نمونه زیر (همه عناصر <p> در مرکز و با رنگ متن قرمز خواهند بود) انتخاب کنید:

 انتخابگر عنصر در css
انتخابگر id

انتخابگر id، شناسه id را در یک عنصر HTML برای انتخاب یک عنصر خاص استفاده می کند.

id یک عنصر باید در یک صفحه منحصر به فرد باشد، بنابراین انتخابگر id برای انتخاب یک عنصر منحصر به فرد استفاده می شود!

یک عنصر با یک id خاص انتخاب کنید، یک کاراکتر هش (#) و سپس id عنصر را بنویسید.

قاعده استایل یا سبک زیر به عنصر HTML با id = para1 اعمال شده است:

 استایل به عنصر HTML با id = para1

نکته: یک نام id نمی تواند با یک شماره شروع شود!

عناصر HTML با class = center قرمز رنگ و در مرکز

انتخاب
گر کلاس

انتخابگر کلاس عناصری با یک ویژگی کلاس خاص را انتخاب می کند.

عناصر را با یک کلاس خاص انتخاب کنید، یک کاراکتر (.) و سپس نام کلاس را بنویسید.

در مثال زیر، تمام عناصر HTML با class = center قرمز رنگ و در مرکز هستند:

شما همچنین می توانید تنها عناصر HTML خاصی را تعیین کنید که باید توسط یک کلاس تحت تاثیر قرار گیرد.

در مثال زیر، تنها عناصر <p> با class = center در مرکز قرار دارند:

عناصر <p> با class = center

عناصر HTML همچنین می توانند به بیش از یک کلاس ارجاع داده شوند.

در مثال زیر، عنصر <p> با توجه به class = center و class = large استایل دار شده است:

عنصر <p> با توجه به class = center و class = large

نکته: یک نام کلاس نمی تواند با یک عدد شروع شود!

دسته بندی انتخابگرها

اگر عناصری با همان تعاریف استایل داشته باشید، مانند نمونه زیر:

دسته بندی انتخابگرها


بهتر است انتخاب
گرها را دسته بندی کنید تا کدنویسی به حداقل برسد.

انتخابگرها را دسته بندی کنید، هر انتخابگر را با علامت ویرگول (،) از دیگری جدا کنید.

در مثال زیر، انتخابگرها را از کد بالا به ترتیب دسته بندی کرده ایم:

دسته بندی انتخابگرها را از کد بالا

کامنت گذاری در کدهای CSS

کامنت ها برای توضیح کد به کار می روند، و ممکن است زمانی که کد منبع را بعدا ویرایش می کنید، کمک کند.

کامنت ها توسط مرورگرها نادیده گرفته می شوند.

یک کامنت CSS با یک */ شروع می شود و با /* پایان می یابد. کامنت ها می توانند محدوده چندین خط را شامل شوند:

کامنت گذاری در کدهای CSS

در این مقاله با آموزش مراحل ابتدایی CSS آشنا شدید. با ما همراه باشید تا در مقالات بعدی با مراحل ابتدایی تا پیشرفته آشنا شوید.

ترجمه: سمیه مظفری

 

آشنایی با مراحل ابتدایی CSS
به این مطلب رای دهید



 

به اشتراک بگذارید :       فیس بوک کلوب

 

برچسب ها:
این مقاله اختصاصاً برای یاد بگیر دات کام تهیه شده است استفاده از آن با ذکر منبع همراه با لینک آن و نام نویسنده یا مترجم مجاز است

 

در یاد بگیر دات کام مشترک شوید و آخرین مطالب و مقالات را در ایمیل خود دریافت نمایید
برای عضویت، ایمیل خود را وارد کرده و بروی اشتراک کلیک کنید

  1. من css رو در ورکشاپ آموزشی به طور اتفاقی دیدم و یاد گرفتم ولی قبل از اینکه سر کارگاه حاضر بشم این مقاله رو خوندم و خیلی بهم کمک کرد واقعا جامع و درست توضیح داده بودید

نظر شما چیست؟

پرسش های خود را در بخش پرسش و پاسخ مطرح کنید

*

code



تبلیغات اینترنتی در یاد بگیر دات کام

بسته های تبلیغاتی ارزان قیمت

 
بستن تبلیغات

Useful Websites Directory

گردنبند اسم
طراحی سایت
طراحی سایت شرکتی
دستگاه جوجه کشی ارزان
المنت صنعتی
شیشه سکوریت
ردیاب خودرو



صفحه ما را در فیس بوک دنبال کنید صفحه ما را در توییتر دنبال کنید صفحه ما را در گوگل پلاس دنبال کنید صفحه ما را در  تلگرام دنبال کنید صفحه ما را در  اینستاگرام دنبال کنید صفحه ما را در لینکداین دنبال کنید