آموزش 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
آیا این نوشته را دوست داشتید؟
packtpub-bootstrap-4-for-beginners-build-5-websites-from-scratch-video

آموزش Bootstrap 4 برای مبتدیان - ایجاد 5 وب سایت از ابتدا


این دوره از Bootstrap 4.0.0 بتا، آخرین نسخه استفاده می کند. در مورد Bootstrap Grid و تغییرات جدیدی که استفاده از آن را آسان تر می کند یاد بگیرید. در ا...

1397/08/22 4289 بازدید
packtpub-the-magic-of-css-made-easy-learn-website-design-with-css-video

دوره جادوی CSS - طراحی وب سایت با CSS 


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

1397/08/22 1477 بازدید
lynda-css-refactoring-style-sheets

آموزش CSS - ریفکتور کردن Style Sheets


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

1397/08/16 1011 بازدید
lynda-sketch-creating-responsive-svg

آموزش Sketch - ایجاد گرافیک های SVG واکنش گرا


فرمت Scalable Vector Graphics یا SVG می تواند شامل CSS خاص خود باشد و برای نمایش در هر اندازه ای واکنش گرا باشد. در این دوره مختصر، نحوه استفاده از Sk...

1397/08/03 1211 بازدید
packtpub-a-javascript-war-card-game-project-from-scratch-video

آموزش ایجاد پروژه ی بازی War Card با جاوااسکریپت 


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

1397/07/29 1168 بازدید
packtpub-a-quick-guide-to-bootstrap-4-video

راهنمای سریع Bootstrap 4


در این دوره با اعمال Bootstrap 4 برای طراحی و توسعه وب سایت مدرن، ایجاد صفحات مدرن و واکنش گرا، تمام قابلیت های اصلی Bootstrap 4 آشنا می شوید. بوت است...

1397/07/05 1808 بازدید
packtpub-building-web-uis-with-bootstrap-4-video

آموزش ایجاد رابط کاربری وب با Bootstrap 4


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

1397/07/05 2109 بازدید
packtpub-create-a-website-with-bootstrap-4-for-rapid-website-development-video

آموزش توسعه سریع وب سایت با Bootstrap 4


این دوره به شما چگونگی ساخت وب سایت ها با Bootstrap 4 را نشان می دهد؛ شما می توانید با استفاده از کلاس های بوت استرپ وب سایت ها را سریع و راحت ایجاد ک...

1397/07/02 1759 بازدید
packtpub-practical-html-and-css-video

آموزش کاربردی HTML و CSS


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

1397/07/01 2295 بازدید
lynda-interactive-animations-with-css-and-javascript

آموزش ایجاد انیمیشن های تعاملی با CSS و JavaScript


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

1397/07/01 2256 بازدید زیرنویس دارد
teamtreehouse-css-flexbox-layout-course

دوره ایجاد طرح بندی با CSS Flexbox


Flexbox مجموعه ای از ویژگی های CSS است که به شما امکان انعطاف پذیری برای محتوا را می دهد. با flexbox شما می توانید جهت، تراز، اندازه و نظم عناصر را بد...

1397/05/28 1636 بازدید
teamtreehouse-css-basics-course

آموزش طراحی استایل سایت با CSS


CSS یا Cascading Style Sheets زبان برنامه نویسی ظاهری که صفحات وب را توصیف می کند. در حالی که HTML همان چیزی است که ساختار یک صفحه وب را تشکیل می دهد،...

1397/05/28 1453 بازدید
teamtreehouse-bootstrap-4-basics-course

آموزش اصول و مبانی بوت استرپ 4


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

1397/05/25 1679 بازدید
pluralsight-html5-animations-made-easy-with-animate-css

آموزش ایجاد انیمیشن های HTML5 با Animate.css


در هسته توسعه front-end یک دانش کامل از انیمیشن های CSS است. در این دروه با  انیمیشن های HTML5، اعمال انیمیشن های Animate.css، تنظیمات Animate.css مان...

1397/05/22 1265 بازدید
lynda-css-design-systems-and-architectures

آموزش معماری ها و سیستم های طراحی در CSS


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

1397/05/20 1235 بازدید زیرنویس دارد
teamtreehouse-build-a-responsive-navigation-with-flexbox

آموزش ایجاد ناوبری واکنش گرا با Flexbox


در این کارگاه با ایجاد ناوبری وب سایت واکنش گرا با استفاده از کوئری های رسانه ای CSS و طرح بندی flexbox آشنا می شوید. Flexbox Layout که نام رسمی آن C...

1397/05/17 1344 بازدید
teamtreehouse-creating-a-css-marquee

آموزش ایجاد CSS Marquee


در این کارگاه با ایجاد Marquee در HTML و CSS آشنا می شوید.  ...

1397/05/16 818 بازدید
teamtreehouse-create-tooltips-with-css

آموزش ایجاد Tooltips با CSS


Tooltips یک راه عالی برای ارائه اطلاعات اضافی به کاربران شما است. این تکنیک خالص CSS که ما استفاده می کنیم، از pseudo-elements (شبه عناصر) و custom da...

1397/05/16 758 بازدید
teamtreehouse-css-best-practices

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


توجه بیشتری به نوشتن کد CSS بهتر تا به دانستن آخرین و بزرگترین ویژگی ها و تکنیک ها می شود. در این کارگاه با  بهترین تمرین هایی برای ساخت CSS  کارآمدتر...

1397/05/12 1179 بازدید
udemy-css3-for-beginners-udemy

آموزش CSS3 برای مبتدیان


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

1397/05/10 1024 بازدید