CSS چیست و چه کاربردی دارد؟

زمانی که HTML پا به عرصه دنیای اینترنت گذاشت، فرض بر این بود که این زبان تنها برای نمایش متن و عکس به وجود آمده است. عملا در آن زمان، کسی حتی فکر آن را نمی کرد که روزی برسد که اینترنت به خانه های صدها میلیون آدم و بر روی کامپیوترهای شخصی نفوذ کند.

HTML زبانی بود که بسیاری از موارد پیشرفته در طراحی در آن لحاظ نشده بود. به علاوه اینکه این زبان قابلیت تغییر، کاربر پسندی و بسیاری دیگر از مباحثی که در دنیای برنامه نویسی و طراحی با گذشت زمان به وجود آمده اند را در خود جای نداده است.

CSS چیست؟

CSS یا Cascade Style Sheets زبان برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب یا W3C برای غلبه بر مشکلاتی که در طی زمان با استفاده از HTML به وجود آمده است پیشنهاد داده است. عملا این زبان برنامه نویسی، مکملی بر زبان باستانی HTML است و سعی در پر کردن نقاط ضعف و خلاء های آن دارد.

CSS زبانی است که توسط آن قادر خواهید بود تا استیل طراحی صفحات وب سایت تان را یکبار تعریف و به صفحات مورد نیازتان اعمال نمایید.

برای این منظور مثالی را می زنیم. تصور کنید که سایت شما شامل 100 صفحه استاتیک می باشد و شما آنها را تماما به زبان HTML نوشته اید. بعد از یک هفته تصمیم گرفته اید تا فونت تمام کلمات را کمی بزرگتر کنید. گفتن اینکه فونت تمام کلمات بزرگتر شود بسیار کار راحتی است و تنها یک جمله است. ولی آیا در عمل تغییر 100 صفحه نیز به همان راحتی خواهد بود؟

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

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

تاریخچه پیدایش CSS

CSS توسط کنسرسیوم شبکه جهانی وب W3C در سال 1996 بنیانگذاری شد و هدف از ایجاد آن، تنها یک دلیل ساده بود:  HTML برای آرایش بندی و استایل دادن به اجزای صفحات وب و تگ ها، طراحی نشده بود. تنها می توانستید از آن برای نشانه گذاری صفحات وب استفاده کنید.

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

ارتباط میان HTML و CSS بسیار به یکدیگر گره خورده است. از آنجایی که HTML یک زبان نشانه گذاری بود و پایه و اساس ساخت صفحات وب را شامل می شد، این ارتباط ایجاد شد. استفاده از CSS از نظر فنی یک اجبار نیست اما برای ایجاد صفحاتی که خام نباشند ضروری است.

CSS زبانی می باشد که برای چگونگی نشان دادن (ظاهر و فرمت) اجزای تشکیل دهنده یک متن، صفحه یا سند استفاده می شود. این زبان، زبانی است که از آن برای آرایش صفحات سایت هایی که بر پایه HTML و XHTML هستند، استفاده می شود و همچنین از آن می توان برای آراستن مستندات دیگری که در قالب XML هستند استفاده کرد نظیر XML، SVG، XUL.

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

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

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

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

مالکیت معنوی CSS توسط کنسرسیوم شبکه جهانی وب (W3C) حفاظت و نگهداری می شود.

پیدایش CSS در سال 1994

با بزرگتر شدن حیطه استفاده از HTML، کمبودهایی در این زبان احساس می شد که ناشی از قدیمی بودن تکنولوژی مورد استفاده در HTML بود.

بسیاری از مشکلات در روزهای آغازین ظهور HTML در نظر گرفته نشده بودند و کسی حتی فکر آن را هم نمی کرد که روزی HTML می تواند به این گستردگی مورد استفاده قرار گیرد. پیشرفت مرورگرها و پیدایش نسخه ها و نام های گوناگونی از آنها نیز به این مشکلات دامن زده بود.

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

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

