آموزش 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
آیا این نوشته را دوست داشتید؟
چگونه-با-html-و-css-وب-سایت-طراحی-کنیم

چگونه با HTML و CSS وب سایت طراحی کنیم


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

1397/04/14 8133 بازدید
آموزش-تکنیک-های-طرح-بندی-با-css

آموزش تکنیک های طرح بندی با CSS


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

1397/04/14 2593 بازدید
آموزش-ساخت-وب-سایت-داینامیک-با-node-js

آموزش ساخت وب سایت داینامیک با Node.js


در این آموزش تصویری با ساخت وب سایت داینامیک با Node.js آشنا می شوید. این دوره آموزشی محصول موسسه TreeHouse می باشد. سرفصل های دوره: بررسی اجمال...

1397/04/14 3791 بازدید
آشنایی-با-طرح-های-واکنشگرا

آشنایی با طرح های واکنشگرا


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

1397/04/14 1708 بازدید
دوره-css-to-sass

دوره CSS to Sass


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

1397/04/14 1856 بازدید
آموزش-بهینه-سازی-وب-سایت

آموزش بهینه سازی وب سایت


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

1397/04/14 1326 بازدید
teamtreehouse-treehouse-club-css

دوره Treehouse Club: CSS


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

1397/04/14 1308 بازدید
treehouse-customizing-django-templates

نحوه سفارشی کردن قالب های Django


در این آموزش تصویری با نحوه سفارشی کردن قالب های Django آشنا می شوید. این دوره استفاده از آرایه ، نحوه ساخت قالب ها به صورت ایستا و پویا ، ارث بری ق...

1397/04/14 2900 بازدید
treehouse-css-layout-basics

مقدمات طرح بندی با CSS


طراحی Layout یک سایت ساده معمولا با استفاده از کدهای ساده CSS و دستوراتی مانند float و... انجام می شود. در این آموزش تصویری با مقدمات طرح بندی صفحات ...

1397/04/14 1963 بازدید
packtpub-build-real-world-websites-from-scratch-using-html5-and-css3-video

آموزش ایجاد وب سایت های دنیای واقعی با HTML5 و CSS3


این یک دوره جذاب تجربه یادگیری شما را سرگرم کننده و هیجان انگیز می کند در حالیکه شما مهارت های گرانبها را به دست می آورید، شما را آماده تبدیل شدن به ی...

1397/04/10 2000 بازدید
udemy-bootstrap-4-from-scratch-with-5-projects-udemy

آموزش Bootstrap 4 از ابتدا به همراه 5 پروژه


در این دوره با فرض اینکه شما هیچ چیز از بوت استرپ نمی دانید، با تمام utilities، کامپوننت ها، ویدجت ها و شبکه ها و ایجاد تم های جهان واقعی و وب سایت، آ...

1397/03/17 6526 بازدید
lynda-css-transitions-and-transforms

آموزش Transition و Transform در CSS


با پشتیبانی از مرورگر قوی، اکنون امکان استفاده از قابلیت های CSS3 در مرورگرهای مدرن وجود دارد. در این دوره با بررسی گزینه های جدید برنامه نویسی، افزای...

1397/03/13 1224 بازدید زیرنویس دارد
1397/02/30 1266 بازدید زیرنویس دارد
udemy-beginner-full-stack-web-development-html-css-react-node

آموزش توسعه وب Full Stack با HTML ،CSS ،React و Node


در این دوره، توسعه وب یا  HTML، CSS، Bootstrap 4، ES6 React و Node را یاد خواهید گرفت و با توسعه back-end و front-end آشنا می شوید. سرفصل ها: شروع...

1397/02/30 7647 بازدید
pluralsight-html-css-and-javascript-the-big-picture

آموزش HTML، CSS و جاوااسکریپت برای طراحی وب


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

1397/02/25 3083 بازدید
lynda-building-magento-2-themes

آموزش ایجاد تم های Magento 2


در دوره ی حاضر نحوه ی ایجاد و سفارشی کردن تم 2 Magento را به بحث خواهیم گذاشت. مربی Enno Stuurman، این دوره را با نگاهی به تم پیش فرض Luma آغاز می کند...

1397/02/14 895 بازدید زیرنویس دارد
wintellectnow-css3-responsive-design

آموزش طراحی واکنش گرا با CSS3 


طراحی واکنش گرا وب سایت هایی ایجاد می کند که در محیط و در هر دستگاهی سازگار باشد. CSS3  بخش مهمی از طراحی موفق واکنش گرا است. با استفاده از طرح بندی ه...

1397/02/04 1011 بازدید
wintellectnow-css3-styles-for-tables

آموزش استایل های CSS3 برای جداول


جداول مهم هستند. آنها محتوایی را که کاربران ما دنبال می کنند ارائه می دهند. اما جداول نیز ساختارهای پیچیده HTML هستند و اغلب دشوار است که استایل جدول ...

1397/02/04 825 بازدید
packtpub-mastering-mean-web-development

دوره Mastering MEAN Web Development


در این آموزش تصویری با مباحث مربوط به دوره Mastering MEAN Web Development آشنا می شوید. این دوره نحوه ساخت وب سایت را با نرم افزار های Node.js ، Mon...

1397/02/01 2203 بازدید