آموزش زبان CSS

خالق زبان CSS

Håkon Wium Lie در سال ۱۹۶۵ در کشور نروژ به دنیا آمد. زبان CSS توسط وی در ۱۰ اکتبر ۱۹۹۴ پیشنهاد شد و این در حالی است که پیش از این تاریخ، زبان‌های زیادی برای طراحی ظاهر صفحات وب پیشنهاد شده بودند. در آن تاریخ آقای Lie به همراه Tim Berners-Lee (خالق World Wide Web) همکاری‌هایی داشتند و نتیجه این شد که پروپوزال وی با برتری‌هایی که نسبت به سایر پیشنهادات داشت پذیرفته شد.
به هر حال اولین نسخه از زبان CSS در تاریخ ۱۹۹۶ تحت عنوان نسخه CSS1 منتشر شد. در همین حین، فردی به نام Bert Bos هم دیدگاه هایی داشت که با توجه به اهمیت آن‌ها و به کارگیری از پروپوزال ایشان در نسخه اول زبان CSS، وی نیز به عنوان یکی از طراحان اصلی این زبان قلمداد شد و از ایشان نیز به عنوان یکی از دو خالق اصلی زبان Cascading Style Sheet یا همان CSS نام برده می شود.

معرفی زبان CSS

CSS مخفف واژگان Cascading Style Sheet به معنی "الگوهای آبشاری" است که برای رفع یک کمبود در ارتباط با صفحات وب در سال ۱۹۹۶ ابداع شد. در واقع پیش از ابداع CSS، صفحاتی که با زبان HTML طراحی می شدند با توجه به تنظیمات پیش فرض مرورگرهای مختلف به نمایش در می آمدند که در چنین شرایطی طراحان با دو مشکل عمده رو به رو بودند. اول آن که با توجه به این که هر مرورگری از Rendering Engine مختص به خود استفاده می کند و قوانین مختص به خود را برای نحوه نمایش تگ های مختلف اچ تی ام ال به کار می گیرد، بنابراین صفحه ای یکسان در مرورگرهای مختلف به سبک های مختلفی به نمایش در می آمدند و امروزه هم تا حدودی به همین صورت است. مشکل دوم این بود که مرورگرها بیشتر تمرکز خود را روی نمایش دادن تگ های اچ تی ام ال معطوف کرده بودند و خیلی به "نحوه" نمایش دادن آن ها توجه نمی‌کردند و در کل زیبا نبودند که پس از به کارگیری دستورات CSS این مشکلات مرتفع شدند.

دوره آموزش زبان CSS

پیش از آغاز فراگیری این زبان، آشنایی با زبان اچ تی ام ال لازم و ضروری است چرا که کلیه کدهای سی اس اس بر مبنای تگ های اچ تی ام ال نوشته خواهند شد. بنابراین نیاز است تا ابتدا چارچوب کلی سایت با استفاده از تگ های اچ تی ام ال ایجاد شده سپس به زیبا سازی آن تگ ها با استفاده از کدهای سی اس اس بپردازیم.
دوره مقدماتی آموزش زبان CSS با تدریس بهزاد مرادی در سایت نت شهر منتشر می گردد. در این دوره آموزشی سعی گردیده کلیه مفاهیمی که یک فرد مبتدی برای شروع کار با این زبان نیاز دارد مورد بررسی قرار گرفته و علاوه بر این، تمام تلاش خود را به کار گرفته تا مفاهیم سی اس اس در قالب مثال های کاربری مورد بررسی قرار گیرند.

آموزش CSS

زبانCSSاین امکان را به طراحان سایت می دهد تا کدهای اچ تی ام ال خود را از لحاظ بصری زیبا و چشمگیر کنند. پس از فراگیری نحوه استفاده از تگ های HTML، اساسی ترین گام یادگیری استفاده از کدهای سی اس اس است چرا که امروزه کمتر سایتی را می توان یافت که صرفاً با استفاده از زبان اچ تی ام ال طراحی شده باشد.

CSSکه مخفف واژگانCascading Style Sheetsبه معنای "الگو های آبشاری" است را می توان برای طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شودبه کار برد.

