آموزش سی اس اس (CSS)

دسته بندی: آموزش طراحی وب

آموزش سی اس اس

در این صفحه می خوانید :

معرفی سی اس اس (CSS)

برگه های سبک آبشار (CSS) یک زبان شیوه نامه است که برای توصیف ارائه سندی که به زبان نشانه گذاری مانند HTML نوشته شده است، استفاده می شود. CSS یک فناوری سنگ بنای شبکه جهانی وب، در کنار اچ تی ام ال (HTML) و جاوااسکریپت است.

CSS به گونه ای طراحی شده است که امکان جداسازی ارائه و محتوا از جمله طرح، رنگ و قلم را فراهم می کند. این جداسازی می تواند دسترسی به محتوا را بهبود ببخشد، انعطاف پذیری و کنترل بیشتری در مشخصات ویژگی های ارائه، ایجاد چندین صفحه وب در قالب بندی CSS مربوطه در یک فایل .css جداگانه ایجاد قالب به اشتراک بگذارد که باعث کاهش پیچیدگی و تکرار در محتوای ساختاری و همچنین امکان پذیر می شود. برای بهبود سرعت بارگذاری صفحه بین صفحاتی که فایل را به اشتراک می گذارند و قالب بندی آن، فایل css. ذخیره شود.

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

CSS همچنین شما را قادر می سازد تا نمایش صفحه مورد نظر خود را در چندین حالت مختلف مانند حالت نمایش بر روی مانیتور، حالت نمایش در زمان چاپ و همچنین برای نمایش در صفحات مرورگر موبایل را به درستی تنظیم نمایید. با استفاده از این ابزار همچنین می توان تنظیماتی را اعمال نمود که نمایش صفحه وب مورد نظر بسته به اندازه صفحه نمایش کاربر متغیر (Responsive) باشد.

CSS یک زبان استایل نویسی و از نوع اعلانی می باشد که نحوه نمایش یک صفحه وب را توصیف می کند. علاوه بر HTML زبان های نشانه گذاری دیگر نیز از جمله زبان های XHTML، اکس ام ال (XML), SVG و XUL از CSS پشتیبانی می کنند.

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

CSS هم مانند HTML برای اولین بار در مجموعه CERN متولد شد. اولین بار در تاریخ ۱۰ اکتبر سال ۱۹۹۴ بود که Hakon Wium Lie با همکاری «تیم برنرز لی» بحث CSS را وسط کشیدند. در همین زمان‌ها بود که چندین و چند زبان Style Sheet دیگر توسط افراد دیگر معرفی شدند و بحث‌های مختلفی که بین عموم افراد و همچنین در «کنسرسیوم وب جهان گستر» اتفاق افتاد، باعث شد تا در نهایت در سال ۱۹۹۶، زبان CSS به صورت رسمی معرفی شود.

نسخه های سی اس اس (CSS)

CSS 1: اولین نسخه CSS که توسط W3C به صورت رسمی به توسعه دهندگان وب پیشنهاد شد، CSS 1 بود. این نسخه در تاریخ ۱۷ دسامبر سال ۱۹۹۶ به صورت رسمی در دسترس افراد قرار گرفت.

CSS 2: نسخه دوم CSS نیز در ماه می سال ۱۹۹۸ منتشر و به کاربران ارائه شد. در این نسخه قابلیت‌های جدیدی مثل جایگذاری مطلق (Absolute)، وابستگی (Relative) و ثابت (Fixed) در نظر گرفته شده بود. در این نسخه همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل های مدیا و قابلیت‌های جدید برای طراحی متن ایجاد شد.

نسخه CSS2.1 نیز منتشر شده است که خطاها و باگ های CSS2 را برطرف کرده است. این نسخه چندین بار از طرف W3C نامزد پیشنهاد شده بود که هر بار برای بررسی بیشتر این کار به تعویق می افتاد. اما سرانجام در 7 دسامبر 2010 این اتفاق افتاد و این نسخه توسط W3C پیشنهاد شد.

CSS3: نسخه CSS3 برخلاف نسخه های قبلی که تمامی تعاریف و امکانات در قالب یک نرم افزار مورد استفاده کاربر قرار می گرفت، دارای ساختاری ماژولار است. هر یک از ماژول ها، قابلیت های خاصی را به نرم افزار اضافه می نماید. این نسخه از CSS در ماه ژوئن سال ۱۹۹۹ منتشر گردید. از آنجایی که CSS 3 بر پایه ماژول‌ها بود، تا ژوئن ۲۰۱۲ بیش از پنجاه ماژول CSS شامل Media Queries، Namespace، Selector Level و Color از جانب تیمی که روی این زبان کار می‌کرد، منتشر شدند. در CSS3 شما امکان استفاده از انواع فرمت های رنگی مثل HEX, RGB, RGBA و دیگر فرمت های غیر مرسوم را دارید. همه این فرمت ها به خوبی در CSS3 پیشتیبانی می شوند.