در سال 1994 کنسرسیوم شبکه جهانی وب، جلسه ای را تشکیل داد که طی آن مقرر شد تا نهادی برای بررسی این کاستی ها دست به کار شود و سیستم واحدی را برای رفع کاستی های فعلی و آتی در زبان HTML به وجود آورد.

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

تولد CSS در همان جایی که HTML متولد شد

CSS موضوعی است که شاید بخواهید پس از درک HTML آن را یاد بگیرید. CSS مخفف شیوه نامه های آبشاری است که Hakon Wium Lie در سال 1994 ایجاد کرد. Hakon Wium Lie به عنوان پدر CSS در نظر گرفته می شود. و زمانی که در مرکز تحقیقات فیزیک هسته ای سرن کار می کرد با پدر HTML تیم برنرز لی همکار بود.

CSS به عنوان زبان طراحی وب برای جذاب کردن آن ارائه شد. و این راه حلی بود که اکثر کاربران HTML در آن زمان به دنبال آن بودند. هنگامی که راه اندازی شد، کاربران می توانستند از HTML 4.01 و CSS با هم استفاده کنند تا صفحات وب خود را جذاب تر کنند.

از این رو، اگر می خواهید در مورد تاریخچه CSS از پیدایش آن تا کنون بدانید. سپس این مقاله ضروری را بخوانید زیرا چندین چیز دارد که به شما در درک CSS کمک می کند. همچنین متوجه خواهید شد که چگونه CSS بر دیگر زبان های سبک آن زمان پیروز شد.

CSS مخفف چیست؟

CSS عمدتا برای توسعه وب یا طراحی صفحات استفاده می شود. به شیوه نامه های آبشاری اشاره دارد که می توانند طرح بندی صفحه وب را با استفاده از بسیاری از ویژگی ها قالب بندی کنند.

می‌توانید متن را در CSS پررنگ کنید، به آن استایل دهید، اندازه جدول را مدیریت کنید، و سایر جنبه‌های صفحات وب را ویرایش کنید تا آنها را جذاب کنید. با استفاده از CSS کاربر می تواند ظاهری یکسان به وب سایت و صفحات متعدد آن بدهد. این نه تنها جدول را تعریف می کند بلکه سایر نیازهای طراحی وب سایت را نیز برآورده می کند.

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

به روز رسانی های صورت گرفته در CSS

همراه با HTML، CSS نیز توسط W3C استاندارد شده است که استانداردهای وب را تعریف می کند. CSS برای استفاده رایگان، مستقل است و همچنین یک استاندارد متن باز است. و کاربران می توانند از HTML و CSS همراه با W3C استفاده کنند.

اگر به تاریخچه CSS نگاهی بیندازیم، متوجه می شویم که عمدتا سه به روز رسانی را به خود دیده است. CSS سطح 1 در سال 1996 راه اندازی شد و دوباره در سال 1999 با برخی بهبودها روانه بازار شد. با این حال، CSS سطح 2 یا CSS2 در سال 1998 با پشتیبانی رسانه ای عرضه شد.

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

اگر نیاز به ایجاد برخی تغییرات اساسی در یک وب سایت بزرگ با صدها صفحه دارید. در حال حاضر CSS دارای بیش از 60 ماژول با ویژگی های مختلف است. در سال‌های اخیر، اکثر توسعه‌دهندگان و طراحان، مرورگرهای مختلفی را برای مشاهده تأثیرات CSS بر روی صفحات وب امتحان کرده‌اند. اما اکثر آنها فایرفاکس را به عنوان مفیدترین ابزار برای همان نیازهای خود در نظر گرفته اند.

تاریخچه نسخه های CSS

ما یک مقدمه کوتاه از تاریخچه CSS را ارائه کردیم و آموختیم که اساسا سه نسخه دارد. بنابراین، اکنون اجازه دهید این سه نسخه از CSS را با جزئیات بیشتری مورد بحث قرار دهیم.

