CSS یک زبان کاربردی است که تکمیل کننده HTML میباشد. شما با استفاده از این زبان میتوانید بسته به سطح نیاز و سلیقه خودتون، استایل های متفاوت را بر روی المان ها و بخش های مختلف هر صفحه اعمال کنید. در این مطلب لیست دستورات 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-radius
برای تعیین مقدار گرد بودن گوشه های المنت استفاده میشه
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
همون طور که از اسمش معلومه برای تعیین استایل آیتم های یک لیست استفاده میشه
منبع:
https://sabzlearn.ir/list-of-css-commands/