آموزش 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
آیا این نوشته را دوست داشتید؟
linkedin-responsive-layout-2-0

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


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

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

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


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

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

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


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

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

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


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

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

آموزش CSS تا Sass


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

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

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


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

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

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


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

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

آموزش مبانی Sass


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

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

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


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

1398/08/23 1839 بازدید
packtpub-artificial-intelligence-in-game-development-tic-tac-toe-ai

آموزش هوش مصنوعی در توسعه بازی - هوش مصنوعی بازی Tic Tac Toe


در این دوره با نحوه عملکرد بازی ها، ویژگی های مختلف آنها و ماژول های اصلی این دوره آشنا می شوید. معرفی الگوریتم MiniMax و نحوه پیاده سازی آن، نمایش گر...

1398/08/20 1540 بازدید
skillshare-learn-responsive-web-design-101-from-scratch-includes-html5-and-css3-crash-courses

طراحی وب سایت واکنشگرا را از ابتدا یاد بگیرید.(شامل دوره های HTML5 و CSS3)


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

1398/08/16 4989 بازدید
packtpub-html-css-and-javascript-for-beginners-a-web-design-course

دوره طراحی وب با HTML و CSS و Javascript برای مبتدیان


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

1398/08/13 21579 بازدید
linkedin-getting-started-with-css-for-react-developers

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


این دوره مبانی CSS و PostCSS را برای ایجاد اپلیکیشن های React پوشش می دهد. همچنین، نحوه استفاده از بسته اسکریپت های سفارشی React و پیکربندی PostCSS را...

1398/08/04 1022 بازدید
skillshare-mobile-first-design-in-webflow

آموزش طراحی Mobile-First در WebFlow


هدف از این دوره درک بهتر چگونگی استفاده از رویکرد موبایل در هنگام طراحی محتوا در Webflow است. ما هنگام ایجاد ساختار محتوا و تصمیم گیری در مورد نحوه نم...

1398/07/14 781 بازدید
skillshare-step-by-step-html-and-css-for-absolute-beginners

آموزش گام به گام HTML و CSS برای مبتدیان


در این دوره با کدهای HTML5 و CSS3 صفحه وب ساده  "Coming Soon"  را ایجاد می کنید. شما با ابزارهای لازم برای نوشتن کد HTML و CSS، استفاده از HTML برای س...

1398/06/17 4535 بازدید