سی اس اس به زبان ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها)، زیبایی جهت طراحی انواع سبک یا استایل برای صفحه های وب مورد استفاده قرار می گیرد.

با استفاده از کدهایCSS همچون font-size، font-weight، font-style، font-variant،text-align، border-radius، background-color، box-shadow و ... میتوان برای صفحه وب طرح‌ها و قالب‌های متنوعی طراحی کرد.

از مهمترین مزایایCSSمیتوان به انعطاف پذیری بالای کدهای سی اس اس، کم حجم کردن فایل های HTML و بالتبع آن پایین آمدن مدت زمان بارگذاری صفحه، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف، امکان طراحی سایت به صورت Responsive یا "واکنش گرا" و ... نام برد.

امیدواریم با مطالعه این سری از آموزش های مقدماتی سی اس اس که در آن ها سعی شده با زبانی گویا و کاملاً ساده مفاهیم پیچیده CSS توضیح داده شوند، به علاقمندان به فراگیری این زبان کمک کرده باشیم تا بتوانند سایت هایی جذاب طراحی کنند.

عنوان

سی اس اس (CSS) چیست؟

تاریخچه سی اس اس (CSS)

آشنایی با ساختار کدهای سی اس اس (CSS)

نحوه لینک دادن به یک فایل سی اس اس (CSS) در یک فایل اچ تی ام ال (HTML)

نحوه نوشتن کدهای سی اس اس (CSS) به صورت Internal در صفحات اچ تی ام ال (HTML)

اضافه کردن کدهای سی اس اس (CSS) به صورت Inline در تگ های اچ تی ام ال (HTML)

سلسله مراتب اجرای کدهای سی اس اس (CSS)

آشنایی با Selector های سی اس اس (CSS)

نحوه اختصاص id و class به برخی تگ های اچ تی ام ال (HTML)

آشنایی با Descendant Selector ها در سی اس اس (CSS)

آشنایی با Child Selector ها در سی اس اس

آشنایی با Adjacent Selector ها در سی اس اس (CSS)

آشنایی با Attribute Selector ها در سی اس اس (CSS)

آشنایی با مفهوم DOM در سی اس اس (CSS)

گروه بندی کردن Selector ها در سی اس اس (CSS)

Inheritance یا وراثت در کدهای سی اس اس (CSS)

استفاده از دستور important برای جلوگیری از هم پوشانی کدهای سی اس اس (CSS)

اختلاف در نحوه نمایش کدهای سی اس اس (CSS) در مرورگرهای مختلف

نحوه کامنت گذاری در کدهای سی اس اس (CSS)

معرفی Property یی تحت عنوان font-family در سی اس اس (CSS)

آشنایی با دستور @font-face در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-size در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-weight در سی اس اس (CSS)

معرفی Property یی تحت عنوان font-style در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان font-variant در سی اس اس (CSS)

نحوه خلاصه نویسی کدهای مرتبط با font در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان font-transform در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-align در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-indent در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان text-decoration در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان letter-spacing در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان word-spacing در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان line-height در سی اس اس (CSS)

نحوه استفاده از گرادیانت به جای رنگ

آشنایی با Box Model در سی اس اس (CSS)

آشنایی با padding در سی اس اس (CSS)

آشنایی با margin در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان border در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان border-radius در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان background در سی اس اس (CSS)

آشنایی با رنگ ها در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان color در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان background-image در سی اس اس (CSS)

نحوه به کارگیری چندین تصویر پس زمینه در سی اس اس (CSS)

نحوه خلاصه نویسی کدهای مرتبط با background در سی اس اس (CSS)

آشنایی با مفاهیم طراحی Layout از طریق سی اس اس (CSS)

آشنایی با absolute در طراحی Layout با سی اس اس (CSS)

آشنایی با fixed در طراحی Layout با سی اس اس (CSS)

آشنایی با Property یی تحت عنوان float در سی اس اس (CSS)

آشنایی با Attribute یی تحت عنوان clear در سی اس اس (CSS)

آشنایی با Property یی تحت عنوان opacity در سی اس اس (CSS)

آشنایی با Property های box-shadow و text-shadow در سی اس اس (CSS)

سخن پایانی