لیست دستورات Css + ویدئو

سلام و عرض ادب خدمت همراهان همیشگی سبزلرن در این مقاله می خواهیم لیست دستورات Css را باهم بررسی کنیم. همونطور که میدونین Css زبانی هست برای استایل دهی به صفحات وب و هیچ وب سایتی نیست که تگ های Css داخلش نداشته باشه 🙂

کدنویسی Css به این شکل هست که یک المنت از Html رو انتخاب میکنیم و استایل مدنظرمون رو با کد های css بهش میدیم قبل از استایل دهی به المنت باید روش های انتخاب المنت رو بلد باشین، پس ابتدا انتخابگر های Css رو یاد بگیرین و بعدا این لیست تگ های css رو مطالعه کنین.

همچنین ببینید: آموزش css رایگان.

لیست دستورات css

لیست دستورات css به چند دسته تقسیم میشه از جمله متن، زمینه، حاشیه و… . در این بخش ما تمام کد های css را در دسته های مختلف قرار دادیم. شما می تونید لیست تگ های css مربوط به هر بخش را به شکل منظم مطالعه کنید.

خاصیت های مربوط به متن

Color

این خاصیت برای تغییر رنگ متن المنت استفاده میشه؛ به این خاصیت میتونین به صورت های مختلف مثل اسم رنگ، کد رنگ، rgb، rgba و … مقدار بدین و استایل داده شده به تگ مد نظر شما نسبت داده بشه.

text-align

این خاصیت موقعیت متن داخل تگ های css رو تعیین میکنه، این که متن چپ چین، راست چین یا وسط چین باشد

line-height

این خاصیت در لیست تگ های css ارتفاع متن رو تعیین میکنه

text-decoration

این خاصیت نحوه نمایش متن رو تعیین میکنه، زیر خط دار، بالا خط دار و ….

@font-face

این دستور از دستورات css برای تعریف یک فونت و تعیین اسم برای آن استفاده میشود

word-spacing

این خاصیت در کد های css برای تعیین فاصله بین کلمات استفاده میشه

letter-spacing

این خاصیت برای تعیین فاصله بین حروف متون استفاده میشه

text-shadow

این خاصیت کد های css برای تعیین سایه به متن استفاده میشه

text-indent

این خاصیت در تگ های css برای تعیین مقدار تورفتگی متن استفاده میشه

font-family

برای تعیین نوع فونت یک المنت در لیست تگ های css استفاده میشه

font-size

در تمام کد های css از این خاصیت برای تعیین سایز متن استفاده میشه

font-weight

برای تعیین قدار ضخامت متن در تگ های css از این ویژگی استفاده میشه

خاصیت های مربوط به background

background

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

background-color

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

background-image

برای تعیین عکس بک گراند المنت استفاده میشه

background-position

برای تعیین موقعیت قرار گیری بک گراند استفاده میشه

background-size

برای تعیین اندازه عکس بک گراند استفاده میشه

background-clip

برای برش دادن عکس بک گراند استفاده میشه

background-repeat

برای تعیین تکرار یا عدم تکرار عکس بک گراند استفاده میشه

box-shadow

برای تعیین سایه برای کل باکس المنت استفاده میشه

خاصیت های مربوط به border

border

برای تعیین تمام خاصیت های مربوط به حاشیه(border) در کد های css استفاده میشه

border-color

برای تعیین رنگ برای حاشیه المنت در تمام تگ های css از این ویژگی استفاده میشه

border-rdius

برای تعیین مقدار گرد بودن گوشه های المنت استفاده میشه

border-style

در تمام تگ های css از این ویژگی برای تعیین نوع حاشیه استفاده میشه

border-width

برای تعیین ضخامت کادر حاسیه استفاده میشه

خاصیت های مربوط به Layout

width

در کل لیست تگ های css از این ویژگی لیست تگ های cssبرای تعیین عرض المنت استفاده میشه

height

برای تعیین ارتفاع المنت استفاده میشه

max-height و max-width

برای تعیین طول و عرض حداقلی المنت استفاده میشه

max-height و max-width

برای تعیین طول و عرض حداقلی المنت استفاده میشه

margin

برای تعیین فاصله المنت از جهات مختلف در تمام تگ های css از مارجین استفاده میشه، با این خاصیت میتونین فاصله المنت رو از 4 جهت صفحه کنترل بکنین

