آموزش CSS

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

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

CSS چیست؟

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

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

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

  

چرا CSS ؟

کسانی که طراحی صفحات وب با استفاده از جداول را تجربه کرده اند به خوبی می دانند که پیاده سازی طرح بندی های موردنظر با استفاده از جداول، وقت گیر و تاحدی دشوار است. ضمن اینکه با پیچیده شدن ساختار صفحه حجم کدهای XHTML تولید شده زیاد می شود و در برخی مواقع کنترل دقیق اجزاء صفحه از دست طراح خارج می گردد. همین پیچیدگی باعث می شود نرم افزارهایی که عمل جستجوی مطالب را در میان صفحات وب انجام می دهند تا آنها را برای موتورهای جستجو نمایه کنند با سردرگمی مواجه شده و نتوانند به خوبی عمل نمایه سازی را انجام دهند. برای غلبه بر چنین مشکلاتی، امروزه طراحی صفحات وب با استفاده از 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) در نظر گرفته شده بود. در این نسخه همچنین امکاناتی مانند ایجاد درک و شناخت انواع مختلف فایل (Media) و قابلیت‌های جدید برای طراحی متن ایجاد شد.

نسخه 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

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

سی اس اس درون خطی (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 عموما یک پکیج شامل مجموعه ای از پوشه ها و فایلهایی هستند که با استفاده از کدهای پایه استاندارد (شامل HTML، CSS و جاوااسکریپت و نظائر آن) ایجاد شده است. بطور خلاصه با استفاده از این فریمورکها امکانات استاندارد و حرفه ای زیادی در اختیار شما قرار می گیرد که با صرف وقت اندکی یادگیری آنها قادر به طراحی صفحات وب بسیار قدرتمند و زیبا که شامل عناصر حرفه ای خواهید شد که بدون داشتن این فریمورک ها روزها و ساعت ها باید وقت صرف می کردید تا آن عناصر را طراحی نمایید . برخی از فریمورک های CSS عبارتند از :

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

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

  • Semantic UI
  • Metro UI
  • Pure Css
  • bulma
  • kube
  • Materialize
  • Skeleton
  • Susy
  • UIKit
آیا این نوشته را دوست داشتید؟
teamtreehouse-new-features-in-css

کارگاه آشنایی با ویژگی های جدید در CSS


در این کارگاه با برخی از آخرین ویژگی های CSS مانند افکت های فیلتر، تابع calc، طرح بندی های چندستونه و flexbox آشنا می شوید. همچنین پیشنمایش ویژگی های ...

1397/05/10 697 بازدید
teamtreehouse-introduction-to-postcss

کارگاه آشنایی با PostCSS


در این کارگاه با PostCSS آشنا می شوید. PostCSS یک ابزار پردازش محبوب CSS برای یکپارچه سازی وب سایت ها و اپلیکیشن ها است.  ...

1397/05/09 773 بازدید
teamtreehouse-how-to-make-a-website-course

آموزش ایجاد وب سایت


اگر قبلا هرگز یک وبسایت نساخته اید و هیچ تجربه برنامه نویسی یا طراحی نداشتید، این دوره برای شما است. در این پروژه، ما یاد می گیریم چگونه یک وب سایت نم...

1397/05/07 1258 بازدید
teamtreehouse-modular-css-with-sass-course

آموزش CSS ماژولار با Sass 


در این دوره، ما قصد داریم یک جعبه ابزار UI toolkit با استفاده از بهترین شیوه ها و اصول معماری CSS ماژولار ایجاد کنیم. همچنین با رویکرد ماژولار با Sass...

1397/05/04 1366 بازدید
teamtreehouse-learn-html-and-css-with-our-video-lessons

آموزش ویدئویی ایجاد صفحات وب با HTML و CSS


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

1397/05/04 1147 بازدید
teamtreehouse-html-email-design-course

آموزش طراحی ایمیل HTML 


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

1397/05/03 949 بازدید
teamtreehouse-practice-the-css-box-model

تمرین CSS Box Model


در این کارگاه با کار با کامپوننت های اصلی CSS Box Model آشنا می شوید.  ...

1397/04/31 830 بازدید
teamtreehouse-treehouse-club-css-course

آموزش استایل صفحات وب با CSS 


در این پروژه، نحوه ویرایش کد پیش نوشته شده را جهت استایل صفحه وب برای دسکتاپ، تبلت و دستگاه های تلفن همراه یاد خواهید گرفت. همچنین با نحوه اتصال اتصال...

1397/04/30 851 بازدید
teamtreehouse-practice-css-selectors

تمرین Selectors در CSS 


در این کارگاه با Selectors در CSS با هدف گیری و استایل عناصر یک صفحه وب آشنا می شوید.  ...

1397/04/29 715 بازدید
teamtreehouse-practice-css-floats

تمرین CSS Floats


خصوصیات float CSS مشخص می کند که یک عنصر باید در کنار سمت چپ یا راست کانتینر قرار گیرد تا عناصر متن و درون آن در اطراف آن قرار گیرد. در این کارگاه با ...

1397/04/27 781 بازدید
teamtreehouse-create-an-accordion-menu-with-css

آموزش ایجاد منو آکاردئون با CSS


در این کارگاه با ایجاد منو آکوردئون محتوا با CSS آشنا می شوید. آکوردئون محتوا برای زمانی که فضا محدود است و محتوای زیادی دارد که شما می خواهید در حالت...

1397/04/27 824 بازدید
teamtreehouse-create-a-fullscreen-slider-with-css

آموزش ایجاد اسلایدر تمام صفحه با CSS


در این کارگاه با ایجاد یک نوار لغزنده افقی تمام صفحه، با استفاده از CSS آشنا شوید. Image carousels یک الگوی طراحی محبوب است و هزاران پلاگین های جی کوئ...

1397/04/27 1172 بازدید
teamtreehouse-debugging-css-with-chrome-devtools

آموزش اشکال زدایی CSS با Chrome DevTools


در این کارگاه ما ابزار مفید و کارآمد برای اشکال زدایی CSS یعنی Chrome Developer Tools را بررسی خواهیم کرد. اشکال زدایی روند تشخیص و حذف خطاهای موجود ...

1397/04/24 908 بازدید
teamtreehouse-practice-flexible-css-grid-layout

آموزش CSS Grid Layout انعطاف پذیر 


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

1397/04/24 1099 بازدید
teamtreehouse-practice-css-grid-columns-rows-and-gaps

آموزش ستون ها، ردیف ها و گپ ها در CSS Grid


CSS Grid Layout یک قدرتمند ترین سیستم طرح بندی موجود در CSS است. این یک سیستم 2 بعدی است، به این معنی که می تواند هر دو ستون و ردیف را مدیریت کند. در...

1397/04/24 960 بازدید
teamtreehouse-sass-basics-course

آموزش اصول و مبانی Sass 


Sass یک زبان شی گرا است که CSS را با ویژگی هایی مانند متغیرها، قوانین nested، توابع و mixins، در یک سینتکس سازگار با CSS گسترش می دهد. در این دوره، شم...

1397/04/21 1414 بازدید
teamtreehouse-the-css-calc-function

آموزش تابع ()calc در CSS


تابع ()CSS calc محاسبات را انجام می دهد و نتیجه را نشان می دهد. ()calc به عبارات ریاضی اجازه می دهد تا جمع، تفریق، ضرب و تقسیم اضافه کند. در این کارگ...

1397/04/16 846 بازدید
teamtreehouse-using-css-variables

آموزش استفاده از متغیرهای CSS 


در این دوره با نحوه استفاده از متغیرهای نیتیو CSS آشنا می شوید تا بتوانید stylesheet داشته باشید که تکراری نباشد و نگهداری آن آسان تر باشد. متغیرهای ...

1397/04/14 783 بازدید
آموزش-مقدماتی-css

آموزش مقدماتی CSS


در این آموزش تصویری نحوه کارکردن و طراحی صفحات وب با CSS را یاد میگیرید. این دوره آموزشی محصول TreeHouse است و برای طراحان وب مبتدی مناسب است. سرفصل...

1397/04/14 2376 بازدید
آموزش-طراحی-وب-از-treehouse

آموزش طراحی وب از TreeHouse


دوره ای که پیش روی شماست یکی از کاملترین و بروزترین آموزش های طراحی وب است. در این دوره آموزشی ابتدا با اصول اولیه طراحی وب آشنا می شوید. سپس تمام دس...

1397/04/14 7895 بازدید