CSS چیست؟
CSS مخفف عبارت Cascading Style Sheets، به‌معنی برگه‌های سبْک آبشاری است. منظور از سبک آبشاری این است که کدهایی که با CSS نوشته شوند، از بالا به پایین اجرا میشوند و هر تغییری که با استفاده از CSS در یک صفحه اعمال شود، روی دیگر اجزای زیر مجموعه آن هم اعمال خواهد شد. CSS یک زبان نشانه گذاری است و زبان برنامه نویسیزبان های برنامه نویسی چیست؟
این مقاله عالی توضیح داده که زبان های برنامه نویسی چیست؟ و انواع زبان های برنامه نویسی و بهترین زبان برنامه نویسی برای شروع و پردرآمدترین آنها را معرفی کرده نیست. CSS با هدف فرم دهی صفحات وب HTMLزبان html چیست؟ اچ تی ام ال (HTML) چیست و چه کاربردی دارد؟
این مقاله عالی به معرفی زبان html پرداخته سپس موارد چون : html چه کاربردی دارد؟ فایل html چیست؟ بررسی مزایا و معایب HTML، پرکاربرد ترین تگ های HTML پرداخته و اجزای مختلف صفحات آن توسط کنسرسیوم بین المللی شبکه جهانی وب یا W3C توسعه داده شده است.
تاریخچه CSS
CSSها از زمان پیدایش SGMLها در سال 1970 وجود داشته‌اند. از این تکنولوژی برای فرمت‌دهی و ظاهردهی به صفحات وب‌سایت‌ها استفاده می‌شد. با بزرگ‌تر شدن حیطه استفاده از HTML، کمبودهایی در این زبان احساس می‌شد که ناشی از قدیمی بودن تکنولوژی مورد استفاده در HTML بود. بسیاری از مشکلات در روزهای آغازین ظهور HTML در نظر گرفته نشده بودند و کسی حتی فکرش را نمی‌کرد که روزی HTML بتواند به این گستردگی مورد استفاده قرار بگیرد. پیشرفت مرورگرها و پیدایش نسخه‌ها و نام‌های گوناگونی از آنها نیز به این مشکلات دامن زده بود، به‌طوری که گاهی اوقات صفحاتی از سایتها در مرورگرهای مختلف، به شیوه‌های مختلف نمایش داده می‌شد. تا قبل از سال 1994، استاندارد خاص و واحدی برای دنیای اینترنت و صفحات سایتها در نظر گرفته نشده بود.
CSS چه کاربردی دارد؟
مهم‌ترین کاربرد CSS، روح بخشیدن به ساختار تگ‌های HTML است. با استفاده از CSS، ویژگی‌های ظاهری یک وبسایت از جمله رنگ متن، اندازه تصویر، محل قرارگیری المان‌ها و... را مشخص می‌کنیم تا به صفحاتی با ظاهر زیبا و قابل ارائه تبدیل شوند. با استفاده از کدهای CSS میتوان از نوشتن بسیاری از کدهای تکراری جلوگیری کرد که این موضوع باعث بالا رفتن سرعت بارگذاری سایت و همچنین بهبود سئو و رتبه‌بندی وبسایت در گوگل خواهد شد. علاوه بر این، CSS این امکان را به ما میدهد که برای ظاهر صفحات وب در نمایشگر دستگاه‌های مختلف، ویژگی‌های مختلفی در نظر بگیریم و صفحاتی با ویژگی ریسپانسیو (Responsive) یا واکنش‌گرا را ایجاد کنیم.
رابطه CSS و HTML
CSS و HTML همیشه کنار هم می‌آیند و میتوان گفت CSS کامل کننده‌ی زبان HTML است. زمانی که یک صفحه وب را فقط با کدهای HTML ایجاد می‌کنیم مانند ساختمانی است که اسکلت آن را ساخته‌ایم و از نظر زیبایی ظاهری، جلوه‌ی خاصی ندارد. با استفاده از کدهای CSS تعیین می‌کنیم که هر یک از عناصر موجود در HTML به چه شکلی در صفحه، نمایش داده شوند. به این ترتیب با استفاده از ویژگی‌هایی مانند رنگ، فونت و... به ساختار اصلی، جلوه می‌دهیم تا قالب وبسایت به بهترین و زیباترین شکل برای کاربران نمایش داده شود؛ به‌عنوان مثال برای تگ <p>www.konkurcomputer.ir</p>، کد CSS را به‌صورت زیر می‌نویسیم که ویژگی‌هایی مانند رنگ و اندازه فونت و... برای آن در نظر گرفته‌ایم. در تصویر زیر، تفاوت خروجی کد با استفاده از CSS و بدون استفاده از آن، قابل مشاهده است:
p {
color: blueviolet;
font-size: 40px;
font-style: italic;
}خروجی کد بدون استفاده از CSS:
خروجی کد با استفاده از CSS:
ساختار کدهای CSS
یک کد CSS از یک انتخابگر یا Selector و یک بلوک اعلان یا Declaration Block تشکیل میشود. انتخابگر به عنصر HTML که می‌خواهیم به آن استایل بدهیم اشاره میکند و بلوک اعلان شامل یک یا چند کد CSS مستقل برای Selector میشود که با نقطه ویرگول (;) از هم تفکیک میشوند، همچنین هر اعلان شامل نام صفتی از CSS یا Property و مقدار یا Value است که به Property اختصاص می‌یابد و با یک دو نقطه (:) از هم جدا میشوند.
نحوه ساختن فایل CSS
برای ایجاد و ویرایش هر فایلی، ابتدا به نرم‌افزار آن نیاز داریم. هر نرم‌افزاری که برای نوشتن کدهای HTML استفاده شود، میتوان از آن برای نوشتن کدهای CSS نیز استفاده کرد که ساده‌ترین نرم‌افزار NotePad در سیستم عاملسیستم عامل چیست به زبان ساده، چرا باید از OS استفاده کنیم؟
این مقاله عالی به معرفی سیستم عامل (Operating System|OS) به زبان ساده پرداخته، همچنین بررسی کرده که چرا باید از سیستم عامل استفاده کنیم ویندوز و TextEdit در سیستم عامل مک است. باید توجه داشت که پسوند فایل‌های CSS، به‌صورت css. است. در ادامه روش‌های فراخوانی فایل CSS به سند HTML را با هم مرور می‌کنیم.
روش های اضافه کردن CSS به صفحه ی HTML
سه روش برای اضافه کردن فایل CSS به سند HTML وجود دارد که عبارتند از:
Inline Style: یک CSS درون خطی برای اعمال یک سبک منحصر‌به‌فرد به یک عنصر HTML استفاده میشود، به‌همین منظور ویژگی Style به عنصر HTML موردنظر اضافه میشود. ویژگی Style میتواند شامل هر ویژگی CSS باشد. در مثال زیر رنگ متن عناصر <p>، با رنگ آبی نمایش داده میشود:
<p style="color:blue;">www.konkurcomputer.ir</p>Internal Style: یک CSS داخلی برای تعریف یک Style برای صفحه HTML استفاده میشود. به همین منظور در تگ <head> یک صفحه HTML، یک تگ <style> اضافه میشود تا کدهای CSS مورد نظر داخل آن نوشته شوند. در مثال زیر رنگ متن عناصر <p> با رنگ زرد و صفحه با رنگ پس زمینه "آبی آسمانی" نمایش داده میشوند:
<DOCTYPE html>
<html>
<head>
<style>
body {background-color: skyblue;}
p {color: yellow;}
</style>
</head>
<body>
<p>www.konkurcomputer.com</p>
</body>
</html>External Style: این روش، استایل دهی خارجی نام دارد که میتوان برای تطبیق چندین صفحه به‌طور همزمان نیز استفاده کرد. ابتدا یک فایل در یک ویرایشگر متنی با پسوند css. ایجاد و ذخیره می‌کنیم تا کدهای CSS را در آن بنویسیم، سپس برای اتصال آن به سند HTML دستور زیر را در تگ head می‌نویسیم. توجه شود که باید در قسمت href نام کامل فایل CSS را بنویسیم:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/style.css">
</html>ویژگی های CSS و کاربرد آنها
در جدول زیر، لیستی از مهم ترین ترین ویژگی های CSS و کاربرد آنها آورده شده است:
| Background | Border | Text | Layout |
|---|---|---|---|
| background-color رنگ پس زمینه | border-spacing فاصله بین خطوط کادر دور | color رنگ متن | width پهنا |
| background-image تصویر پس زمینه | border-color رنگ کادر دور | font-family نوع قلم | height ارتفاع |
| background تمام ویژگی‌های پس زمینه | border-width پهنای کادر دور | font-style مورب یا نرمال بودن متن | position محل قرارگیری شئ در صفحه |
| background-origin قرار دادن تصویر پس زمینه در موقیت خاص | border-style نوع کادر دور | text-align چپ چین، راست چین یا وسط چین بودن متن | margin فاصله بیرونی شئ با دیگر اشیاء |
| background-size اندازه پس زمینه | border-radius شعاع گوشه‌های کادر دور اشیاء | font-size اندازه قلم | padding فاصله داخلی شئ با کادر دور همان شئ |
| background-origin قرار دادن تصویر پس زمینه در موقعیت خاص | border-collapse ایجاد فاصله یا از بین بردن فاصله بین کادر دور اشیاء | text-shadow سایه متن | display نوع نمایش |
مزایای CSS
Enhances User Experience (تجربه کاربری را افزایش میدهد)
وقتی صفحات وب را فقط با استفاده از HTML می‌سازید، در نهایت از تجربه کاربری (UX) غافل می‌شوید. UX موثر، عامل مهمی است که تصمیم میگیرد آیا بازدیدکنندگان در وبسایت بمانند یا در آینده دوباره از آن بازدید کنند. با استفاده از CSS تجربیات کاربری را سفارشی می‌کنند، علاوه بر این، ویژگی‌های مهمی مانند انیمیشن‌ها (Animations) و انتقال‌ها (Transforms) را ارائه میدهد که باعث میشود کاربر را راضی کند.
Consistency (سازگاری)
مزیت چشمگیر CSS ثبات و یکپارچگی آن است؛ به این معنی که از انجام کار پرزحمت جلوگیری میکند. می‌توانید قالب‌بندی را به‌راحتی تغییر دهید؛ همچنین به‌روزرسانی تمام صفحات با استفاده از Style Sheet انجام میشود یعنی فقط در یک خط کد، تغییراتی ایجاد می‌کنید و Style در سراسر صفحات وب اعمال میشود؛ به این ترتیب، با چند خط کد، می‌توانید ظاهر کامل وبسایت خود را تغییر دهید.
Time-Efficient (زمان کارآمد)
از آنجایی که زمان و تلاش خود را برای تغییر قالب هر صفحه وب به‌صورت جداگانه تلف نمی‌کنید، می‌توانید در زمان خود صرفهجویی کنید. این امر باعث میشود زمان CSS کارآمد باشد و منجر به زمان توسعه سریع تر شود. علاوه بر این، اگر قالب‌بندی مشابهی میخواهید، می‌توانید CSS را در صفحات مختلف وبسایت تکرار کنید.
Improves Speed (سرعت را بهبود می بخشد)
منطق پشت بهبود سرعت وبسایت با استفاده از CSS بسیار ساده است. هرچه مقدار کد کمتر باشد، سرعت بارگذاری صفحه بیشتر میشود. این دقیقاً همان چیزی است که CSS به ما کمک میکند تا سرعت وبسایت خود را افزایش دهیم؛ همچنین، بهبود سرعت منجر به بهبود رتبه‌بندی موتورهای جستجو میشود. این یک وضعیت برد-برد است زیرا هم وبسایت بازدیدکنندگان بیشتری دارد و هم بازدیدکنندگان و کاربران تجربه بهتری خواهند داشت.
Easy Maintenance (نگهداری آسان)
توسعه وب با معرفی زبان‌هایی که بر عناصر اساسی تمرکز دارند، ساده شده است. استفاده از CSS به شما این امکان را میدهد که نه تنها توسعه را ساده کنید، بلکه نگهداری را نیز انجام دهید. نگهداری از یک صفحه شامل تمام سبک‌های قالب‌بندی است که بسیار آسانتر از مراقبت از هر صفحه به صورت جداگانه است.
Device Compatibility (سازگاری دستگاه)
اهمیت طراحی وب ریسپانسیو را نمیتوان دست‌کم گرفت، زیرا تضمین میکند که صفحات وب در دستگاهها و صفحه‌های مختلف به‌خوبی نمایش داده شوند. CSS سازگاری بهتر دستگاه را فراهم میکند بنابراین، بدون در نظر گرفتن نوع دستگاه (موبایل، لپ‌تاپ، دسکتاپ) و اندازه صفحه و وضوح صفحه که بازدیدکنندگان از آن استفاده می‌کنند، می‌توانید مطمئن باشید که می‌دانید وبسایت شما همان‌طور که تصور می‌کردید قابل مشاهده است.
SEO-Friendly (سئو دوستانه)
CSS به شما امکان می دهد فایل‌های خارجی را برای تعیین ویژگی‌های طراحی ایجاد کنید؛ به این ترتیب، می‌توانید کد HTML خود را کمتر شلوغ کنید. این به‌ویژه در مورد سئو مفید است؛ دلیل آن این است که موتورهای جستجو همه کدهای HTML را برای دریافت کدهای فهرست‌شده بررسی نمی‌کنند بنابراین، تمیز نگه داشتن کد در نهایت باعث بهبود رتبه‌بندی وب سایت در موتورهای جستجو میشود.
معایب CSS
Security Issues (مسائل امنیتی)
متن باز (Open Source)اوپن سورس یا متن باز چیست؟ اوپن سورس به چه معناست؟
اوپن سورس یا متن باز چیست؟ این صفحه عالی به بررسی این موارد و همچنین تاریخچه نرم افزار متن باز و نحوه به کارگیری متن باز در توسعه نرم افزار پرداخته است بودن با مزایا و معایبی همراه است. یکی از این نکات منفی، نگرانی‌های امنیتی است. هر کسی که دسترسی داشته باشد، میتواند تغییراتی در CSS ایجاد کند که میتواند قالب بندی وبسایت را مختل کند. CSS امنیت داخلی را فراهم نمی‌کند، در حالی‌که امروزه یک ویژگی ضروری است. از جمله آسیب‌پذیری‌های مرتبط با امنیت CSS میتوان به سرقت اطلاعات اشاره کرد.
Creates Confusion (ایجاد سردرگمی)
CSS در نسخههای زیادی عرضه میشود. به طور کلی، CSS2 ،CSS1 و CSS3 وجود دارد. هرکدام از این نسخه‌ها از نظر امکانات با دیگری متمایز هستند. این باعث سردرگمی میشود و مبتدیان و کاربرانی را که توسعه‌‌دهنده نیستند، بیشتر تحت تأثیر قرار میدهد.
Cross-Browser Issues (مشکلات بین مرورگرها)
هنگام توسعه وب‌سایت‌ها، توسعه‌دهندگان باید اطمینان حاصل کنند که کد با مرورگرهای مختلف سازگار است. حتی اگر معمولاً از مرورگرهایی مانند کروم، موزیلا، سافاری و فایرفاکس استفاده میشود، تضمین نمی‌کند که کاربران از همان مرورگر استفاده کنند؛ از این رو، آزمایش‌هایی برای بررسی سازگاری قبل از راه‌اندازی وبسایت انجام میشود. مشکلات مرورگر متقابل یکی از اشکالات CSS است که زمان زیادی را صرف میکند. اگر تست سازگاری به‌درستی انجام نشود، وبسایت به‌درستی در مرورگرهای دیگر اجرا نمی‌شود.
Differences in Display (تفاوت در نمایش)
داده‌های CSS بسته به نسخه مرورگر اینترنت تفسیر میشود. اگر بازدیدکنندگان از نسخه قدیمی استفاده کنند، نمی‌توانند طرح را به‌درستی ببینند. درعوض، آنها محتوا را همان‌طور که توسط مرورگرهایشان تفسیر شده است، می‌بینند. این امر بر تجربه کاربری تأثیر می‌گذارد و باعث میشود وبسایت برای آن دست از کاربرها کمتر مطلوب به‌نظر برسد.
آشنایی با نسخه های CSS
CSS1
اولین نسخه CSS برای تبدیل شدن به یک توصیه رسمی توسط کنسرسیوم بین‌المللی جهانی وب یا W3C، نسخه CSS1 است که در تاریخ ۱۷ دسامبر ۱۹۹۶ منتشر شده است و Håkon Wium Lie و Bert Bos به‌عنوان توسعه‌دهندگان اصلی شناخته شدند.
CSS2
مشخصات CSS2 توسط W3C توسعه داده شد و به‌عنوان یک توصیه در می 1998 منتشر شد. شامل یک ابر مجموعه از CSS1 و تعدادی قابلیت جدید مانند موقعیت مطلق، نسبی و ثابت عناصر و z-index، مفهوم انواع رسانه، پشتیبانی از شیوه‌نامه‌های شنیداری که بعداً با ماژول‌های گفتاری CSS3 جایگزین شدند می‌شد. امروزه W3C دیگر CSS2 را توصیه نمی‌کند.
CSS2.1
ویرایش 1، که اغلب به‌عنوان "CSS2.1" نامیده میشود، خطاهای CSS2 را برطرف میکند، ویژگی‌های پشتیبانی ضعیف را حذف میکند و پسوندهای مرورگر از قبل پیاده‌سازی شده را به مشخصات اضافه میکند. برای انطباق با فرآیند W3C حهت استانداردسازی مشخصات فنی، CSS2.1 برای سال‌ها بین وضعیت پیش‌نویس کاری و وضعیت پیشنهاد کاندید رفت و برگشت داشت. CSS2.1 برای اولین بار در 25 فوریه 2004 به یک توصیه نامزد تبدیل شد، اما در 13 ژوئن 2005 برای بررسی بیشتر به یک پیش‌نویس کاری برگردانده شد. در 19 ژوئیه 2007 به توصیه نامزد بازگشت و سپس دو بار در سال 2009 به‌روز شد. با این حال، بهدلیل تغییرات و شفاف‌سازی‌ها، مجدداً در 7 دسامبر 2010 به پیش‌نویس کاری آخرین تماس بازگشت. در نهایت CSS2.1 در 12 آوریل 2011 پس از بررسی توسط کمیته مشاوره W3C، در نهایت به‌عنوان یک توصیه W3C در 7 ژوئن 2011 منتشر شد.
CSS3
برخلاف CSS2 که یک مشخصات واحد بزرگ است که ویژگی‌های مختلف را تعریف میکند، CSS3 به چندین سند جداگانه به‌نام "ماژول" تقسیم میشود. هر ماژول قابلیت‌‌های جدیدی را اضافه میکند یا ویژگی‌های تعریف شده در CSS2 را گسترش میدهد و سازگاری با گذشته را حفظ میکند. کار بر روی سطح CSS3 تقریباً از زمان انتشار توصیه اصلی CSS2 آغاز شد. اولین پیش‌نویس‌های CSS3 در ژوئن 1999 منتشر شد.
جمع‌بندی
در این مقاله درباره CSS آموختیم و دانستیم که وجود آن در کنار HTML چگونه میتواند به زیبایی و بهبود صفحات وب کمک کند، پس اولین قدم برای یادگیری طراحی وبسایت، آموختن CSS و HTML است. به‌طور خلاصه میتوان گفت CSS برای کار در ارتباط با سایر زبان‌های نشانهگذاری، مانند HTML ایجاد شده است؛ از CSS برای سبک سازی یک صفحه و چیدمان المان‌های موجود در صفحه استفاده میشود. سه سبک برای پیاده سازی CSS وجود دارد، و شما می‌توانید از سبک خارجی برای تطبیق چندین صفحه به‌طور همزمان استفاده کنید. امروزه بدون دیدن نوعی پیاده سازی CSS راه دوری نخواهید رفت زیرا به اندازه خود زبان نشانهگذاری یک نیاز محسوب میشود. در پایان، امیدواریم این مقاله برای شما مفید بوده باشد.
CSS چیست؟ چرا باید از CSS استفاده کرد؟
CSS مخفف Cascading Style Sheet است و یک زبان نشانهگذاری است که برای تعریف سبک یک وبسایت همراه با HTML استفاده میشود. CSS زبانی است برای تعیین نحوه ارائه اسناد به کاربران، نحوه استایل دهی، چیدمان و غیره استفاده میشود. CSS بهمنظور امکان جداسازی محتوا و ارائه، از جمله طرح، رنگها و فونتها طراحی شده است. CSS برای اینکه به مرورگر وب بگوید یک وبسایت خاص چگونه باید باشد، استفاده میشود. نمیتوان از آن برای ایجاد عناصر صفحه جدید استفاده کرد، اما در عوض برای استایل دادن به عناصر HTML استفاده می شود.
CSS چه معایب و مزایایی دارد؟
استفاده از CSS باعث بهبود بخشیدن به سرعت وبسایت میشود؛ همچنین میتوان کدنویسی تمیزتری داشت و از نوشتن کدهای غیر اصولی جلوگیری کرد. امکان ساخت جلوههای تصویری جذاب را فراهم میکند و از یک قطعه کد CSS میتوان برای صفحات مختلف HTML استفاده کرد که این امر باعث صرفهجویی در زمان و بالا رفتن سرعت کدنویسی میشود. در کنار مزایای زیادی که دارد میتوان به محدودیتهایی از جمله مسائل امنیتی، بهدلیل منبع باز بودن CSS اشاره کرد که میتواند باعث دسترسی و انجام تغییرات توسط افراد دیگر شود؛ همچنین وجود نسخههای زیاد CSS ممکن است باعث سردرگمی برنامهنویسان مبتدی شود.
فایل CSS به چند روش برای فایل HTML فراخوانی میشود؟
سه روش برای اضافه کردن فایل CSS به سند HTML وجود دارد که عباتند از: روش درون خطی، روش داخلی و روش خارجی. روش خارجی عموماً راحتترین روش است زیرا همهی استایلها به صورت خارجی در یک فایل css. ذخیره میشوند و میتوان CSS را در هر صفحهای که میخواهید اعمال نمایید. سبک خارجی باعث میشود تا زمان بارگذاری، صفحات بهبود یابند.
CSS و HTML چه رابطهای دارند؟
CSS زبانی است که برای توصیف ارائه صفحات وب از جمله رنگها، طرحبندی و فونتها مورد استفاده قرار میگیرد و این امکان را به فرد میدهد تا ارائه صفحات را با انواع مختلف دستگاهها، مانند صفحه نمایش بزرگ، صفحه نمایش کوچک، یا چاپگر تطبیق دهد. CSS مستقل از HTML است و میتواند با هر زبان نشانهگذاری مبتنی بر XML استفاده شود. جداسازی HTML از CSS نگهداری سایتها، اشتراکگذاری شیوه نامهها در صفحات و تطبیق صفحات با محیطهای مختلف را آسانتر میکند.
