آشنایی با زبان برنامه نویسی css
وقتی درباره طراحی وبسایت صحبت میشود، اولین سوال این است که HTML و CSS چیستند؟ CSS چه کارهایی را می‌توان با استفاده از آن انجام داد؟ کاربرد و ویژگی‌های CSS چیستند؟ صفحات HTML به تنهایی زیبایی خاصی ندارند، اما با استفاده از دستورالعمل‌ها و زبان‌های مختلفی که برای طراحی سایت وجود دارد، می‌توانید صفحه وبی پویا را ایجاد کرده و فرمت صفحه را تغییر دهید. یکی از این زبان‌ها CSS است که می‌تواند جلوه‌های زیبایی به وبسایت شما ببخشد.
css چیست؟
در ابتدا باید بدانید که CSS مخفف چیست؟ Cascading Style Sheet (CSS) به معنای ورقه سبک پیوسته است. زبان CSS یکی از زبان‌های برنامه نویسی است که برای طراحی صفحات وب و اعمال ویژگی‌های ظاهری به اسناد و اطلاعات وبسایت استفاده میشود. CSS یکی از ابزارهای رایج و محبوب برای طراحی صفحات وب است که به زبان HTML یا XHTML نوشته میشود و همچنین به خوبی با زبان‌های اسکریپت دیگری مانند plain XML، SVG و XUL سازگاری دارد. با استفاده از CSS در کدنویسی، می‌توانید استایل سایت را، از جمله رنگ، فونت، تصاویر پس‌زمینه و غیره، به صورت دلخواه تغییر دهید.
تاریخچه CSS
CSS همانند HTML برای اولین بار در مجموعه CERN متولد شد. در تاریخ ۱۰ اکتبر سال ۱۹۹۴، Hakon Wium Lie به همراه تیم برنرز لی به بحث و توسعه CSS پرداختند. در همان زمان‌ها، چندین زبان Style Sheet دیگر نیز توسط افراد دیگر معرفی شدند و بحث‌های مختلفی که بین عموم و همچنین در «کنسرسیوم وب جهانگستر» رخ داد، در نهایت منجر به رسمیت شناختن زبان CSS در سال ۱۹۹۶ شد.
برتری CSS نسبت به زبان‌های دیگر Style Sheet در این است که شما می‌توانید با استفاده از چندین برگه CSS، استایل یا ظاهر یک سند را طراحی کنید و آن را تحت تأثیر قرار دهید. به این ترتیب، CSS توانست رقبا را شکست داده و خود را به عنوان زبان برتر استایل در کنار HTML قرار دهد.
زبان CSS در حدود چهار یا پنج سال پس از ابداع زبان HTML توسعه یافت و با گذر زمان و پشتیبانی بیشتر مرورگرها، در میان توسعه‌دهندگان رواج یافت و امروزه به عنوان بخش لاینفک دنیای وب شناخته میشود.
هدف و کاربرد CSS چیست؟
هدف تولید CSS در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده‌اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ، سایز و نوع فونت است. این جداسازی باعث افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر در کنترل ویژگی‌های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت میشود.
برخی از کاربردهای CSS عبارتند از:
۱. تعیین ارتفاع و عرض عناصر.
۲. طراحی سایت رسپانسیو (صفحات واکنش‌پذیر به اندازه‌گیری صفحه).
۳. انتخاب پس‌زمینه برای عناصر.
۴. قرار دادن عناصر مختلف مانند متن یا عکس در مکان‌های مشخص.
۵. تنظیم چیدمان نوشته‌ها (چپ چین، راست چین و غیره).
۶. تعیین فاصله بین عناصر.
۷. تغییر فونت، رنگ و سایر ویژگی‌های نوشتاری.
۸. و غیره.
در ادامه، با ساختار کدهای CSS آشنا خواهید شد.
ساختار کدهای CSS
ساختار یک کد در CSS از دو قسمت تشکیل شده است: انتخاب کننده (Selector) و بلاک اعلان (Declaration).
انتخاب کننده (Selector):
برای اعمال استایل به بخشی از HTML، باید یک تگ را انتخاب کنید تا بتوانید کدهای CSS را روی آن اعمال کنید. انتخاب کننده می‌تواند یک پاراگراف، تصویر یا تیتر باشد. انتخاب کننده‌های CSS به چند دسته تقسیم می‌شوند:
۱. انتخاب کننده عنصر:
با استفاده از این انتخاب کننده می‌توانید یک تگ خاص را انتخاب کرده و تغییرات استایل را بر روی آن اعمال کنید. به عنوان مثال، می‌توانید تگ `<p>` را در یک صفحه وب انتخاب کرده و رنگ آن را به قرمز تغییر دهید.
۲. انتخاب کننده ID:
اگر بخواهید استایل‌های CSS بر روی گروهی از تگ‌ها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار، در کدهای HTML برای تگی که قصد تغییر استایل آن را دارید، یک ID تعریف کنید، سپس در قسمت CSS، آی‌دی مورد نظر را انتخاب و تغییرات را بر روی آن اعمال کنید. دستورات فقط بر روی یک ID خاص، که با علامت # در ابتدای آن مشخص میشود، اعمال می‌گردد.
۳. انتخاب کننده Class:
برای این کار، تمام تگ‌هایی که قصد دارید ظاهر یکسانی داشته باشند، را داخل یک کلاس تعریف کنید و همانند ID به قسمت CSS بروید و استایل مورد نظرتان را روی آن کلاس تعریف کنید. توجه داشته باشید که صفت کلاس با علامت “.” در ابتدای آن قابل تشخیص می‌باشد.
بلاک اعلان (Declaration):
با استفاده از بخش Declaration که در بین { … } قرار می‌گیرد، می‌توانید مشخص کنید که چه استایلی روی تگ‌های انتخاب شده اعمال شود. این بخش از دو قسمت “ویژگی” و “مقدار” تشکیل شده است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. به عنوان مثال، می‌توانید مشخص کنید تگ h1 به رنگ آبی باشد و یا سایز فونت آن برابر با ۱۴ پیکسل باشد.
نسخه‌های مختلف 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 یک زبان فرانت اند (Front End)
- CSS یکی از زبان‌های فرانت‌اند است. فرانت‌اند به مجموعه‌ای از فعالیت‌ها گفته میشود که بر روی ظاهر و گرافیک سایت تأثیر می‌گذارد و به طور مستقیم با عملکرد سایت در تعامل نیست. CSS همراه با HTML و JavaScript از جمله زبان‌هایی است که در فرانت‌اند به کار می‌روند.
چرا باید از CSS استفاده کنیم؟
اساسی‌ترین کاربرد CSS در زیباسازی و بهبود طراحی صفحات وب است. CSS نسبت به HTML بسیار منعطف‌تر است و به شما اجازه می‌دهد با کمترین نیاز به تغییرات در ساختار HTML، طراحی خود را به سرعت و با استایل دلخواهتان اعمال کنید. در ادامه این متن، به دلایل استفاده از کدهای CSS در صفحات وب می‌پردازیم.
مزایای CSS
استفاده از CSS دارای مزایای زیادی است. این مزایا عبارتند از:
- کدنویسی تمیزتر: با استفاده از CSS، می‌توانید کدهای تمیزتری بنویسید و ساختار بهتری را حفظ کنید.
- قابلیت استفاده مجدد: با CSS، می‌توانید یک قطعه کد را برای صفحات مختلف HTML استفاده کنید و در نتیجه زمان و تکرار در کدنویسی را صرفه‌جویی کنید.
- بهبود سئو (SEO): CSS به بهبود سئو سایت کمک می‌کند و به طور کلی SEO Friendly است. استفاده از کدهای CSS می‌تواند تأثیر مثبتی در زیبایی و دسترسی پذیری صفحات وب، پشتیبانی از صفحات وب در دستگاه‌ها و مرورگرهای مختلف و در نهایت بهبود تجربه کاربری داشته باشد.
- ویژگی‌های بیشتر: CSS نسبت به HTML ویژگی‌های بیشتری برای کار با اجزای صفحات فراهم می‌کند.
- بهبود سرعت وب سایت: استفاده از CSS می‌تواند بهبودی در سرعت بارگذاری صفحات وب و کاهش زمان لود آنها داشته باشد.
- جلوه‌های تصویری و انیمیشن: با CSS می‌توانید جلوه‌های تصویری و انیمیشنی جذاب را برای صفحات وب ایجاد کنید.
- نگه‌داری آسان کدها: استفاده از CSS باعث میشود کدها به صورت منظم‌تری سازماندهی شوند و نگه‌داری و تغییر آنها آسان‌تر شود.
- جلوگیری از کدنویسی کثیف و غیراصولی: با استفاده از CSS، از کدنویسی نامناسب و غیراصولی جلوگیری میشود.
معایب CSS
هرچند که CSS دارای مزایای فراوانی است، اما محدودیت‌ها و ضعف‌هایی نیز دارد. برخی از معایب CSS عبارتند از:
- ناتوانی در انتخاب والد: در CSS نمی‌توانید به صورت مستقیم والد یا عنصر بالاتر را انتخاب کنید، که این محدودیت بهبود کارایی در نمایش صفحات وب در مرورگرهای مختلف را فراهم می‌کند.
- نامگذاری نقش‌ها: در برخی مواقع، نامگذاری نقش‌ها در CSS و ارجاع به آنها ممکن است سختی‌ها و محدودیت‌هایی را به همراه داشتهبه طور کلی، CSS دارای محدودیت‌هایی است که شامل موارد زیر میشود:
- تفاوت در کارکرد در مرورگرهای مختلف: برخی از ویژگی‌ها و ساختارهای CSS ممکن است در مرورگرهای مختلف به صورت متفاوت عمل کنند، که این می‌تواند برنامه‌نویسان را با مشکلاتی مواجه کند.
- مسائل مرتبط با نامگذاری و انتخاب المان‌ها: در CSS نمی‌توان به سادگی عنصر والد یا المان‌های بالاتر را انتخاب کرد، که این می‌تواند در بعضی موارد منجر به کدنویسی پیچیده‌تر شود.
- دسترسی متن‌باز: زیرا CSS معمولاً به صورت متن باز است، این می‌تواند باعث شود که برنامه‌نویسان در معرض تغییرات ناخواسته قرار بگیرند که ممکن است تأثیری روی ظاهر کلی سایت داشته باشد.
به طور خلاصه، CSS با تمام مزایا و امکاناتی که ارائه می‌دهد، همچنین دارای محدودیت‌ها و ضعف‌هایی است که برنامه‌نویسان باید آنها را در نظر بگیرند و بهینه‌سازی‌های لازم را انجام دهند.
کاربرد استفاده از 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 که باعث کند شدن لود صفحه میشود جلوگیری میکنیم.
منظور از پشتیبانی مرورگرها از زبان css چیست ؟
به دلیل عدم توانایی تمامی مرورگرها در تجزیه کدهای CSS به درستی، تکنیکی به نام “CSS Hack” توسعه داده شده است که تأثیری روی مرورگرهای خاصی می‌گذارد و آنها را فیلتر می‌کند. این تکنیک باعث میشود بخش‌های خاصی از کدهای CSS در مرورگرهایی که به طور کامل آن را پشتیبانی نمی‌کنند، نمایش داده نشوند.
طراحان وب حرفه‌ای برخی از نسخه‌های مختلف CSS و همراهی با CSS Filter Hack را به کار می‌برند تا وبسایت خود را در هر مرورگر به طور کامل نمایش دهند. به دلیل اینکه بیشتر مرورگرهای قدیمی کدهای CSS را با سرعت پایین و کیفیت پایینی نمایش می‌دهند، تقریباً همه طراحان وب از CSS Filter استفاده می‌کنند تا مرورگر مربوطه از کدهایی که به درستی پشتیبانی نمی‌کند، چشم‌پوشی کند.
مرورگر مشهور Internet Explorer از نسخه ۳ خود پشتیبانی کامل از CSS را آغاز کرد و در هر نسخه پشتیبانی خود را بهبود بخشید. در سال ۲۰۰۸، نسخه آزمایشی Internet Explorer 8 پشتیبانی کامل خود را از CSS 2.1 با رعایت تمام استانداردهای آن اعلام کرد.
اکنون، با وجود اعلام پشتیبانی کامل اکثر مرورگرها از زبان CSS، طراحان وب هنوز با مشکلاتی در طراحی CSS مواجه می‌شوند. این مشکلات با انتشار نسخه‌های جدیدتر وب و طراحی سایت‌های Cross-browser، یعنی سازگار با چندین مرورگر، پیچیده‌تر شده است.
