آنچه در این صفحه می‌خوانید
به طور کلی CSS ظاهر وبسایت را طراحی می‌کند. به وسیله‌ی کدهای CSS می‌توان رنگ و اندازه‌ی قلم، رنگ پس زمینه، جایگاه هر بخش و ... را مشخص نمود. اما تمام این کدهای CSS در کنار کدهای HTML معنی پیدا می‌کنند و به آن‌ها معنی می‌دهند.
چگونگی پیدایش و تعریف CSS
CSS مخفف عبارت «Cascading Style Sheet» می‌باشد که به عنوان زبانی برای به نمایش گذاشتن موارد مهمی در صفحه‌های وب به‌کار می‌رود که این موارد شامل رنگ‌ها، صفحه‌بندی، فونت و... می‌باشد. این زبان برای اولین بار توسط Håkon Wium Lie در سال 1994 طراحی شد. وی در آن زمان با Tim Berners-Lee خالق زبان HTML در سازمان اروپایی پژوهش‌های هسته‌ای (CERN) مشغول به کار بودند.
اکنون کمی با کاربرد این زبان آشنا می‌شویم...
با اینکه یادگیری کدهای CSS بسیار ساده است و از آن‌ها می‌توان به راحتی استفاده کرد ولی با ترکیب آن‌ها می‌توان تغییرات بزرگی را در ظاهر وبسایت ایجاد نمود.
کدهای CSS، متفاوت با کدهای HTML نوشته می‌شوند. ابتدا ویژگی مورد نظر را می‌نویسیم مثلاً رنگ (color) یا اندازه‌ی قلم (font-size) و دقیقاً بعد از آن از علامت نقل قول (:) را باید به این روش «:color» بکار برد. بعد از نقل‌قول نیز نوبت به آن می‌رسد که سلیقه به خرج دهیم و موردی را انتخاب کنیم که مناسب وبسایت ما است. به عنوان مثال رنگ قلم را آبی، سبز و یا هر رنگ دیگری می‌توان انتخاب کرد پس نام رنگ مورد نظر را پس از علامت نقل قول (:) می‌نویسیم (color:blue) و در آخر خط باید علامت (;) را به این طریق (;color:blue) بکار برد. این کدها را به چندین روش می‌توان نوشت که در ادامه با این روش‌ها بیشتر آشنا می‌شوید.
به 3 روش می‌توان کدهای CSS را اعمال کرد:
1- به صورت خطی (Inline CSS)
در این روش، کدهای CSS در هر تگ HTML به صورت مجزا اعمال می‌شود. این روش امروزه چندان کاربردی ندارد چراکه کدهای شما را بسیار شلوغ می‌کند و اعمال تغییرات در چندین صفحه و یا حتی کل صفحات وبسایت در این روش کار چندان ساده‌ای نیست.
علاوه بر آن، استفاده مکرر از Inline CSS و یا عدم استفاده از فایل CSS به صورت مجزا از HTML در یک صفحه وبسایت، موجب کاهش رنک Google Page Speed می‌شود.
نمونه‌ای از این روش کدنویسی در زیر مشاهده می‌شود:
<p style=”color: blue; font-size: 20px; background-color: yellow;”>HiSupport</p>
همانطور که در کد بالا مشاهده می‌کنید، کدهای CSS در خودِ تگ <p> قرار می‌گیرند. «;color:blue» رنگ نوشته را آبی می‌کند، «;font-size:20px» اندازه فونت 20 پیکسل را اعمال می‌کند و «;background-color:yellow» رنگ زرد را برای پس زمینه‌ی همان قسمت انتخاب می‌کند. در این روش کدها را با فاصله پشت سرهم البته با رعایت علامت (;) می‌نویسیم.
2- به صورت داخلی (Local CSS)
در این روش، کدهای CSS مربوط به کدهای HTML یک صفحه در همان صفحه نوشته می‌شوند با این تفاوت که تمام کدهای CSS در بین تگ<style></style> در بخش <head></head> قرار می‌گیرند و روش نوشتن آن‌ها کمی متفاوت با مورد قبلیست.
نمونه‌ای از این روش کدنویسی را در زیر مشاهده می‌کنید:
<head>
<style> p{ color: blue; font-size: 20px; background-color: yellow;}</style>
</head>
همانطور که مشاهده می‌کنید، کدهای CSS مربوط به تگ <p> بین علامت {کدهای CSS} نوشته می‌شوند. اینگونه در هرجای صفحه از تگ <p> استفاده شود، به صورت خودکار و بدون نیاز به اعمال تغییرات اضافی، متن‌های درون آن از ویژگی‌های تعریف شده در کد بالا تاثیر می‌گیرند.
3- به صورت خارجی (External CSS)
این روش یکی از بهترین روش‌هاییست که در نوشتن کدها به کدنویسان کمک می‌کند. فایل CSS همانند فایل html به عنوان متنی ساده نوشته و با پسوند .css ذخیره می‌شود. در نتیجه اینگونه فایل CSSای بهینه‌تر خواهیم داشت که از لحاظ SEO نیز بسیار مهم است.
در روش استفاده از External CSS، فایل html مورد نظر را با نوشتن کدی به فایل CSS مربوط به آن، آدرس می‌دهیم. جهت لینک دادن و اتصال فایل CSS به فایل HTML لازم است کد زیر را به بخش <head> هر فایل HTML قرار دهید:
<head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head>
که در این قسمت از کدنویسی، style.css نام فایل CSS شما به حساب می‌آید.
نمونه‌ای از روش کدنویسی بهینه External CSS را در زیر مشاهده می‌کنید. این کدها در فایل CSS نوشته می‌شوند:
p {
color: blue;
font-size: 20px;
background-color: yellow;
}
مزیت CSS
- موجب صرفه جویی در زمان می‌شود
در گذشته، تمامی کدهای CSS مختص هر تگ html را در فایل HTML و بین تگ <head></head> می‌نوشتند و به این طریق ظاهر وبسایت خود را تغییر می‌دادند ولی اکنون فایل CSS از فایل html مجزا شده و به این ترتیب کار کدنویسی بسیار راحت‌ترشده‌است. با این تحول عظیم دیگر لازم نیست برای ایجاد تغییری در صفحات وبسایت، کد مورد نظر را در تک تک صفحات html اعمال کرد بلکه با تغییر کد مورد نظر در تنها یک فایل CSS می‌توان تغییری کلی در تمام صفحات وبسایت به وجود آورد. با این کار، ساختار وبسایت (کدها و فایل HTML) از ظاهر آن (فایل CSS) به‌طور کلی جدا شده و تنها با نوشتن یک خط کد و آدرس دادن هر فایل html به فایل CSS می‌توان به سادگی تغییرات مورد نظر را ایجاد کرد.
- صفحه‌ی وبسایت سریع‌تر بارگذاری می‌شود
تعداد کدهایی که برای توسعه دادن هر وبسایت به کار می‌رود برای گوگل اهمیت زیادی دارد. با CSS می‌توان این کدها را به حداقل میزان رساند. اگر در هر صفحه نیاز به اعمال تغیراتی برای تگ‌های خاص دارید، لازم نیست برای هر کدام از آن‌ها کدهای CSS را اعمال نمایید و فقط با یک مرتبه نوشتن کدهای CSS در فایل مربوط به آن و آدرس دادن کدهای HTML به آن، تغییرات مورد نظر اعمال می‌شود. به این طریق حجم کدهای وبسایت خود را پایین آورده و در نتیجه وبسایت سریع‌تر بارگذاری می‌شود.
- وبسایت را واکنش‌گرا (Responsive) می‌کند
CSS وبسایت‌ها را به طریقی واکنش‌گرا (Responsive) می‌کند که در تمام دستگاه‌ها اعم از پرینتر، دسکتاپ، لپ تاپ، تبلت و موبایل به درستی قابل نمایش باشند. این مورد نیز از لحاظ سئو بسیار اهمیت دارد و حتی در صورت رعایت نکردن آن، نمره‌ی منفی برای رنک وبسایت در سرچ گوگل در نظر گرفته می‌شود. با نوشتن کدهای html یکسان و تنها با استفاده از کدهای واکنش‌گرا ساز CSS می‌توان وبسایت را در تمام این دستگاه‌ها به صورت مناسبی مشاهده کرد.
- استاندارد بودن کدهای CSS
امروزه اکثر Attributeهای HTML برای تغییر در ظاهر وبسایت منسوخ شده‌اند و وظیفه‌ی زیباسازی را به CSS واگذار کرده‌اند. پس لازم است به منظور ساختن ظاهری مناسب برای وبسایتمان تنها از کدهای CSS استفاده کنیم تا در آینده با ایجاد بروزرسانی‌های بعدی با هیچگونه مشکلی مواجه نشویم.
- بازدید از وبسایت‌ها به صورت آفلاین
CSS باعث کش (Cache) شدن وبسایت‌ها می‌شود و به ما کمک می‌کند تا حتی در صورت در دسترس نبودن وبسایتی، آن را به صورت آفلاین از طریق موتورهای جست‌وجو مشاهده کنیم. همچنین این امر به بارگذاری سریع‌تر و عملکرد بهتر وبسایت نیز کمک می‌کند و رنک آن را ارتقا می‌دهد.
در سال 1999 آخرین نسخه‌ی CSS یعنی همان CSS3 منتشر شد که تاکنون عموم مردم در حال استفاده از همین نسخه هستند. با وجود اینکه زمان زیادی از انتشار آخرین نسخه‌ی CSS می‌گذرد اما هنوز تعدادی از کدهای آن در برخی مرورگرها پشتیبانی نمی‌شود پس اگر به دنبال نسخه‌ی جدیدتر CSS یعنی CSS4 هستید باید بگوییم که تاکنون چیزی دراین مورد شنیده نشده و تا زمان پشتیبانی مرورگرها از تمام کدهای CSS3 نسخه‌ای جدید انتشار نخواهد شد.