margin-left, margin-right, margin-top, margin-bottom

از این دستورات در  تمام کد های css برای تعیین فاصله المنت از پایین، بالا، راست و چپ استفاده میشه

padding

برای تعیین فاصله داخلی المنت در کد های css استفاده میشه، با این خاصیت میتونین فاصله داخلی المنت رو از 4 جهت مختلف کنترل کنین

padding-left, padding-right, padding-top, padding-bottom

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

position

داخل تمام لیست تگ های css از پوزیشن برای تعیین موقعیت(محل قرارگیری) المنت استفاده میشه

top, left, right, bottom

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

opacity

آپوسیتی ویژگی ای است که در تمام تگ های css برای تعیین مقدار شفافیت المنت استفاده میشه

visibility

در تمام کد های css از این ویژگی برای تعیین نمایش یا عدم نمایش المنت استفاده میشه

display

توضیح در مورد این خاصیت یکم سخته! میتونم بگم برای تعیین نحوه عرض گیری و نحوه نمایش المنت استفاده بشه، اگه به این خاصیت مقدار none داده بشه، المنت مدنظرتون نمایش داده نمیشه

overflow

برای تعیین نوع نمایش محتوای سرریز شده المنت در کد های css استفاده میشه، ممکنه تو وب سایتتون محتوای یک المنت بیشتر از اندازه اون المنت باشه که در این حالت اطلاعات اضافی سرریز میشن، این المنت نحوه نمایش اطلاعات سرریز شده رو تعیین میکنه

z-index

برای تعیین ترتیب نمایش المنت ها استفاده میشود زمانی حالتی اتفاق میفتد که المنت ها روی هم قرار بگیرند، این خاصیت ترتیب نمایش المنت ها مشخص میکنه

خاصیت های متفرقه

@keyframe

در تمام کد های css از این ویژگی برای تعریف یک انیمیشن استفاده میشه

animation

داخل لیست تگ های css از این ویژگی برای تعیین اطلاعات یک انیمیشن تعریف شده برای یک المنت استفاده میشود

animation-delay

برای تعیین مدت زمان تاخیر قبل از اجرای انیمیشن استفاده میشه

animation-timing-function

برای سرعت اجرای انیمیشن استفاده میشه

animation-duration

برای تعیین مدت زمان اجرای انیمیشن استفاده میشود

cursor

در تمام کد های css از کرسر برای تغییر شکل اشاره گر ماوس استفاده میشه

direction

برای تعیین چپ به راست یا راست به چپ بودن المنت میشه، برای محتوای زبان انگلیسی که از چپ شروع میشن مقدار ltr رو میگیره که مخفف left to right هست و برای محتوای فارسی زبان که از سمت راست شروع میشن مقدار rtl رو میگیره که مخفف right to left هست

outline

داخل تمام کد های css از اوتلاین برای تنظیم کادر بیرونی المنت استفاده میشه(بیشتر برای دکمه ها مورد استفاده قرار میگیره)

transform

این خاصیت در تمام تگ های css قابل کاربرده و چند تابع دارد که هر تابع کار مختص خودشو داره، در کل برای تغییر شکل و نحوه نمایش المنت استفاده میشه

transition

این ویژگی هم در تمام تگ های css به کار میره و برای تعیین تاخیر در اجرای خاصیت های Css یک المنت استفاده میشه(هر خاصیت که شما تعیین کنین، با تاخیر اجرا میشه و سرعت تاخیر رو خودتون تعیین میکنین)

list-style

همون طور که از اسمش معلومه برای تعیین استایل آیتم های یک لیست استفاده میشه

سخن پایانی

تو این مقاله سعی کردم کاربردی لیست تگ های css و ویژگیهاشون رو براتون معرفی کنم، پیشنهاد میکنم برای اطلاعات بیشتر درمورد لیست دستورات Css ویدیوی این مقاله رو هم ببینین ولی همون طور که میدونین لیست دستورات Css در تمام کد های css فقط همینا نیستن و خیلی از موارد دیگه هم وجود دارن! برای شناخت تمام دستورات css و تگ های css بهتره کتاب ها و منابع فارسی و انگلیسی این زبان زیبا را مطالعه کنید.

اگه سوال، انتقاد یا پیشنهادی در این مقاله داشتین تو کامنت ها برامون بنویسین
تا مقاله ای دیگر خدانگهدار.

محمدامین سعیدی راد