برای اطلاع از آپدیت دوره ها و تخفیف ها عضو کانال اطلاع رسانی ما بشید ما شوید !
02128428905
0

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

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

 

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

Color

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

text-align

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

line-height

این خاصیت ارتفاع متن رو تعیین میکنه

text-decoration

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

@font-face

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

word-spacing

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

letter-spacing

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

text-shadow

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

text-indent

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

font-family

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

font-size

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

font-weight

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

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

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

background

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

background-color

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

background-image

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

background-position

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

background-size

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

background-clip

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

background-repeat

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

box-shadow

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

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

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

border

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

border-color

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

border-radius

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

border-style

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

border-width

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

 

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

لیست دستورات زبان css

width

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

height

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

max-height و max-width

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

max-height و max-width

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

margin

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

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

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

padding

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

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

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

position

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

top, left, right, bottom

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

opacity

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

visibility

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

display

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

overflow

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

z-index

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

 

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

@keyframe

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

animation

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

animation-delay

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

animation-timing-function

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

animation-duration

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

cursor

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

direction

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

outline

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

transform

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

transition

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

list-style

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

 

آموزش html رایگان

سخن پایانی

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

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

ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *