آموزش CSS | آموزش کامل CSS و CSS3 + انجام پروژه عملی

در دوره آموزش کامل HTML و HTML5 ما به طور کامل یاد گرفتیم تا ساختار اصلی یک صفحه وب رو تشکیل بدیم اما همانطور که گفتیم این صفحه وب فقط و فقط یک ساختار بی رنگ و لعاب و کاملا بی روح بود که نیاز به یک مکمل داشت تا بتونه این کاستی ها رو رفع کنه… خب الان وقتش رسیده که ما این مکمل رو به ساختار اصلی صفحه وب خودمون اضافه کنیم تا بتونیم یک قالب زیبا و حرفه ای رو ایجاد کنیم ،توصیه میشود ( دوره آموزشی طراحی سایت ) را نیز مشاهده کنید  این مکمل آموزش CSS یا بهتره بگیم آموزش تصویری css3 و css هستش :

CSS چیست؟

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

چرا از CSS استفاده می شود؟

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

هنگامی که استایل در CSS تعریف شود، می توان از هر صفحه ای که به فایل صفحات الگوی آبشاری اشاره دارد استفاده شود و همان الگو ها را در آن صفحه اعمال کرد. علاوه بر این، CSS باعث می شود که به راحتی الگو های چند صفحه را هم زمان و به یک شکل تغییر داد. به عنوان مثال، توسعه دهنده وب ممکن است بخواهد اندازه متن پیش فرض را از ۱۰pt تا ۱۲pt برای پنجاه صفحه وب سایت افزایش دهد. اگر صفحات همه دارای یک CSS یکسان باشند، با تغییر اندازه متن در این سند الگوی آبشاری می توان متن های کل این صفحات را بزرگتر نشان داد. پس در واقع آموزش CSS باعث کنترل راحت تر و عملکرد سریع تر صفحات HTML شما می شود.

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

از زبان CSS برای استایل دهی به صفحات وب استفاده میشود که در نسخه 3 این زبان یا همان CSS3 قدرت این زبان چند برابر شده و تعداد متعددی از استایل های جدید به آن اضافه شده است که در این دوره آموزشی ما از پایه ترین مباحث CSS شروع میکنیم تا به مباحث پیشرفته CSS3 برسیم و در انتهای این دوره آموزشی یک قالب زیبا رو نیز به صورت عملی و کاربردی طراحی خواهیم کرد.

مباحثی که در این دوره آموزش تصویری css3 مطرح خواهد شد :

قسمت اول : مقدمات کار با کدهای CSS

• آشنایی با انواع روش های استایل دهی Inline ، Internal ، External  در CSS
• آشنایی با ساختار کدهای CSS
• مقدمه ای بر سلکتورها و آشنایی با Element Selector
• آشنایی با Id Selector و Class Selector

قسمت دوم : شروع کار با Selector ها در آموزش CSS

• آشنایی با سلکتور *
• آشنایی با Grouping Selector
• آشنایی با سلکتور های تودرتو یا Nested Selector
• آشنایی با سلکتور <
• آشنایی با سلکتور +
• آشنایی با سلکتور ~

قسمت سوم : آشنایی با Attribute Selector ها در آموزش CSS

• آشنایی با سلکتور [attribute]
• آشنایی با سلکتور [attribute = value]
• آشنایی با سلکتور [attribute ~= value]
• آشنایی با سلکتور [attribute *= value]
• آشنایی با سلکتور [attribute ^= value]
• آشنایی با سلکتور [attribute $= value]

قسمت چهارم : آشنایی با Pseudo Classes در آموزش CSS

• آشنایی با کلاس کاذب root:
• آشنایی با کلاس کاذب nth-child:
• آشنایی با کلاس کاذب first-child:
• آشنایی با کلاس کاذب last-child:
• آشنایی با کلاس کاذب nth-last-child:
• آشنایی با کلاس کاذب nth-of-type:
• آشنایی با کلاس کاذب nth-last-of-type:
• آشنایی با کلاس کاذب first-of-type:
• آشنایی با کلاس کاذب last-of-type:
• آشنایی با کلاس کاذب only-child:
• آشنایی با کلاس کاذب only-of-type:
• آشنایی با کلاس کاذب not:
• آشنایی با المنت کاذب first-letter::
• آشنایی با المنت کاذب first-line::
• آشنایی با المنت کاذب selection::
• آشنایی با المنت کاذب before::
• آشنایی با المنت کاذب after::