CSS4: در ماه سپتامبر سال ۲۰۰۹ W3C شروع به طراحی و تکمیل نسخه چهارم CSS نمود، گرچه هنوز هیچ یک از مرورگرهای معروف از تمامی امکانات آن پشتیبانی نمی کنند، اما پیش بینی می شود تا آینده ای نزدیک این نسخه از CSS به عنوان یکی از رایج ترین ابزارهای طراحی با امکانات ویژه ای مورد استفاده قرار بگیرد.

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

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

CSS زبان نحوی ساده ای دارد که از کلمات کلیدی انگلیسی برای طراحی و تنظیم مشخصات صفحات استفاده می نماید. CSS شامل لیستی از قوانین (Rule) می باشد. هر قانون تشکیل شده از یک یا چند انتخاب کننده (Selector) و یا بلوک های اعلان (Declaration block) می باشد. هر کدام از بلوک های اعلان تشکیل شده از لیستی از بلوک های اعلان متغیر دیگر می باشد. هر یک از اعلان گر های متغیر شامل یک کلون (:) و یک مقدار می باشد. همچنین در صورتی که قرار باشد چندین متغیر در یک بلوک اعلان شود، هر یک از متغیر ها توسط یک سمی کلون (;) از هم جدا می شوند.

ویژگی های سی اس اس (CSS)

  • جدایی محتوا از ارائه

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

  • ثبات Site-wide

هنگامی که CSS به طور مؤثر مورد استفاده قرار می گیرد، از نظر وراثت و "آبشار"، می توان از ورق سبک جهانی برای تأثیرگذاری و سبک کردن عناصر در سطح سایت استفاده کرد. اگر شرایط به وجود بیاید که یک ظاهر طراحی شده از عناصر باید تغییر داده یا تنظیم شوند، این تغییرات با ویرایش قوانین در شیوه نامه جهانی ایجاد می شود. قبل از CSS، این نوع نگهداری سخت تر، گران و وقت گیر بود.

  • پهنای باند

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

  • بازنویسی صفحه

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

  • دسترسی

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

چرا باید از سی اس اس (CSS) استفاده کنیم؟

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

  • حجم کد تولید شده برای طرح بندی صفحه و در نتیجه حجم صفحه به شدت کاهش پیدا می کند.
  • افزون بر سبک تر کردن هر صفحه وب و تمیزتر کردن آن و استفاده از داده‌های تصویری و نمایشی استاندارد، روش طراحی وب را به میزان فراوانی آسان تر و دسترسی و کارایی وب را افزایش داده است.
  • قالب بندی صفحه از طرح بندی آن جدا کرده و ایجاد تغییرات در صفحه به سادگی امکان پذیر است.
  • موتورهای جستجو، مطالب وب سایت را به سادگی نمایه نموده و در نتیجه رتبه بندی وب سایت در موتورهای جستجو بهبود می یابد.

انواع سی اس اس (CSS)

برای نوشتن سی اس اس سه روش موجود است که به شرح زیر می باشد:

سی اس اس درون خطی (inline) یا تعبیه شده : در این روش ویژگی ها و مشخصات، در تگ مربوطه در همان صفحه اچ تی ام ال نوشته می شود:

<span style='text-align: center; margin:0 auto'></span>

سی اس اس داخلی (internal):در این روش ویژگی ها در قسمت سرصفحه یا <head> سایت با نوشتن تگ <style> مشخص می شود:

<head>
<style type='text/css'>
Span {text-align:center; margin:0 auto;}
</style>
</head>

سی اس اس خارجی (external) :بهترین روش نوشتن سی اس اس می باشد. در این روش یک صفحه با پسوند .css ساخته می شود و از صفحه html در قسمت head لینکی برای آن ارسال می شود و این دو صفحه را به هم مرتبط می کند:

<head>
<link rel='stylesheet' type='text/css' href='style.css'/>
</head>

فریمورک های سی اس اس (CSS)

یک فریمورک CSS یک کتابخانه است که با استفاده از زبان صفحه Cascading Style Sheets، طراحی وب سازگار با استانداردهای آسانتر و سازگار را امکان پذیر می کند. بیشتر این فریمورک ها حداقل دارای شبکه هستند. فریمورک های کاربردی تر نیز دارای ویژگی های بیشتر و عملکردهای اضافی مبتنی بر JavaScript هستند، اما بیشتر مبتنی بر طراحی هستند و در مورد الگوهای UI تعاملی متمرکز هستند. این جزئیات فریمورک های CSS را از سایر فریمورک های JavaScript متمایز می کند.

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

فریمورک های CSS ماژول ها و ابزارهای مختلفی را ارائه می دهند:

  • تنظیم مجدد ورق سبک
  • شبکه مخصوصاً برای طراحی وب پاسخگو
  • تایپوگرافی وب
  • مجموعه ای از آیکون ها در sprites یا قلم های آیکون
  • یک ظاهر طراحی شده برای نکات ابزار، دکمه ها، عناصر فرم ها
  • بخش هایی از رابط های کاربر گرافیکی مانند آکاردئون، زبانه ها، نمایش پرده ای یا پنجره های معین (Lightbox)
  • اکولایزر برای ایجاد محتوای قد برابر
  • اغلب از کلاس های کمکی CSS استفاده می شود (سمت چپ، پنهان)

فریمورک های بزرگتر از مفسر CSS مانند پیش پردازنده Less یا پیش پردازنده Sass استفاده می کنند.

دو نمونه قابل توجه و مورد استفاده گسترده بوت استرپ و فوندیشن (Foundation) هستند.

بوت استرپ (Bootstrap):یک فریمورک تشکیل شده از HTML ،CSS و JS است که برای توسعه و طراحی سایت رسپانسیو استفاده می شود. با توجه به رشد افزایش استفاده از گوشی های همراه و تبلت، بیشتر افراد امروزه فعالیت های خود مانند بررسی وب سایت ها را با استفاه از این ابزارها انجام می دهند. پس خیلی مهم است که سایت شما در صفحات مختلف به درستی نشان داده شود تا کاربر مجبور نباشد برای خواندن مطالب یا استفاده از المان ها، از بزرگنمایی استفاده کند. برای همین از طراحی سایت رسپانسیو برای ساخت صفحات در اندازه های مختلف استفاده می شود و بهترین تکنیک و ابزار آن، فریمورک بوت استرپ می باشد. نمونه سازی اولیه طرح با بوت استرپ سریع تر انجام می شود و با تمامی مرورگرها به راحتی قابل سازگاری می باشد.

فوندیشن (Foundation): یک فریمورک (front-end framework) می باشد که دارای ابزارهای مناسب برای طراحی و ساخت سایت های متناسب با گوشی های موبایل و صفحه های نمایش با اندازه های مختلف است. ساختار این فریمورک برپایه ی HTML ،CSS و jQuery بوده و با این که استفاده اصلی از این فریمورک توسط برنامه نویسان HTML و CSS است اما شما می توانید از آن در پروژه های مبتنی بر Sass و Rails نیز استفاده نمایید.

  • Semantic UI
  • Metro UI
  • Pure Css
  • bulma
  • kube
  • Materialize
  • Skeleton
  • Susy
  • UIKit
آیا این نوشته را دوست داشتید؟
skillshare-web-development-fundamentals-html-css

اصول توسعه وب: HTML و CSS


در این دوره با مبانی اولیه طراحی سایت با استفاده از HTML و CSS آشنا خواهید شد که شامل عناصر HTML، صفات آن، ویژگی‌های CSS و استفاده از Bootstrap و موار...

1399/06/22 1475 بازدید
linkedin-making-sense-of-the-css-box-model

آشنایی با CSS Box Model


در این دوره، Morten Rand-Hendriksen -رویکرد "چهار وعده غذایی" را در CSS box model ارائه می دهد و آن را به بخش هایی که به راحتی قابل هضم هستند تجزیه می...

1399/05/14 1238 بازدید زیرنویس دارد
linkedin-css-layouts-from-float-to-flexbox-and-grid

آموزش طرح بندی های CSS: از Float تا Flexbox و Grid


در این دوره، Christina Truong شما را در این مسیر راهنمایی می کند، از مفاهیم اولیه گرفته تا تغییر کامل، او روش های مختلف ایجاد طرح بندی با CSS مدرن را ...

1399/05/09 2526 بازدید زیرنویس دارد
linkedin-css-variable-fonts

آموزش CSS: فونت های متغیر


در این دوره، Rand-Hendriksen نحوه استفاده از فونت های متغیر را زمان حفظ استفاده کارآمد از پهنای باند برای پاپ ساختن طرح ها نشان می دهد. مبانی فونت های...

1399/03/08 1071 بازدید زیرنویس دارد
linkedin-learning-web-audio-and-video

یادگیری صدا و ویدیو در وب


این دوره مقدماتی به شما کمک می کند تا صدا و فیلم تعاملی را در وب سایت ها و اپلیکیشن های خود ایجاد کنید. ابتدا مبانی کامپوننت های رسانه HTML5 و ویژگی ه...

1399/01/21 1864 بازدید
skillshare-website-wireframing-with-html5-css3

آموزش Wireframing سایت با HTML5 و CSS3


این دوره شما را در روند ایجاد بخشهای اصلی سایت خود، تنظیم و تراز کردن متن و تصاویر و... راهنمایی می کند. پس از اتمام wireframe،یاد می گیرید چگونه آن ر...

