css چیست؟
در ابتدا باید بدانید که Css مخفف چیست؟ سی اس اس مخفف Cascading Style Sheet (CSS) است. زبان css یک زبان طراحی صفحات وب برای ایجاد و ساخت مشخصات ظاهری اسناد و اطلاعات وب سایت می باشد. css یکی از رایج ترین و محبوب ترین ابزارهای طراحی صفحات وب سایت نوشته شده توسط زبان HTML و یا XHTML می باشد و همچنین از زبان های اسکریپت دیگری مانند plain XML، SVG و XUL نیز به خوبی پشتیبانی می نماید.
در کدنویسی با استفاده از CSS می‌توانید استایل سایت مثل رنگ، فونت، تصاویر پس زمینه و … را بصورت دلخواه تغییر دهید.
هدف و کاربرد css چیست ؟
هدف از تولید css در واقع جداسازی اطلاعات محتوا (که توسط زبانی مانند HTML نوشته شده اند) از اطلاعات ظاهری مانند صفحه بندی، رنگ و سایز و نوع فونت می باشد. این جداسازی موجب افزایش سرعت در دسترسی به سایت، انعطاف پذیری بیشتر برای کنترل ویژگی های ظاهری، قابلیت طراحی چندین صفحه با یک فرمت یکسان و جلوگیری از پیچیدگی و انجام کارهای تکراری در طراحی وب سایت می گردد.
برخی از کاربردهای CSS عبارتند از:
- تعیین ارتفاع و عرض
- طراحی رسپانسیو صفحات
- انتخاب پس زمینه
- انتخاب محل قرار گرفتن یک عنصر مانند متن یا عکس و…
- تعیین چیدمان نوشته ها (چپ چین، راست چین و…)
- مشخص کردن میزان فاصله ی عناصر از همدیگر
- تغییر در نوع نوشتاری (فونت، رنگ و…)
در ادامه با ساختار کدهای CSS آشنا می شوید.
ساختار کدهای css
ساختار یک کد در Css از دو قسمت تشکیل شده است:
- انتخاب کننده (Selector)
- بلاک اعلان (Declaration)
Selector
در صورتی که بخواهید به بخشی از html استایل خاصی دهید باید یک تگ را انتخاب کنید تا بتوانید کدهای Css را روی آن اعمال کنید. عنصر انتخاب شده می‌تواند یک پاراگراف، یک تصویر و یا یک تیتر باشد. انتخاب کننده‌های سی اس اس به چند دسته تقسیم میشود:
انتخاب کننده عنصر:
با استفاده از این انتخاب کننده می‌توانید تگ خاصی را انتخاب و تغییرات استایل را بر روی آن اعمال کنید به طور مثال می‌توان تگ <p> در یک صفحه وب را انتخاب کرد و رنگ آن را به قرمز تغییر داد.
انتخاب کننده id :
اگر بخواهید استایل‌های CSS بر روی گروهی از تگ‌ها تعریف شود، باید از انتخاب کننده ID استفاده کنید. برای این کار باید در کدهای HTML برای تگی که قصد تغییر استایل آن را دارید یک ID تعریف کنید، سپس در بخش Css آیدی مورد نظر را انتخاب و تغیرات را بر روی آن اعمال می‌کنید.
دستورات فقط بر روی یک ID خاص که با با علامت # در ابتدای آن مشخص میشود اعمال می‌گردد.
انتخاب کننده Class :
برای این کار باید تمام تگ‌هایی را که قصد دارید ظاهر یکسانی داشته باشند را داخل یک کلاس تعریف کنید و همانند ID به بخش CSS رفته و استایل مد نظرتان را روی آن کلاس تعریف کنید. مد نظر داشته باشید صفت کلاس با “ . “ در ابتدای آن قابل تشخیص می‌باشد.
Declaration
با استفاده از این بخش که در بین {…} قرار می‌گیرد می‌توانید مشخص کنید چه استایلی روی تگ‌های انتخاب شده اعمال گردد. این بخش از دو قسمت “ویژگی” و “مقدار” تشکیل شده است که باید مشخص کنید عنصر انتخاب شده چه ویژگی و چه مقداری داشته باشد. به طور مثال مشخص کنید تگ h1 به رنگ آبی و یا سایز فونت برابر ۱۴ پیکسل باشد.
stylesheet چیست؟
یک stylesheet مجموعه ای از قوانین و کدهای css است که به مرورگر می گوید که چگونه tag HTML نمایش داده شود.
فایل css چیست؟css با ایجاد فایل css. همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف Rendering مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ، در زمان حالت شناسایی صدا ( برای مرورگرهای مبتنی بر قابلیت شناسایی صدا) و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید.
به شما پیشنهاد می شود برای کسب اطلاعات در حوزه تکنیک کد نویسی و کد نویسی یعنی چه مقاله ما را مطالعه نمایید.
اضافه کردن CSS به HTML
نحوه اتصال فایل css به فایلhtml به سه روش زیر انجام میشود:
- External CSS
- Internal CSS
- Inline CSS
External CSS
با استفاده از روش External CSS که پرکاربردترین روش استفاده از سی اس اس است می‌توانید با تغییر یک فایل که از قبل ایجاد شده، ظاهر یک سایت را تغییر دهید. محل قرارگیری کدهای css در روش خارجی به این شکل است که باید کدهای css را در یک فایل notepad بصورت مجزا نوشته و با پسوند .css ذخیره کنید. حال باید این فایل را با دستورات html به فایل اصلی متصل کنید. برای این کار می‌توانید داخل تگ <link> در بخش <head> فایلی که از قبل ایجاد کرده اید را معرفی کنید.
Internal CSS
Internal CSS زمانی استفاده میشود که یک صفحه از سایت باید استایل مشخصی داشته باشد. به این شکل در بخش <head> در تگ <style> تغییراتی که نیاز است را اعمال می‌کنید.
Inline CSS
نحوه استایل‌دهی کدهای html توسط کدهای css در روش Inline CSS زمانی مورد استفاده قرار می‌گیرد که بخواهید بر روی یک تگ خاص استایلی را اعمال کنید. در این روش تغییرات مستقیم بر روی همان تگ اعمال میشود و تاثیری بر روی تگ‌های خارجی ندارد.
نوع دستوری (Syntax) در زبان css چیست ؟
زبان css نحوی ساده ای دارد که از کلمات کلیدی انگلیسی آسانی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید. یک صفحه طراحی (Style Sheet) تشکیل شده از لیستی از قوانین (Rule) می باشد. هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد.
هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر ها توسط یک سمی کلون (;) از هم جدا می شوند.
انواع css
زبان CSS 1
اولین نسخه از css که توسط موسسه استاندارد سازی W3C نیز مورد تایید قرار گرفت، در دسامبر سال ۱۹۹۶ منتشر شد. این نسخه از CSS از قابلیت های زیر پشتیبانی می کرد :
- امکان تنظیم نمودن مشخصه های فونت مانند قابلیت Fontface و Emphasis
- امکان تغییر دادن رنگ متون، مشخص نمودن تصویر یا رنگ پس زمینه و سایر مشخصه های ظاهری.
- امکان تغییر سایر مشخصه های متون، مانند تنظیم نمودن فاصله بین کلمات، حروف و سطرها.
- هم تراز نمودن نوشته ها، تصاویر و جداول
- قابلیت اضافه نمودن حاشیه، کادر و لایه بندی صفحات
- امکان دسته بندی و نشانه گزاری مشخصه ها و امکانات وب سایت
قابل ذکر است که WC3 دیگر نسخه CSS 1 را توصیه نمی نماید.
زبان CSS 2
نسخه دوم css نیز در ماه می سال ۱۹۹۸ منتشر و به کاربران ارایه شد. این نسخه از سی اس ای دارای قابلیت های اضافه نسبت به نسخه قبلی بود. برخی از این امکانات شامل :
- قابلیت تنظیم جایگاه اجسام به صورت ثابت، متغیر و یا بسته به دیگر اجسام
- قابلیت z-index
- مفهوم انواع فایلهای چند رسانه ای
- پشتیبانی از طراحی Aural صفحات
- امکان تنظیم نمودن متن به صورت راست چین
- اضافه شدن قابلیت های تازه ای به نوشته ها مانند سایه بود.
این نسخه از زبان css نیز دیگر توسط W3C توصیه نمی گردد.
CSS 2.1
نسخه ۲.۱ CSS به دلیل برطرف نمودن تعداد زیادی از مشکلات CSS 2 منتشر و در اختیار کاربران قرار گرفت. این نسخه از CSS هنوز و با وجود منتشر شدن نسخه های جدیدتر به عنوان یکی از استانداردهای طراحی وب سایت توسط W3C مورد تایید و توصیه می گردد.
مزیت CSS3 چیست ؟
نسخه CSS3 بر خلاف نسخه های قبلی که تمامی تعاریف و امکانات در قالب یک نرم افزار مورد استفاده کاربر قرار می گرفت، دارای ساختاری ماژولار است. هر یک از ماژول ها، قابلیت های خاصی را به نرم افزار اضافه می نماید. این نسخه از CSS در ماه ژوئن سال ۱۹۹۹ منتشر گردید.
با بوجود آمدن ساختار ماژولار، امکانات مختلفی به تفکیک ماژول های مختلف قابل اضافه شدن به نرم افزار گردید. طبق آخرین اخبار، در ماه نوامبر سال ۲۰۱۱ بیش از ۵۰ نوع ماژول مختلف با امکانات ویژه ای توسط تیم طراحی css به کاربران ارایه شد.
برخی از ماژول ها امکاناتی مانند اضافه نمودن تصاویر ویژه به عنوان پس زمینه، محاسبه اطلاعات رسانه ای و قابلیت اضافه نمودن فرم های چند ستونی در صفحه بندی وب سایت می باشد.
زبان css 4
WC3 شروع به طراحی و تکمیل نسخه چهارم زبان css در ماه سپتامبر سال ۲۰۰۹ نمود، گرچه هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی کنند، اما پیشبینی می شود تا چندین آینده این نسخه از زبان css به عنوان یکی از رایج ترین ابزارهای طراحی با امکانات ویژه ای مورد استفاده قرار بگیرد.
مزایای سی اس اس چیست ؟
- سازگاری بیشتر در طراحی
- گزینه های قالب بندی بیشتر
- کد سبک
- بارگیری سریعتر
- بهینه سازی موتور جستجو
- دسترسی بهتر به کد
CSS یک زبان فرانت اند (Front End)
فرانت اند (Front End) به مجموعه ای از کارهایی گفته می شود که بر روی گرافیک و شکل ظاهری سایت تاثیر دارد و با عملکرد سایت کاری ندارد. از جمله زبان هایی که فرانت اند هستند می توان به CSS، HTML، JAVASCRIPT اشاره کرد.
منظور از پشتیبانی مرورگرها از زبان css چیست ؟
همه مرورگرهای قادر نیستند تا کد های CSS را به خوبی تجزیه (Parse) نمایند، به همین دلیل تکنیک کدنویسی خاصی به نام CSS HACK ایجاد گشته که مرورگرهای خاصی را فیلتر می نماید. این تکنیک مشخص می نماید که قسمت های مشخصی از کد های css در مرورگرهایی که پشتیبانی کاملی از آن ندارند، نمایش داده نشوند.
برخی از طراحان حرفه ای تر وب سایت از نسخه های مختلف زبان برنامه نویسی css به همرا CSS Filter Hack استفاده می نمایند تا وب سایت آن ها در هر مرورگری به صورت کامل نمایش داده شود. از آنجایی که اکثر مرورگرهای اولیه به کندی و با کیفیت خیلی پایینی کد های css را نمایش (Render) می دادند، تقریبا تمام طراحان وب سایت از CSS Filter ها استفاده می کردند تا مرورگر مربوطه از کدهایی که از آن به درستی پشتیبانی نمی کند، چشم پوشی نماید.
مرورگر معروف ie پشتیبانی از CSS را از نسخه ۳ خود آغاز نمود و در هر نسخه پشتیبانی خود را از آن کامل تر نمود. در سال ۲۰۰۸ نسخه آزمایشی Internet Explorer 8 پشتیبانی خود را از CSS 2.1 با رعایت تمامی استاندارد های آن اعلام کرد.
امروزه حتی با اینکه اکثر مرورگر ها پشتیبانی کامل خود را از زبان css اعلام نموده اند، طراحان وب سایت همچنان با مشکلاتی در طراحی CSS مواجه می گردند. این مشکلات با انتشار نسخه های جدیدتر در طراحی وب سایت های مناسب با چندین مرورگر (Cross-browser) پیچیده تر گشته است.
برخی از محدودیت های زبان css چیست ؟
کنترل ضعیف صفحه بندی های قابل انعطاف
گرچه نسخه جدید CSS 3 امکانات ویژه ای را برای صفحه بندی، فونت ها، رنگ ها، حاشیه ها و سایر قابلیت ها ارایه داده است اما همچنان دارای محدودیت هایی در زمینه طراحی صفحات وب از قبیل بلوک ها، حاشیه ها، سایز فرم ها و جای گزاری آن ها وجود دارد. این محدودیت ها باعث شده است تا برای طراحی صفحات پویای وب سایت مجبور به کد نویسی دستی در زبان css باشیم.
عدم امکان انتخاب گزینه های والد
متاسفانه در CSS امکان انتخاب گزینه های بالاتر یا والد (Parent) مربوط به عنصری خاص وجود ندارد. البته بااستفاده از شمای Selector های پیشرفته تری مانند Xpath می توان از قابلیت های پیشرفته تری در طراحی صفحات استفاده نمود. اما دلیل اصلی این موضوع که زبان css امکان انتخاب گزینه های والد را در خود قرار نداده است، افزایش کارایی در نمایش صفحات در مرورگر های مختلف می باشد.
محدودیت در کنترل فرم های عمودی
درحالی که کنترل و جایگذاری عناصر افقی به سادگی امکان پذیر است، مدیریت عناصر عمودی مانند عملیات ساده ای مانند تنظیم نمودن عنصری در وسط فرم به شدت پیچیده و زمان بر می باشد.
عدم وجود توضیحات لازم در زبان css
در حال حاضر هیچ گونه توضیحی حتی مختصر در مورد مقادیر قابلیت های موجود در زبان css وجود ندارد. توضیحاتی مانند : Margin-left : 10 – ۳em + 4px . چنین توضیحاتی به کاربر در شرایط مختلفی کمک می نماید، مانند زمانی که کاربر قصد محاسبه سایز ستون ها و ردیف های وب سایت خود را دارد. مرورگر مایکروسافت یعنی Internet Explorer در نسخه های ۵ تا ۷ خود، توضیحات مختصری را در این موارد گنجانده بود، اما در نسخه ۸ این مرورگر، توضیحات مذکور از آن حذف گردید و این شرکت علت حذف آن را، دلایل امنیتی بیان نموده است.
بروز مشکلاتی در ساخت ستون ها
با وجود امکانات بسیار در CSS 3 از جمله ماژول Column – count برای صفحه بندی وب سایت با ستون های متعدد و پیچیده، در برخی از اوقات این نمایش این ستون ها در نسخه های مختلف مرورگر و یا مانیتورهایی با سایز متفاوت با مشکل مواجه می شود.
سوالات متداول
webkit در css چیست؟
WebKit یک موتور طراحی است که به مرورگرهای وب اجازه ارائه صفحات وب را می دهد. Webkit موتور ارائه دهنده html / css است که در مرورگر Safari اپل و در Chrome Chrome استفاده می شود.
Scss چیست ؟
Scss پسوند نحوی CSS است. این بدان معنی است که هر شیوه نامه معتبر CSS یک پرونده SCSS معتبر با همان معنی است. علاوه بر این ، SCSS بیشتر هک های CSS و نحو اختصاصی فروشنده ، مانند فیلتر قدیمی IE را می فهمد.
فرمت فایل css چیست ؟
در پاسخ به این پرسش بایستی گفت فرمت فایل سی اس اس، css. می باشد.
معنی CSS
همونطور که در مقدمه خوندیم، کلمه CSS مخفف عبارت انگلیسی Cascading style sheets و به معنی صفحات استایل آبشاری هست. حالا چرا آبشاری؟ چون دستورات CSS اعمال شده به هرعنصر، بر فرزندان اون عنصر هم تاثیر دارن. این مسئله رو تو مقاله‌های آینده، بیشتر متوجه می‌شیم!
چه چیزهایی باید برای یادگیری کدهای CSS بدانید؟
می‌شه گفت که تنها پیش‌نیاز برای یادگیری مفاهیم CSS، تسلط مناسبی به HTML هست. مباحث زیر در بدو شروع، مهم‌ترین مباحث مورد نیاز شما برای یادگیری CSS هستن:
- تسلط به مبحث فرزند – پدر (parent-child)
- تسلط به مفهوم عنصر و صفت (element, attribute)
بنابراین قبل از آموزش CSS شما باید آموزش HTML رو دیده باشین. یادگیری HTML خیلی سخت نیست و در مدت کوتاهی می‌تونین به اون مسلط بشین. HTML زبانی هست که تمامی عناصر موجود در صفحات وب مثل جعبه های متن، دکمه ها و غیره توسط اون ساخته می‌شن و با ترکیب اون با کدهای CSS ظاهر صفحه شکل می‌گیره.
اگر درباره HTML اطلاعاتی ندارین مقاله html چیست و چه کاربردی دارد رو بخونین.
یک صفحه وب از اجزای زیر تشکیل شده:
- Content (محتوا) این بخش وب به وسیله کد های HTML ایجاد می‌شه.
- Presentation (نمایش) این بخش وب به وسیله کد های CSS ایجاد می‌شه.
- Behavior (رفتار) این بخش وب به وسیله JavaScript ایجاد می‌شه. آموزش JavaScript
CSS چیست؟
کدهای CSS دستوراتی هستن که توسط اون‌ها می‌تونیم تمامی خصوصیات ظاهری صفحه وبسایت رو تعیین کنیم. بنابراین شما توسط کدهای HTML، اسکلت صفحه وب سایت خودتون رو پیاده سازی می‌کنین و با کدهای CSS مشخص می‌کنین هر عنصر چه خصوصیات ظاهری‌ای باید داشته باشه. به اصطلاحی رنگش می‌کنید و کلی ویژگی دیگه بهش اضافه می‌کنید!
برای مثال، اگه یک طوطی رو، به عنوان صفحه وبسایت در نظر بگیریم، کدهای HTML و CSS اون به فرم زیر تعریف می‌شن!
یا مثلا به متن ساده زیر توجه کنین:
متن سمت چپ، با کمک کدهای CSS نوشته شده. اما در متن سمت راست، کدهای HTML بدون کد CSS رو مشاهده می‌کنیم.
چرا باید از کدهای CSS استفاده کنیم؟
کدهای CSS می‌تونن تو بسیاری از کارهای تکراری، زمان طراحی و حجم کدهای سایت صرفه‌جویی کنن.
خوبه که بدونین گوگل در رتبه بندی وبسایتها یعنی همون سئو، سرعت بارگذاری سایت و کیفیت کدها رو هم مدنظر قرار می‌ده و وب سایت‌هایی رو که سرعت بارگذاری اون‌ها مناسب نباشه، کمتر به جستجو کنندگان معرفی می‌کنه.
نکته: در گذشته طراحی سایت و چیدمان عناصر صفحات وب، از طریق جدول انجام می‌گرفت. جداول مشکلات زیادی داشتن و به این خاطر با ظهور CSS کاملا منسوخ شدن. از جمله مشکلات جداول می‌توان به حجم بالای پردازش آنها توسط مرورگر و در نتیجه کاهش سرعت اشاره کرد. این ویژگی منفی وب‌سایت‌هایی است که با جدول پیاده سازی می‌شدن.
در مقابل در وب‌سایتی که با کدهای CSS پیاده‌سازی بشه، عناصر یکی بعد از دیگری در هنگام بارگزاری بر روی صفحه پدیدار می‌شن و کاربر از لحظه درخواست می‌تونه مشغول مطالعه و مشاهده وبسایت تا زمانی که بارگزاری کامل بشه، باشه.
همچنین ناگفته نمونه که CSS در ۹۰٪ از مرورگرها، می‌تونه به خوبی عمل کنه.
ساختار نحوی کدهای CSS
تو این بخش ساختار کدهای CSS رو یاد خواهید گرفت. در حال حاضر نیازی به درک نوع استایل اعمال شده نیست چرا که بخش‌های بعدی به طور مفصل انواع استایل های عناصر رو آموزش خواهیم داد. بنابراین فقط به بخش های مورد استفاده در یک دستور CSS، نحوه جدا کردن دستورات ، جایگاه دستورات و بطور کلی ساختار دستور دقت کنید.
ساختار نحوی کدهای CSS
Selector : این بخش نام عنصر HTML است که می‌خوایم استایل مورد نظر رو به اون اختصاص بدیم.
Declaration : بخشی که در میان علامت {} نوشته می شود، بخش اعلان نام دارد و در این قسمت شما باید نام خاصیت مورد نظر که می خواهید اعمال شود و مقدار آن را تعیین کنید. در این مثال خاصیت رنگ برابر با مقدار آبی است و خاصیت سایز فونت برابر با مقدار 12 پیکسل است.
برای مطالعه تکمیلی و مثال های بیشتر در مورد ساختار نحوی کد های CSS، می‌تونین مقاله ساختمان کد در CSS رو مطالعه کنین.
id و Class در CSS
همونطور که در بخش ساختار نحوی دستورات مشاهده کردین، تو بخش Selector عنصری رو که می‌خوایم استایل روی اون اعمال بشه رو ذکر می‌کنیم.
حالا اگه بخوایم دستورات استایل مورد نظر فقط روی یک عنصر در صفحه وب و یا فقط گروهی از عناصر مورد نظر ما اعمال بشه باید از id و Class استفاده کنیم.
اعمال دستورات فقط بر روی یک عنصر واحد توسط id
برای این منظور اول باید به کدهای HTML رفته و برای عنصر مورد نظر صفت id رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector، صفت id که برای عنصر مورد نظر تعریف کردیم رو نوشته و یک نماد “#” قبل از اون اضافه کنیم.
مثلا اگه بخوایم دستورات فقط بر روی یک پاراگراف خاص اعمال بشن، ابتدا برای اون پاراگراف یک صفت id در کدهای HTML تعریف می‌کنیم:
<p id=”para1″>This is a Paragraph.<p>
سپس در دستورات CSS در بخش Selector مقدار صفت id تعریف شده را همراه با یک علامت “#” می نویسیم:
#para1 {
text-align:center;
color:red;
}
اعمال دستورات بر روی یک گروه از عناصر توسط Class
برای این منظور اول باید به کدهای HTML رفته و برای همه عناصری که می‌خوایم خاصیت‌های ظاهری یکسان داشته باشن صفت Class رو تعریف کنیم. سپس به بخش دستورات CSS رفته و در بخش Selector ، صفت Class که برای عناصر مورد نظر تعریف کردیم رو نوشته و یک نماد “.” قبل از اون اضافه کنیم.
مثلا اگه بخوایم دستورات بر روی تعدادی پاراگراف مورد نظر ما اعمال بشن، ابتدا برای اون دسته از پاراگراف‌ها یک صفت Class مشترک در کدهای HTML تعریف می‌کنیم:
<p class=”center”>This is a Paragraph.</p>
سپس در دستورات CSS در بخش Selector مقدار صفت Class تعریف شده را همراه با یک علامت “.” یا همان نقطه می‌نویسیم:
.center {
text-align:center;
}
بدین ترتیب این دستورات فقط بر روی پاراگراف هایی اعمال می‌شن که دارای Class برابر با Center هستن و سایر پاراگراف‌های موجود در صفحه از این دستورات تاثیرپذیر نیستن.
در مورد کلاس ها و آیدی ها، مطالب تکمیلی رو تو مقاله کلاس ها و آیدی ها مطالعه کنین.
کدهای CSS را کجا بنویسیم؟
این کد ها رو می‌تونیم داخل هر ویرایشگر کدی بنویسیم، که پیشنهاد ما به شما برای شروع، ویرایشگر هایی مثل brackets، sublime text و notepad هستن.
برای نوشتن کدهای CSS و اتصال اون ها به HTML، سه روش وجود داره:
- External Style Sheet : اتصال خارجی
- Internal Style Sheet : اتصال داخلی
- Inline Style : اتصال درون خطی
External style sheet یا اتصال خارجی
استایل های خارجی فایل هایی با فرمت css هستن که بوسیله تگ <link> در صفحه وب قرار گرفته اند و بهترین راه برای تغییر دادن ظاهر یک وب سایت که از صفحات زیادی درست شده هستن.
کد های موجود در اون فایل ها، شکلی شبیه به زیر رو دارن:
hr {
color: sienna;
}
p {
margin-left:20px;
}
body {
background-image:url(“images/back40.gif”);
}
درمورد این روش، تو مقاله روش اتصال خارجی کامل تر یاد می‌گیریم.
Internal Style Sheet یا اتصال داخلی
نحوه نوشتن این استایل ها مثل استایل خارجی هست ولی تنها فرق اون اینه که به جای تگ <link> از تگ <style> استفاده می کنیم.
کد زیر یک نمونه از استایل خارجی هست.
<head>
<style type=”text/css”>
hr {
color: sienna;
}
p {
margin-left:20px;
}
body {
background-image:url(“images/back40.gif”);
}
</style>
</head>
درمورد این روش، تو مقاله روش اتصال داخلی می‌تونیم کامل تر یاد بگیریم.
inline style یا اتصال درون خطی
با استفاده از این روش بسیاری از مزیت ها و ویژگی هایی که دستورات CSS بخاطر اون‌ها به وجود اومده رو از دست میدین. چرا که برای هر عنصر باید دستورات مختص اون رو بنویسین و واضحه که برای تغییر باید به تک تک عناصر مراجعه کرده و اون‌ها رو تغییر بدین که بسیار زمانبر و گاهی همراه با خطا خواهد بود.
برای استفاده از این روش باید به عنصر مورد نظر صفت style را افزوده و بعد خاصیت ها و مقدار ها رو به این صفت اضافه کنین. تو مثال زیر از همین روش برای تغییر رنگ متن پاراگراف استفاده می‌کنیم:
<p style=”color:yellow;”>This is a paragraph.</p>
درمورد این روش، تو مقاله اتصال درون خطی مفصل تر می‌خونیم.
اولویت تاثیرگذاری روش های اتصال کد CSS
به طور کلی، زمانی که یک کد CSS توسط هر سه روش برای یک عنصر HTML نوشته می‌شه، اولویت اجرای اون‌ها به صورت زیر است:
- استایل های درون خطی
- شیوه نامه های داخلی
- شیوه نامه های خارجی
پس دستورات CSS ای که به صورت درون خطی و تنها برای یک عنصر خاص نوشته می‌شه، باعث می‌شه دستورات CSS مربوط به اون عنصر که توسط روش اتصال داخلی که در تگ style نوشته شده و همچنین دستورات مربوطه در روش اتصال خارجی که با تگ link به صفحه فعلی متصل شده نادیده گرفته بشن.
نکته: چنانچه لینک اتصال یک فایل CSS خارجی بعد از دستورات CSS اتصال داخی در تگ head قرار داده بشن، در نهایت دستورات فایل CSS خارجی اعمال خواهند شد.
CSS چیست و در چه زمینه‌ای از CSS استفاده میشود؟
ممکن است وقتی با صفحات زیبا و مرتب یک وبسایت روبرو می‌شوید، کنجکاو شوید تا بدانید چنین صفحاتی چگونه ایجاد شده‌اند. قطعاً اجرای هر عنصر برای زیباسازی ظاهر سایت‌ها به زبان برنامه‌نویسی آن مربوط میشود.
چندین زبان برنامه‌نویسی تحت وب وجود دارد که یکی از آن زبان‌ها مسئولیت زیباسازی عناصر وبسایتها را بر عهده دارد؛ در واقع به آن زبان CSS گفته میشود. در این مطلب می‌خواهیم به‌صورت جامع به بررسی این زبان برنامه‌نویسی بپردازیم و ببینیم که حقیقتاً CSS چیست و چه کاربردهایی دارد. اگر شما هم به برنامه‌نویسی و ایجاد وبسایت علاقه‌مند هستید، این مطلب را از دست ندهید.
CSS چیست؟
قبل از هر چیز لازم است بدانیم که مخفف CSS چیست؛ اگر حروف ابتدای عبارت «Cascading Style Sheets» را کنار هم قرار دهیم، نشان CSS ایجاد خواهد شد که به معنای «صفحات استایل آبشاری» است. به سی‌اس‌اس، استایل آبشاری می‌گویند، چون اگر کدهای آن بر روی یک عنصر اعمال شود، آن کد بر روی دیگر فرزندان و زیرمجموعه‌های آن عنصر نیز اعمال میشود.
بنابراین اگر یک برنامه‌نویس قصد داشته باشد تا تمام کادرهای موجود در صفحه خود را با استایل خاصی نمایش دهد، تنها با قرار دادن یک کد سی‌اس‌اس در ابتدای دستور کادرها، استایل موردنظر بر تمام کادرهای موجود در صفحه تأثیر می‌گذارد.
قطعاً بازدید از یک خانه‌ی زیبا بسیار لذتبخش‌تر از بازدید از یک خانه‌ی قدیمی با دکوراسیون کهنه و زشت است. این امر در دنیای وب نیز صدق می‌کند و به همین دلیل، همگی ما بازدید از وبسایت‌های زیبا را به وبسایت‌های ساده و خشک ترجیح می‌دهیم.
اگر می‌خواهید بدانید CSS چیست، در نظر داشته باشید که CSS دقیقاً در نقش یک دکوراسیون زیبا برای خانه‌ها عمل می‌کند. در واقع CSS عامل اصلی زیباسازی یک وبسایت است.
چرا استفاده از Css اهمیت دارد؟
دنیای برنامه‌نویسی را اگر به پیکر یک انسان تشبیه کنیم، Css پوست، گوشت و البته لباس‌های یک انسان خواهد بود. انسان بدون داشتن گوشت و استخوان، تنها یک اسکلت خالی است. یک وبسایت هم بدون Css تنها بدنه‌ای خالی است که یک مشت نوشته و خط آن را پر کرده‌اند.
به کمک سی‌اس‌اس است که می‌توان پوست و گوشت را به اسکلت سایت بخشید و البته یک کت‌وشلوار شیک هم به آن اضافه کرد! در نظر داشته باشید که یک وبسایت هرچقدر هم هسته قدرتمندی داشته باشد، با سرعت بالا بارگذاری شود و مطالب کاربردی و مفیدی در آن وجود داشته باشد، بدون وجود Css هیچکس حوصله‌ی بازدید از آن را نخواهد داشت.
پس هر برنامه‌نویسی که در زمینه‌ی طراحی وبسایت فعالیت می‌کند، باید بر این زبان نیز تسلط کامل داشته باشد.
برای یادگیری Css از کجا شروع کنیم؟
اگر شما یک فرد مبتدی هستید و هنوز فعالیت حرفه‌ای خود در زمینه طراحی وب را آغاز نکرده‌اید، نمی‌توانید آموزش خود را با Css آغاز کنید، چراکه فراگیری این زبان، یک پیش‌نیاز مهم دارد. اگر بخواهیم کل عملکرد یک وبسایت را طبقه‌بندی کرده و زبان‌های موردنیاز برای اجرای آن را نام ببریم، طبقه‌بندی ما به شکل زیر خواهد بود:
- محتوا «Content»
هر وبسایت با منظور ارائه‌ی یک سری محتوا و اطلاعات خاص ایجاد میشود. برای مثال، کسی که یک وبسایت خبری دارد، محتوای خبری خود را در سایتش منتشر می‌کند؛ همچنین وبسایت‌های آموزشی، سرگرمی و …. نیز بسته به موضوع خاصی که دارند، محتوای متفاوتی را بر روی وبسایت خود بارگذاری می‌کنند. این محتوا به کمک کدهای زبان برنامه‌نویسی تحت وب اچ‌تی‌ام‌ال یا HTML ایجاد می‌شوند.
- نمایش «Presentation»
گفتیم که محتوای یک سایت هرچقدر هم که خوب باشد، اگر ظاهر و استایل مناسبی نداشته باشد، هیچکس دوست ندارد تا محتوای خشک آن را مطالعه کند. پس دومین مرحله و دومین بخش طراحی سایت به نمایش زیبای آن مربوط میشود که این وظیفه برعهده‌ی کدهای زبان برنامه‌نویسی تحت وب Css ایجاد خواهد شد.
- رفتار «Behavior»
برخی از وبسایتها تنها محتوای خود را به کاربران نشان می‌دهند، اما اکثریت سایت‌ها امکان تعامل کاربر با صفحات خود را ایجاد می‌کنند؛ برای مثال، شما پس از خواندن یک مطلب می‌توانید نظر خود را درباره آن بنویسید یا در سایت موردعلاقه خود عضو شوید. این تعامل به همراه سایر رفتارهای فراتر از متن یک وبسایت به کمک زبان برنامه‌نویسی تحت وب جاوا اسکریپت یا JavaScript ایجاد میشود.
با توجه به توضیحاتی که عنوان شد، فراگیری زبان HTML قبل از فراگیری Css قرار دارد. بنابراین بهتر است قبل از اینکه بدانید CSS چیست و چگونه می‌توان کدهای آن را اجرا کرد، باید با شیوه اجرای کدهای اچ‌تی‌ام‌ال آشنایی پیدا کنید.
ویژگیهای برتر Css کدامند؟
در تعریف css به خاصیت آبشاری این زبان اشاره کردیم؛ بنابراین اصلی‌ترین ویژگی سی‌اس‌اس را می‌توان اجرای همه‌جانبه‌ی آن بر روی تمام عناصر موجود در صفحه را در نظر گرفت. دیگر ویژگیهای این زبان به قرار زیر هستند:
- Css یک زبان فرانت‌اِند (Front End) است
هر تکنولوژی که بتواند روی گرافیک و ظاهر وبسایتها تاثیر بگذرد بدون اینکه در عملکرد آن خلل ایجاد کند، تحت تکنولوژی فرانت‌اِند اجرا میشود که css یکی از زبان‌هایی است که از این قابلیت پشتیبانی می‌کند. - امکان ایجاد جلوه‌های جذاب برای وبسایتها
سی‌اس‌اس به برنامه‌نویسان کمک می‌کند تا جلوه‌های تصویری و انیمیشن‌های جذابی به صفحات خود اضافه کنند. حتی برخی از دستورات این زبان می‌توانند کل ساختار یک صفحه را دچار دگرگونی کرده و باعث زیباتر شدن آن شوند. - جلوگیری از کثیف‌نویسی کدها
ساختار آبشاری سی‌اس‌اس باعث میشود تا یک کد تنها یک بار نوشته شده و سپس بر روی تمام عناصر موجود در صفحه اعمال شود. این قابلیت از نوشتن دوباره کدها و نامرتب شدن خط‌کدها جلوگیری می‌کند.
علاوه بر موارد فوق، بهبود بخشیدن به سرعت وبسایت و نگه‌داری آسان کدها نیز از دیگر ویژگیهای این زبان تحت وب هستند.
Css چه محدودیت‌هایی دارد؟
تا به اینجا تقریباً می‌دانیم CSS چیست و چه ویژگی‌هایی دارد، اما جالب است بدانید که این زبان برنامه‌نویسی، علی‌رغم تمام مزایای خود، محدودیت‌هایی هم دارد که اشاره به آنها خالی از لطف نیست. چراکه شناخت محدودیت‌های CSS به شما کمک می‌کند تا با درک بالاتری به سراغ آموزش آن بروید. پس محدودیت‌های سی‌اس‌اس به قرار زیر هستند:
- تفاوت عملکرد در مرورگرهای مختلف
تجزیه کردن کدهای css توسط مروگرهای مختلف از دیرباز با مشکل روبه‌رو بوده است. در واقع هر مرورگر این کدها را به‌صورت مجزا تجزیه کرده و ساختار متفاوتی از وبسایت را به نمایش می‌گذارد. اگرچه امروزه اکثر مرورگرها پشتیبانی کامل خود از کدهای css را اعلام کرده‌اند، اما هنوز هم برنامه‌نویسان از این بابت نگرانی‌هایی دارند. - ساختار پیچیده‌ی طرحگذاری عناصر عمودی و ستون‌ها
اگرچه اجرای هر استایل بر روی عناصر افقی وبسایتها به راحتی انجام میشود، اما اجرای کدهای css بر روی عناصر عمودی مانند ستون‌های وبسایت کار نسبتاً سخت و زمانبری است. - عدم امکان انتخاب کردن گزینه‌های والد
در سی‌اس‌اس امکان انتخاب گزینه‌های بالاتر یا اصطلاحاً گزینه‌های والد برای اجرا روی سایر عناصر وجود ندارد. یعنی برای استفاده از کدهای سی‌اس‌اس بالاتر – خارج از ساختار آبشاری – باید دوباره کدها فراخوانی شوند.
Css یک زبان متن باز (Open Sourse) است که هرکس می‌تواند بسته به دانش خود آن را ارتقا دهد. همچنین هربار نسخه جدیدتر و بهتری از آن ارائه میشود. بنابراین می‌توان امیدوار بود که این زبان در آینده بتواند این محدودیت‌ها را پشت سر بگذارد.
کدهای css به چه صورت‌هایی اجرا می‌شوند؟
پس از اینکه فهمدیم CSS چیست، حالا باید با شیوه اجرای آن آشنا شویم. اگرچه آشنایی با تمام خط‌کدهای سی‌اس‌اس به آموزش بیشتر نیاز دارد، اما نحوه اجرای این کدها نیز نیاز به بررسی دارد. در واقع کدهای مربوط به زبان سی‌اس‌اس به سه صورت زیر قابل نوشتن و همچنین قابل اتصال به بدنه‌ی HTML هستند:
- اتصال درونی «Inline Style»
در این روش باید کدهای css در کنار کدهای HTML نوشته شوند که در آن همراه با کدنویسی هر عنصر در اچ‌تی‌ام‌ال، باید کدهای سی‌اس‌اس مربوط به آن عنصر نیز به صورت جداگانه نوشته شود که کاری زمانبر است و توصیه نمی‌شود (مگر در شرایط خاص).
- اتصال داخلی «Internal Style Sheet»
در این روش تمام کدهای مربوط به زبان css به صورت جداگانه در قسمت‌های ابتدایی کدنویسی نوشته شده و نحوه اجرای آن برای هر عنصر مشخص میشود. آن‌گاه با نوشتن کدهای اچ‌تی‌ام‌ال، پس از گذاشتن عناصر موردنظر، کدهای سی‌اس‌اس برای آنها اعمال میشود.
- اتصال خارجی «External Style Sheet»
برای استفاده از اتصال خارجی باید بدانید که فرمت css چیست. فرمت فایلهای سی‌اس‌اس «.css» است که به صورت مجزا تمام کدها در آن تعریف شده و سپس در کدهای HTML فراخوانی می‌شوند. در این روش کل کدهای سی‌اس‌اس در یک فایل جداگانه نوشته شده‌اند و تنها باید از طریق تگ <link> آنها را به اچ‌تی‌ام‌ال دعوت کرد.
اتصال خارجی پرکاربردترین نوع استفاده از کدهای سی‌اس‌اس است که بیشتر برنامه‌نویسان از آن کمک می‌گیرند.
نتیجه‌گیری
در پاسخ به سؤال CSS چیست می‌توان گفت که سی‌اس‌اس عامل اصلی زیباسازی وبسایتها و یکی از عناصر ضروری برای رابط کاربری آنها است. انواع استفاده از css در صفحات تحت وب برای اجرای استایل‌های متنوع بر روی متون، عناوین، کادرها، تصاویر و …. است.
پس با پی بردن به اینکه CSS چیست و چه کارهایی از آن ساخته است، می‌توان یک صفحه وب زشت را به یک صفحه‌ی زیبا، دیدنی و کاربرپسند تبدیل کرد.
اگر در مراحل ابتدایی برنامه‌نویسی هستید، بلافاصله آموزش HTML را به اتمام برسانید تا بتوانید آموزش CSS را آغاز کنید. اچ‌تی‌ام‌ال زبان راحتی است که بسیار سریع می‌توانید ساختار آن را به خاطر بسپارید و سپس به سراغ ماجراجویی‌هایی بروید که به شما نشان دهد CSS چیست و امکان استفاده از آن را برایتان فراهم می‌کند.