قسمت پنجم : ادامه کار با Pseudo Classes در آموزش کامل CSS

• آشنایی با کلاس کاذب active:
• آشنایی با کلاس کاذب link:
• آشنایی با کلاس کاذب visited:
• آشنایی با کلاس کاذب hover:
• آشنایی با کلاس کاذب enabled:
• آشنایی با کلاس کاذب disabled:
• آشنایی با کلاس کاذب focus:
• آشنایی با کلاس کاذب optional:
• آشنایی با کلاس کاذب required:
• آشنایی با کلاس کاذب read-only:
• آشنایی با کلاس کاذب read-write:
• آشنایی با کلاس کاذب valid:
• آشنایی با کلاس کاذب invalid:
• آشنایی با کلاس کاذب checked:
• آشنایی با المنت کاذب placeholder::

قسمت ششم : آشنایی با خاصیت های Color و Display

• مقدار name در color
• مقدار rgb در color
• مقدار rgba در color
• مقدار HEX در color
• مقدار block در display
• مقدار inline در display
• مقدار inline-block در display
• مقدار list-item در display

قسمت هفتم : آشنایی با خاصیت های عرض و ارتفاع و Background در آموزش CSS

• آشنایی با خاصیت width
• آشنایی با خاصیت height
• آشنایی با خاصیت min-width
• آشنایی با خاصیت max-width
• آشنایی با خاصیت min-height
• آشنایی با خاصیت max-height
• آشنایی با خاصیت background-color
• آشنایی با خاصیت background-image
• آشنایی با خاصیت background-repeat
• آشنایی با خاصیت background-position
• آشنایی با خاصیت background-atachment
• آشنایی با حالت مختصر Background

قسمت هشتم : آشنایی با خاصیت های Box Model در آموزش تصویری css3

• آشنایی با مفهوم Box Model
• آشنایی با خاصیت border-width
• آشنایی با خاصیت border-style
• آشنایی با خاصیت border-color
• آشنایی با border shorthand
• آشنایی با خاصیت border-right
• آشنایی با خاصیت border-top
• آشنایی با خاصیت border-bottom
• آشنایی با خاصیت border-left
• آشنایی با خاصیت border-radius
• آشنایی با خاصیت border-top-right-radius
• آشنایی با خاصیت border-top-left-radius
• آشنایی با خاصیت border-bottom-right-radius
• آشنایی با خاصیت border-bottom-left-radius
• آشنایی با خاصیت outline و تفاوت آن با border

قسمت نهم : ادامه آشنایی با خاصیت های Box Model در CSS

• آشنایی با خاصیت padding
• آشنایی با خاصیت padding-top
• آشنایی با خاصیت padding-right
• آشنایی با خاصیت padding-bottom
• آشنایی با خاصیت padding-left
• آشنایی با حالت های مختلف خاصیت padding
• آشنایی با خاصیت margin
• آشنایی با خاصیت margin-top
• آشنایی با خاصیت margin-right
• آشنایی با خاصیت margin-bottom
• آشنایی با خاصیت margin-left

قسمت دهم : شروع استایل دهی متون در آموزش تصویری css3

• آشنایی با خاصیت text-align
• آشنایی با خاصیت text-decoration
• آشنایی با خاصیت text-transform
• آشنایی با خاصیت text-indent
• آشنایی با خاصیت letter-spacing
• آشنایی با خاصیت word-spacing
• آشنایی با خاصیت direction
• آشنایی با خاصیت line-height
• آشنایی با خاصیت vertical-align
• آشنایی با خاصیت white-space

قسمت یازدهم : آشنایی با خاصیت Font در آموزش CSS

• آشنایی با خاصیت font-family
• آشنایی با خاصیت font-style
• آشنایی با خاصیت font-size
• آشنایی با خاصیت font-weight
• آشنایی با خاصیت font-variant
• آشنایی با Font Shorthand

قسمت دوازدهم : کار با آیکون ها در آموزش تصویری css3

• آشنایی با آیکون های Font Awesome
• آشنایی با آیکون های BootStrap
• آشنایی با آیکون های Google Material Icons

قسمت سیزدهم : آشنایی با خاصیت های لیست ها و استایل دهی یک Table

• آشنایی با خاصیت list-style-type
• آشنایی با خاصیت list-style-image
• آشنایی با خاصیت list-style-position
• آشنایی با list-style Shorthand
• استایل دهی یک Table
• آشنایی با خاصیت border-collapse

