تاریخچه CSS

CSS اولین بار توسط Hokon Wium Lie  در ۱۰ اکتبر ۱۹۹۴ ارائه شد. در آن زمان lie با تیم بررزلی(  مخترع HTML) در CER کار میکرد.چندین زبان سبک دیگر برای وب در همان زمان پیشنهاد شد و بحث در مورد لیست های پستی عمومی و در داخل کنسرسیوم جهانی وب منجر به  انتشار اولین  نسخه CSS با عنوان CSS1 شد. و در سال ۱۹۹۶، Bert Bos به عنوان سازنده CSS شناخته شد. در ابتدای کار CSS 1 چندان مورد توجه قرار نگرفت، به همین علت CSS 2 در ۴ نوامبر ۱۹۹۷ شد. بعد ازآن هم CSS 3 در سال 1998منتشر شد.

نسخه های CSS

CSS1:

اولین نوع از این نسخه بودش که در تاریخ ۱۷ دسامبر ۱۹۹۶ انتشار یافت.

CSS2:

سی اس اس سطح دو که توسط W3C توسعه یافته شده بود در تاریخ مه سال ۱۹۹۸ انتشار یافت.

CSS2.1:

این نسخه برای رفع شدن خطاهای نسخه دوم  به وجود آمد، ویژگی های ضعیف نسخه های قبل را حذف میکند.

CSS3 :

در این نسخه سندها به ماژول هایی جدا تبدیل میشوند. هر ماژول ویژگی و قابلیت های نو و جدیدی را اضافه میکند و ویژگی های نسخه CSS2 را گسترش میدهد.

معرفی زبان CSS

بعد از اینکه اسکلت بندی صفحه ی وب را با استفاده از  از عناصر  Html انجام می دهید نوبت به رنگ و لعاب صفحه  خواهد رسید. CSS زبانی برای نمایش  هر چه بهتر  اسناد HTML  است  با استفاده از این زبان  می توانیم ظاهر  یک سند Html را تعیین کرده و برای تک تک عناصر  Html استایلی مناسب  برگزید.

