آموزش 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-getting-started-with-css-for-react-developers

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


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

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

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


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

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

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


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

1398/06/17 4841 بازدید
pluralsight-creating-a-site-with-css-grid-and-bootstrap-4

آموزش ایجاد سایت با بوت استرپ 4 و CSS Grid


در این دوره شما قدرت بوت استرپ 4 و CSS Grid را با هم ترکیب می کنید تا طرح بندی واکنش گرا ایجاد کنید. همچنین، استفاده از محبوب ترین کتابخانه کامپوننت f...

1398/06/11 3785 بازدید
packtpub-practice-css-grid-projects-to-build-modern-real-world-websites

تمرین پروژه های CSS Grid برای ساخت وب سایت های مدرن دنیای واقعی


با استفاده از مفاهیمی که در این دوره یاد می گیرید می توانید کدنویسی و طراحی کنید. در این دوره با ویژگی های CSS Grid، مفهوم Grid lines برای ایجاد طرح ب...

1398/06/05 1777 بازدید
packtpub-an-introduction-to-css-a-complete-beginner-to-expert-course

دوره کامل آموزش سی اس اس از مبتدی تا متخصص


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

1398/03/27 7217 بازدید
packtpub-advanced-css-building-and-styling-a-website

آموزش پیشرفته استایل دادن به سایت با CSS


در این دوره هر چیزی را که برای شروع ساخت وبسایت های واکنشگرا و انعطاف پذیر نیاز داشته باشید را یاد می گیرید....

1398/02/28 3552 بازدید
skillshare-responsive-web-design-learn-to-design-a-responsive-landing-page

آموزش طراحی صفحه فرود (Landing Page) واکنشگرا


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

1398/02/22 2128 بازدید
packtpub-the-complete-web-developer-course-2-0

دوره کامل طراحی وب - The Complete Web Developer Course 2.0


این دوره شما را به سفری برای یادگیری ساخت وب سایت و اپلیکیشن موبایل با استفاده از (HTML ، CSS ، Javascript ، PHP ، Python و MySQL) می برد. این دوره با...

1398/02/20 48521 بازدید
skillshare-javascript-fun-build-a-tip-calculator

ساخت Tip Calculator با جاوااسکریپت


ایجاد یک Tip Calculator با جاوااسکریپت به زبان ساده...

1398/01/31 1721 بازدید
skillshare-building-a-website-with-photoshop-cc

آموزش ساخت وب سایت با Photoshop CC


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

1398/01/27 2340 بازدید
skillshare-build-an-html-and-css-website-from-scratch

ساخت وب سایت با HTML و CSS از ابتدا


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

1398/01/27 3111 بازدید
packtpub-css-the-complete-guide-incl-flexbox-grid-and-sass-video

آموزش CSS - راهنمای کامل (incl. Flexbox ،Grid و Sass)


هر توسعه دهنده وب باید CSS را یاد بگیرد. این دوره ی کامل به صورت ویدئویی و رایگان در اختیار شما قرار می گیرد...

1398/01/16 3834 بازدید
packtpub-the-complete-web-development-course-build-15-projects-video

دوره کامل طراحی وب همراه با 15 پروژه


دوره کامل طراحی وب همراه با 15 پروژه از مقدماتی تا پیشرفته با PHP و MYSQL به همراه HTML و CSS و Javascript و Jquery و Bootstrap...

1398/01/14 15696 بازدید
packtpub-create-a-parallax-style-single-page-website-from-scratch-using-bootstrap-4-video

آموزش ایجاد وب سایت تک صفحه ای پارالاکس با Bootstrap 4


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

1397/10/19 2830 بازدید
packtpub-a-front-end-web-developer-masterclass-using-html-css-and-javascript-video

آموزش کامل توسعه دهنده وب Front-End با HTML، CSS و جاوااسکریپت


در این دوره HTML CSS و JavaScript را خواهید آموخت. این دوره شامل موضوعات مختلف در HTML مانند چگونگی نوشتن و تمرین HTML، تگ های Heading، به روز رسانی ق...

1397/09/24 7662 بازدید
fontawesome-pro

دانلود نسخه پیشرفته Font Awesome Pro v5.5.0


آشنایی با Font Awesome Font Awesome یک مجموعه آیکن برداری مبتنی بر فونت است که در تمام برنامه های تحت وب، دسکتاپ و موبایل می توانید از آیکن های آن اس...

1397/09/20 10635 بازدید
teamtreehouse-practice-media-queries

تمرین Media Queries در CSS3


در این کارگاه تمرین نوشتن کوئری های Media در CSS را با تنظیم طرح بندی یک صفحه وب ساده انجام می دهید. کوئری های Media یک ماژول CSS3 است که امکان رندر ...

1397/09/11 1133 بازدید
teamtreehouse-css-transitions-and-transforms-course

دوره Transitions و Transforms در CSS 


Transitions و Transforms در CSS می تواند انیمیشن های ساده ایجاد کند که تعاملات کاربر را در وب سایت ها و برنامه ها افزایش دهد. در این دوره با ایجاد گال...

1397/09/07 1387 بازدید
teamtreehouse-css-selectors-course

آشنایی با CSS selector


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

1397/08/30 1085 بازدید