آشنایی با زبان برنامه نویسی css
آشنایی با زبان برنامه نویسی css و کاربردهای آن
عبارت CSS که در همه جای طراحی سایت کاربرد دارد، مختصر شده از عبارت سه کلمه‌ای Cascading Style Sheets به معنی «برگه‌های سبک آبشار» یا «برگه‌های آبشاری» است.در ادامه با پورتال جامع مهندسین ایران همراه باشید.
آبشاری بودن برگه‌های CSS به این معنی است که استایل، کلاس یا هر چیزی که به یک برگه CSS داده شود، روی عناصر فرزند (Children) این برگه‌ها هم تاثیرگذار خواهد بود. به عنوان مثال اگر شما رنگ متن را در یک برگه CSS قرمز تعیین کنید، این به معنای قرمز بودن تمام سرنویس‌ها (هدینگ) و پاراگراف‌های متنی است که قرار است در این برگه CSS نوشته شود.
تاریخچه CSS
CSS هم مانند HTML برای اولین بار در مجموعه CERN متولد شد. اولین بار در تاریخ ۱۰ اکتبر سال ۱۹۹۴ بود که Hakon Wium Lie با همکاری «تیم برنرز لی» بحث CSS را وسط کشیدند. در همین زمان‌ها بود که چندین و چند زبان Style Sheet دیگر توسط افراد دیگر معرفی شدند و بحث‌های مختلفی که بین عموم افراد و همچنین در «کنسرسیوم وب جهان گستر» اتفاق افتاد، باعث شد تا در نهایت در سال ۱۹۹۶، زبان CSS به صورت رسمی معرفی شود.
برتری CSS نسبت به دیگر زبان‌های Style Sheet این بود که، شما می‌توانید با استایل یا ظاهر یک داکیومنت را با چندین برگه CSS طراحی کرده و تحت تاثیر قرار بدهید. بنابراین، CSS توانست تمام رقبا را کنار بزند و خود را در جایگاه زبان برتر استایل در کنار HTML قرار بدهد.
زبان سی اس اس صرفاً چهار / پنج سال پس از ابداع زبان اچ تی ام ال توسعه یافت و به مرور زمان که مرورگرهای بیشتری اقدام به پشتیبانی از آن کردند، در میان توسعه دهندگان جای خود را باز کرد و امروزه به عنوان بخش لاینفک دنیای وب شناخته می شود.
CSS چیست؟
CSS یک زبان برنامه نویسی ظاهری (Style Sheet Language) است که برای ارائه زیباتر و قابل فهم‌تر یک سند (Document) نوشته شده به زبان نشانه گذاری یاMarkup Language به کار برده میشود.
سی اس اس در کنار HTML قرار می‌گیرد تا هسته ایجاد یک وب سایت را به وجود بیاورند. برای طراحی سایت، استفاده از CSS بهترین و سریع‌ترین راه شکل و شمایل دادن و زیبا سازی و ایجاد حس مناسب برای یک وب سایت است.
برگه‌های CSS در واقع مسئولیت ایجاد ظاهر سایت را به عهده دارند و رنگ، اندازه و محل قرارگیری متن و دیگر تگ‌های HTML را تعیین می‌کنند. مسئولیت برگه‌های HTML با همکاری فیلدهای HTML کامل میشود. در واقع این فیلدهای HTML هستند که تعیین می‌کنند محتوای کدها چیست و هر کدام باید چگونه سازماندهی شوند.
کاربرد اصلی css چیست ؟
بیشترین استفاده‌ای که از این زبان در حال حاضر میشود مشخص کرد سبک صفحهٔ وب اچ‌تی‌ام‌ال و اکس‌اچ‌تی‌ام‌ال است ولی آن را می‌توان بر هر نوع مستند اکس‌ام‌ال از جمله اس‌وی‌جی و اکس‌یوال اعمال کرد. نگهداری و تغییر مشخصات سی‌اس‌اس به عهدهٔ کنسرسیوم وب جهانگستر است.
نسخه‌های مختلف CSS
نسخه‌های مختلفی دارد که به آن‌ها Level گفته میشود، هر کدام از این نسخه‌ها هم به تنهایی دارای نسخه‌های تکمیلی دیگر هستند که به آن‌ها Profile گفته میشود. طبیعتا هر نسخه CSS بر اساس نسخه دیگر توسعه پیدا کرده و در نسخه‌های جدید قابلیت‌های جدیدتری اضافه شده است. هر Profile در CSS هم برای توسعه این زبان Style Sheet به یک دستگاه یا منظور خاص طراحی شده است.
CSS 1
اولین نسخه CSS که توسط W3C به صورت رسمی به توسعه دهندگان وب پیشنهاد شد، CSS1 بود. این نسخه در تاریخ ۱۷ دسامبر سال ۱۹۹۶ به صورت رسمی در دسترس افراد قرار گرفت. فهرست زیر بازرترین ویژگی‌های CSS 1 هستند:
- امکانات مختلف برای فونت، مثل ایجاد سبک و تاکید
- تخصیص رنگ، پس زمینه و عناصر دیگر به متن
- تنظیم (Alignment) متن، تصاویر، جدول‌ها و دیگر عنصر صفحه وب
- ایجاد حاشیه (Margin)، مرزبندی (Border)، لایه گذاری (Padding) و جای گذاری اکثر اجزا صفحه
- شناسایی متمایز و کلاس‌بندی عمومی گروهی از ویژگی‌ها (attributes)
در حال حاضر W3C دیگر CSS 1 را پیشنهاد نمی‌کند.
CSS 2
این نسخه یا Level از CSS هم که دیگر از سوی W3C پیشنهاد نمی‌شود، شباهت‌های زیادی به نسخه اولیه داشت و در ماه مه سال ۱۹۹۸ معرفی شد. در این نسخه قابلیت‌های جدیدی مثل جایگذاری مطلق (Absolute)، وابسته (Relative) و ثابت (Fixed) در نظر گرفته شده بود. در این نسخه همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل (Media) و قابلیت‌های جدید برای طراحی متن ایجاد شده بود.
مدتی بعد CSS2.1 به عنوان اصلاحیه‌ای از CSS2 معرفی شد که پس از کش و قوس‌های فراوان بالاخره در سال ۲۰۱۱ به عنوان پیشنهاد W3C تاییدیه گرفت. این نسخه قرار بود آخرین اصلاحیه از CSS2 باشد اما در سال ۲۰۱۵ اصلاحیه CSS 2.2 هم در دستور کار قرار گرفت.
CSS 3
می‌توان گفت که CSS3 یک تحول بزرگ در تاریخچه CSS به همراه داشت. در این نسخه از CSS اسناد (Document) زیادی به وجود آمدن که به هر کدام از آن‌ها Module گفته می‌شد. در واقع CSS 2 یک مانند یک ویژگی بزرگ بود که تمام امکانات CSS را در بر می‌گرفت، اما در CSS 3 ماژول‌ها هستند که قابلیت‌ها و امکانات جدید را اضافه می‌کنند.
اولین بار در ماه ژوئن سال ۱۹۹۹ بود که نسخه CSS3 منتشر شد و در دسترس قرار گرفت. اما از آنجایی که CSS3 بر پایه ماژول‌ها بود، تا ژوئن ۲۰۱۲ بیش از پنجاه ماژول CSS شامل Media Queries، Namespace، Selector Level و Color از جانب تیمی که روی این زبان کار می‌کرد، منتشر شدند.
CSS 4
در واقع هیچ نسخه‌ای از ویژگی‌های متحد شده CSS4 وجود ندارد، زیرا این Level از CSS به ماژول‌های مختلف Level 4 تقسیم شده است.
بعد از CSS3 و با ورود مبحث Module به این زبان، دیگر توجیهی برای توسعه یکباره نسخه جدید CSS وجود نداشت. بنابراین، از نسخه CSS4 به بعد دیگر ماژول‌های Level 4 هر کدام به صورت جداگانه توسعه پیدا کردند و چیزی به نام CSS4 به صورت یکپارچه معرفی و پیشنهاد نشد. در واقع در این نسخه یا Level از CSS، بسیاری از ماژول‌ها همان ماژول‌های Level 3 بودند که از CSS 2.1 توسعه پیدا کرده بودند. در این میان تعدادی ماژول هم به عنوان ماژول‌های Level 4 توسعه پیدا کردند. از ماژول‌های Level 4 در CSS4 می‌توان به Image Values، مرزبندی و پس زمینه (Background & Borders) و Selector اشاره کرد.
کاربرد CSS
همانطور که در پاراگراف‌های ابتدایی مقاله اشاره کردیم، CSS به عنوان یک Style Sheet Languge، به وجود آمد تا کار طراح سایت را برای ایجاد فرمت ظاهری زیباتر، راحت‌تر کند. اگر با طراحی سایت آشنا باشید، می‌دانید که برای Style دادن به یک صفحه وب ۳ راه مختلف وجود دارد.
استفاده از inline style
در این روش شما با استایل دادن به تگ HTML، یک ویژگی را تنها به همان تگ اضافه می‌کنید:
<p style="color:red;">learn web design at lydaweb</p>
ایجاد استایل در HTML Header
با استفاده از این روش، شما یک استایل خاص را به کل صفحه HTML خود اضافه می‌کنید:
h1 {
color: red;
}
ایجاد استایل با فایل CSS
راحت‌ترین کار برای اینکه بتوانید به راحتی هر صفحه از وب سایت خودتان را به شکل دلخواه طراحی کنید و به راحتی تغییرات را روی آن اعمال کنید، استفاده از فایل‌های CSS است. فایل سی اس اس هم مانند فایل HTML یک فایل از نوع Plain text است که با پسوند .css ذخیره میشود.
body {
background-color: beige;
color: #۰۰۰۰۸۰;
}
h1 {
color: red;
}اگر بخواهید یک صفحه HTML را با استفاده از فایل CSS طراحی کنید و ظاهر آن را زیبا کنید، باید در HTML Head سایت خود با استفاده از تگ این کار را انجام بدهید.
<head>
<link rel="stylesheet" type="text/css" href="style.css" title="style">
</head>
سه روش برای اضافه کردن CSS به صفحه وجود دارد :
- CSS خارجی
- CSS داخلی
- سبک درون خطی
برای آسان کردن کار موتور های جستجو سعی کنید از انیمیشن های فلش و یا تگ های span بوسیله css ، کمتر استفاده کنید. با استفاده از css از دوباره نویسی کدهای HTML که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.