CSS 1

CSS 1 اولین نسخه از شیوه نامه آبشاری و توصیه W3C است. در سال 1996 با قابلیت های ویژگی های فونت راه اندازی شد. همچنین برای افزودن رنگ به پس زمینه و رو زمینه متن استفاده می شود. در CSS 1، عملکردهای تراز متن وجود داشت. همچنین دارای قابلیت لایه بندی، موقعیت یابی و طبقه بندی عمومی بود. اما در حال حاضر، این نسخه قدیمی است و توسط W3C نگهداری نمی شود.

CSS2

W3C نسخه بعدی CSS را توسعه داد و نام آن را CSS2 گذاشت و آن را در سال 1998 راه اندازی کرد. این نسخه دارای ویژگی ها و عملکردهای بیشتری نسبت به نسخه قبلی است. و اکنون کاربران می توانند از ویژگی های جدید مانند موقعیت یابی نسبی، مطلق و همچنین ثابت استفاده کنند. انواع رسانه ها پشتیبانی می شد، و ویژگی های متن دو جهته نیز وجود داشت. این نسخه نیز شاهد اصلاحات بسیاری در همان زمان بود و به روز رسانی ها به صورت CSS2.1 ارائه شد.

CSS3

CSS3 آخرین نسخه CSS است که به طور رسمی توسط W3C ارائه داده شد و در سال 1999 راه اندازی شد. CSS3 مجموعه گسترده ای از انواع فونت ها را دارد و شما می توانید از هر نوع فونتی از Google و Typecast استفاده کنید. همچنین، این نسخه به ماژول های زیادی تقسیم شده است که کار با آن را آسان می کند و همچنین باعث صرفه جویی در زمان قالب بندی صفحات وب می شود. در حال حاضر، اکثر شرکت ها و سازمان ها از CSS3 و HTML5 برای کارهای توسعه وب و طراحی خود استفاده می کنند. بنابراین، اگر شما نیز مایل به یادگیری چنین مهارتی هستید، مطمئن شوید که آخرین نسخه از چنین فناوری هایی را یاد خواهید گرفت.

آینده CSS

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

مزایای CSS

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

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

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

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

در نتیجه این امکان به وجود آمد تا آن ها یک بار کلیه استایل ها را طراحی کنند و در صفحات HTML، با ارجاع به آن فایل، از استایل های داخل آن، استفاده کنند.

این کار باعث شد تا کدها و تگ های HTML تمیزتر شوند و کدهای HTML از کدهای CSS جدا شوند ضمن اینکه خواندن استایل ها و تغییرات روی آن ها، راحت شد.

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

CSS این امکان را فراهم کرد تا چند استایل بتوانند بر روی یک صفحه HTML استفاده شوند. چنین امکاناتی آزادی عمل زیادی را به طراحان وب می داد. استفاده از CSS این روزها بیشتر از اینکه یک ابزار مفید باشد، یک ضرورت است.

CSS چگونه کار می کند؟

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

به عنوان مثال یک کد HTML ساده را در نظر بگیرید:

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

چطور می توان برای این پاراگراف، استایلی را تعریف کرد؟ ساختار دستورات CSS کاملا ساده هستند. آن ها یک انتخابگر (سلکتور) و یک بلاک از استایل هستند. تگ ها ابتدا توسط سلکتورها پیدا می شوند و سپس استایل یا استایل های تعریف شده به آن ها اعمال می شود. استایل ها داخل بلاک ها می توانند مجموعه ای از یک یا چند استایل باشند که توسط سمیکالون (;) از یکدیگر جدا می شوند.

تعاریف هر استایل که توسط سمیکالون از یکدیگر جدا می شوند از یک اعلان (declaration) و یک مقدار تشکیل شده اند که با کالون (:) از یکدیگر جدا می شوند. هر بلاک استایل داخل یک آکولاد ({...}) قرار داده می شوند.