CSS زبان  برنامه نویسی می باشد که کنسرسیوم بین المللی شبکه جهانی وب  (W3c (World wide Web برای  غلبه  بر مشکلاتی  که در طی زمان با استفاده از HTML به وجود امده  است پیشنهاد شده است عملا این زبان برنامه نویسی  مکملی بر زبان HTML است و سعی در پر کردن ضعف  و خلاء های آن دارد.

CSS مخفف ( ” صفحات استایل آبشاری”  Cascading style sheets ) است  که یک زبان استایل نویسی محسوب میشود و وظیفه اش استایل دادن به کدهای html می باشد. پس CSS  مشخص می کند عناصر  html  با چه ظاهری روی سایت نمایش داده شوند.علت اختصاص صفت Cascading به معنای  “آبشاری” به این زبان این است  که قوانین این زبان به صورت آبشاری یا از بالا به پایین اعمال  می شوند.

به عنوان توضیح بیشتر در مورد وظیفه و نحوه عملکرد css می توان اینگونه توضیح داد که اگر به عنوان مثال یک خودرو داشته باشیم ، ابتدا از طریق HTML اسکلت اولیه و بدون ظرافت آن خودرو ساخته می شود . در این مرحله خودرو هیچ زیبایی ظاهری نداشته و صرفا یک اسکلت اولیه است . سپس از طریق css آن اسکلت اولیه به یک شکل با ظرافت و زیبا تبدیل می شود .

کاربرد CSS

• طراحی رنگ ها ، فونت ها، صفحه بندی

شامل: تیترها، متن ، جداول، لیست ها ، تصاویر ،…

• انطباق کردن نمایش بر اساس پلتفرم ها

انواع متفاوتی از  نمایشگرها مانند نمایشگرهای  بزرگ، نمایشگرهای کوچک و..

• نگهداری اسان تر سایت

استایل را می توان بدون تغییردادن عناصر  HTML اصلاح کرد

• متناسب کردن صفحات

اصلاح چندین صفحه وب با استفاده از تنها یک شیوه نامه

سلکتورها در css

اگر از تگ های htmlآشنایی داشته باشید میدانید که  این تگ ها فقط ساختار وب را ایجاد می کنند اما برای شکیل شدن وب سایت باید از استایل دهی تگ ها استفاده کنیم و این استایل دهی با دستورات css  انجام می شود؛ در css به تگ هایی که در صفحات html  موجود می باشد بخواهیم استایل بدهیم،باید اون تگ رو انتخاب یا سلکت کنیم. پس سلکتور ها در واقع مجموعه دستورات استایل دهی تگ های  html می باشد.

CSS چطور کار میکند؟

وقتی  مرورگر  کدهای CSS را می خواند  اسناد HTML را بر اساس اطلاعاتی که از کد ها میگیرد فرمت بندیشان می کند.

سه روش برای افزودن کد های CSS  به صفحات وب داریم

• روش External
• روشInternal
• روش inline

در روش inline: زمانی استفاده می شود که یک عنصر نیاز داشته باشد، استایل منحصر به فردی داشته باشد.

<h1  style=“color: blue ; ”> this  paragraph</h1>

 در روش Internal:  همانطور که از نامش پیداست  کد های css داخل  عنصر <style> داخل عنصر  <<style  قرار میگیرد.

در روش  External: رایج ترین نوع روش در پروژه های واقعی  روش External هست که برای افزدون کد های  CSS به صفحه ازش  استفاده می کنند که کد مستقیما داخل صفحات وبسایت قرار نمیگیرند در عوض ارجاعی از یک فایل خارجی که کدهای CSS در ان نوشته شده است در صفحه قرار  میگیرد.

Border در cssیعنی چه؟

صفت Border در زبان CSS این امکان را برای ما فراهم میکند که خطوط حاشیه ای  را برای عناصر  HTML ایجاد کنیم نه تنها میتوان این خطوط را ایجاد  کرد بلکه حتی نوع استایل پهناور رنگ خطوط را نیز می توان تعیین کرد.

Margin درcss یعنی چه؟

همانطور که از معنی عبارت margin (حاشیه، لبه) مشخص است این ویژگی برای تنظیم فاصله ی گوشه های قالب از لبه صفحه نمایش یا عناصر داخلی صفحه وب از هم استفاده می شود.

Padding :

صفت padding در CSS برای ایجاد فضا اطراف درونی محتوای یک عنصر  استفاده می شود و با استفاده از CSS شما کنترل کاملی نسبت به صفت padding  در عناصر مختلف خواهید داشت صفات مختلفی در CSS وجود دارد که با استفاده از  آنها میتوان مقدار صفت padding را برای  هر سمت از یک عنصر  تعیین کرد (بالا، راست، پایین ، چپ).

فونت ها:

با استفاده از  صفات Font در CSS میتوان نوع فونت ، اندازه  , اندازه و استایل یک متن را تغییر داد

لیست ها :

در html   دو نوع لیست اصلی وجود دارد:

 لیست های ترتیبی(<ol>) آیتم های لیست ها با اعداد و حروف  نشانه گذاری میشوند.

های غیر ترتیبی(<ul>) آیتم های لیست در این نوع لیست ها با بولت ها نشانه گذاری میشوند .

صفات CSS برای لیستها به ما اجازه  میدهد:

از نشان گذارهای مختلفی برای ایتم های لیست ترتیبی خود استفاده می کنیم

از نشان گذارهای مختلفی برای ایتم های لیست غیر ترتیبی خود استفاده می کنیم

از تصاویر به عنوان نشانه گذارهای ایتم های   لیست استفاده  کنیم

برای لیست  خود و ایتم های ان عکس پس زمینه مشخص می  کنیم

تفاوت HTML & CSS:

شما می توانید از دستورات CSS دریک فایلhtml استفاده کنید اما نمیتوانید از دستورات HTML  در یک فایل CSS استفاده کنید.