1399/01/20 1438 بازدید
linkedin-responsive-layout-2-0

آموزش طرح بندی ریسپانسیو 2.0


وقتی اولین بار طراحی وب ریسپانسیو معرفی شد، در نگاه اول جادویی و ناکارآمد به نظر می رسید. طراحان مجبور بودند برای تنظیم سیستم های مبتنی بر grid خود و ...

1398/12/29 3756 بازدید زیرنویس دارد
linkedin-bootstrap-4-with-sass

آموزش بوت استرپ 4 به همراه Sass


Bootstrap محبوب ترین فریمورک برای ساخت وب سایت هایی با قابلیت ریسپانسیو و mobile-first است. هنگامی که شما آن را با Sass ترکیب می کنید، به CSSهای قدرتم...

1398/12/27 3430 بازدید
linkedin-css-selectors

آموزش CSS: انتخاب‌گرها


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

1398/12/05 1582 بازدید زیرنویس دارد
skillshare-responsive-web-development-html-css-for-web-designers

آموزش توسعه وب واکنش گرا - HTML و CSS برای طراحان وب


این دوره تفاوت بین توسعه وب و طراحی وب را توضیح می دهد. بخش اول این دوره در مورد تفاوت های بین طراحی وب و توسعه وب خواهد بود. ما به طراحی واکنشگرا خوا...

1398/11/16 3649 بازدید
teamtreehouse-css-to-sass

آموزش CSS تا Sass


اگر مطمئن نیستید که هنگام تبدیل CSS به Sass از کجا شروع کنید، این دوره برای شما است. در این دوره یاد می گیرید که چگونه یک پروژه وب ساده را به Sass تبد...

1398/10/30 1763 بازدید
laracasts-css-grids-for-everyone

آموزش CSS Grids برای همه


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

1398/10/24 1819 بازدید
laracasts-learn-flexbox-through-examples

آموزش Flexbox همراه با مثال


Flexbox به راحتی یکی از مهمترین اضافات CSS در دهه گذشته است. تنها مشکل این است که کمی منحنی یادگیری وجود دارد. به مدرس دوره اعتماد کنید: اگر می خواهید...

1398/10/18 1746 بازدید
teamtreehouse-sass-basics

آموزش مبانی Sass


در این دوره یاد خواهید گرفت که از قدرت های Sass برای تقویت جریان کاری front end خود استفاده کنید. مثال ها به شما می آموزد که چرا باید از Sass در پروژه...

1398/10/15 1478 بازدید
linkedin-more-css-selectors-for-react-developers

انتخابگر های CSS بیشتر برای توسعه دهندگان React


در این دوره مخصوص توسعه دهندگان React با انتخابگر های پیشرفته‌تر CSS از جمله Combinators انتخابگر، انتخابگر های pseudo-element، انتخابگر های سفارشی و ...

1398/10/12 1331 بازدید زیرنویس دارد
laracasts-modern-css-workflow

آموزش گردش کار Modern CSS


نحوه ساخت و کدنویسی CSS در ده سال گذشته به طرز چشمگیری تغییر کرده است. در این دوره، ابزارهای اصلی را در frontend کارهای مدرن مرور خواهیم کرد. این دوره...

1398/10/11 1190 بازدید
linkedin-essentials-of-css-for-react-developers

آموزش اصولی CSS برای توسعه دهندگان React


با این دوره ملزومات استفاده از CSS در React را بیاموزید. در این دوره با اصول زبان stylesheet و نحوه استفاده از آن برای ایجاد اپلیکیشن های زیبا آشنا می...

1398/09/27 1706 بازدید
linkedin-css-selectors-for-react-developers

آموزش CSS Selectors برای توسعه دهندگان React


در این دوره با نحوه کار با CSS selectors به عنوان یک توسعه دهنده React آشنا می شوید. همچنین با نحوه استفاده از universal selectors، attribute selector...

1398/09/03 1365 بازدید زیرنویس دارد
packtpub-learn-javascript-and-html5-canvas-build-a-paint-app-for-drawing

آموزش جاوااسکریپت و HTML5 Canvas - ساخت اپلیکیشن نقاشی برای ترسیم


با کمک این دوره در عرض چند ساعت می توانید اپلیکیشن نقاشی خود را با HTML5 Canvas، جاوااسکریپت و CSS ایجاد کنید. در این دوره نحوه ایجاد ساختارهای HTML5 ...

1398/09/02 1899 بازدید
skillshare-beginner-html-css-build-your-own-personal-blog

مقدماتی HTML CSS : وبلاگ شخصی خود را بسازید.


این دوره برای دانش جویان مبتدی که به دنبال شروع طراحی و یا توسعه وب هستند مناسب است.این پروژه شما را با ساختار HTML / عناصری مانند تصاویر، تگ های معنا...

1398/08/23 3294 بازدید