مثالی از یک استایل:

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

در کد زیر، کلیه المان هایی با تگ های p به صورت وسط چین و با فونت 16 پیکسل و به رنگ صورتی خواهند شد.

انواع CSS ها

سی اس اس ها از نظر استفاده و پیاده سازی می توانند به سه روش نوشته شوند: CSS های داخلی، CSS های خارجی و CSS های درونی. هرچند مبانی آن ها برای نوشتن تقریبا ثابت و یکسان است اما آن ها به گونه های متفاوتی می توانند نوشته شوند و هرکدام مزایای و معایب مخصوص به خود را دارند.

CSS های داخلی

CSS های داخلی، استایل هایی هستند که داخل خود صفحات وب (و نه در فایلی جداگانه) در میان کدهای HTML نوشته می شوند. این نوع از CSS با هر بار رفرش شدن مرورگر و یا باز شدن صفحه اینترنتی، از نو بارگذاری خواهند شد که می تواند سرعت بارگذاری را پایین آورد.

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

چنین صفحاتی می توانند به عنوان یک تک فایل بر روی تمام مرورگرها به درستی نمایش داده شوند.

CSS های خارجی

استایل هایی هستند که در فایل جداگانه ذخیره و نگهداری می شوند. این روش می تواند بهترین، بهینه ترین و مناسب ترین روش برای نوشتن استایل های صفحات وب باشد. فایل ها با پسوند css ذخیره سازی می شوند و در صفحات وب، بارگذاری خواهند. استفاده از این روش باعث بهبود زمان بارگذاری صفحات اینترنتی خواهد شد.

CSS های درونی

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

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

طریقه استفاده از کدهای CSS

پیش از ظهور CSS، تقریبا تمامی ویژگی های طراحی کدهای HTML صفحات سایت ها، درون خود تگ ها و کدهای HTML قرار داده می شدند.

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

CSS به طراحان این اجازه را داد تا اکثر اطلاعات را، به بخشی جداگانه که برای این منظور طراحی شده بود، منتقل کنند که منجر به افزایش چشمگیری در سادگی و خوانایی کدهای HTML شد.

سر تیترها (تگ های h1)، زیر تیترها (h2)، و غیره، به طور ساختاری با HTML تعریف می شوند. در نسخه چاپی و نسخه نمایشی، انتخاب فونت ها، رنگ ها، و غیره، می تواند کاملا متفاوت باشد.

CSS کار طراحان را راحت تر کرد!

پیش از ظهور CSS، طراحان صفحات اینترنتی، که می خواستند چنین مشخصه های تایپوگرافی را مثلا به تمام h2 ها اعمال کنند، مجبور بودند تا از تگ font و دیگر تگ ها که از تگ های HTML است برای تمام h2 استفاده کنند.

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

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

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

فایل های CSS، با استفاده از قوانین زیر، درون صفحات HTML قرار داده می شوند:

نحوه ارتباط CSS با HTML

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

حتی می توان CSS های کاملا متفاوتی را برای نسخه چاپی و نسخه نمایشی تهیه و استفاده کرد. برای مثال، نسخه نمایشی (آن چیزی که بر روی مرورگرها نشان داده می شود)، می تواند کاملا متفاوت از نسخه چاپی همان صفحه باشد به طوریکه طراحان می توانند با دقت بالاتری، نیازهای طراحی را در این دو محیط جداگانه، طراحی و پیاده سازی نمایند.

اولویت در منابع CSS

اولویت در منابع CSS (از بالاترین به پایین ترین):
CSS های نوشته شده توسط طراحان وب سایت:

• CSS های درون خطی: درون کدهای HTML صفحات، ویژگی های طراحی برای یک المان خاص، با استفاده از "style" مشخص می شوند.
  
  
• CSS های جاسازی درونی، بلوکی از کدهای CSS درون خود صفحه HTML
  
  
• CSS های خارجی، یعنی فایلی جداگانه از CSS که از صفحه HTML به آن ارجاع داده می شود.