قسمت چهاردهم : آشنایی با مقادیر Table در خاصیت Display

• آشنایی با مقدار table در Dispaly
• آشنایی با مقدار table-row در Dispaly
• آشنایی با مقدار table-cell در Dispaly

قسمت پانزدهم : آشنایی با خاصیت Position در آموزش کامل css

• آشنایی با مفهوم flow یا جریان
• آشنایی یا خاصیت های top – right – bottom – left
• آشنایی با مقدار static در position
• آشنایی با مقدار relative در position
• آشنایی با مقدار absolute در position
• آشنایی با مقدار fixed در position
• آشنایی با مقدار sticky در position

قسمت شانزدهم : آشنایی با خاصیت Overflow در آموزش تصویری css3

• آشنایی با مقدار hidden در overflow
• آشنایی با مقدار visible در overflow
• آشنایی با مقدار scroll در overflow
• آشنایی با مقدار auto در overflow
• آشنایی با خاصیت overflow-x
• آشنایی با خاصیت overflow-y

قسمت هفدهم : آشنایی با خاصیت float در آموزش CSS

• آشنایی با مقادیر left و right در float
• آشنایی با مشکلات float و رفع آنها
• تفاوت float با position : absolute
• تفاوت float با display : inline-block
• آشنایی با خاصیت clear

قسمت هجدهم : آشنایی با خاصیت های opacity و z-index

• آشنایی با مفهوم overlapping

قسمت نوزدهم : آشنایی با مبحث specificity در CSS

• آشنایی کامل با اولویت کدها در آموزش CSS
• آشنایی با مقدار important!

قسمت بیستم : آشنای با خاصیت های Cursor و Visibility در آموزش کامل css

• آشنایی با مقادیر مختلف Cursor
• آشنایی با مقدار hidden در Visibility
• آشنایی با مقدار vsible در Visibility
• تفاوت خاصیت Visibility با Dispaly
• آشنایی با مقدار collapse در Visibility

قسمت بیست و یکم : آشنایی با خاصیت Border-image در CSS3

• آشنایی با مفهوم پیشوندها در CSS3
• اشنایی با پیشوندهای webkit – moz – o – ms
• آشنایی با Border-slice و حالت های مختلف آن
• آشنایی با Border-repeat و حالت های مختلف آن
• آشنایی با مقدار transparent در border

قسمت بیست و دوم : آشنایی با خاصیت های جدید Background در CSS3

• آشنایی با حالت Multi Background در CSS3
• آشنایی با خاصیت Background-size و حالت های مختلف آن
• آشنایی با خاصیت Background-origin و حالت های مختلف آن
• آشنایی با خاصیت Background-clip و حالت های مختلف آن

قسمت بیست و سوم : آشنایی با Linear-gradient در CSS3

• آشنایی با حالت ساده و معمولی linear-gradient
• آشنایی با نحوه تغییر زاویه رنگ با مقادیر ثابت
• آشنایی با تفاوت linear-gradient با حالت استانداردسازی شده آن
• آشنایی با نحوه تغییر زاویه رنگ با استفاده از درجه
• استفاده از rgba در linear-gradient
• آشنایی با Color-stop در linear-gradient
• آشنایی با repeating در linear-gradient

قسمت بیست و چهارم : آشنایی با radial-gradient در CSS3

• آشنایی با حالت ساده و معمولی radial-gradient
• آشنایی با حالت Circle و Ellipse در radial-gradient
• استفاده از rgba در radial-gradient
• آشنایی با نحوه تغییر زاویه رنگ با مقادیر ثابت و درصدی
• آشنایی با تفاوت radial-gradient با حالت استانداردسازی شده آن
• آشنایی با مقادیر closest-side و closest-corner
• آشنایی با مقادیر farthest-side و farthest-corner
• آشنایی با Color-stop در radial-gradient
• آشنایی با repeating در radial-gradient

قسمت بیست و پنجم : آشنایی با خاصیت های box-shadow و text-shadow در CSS3

• آشنایی با حالت های مختلف box-shadow
• آشنایی با حالت های مختلف text-shadow

قسمت بیست و ششم : آشنایی با خاصیت های text-overflow ، word-wrap و word-break

• آشنایی با مقادیر clip و ellipsis در text-overflow
• آشنایی با مقدار break-word در word-wrap
• آشنایی با مقادیر break-all و keep-all در word-break