CSS های کاربران:

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

CSS های پیش فرض:

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

استایلی که بیشترین اولویت را دارد، محتوای نشان داده شده را کنترل می کند. اولویت ها به ترتیبی است که در بالا توضیح داده شده اند. چنانچه استایلی با اولویت بالاتری پیدا نشود، اولویت پایین تر بررسی خواهد شد.

بسته به نوع مرورگر مورد استفاده، کاربر می تواند از یکی از CSS های ارائه شده توسط طراح استفاده نماید و یا آنکه تمامی آنها را حذف نماید و صفحه را با CSS های پیش فرض مرورگر مشاهده نماید و یا آنکه ممکن است بخواهد سرتیترهای قرمز رنگ ایتالیک را بدون تغییرات در دیگر استایل ها حذف نماید.

مثال ها:

برای مثال، فایلی به نام highlighheaders.css شامل محتویات زیر می باشد:

چنین فایلی به طور محلی ذخیره شده است و در صورت نیاز فراخوانی و استفاده شود و یا آنکه به صورت داخلی مورد استفاده قرار گیرد. "!important" به معنای غلبه کردن بر ویژگی های تعریف شده توسط طراح است (بحث اولویت).

قوانین CSS

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

بلوک های توصیف

بلوک توصیف، از تعدادی توصیف تشکیل شده است که همه آنها درون یک بلوک آکلاد ({}) قرار گرفته اند. هر توصیف به خودی خود، از یک مشخصه یا property، یک کالن (:)، و یک مقدار تشکیل شده است. چنانچه چندین توصیف در یک بلوک وجود داشته باشد، از سمی کالن (;)، برای جداسازی آنها استفاده می شود.

انتخاب کننده ها

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

المان ها ممکن است بسته به اینکه در صفحه، به چه نحوی نسبت به هم قرار گرفته اند، با یکدیگر منطبق شوند. ارتباط المان های والد و فرزند نیز در صفحات سایت ها می تواند به نوعی انطباق محسوب شود.

شبه کلاس ها

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

یکی از مرسوم ترین مثال ها در این مورد، شبه کلاس ها، کلاس :hover است که هنگامی که کاربر موس خود را روی المانی می برد، کلاس خاصی را به آن المان اعمال می کند.

این کلاس، به انتخاب کننده ای متصل می شود نظیر a:hover و یا #elementid:hover. به عنوان مثال های دیگر، می توان به شبه کلاس ها و شبه المان های :first-line و :visited یا :before اشاره کرد.

شبه کلاس ها، کل المان ها را انتخاب می کنند. به عنوان مثال، :link یا :visited ، در حالی که شبه المان ها عناصری را انتخاب می کنند که ممکن است از المان های ریزتری تشکیل شده باشند، نظیر :first-line یا :first-letter.

مثالی از انتخاب کننده ها

انتخاب کننده ها ممکن است به شکل های دیگری نیز با هم ترکیب شوند تا انعطاف پذیری بیشتری به دست آید، به ویژه در CSS 2.1.

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

نتیجه گیری و سخن پایانی

CSS برای استفاده در کنار زبان نشانه گذاری HTML به وجود آمد. از CSS ها برای آرایش و استایل صفحات وب استفاده می شود. CSS ها به سه طریق نوشته و پیاده سازی می شوند اما نوع خارجی آن ها مرسوم ترین حالتی است که از آن ها استفاده می شود.

استفاده از آن ها امروزه به یک ضرورت تبدیل شده است و تقریبا هیچ صفحه اینترنتی بدون وجود آن ها، برای استفاده کاربران مناسب نخواهد بود.

لینک های مفید برای مطالعه بیشتر:
CSS چیست؟
What is CSS?
Wikipedia: CSS
CSS آموزش

مقالات دیگر ما را نیز بخوانید:

• Html چیست؟
• پروتکل FTP چیست؟