قسمت بیست و هفتم : آشنایی با font-face در CSS3

• نحوه اضافه کردن فونت به سایت و استفاده از font-face

قسمت بیست و هشتم : آشنایی با خاصیت transition در CSS3

• آشنایی با خاصیت transition-property
• آشنایی با خاصیت transition-duration
• آشنایی با خاصیت transition-timing-function
• آشنایی با خاصیت transition-delay
• آشنایی با transition Shorthand
• آشنایی با Multi transition
• آشنایی با مقادیر timing-function
• آشنایی با مقدار cubic-bezier در timing-function
• آشنایی با مقدار steps در timing-function

قسمت بیست و نهم : آشنایی با حالت 2 بعدی Transform در آموزش تصویری css3

• آشنایی با مقدار translate و حالت های مختلف آن
• آشنایی با مقدار rotate و حالت های مختلف آن
• آشنایی با مقدار scale و حالت های مختلف آن
• آشنایی با مقدار skew و حالت های مختلف آن
• آشنایی با مقدار matrix

قسمت سی ام : آشنایی با حالت 3 بعدی Transform در CSS3

• آشنایی با مقدار perspective
• آشنایی با مقدار translateZ
• آشنایی با مقادیر rotateX و rotateY و rotateZ
• آشنایی با مقدار rotate3d
• آشنایی با خاصیت perspective و تفاوت آن با مقدار perspective
• آشنایی با خاصیت transform-origin
• آشنایی با خاصیت perspective-origin
• آشنایی با مقدار translate3d
• آشنایی با مقدار scaleZ

قسمت سی و یکم : آشنایی با خاصیت Animation در آموزش تصویری css3

• آشنایی با دستور Keyframes و حالت های مختلف آن
• آشنایی با خاصیت animation-name
• آشنایی با خاصیت animation-duration
• آشنایی با خاصیت animation-timing-function
• آشنایی با خاصیت animation-delay
• آشنایی با خاصیت animation-iteration-count
• آشنایی با خاصیت animation-direction
• آشنایی با خاصیت animation-fill-mode
• آشنایی با خاصیت animation-play-state

قسمت سی و دوم : آشنایی با خاصیت Filter

• آشنایی با مقدار blur
• آشنایی با مقدار brightness
• آشنایی با مقدار contrast
• آشنایی با مقدار grayscale
• آشنایی با مقدار hue-rotate
• آشنایی با مقدار invert
• آشنایی با مقدار opacity
• آشنایی با مقدار saturate
• آشنایی با مقدار drop-shadow
• آشنایی با مقدار sepia

قسمت سی و سوم : آشنایی با خاصیت های object-fit ، box-sizing و resize در آموزش تصویری css3

• آشنایی با خاصیت object-fit و حالت های مختلف آن
• آشنایی با خاصیت box-sizing و حالت های مختلف آن
• آشنایی با خاصیت resize و حالت های مختلف آن

قسمت سی و چهارم : آشنایی با Multiple Columns در CSS3

• آشنایی با خاصیت column-count
• آشنایی با خاصیت column-width
• آشنایی با خاصیت column-gap
• آشنایی با خاصیت column-rule
• آشنایی با خاصیت column-span

قسمت سی و پنجم : آشنایی با Media Queries در آموزش تصویری css3

• آشنایی با مفهوم ریسپانسیوسازی
• آشنایی با نحوه نوشتن Media Queries
• آشنایی Screen – Print – Speech Media Types
• آشنایی با Media Conditions
• آشنایی با مقدار Landscape در orientation
• آشنایی با مقدار Portrait در orientation

قسمت سی و ششم : پروژه طراحی قالب با CSS and CSS3 – بخش اول

• طراحی بخش هدر قالب

قسمت سی و هفتم : پروژه طراحی قالب با CSS and CSS3 – بخش دوم

• طراحی بخش منوی قالب

قسمت سی و هشتم : پروژه طراحی قالب با CSS and CSS3 – بخش سوم

• طراحی ساختار اصلی بخش محتوای قالب

قسمت سی و نهم : پروژه طراحی قالب با CSS and CSS3 – بخش چهارم

• طراحی بخش محتوای قالب

قسمت چهلم : پروژه طراحی قالب با CSS and CSS3 – بخش پنجم

• طراحی بخش صفحه بندی و فوتر قالب