با عرض سلام و بنام خدا خدمت همه ی شما دوستان عزیز
امروز دویاره اومدیم با یه مقاله ی دیگه , ولی به نوعی متفاوت در زمینه ی آموزش طراحی وب یعنی زبان زیبای CSS :)
توی این آموزش میخواهیم خدمت شما عزیزان , لیست دستورات Css رو بررسی کنیم و گلچینی از بهترین های اونارو براتون بنویسیم و خدمتتون بدیم .
خاصیت های مربوط به Layout
لیست دستورات زبان css
width
برای تعیین عرض المنت استفاده میشه
height
برای تعیین ارتفاع المنت استفاده میشه
max-height و max-width
برای تعیین طول و عرض حداقلی المنت استفاده میشه
max-height و max-width
برای تعیین طول و عرض حداقلی المنت استفاده میشه
margin
برای تعیین فاصله المنت از جهات مختلف استفاده میشه، با این خاصیت میتونین فاصله المنت رو از 4 جهت صفحه کنترل بکنین
margin-left, margin-right, margin-top, margin-bottom
از این دستورات برای تعیین فاصله المنت از پایین، بالا، راست و چپ استفاده میشه
padding
برای تعیین فاصله داخلی المنت استفاده میشه، با این خاصیت میتونین فاصله داخلی المنت رو از 4 جهت مختلف کنترل کنین
padding-left, padding-right, padding-top, padding-bottom
از تک تک این خاصیت ها برای تعیین فاصله داخلی المنت از جهت های پایین، بالا، راست و چپ استفاده میشه
position
برای تعیین موقعیت(محل قرارگیری) المنت استفاده میشه
top, left, right, bottom
همون طور که از اسمشون پیداست، از این 4 خاصیت برای تعیین فاصله المنت از جهت های مختلف استفاده میشه
opacity
برای تعیین مقدار شفافیت المنت استفاده میشه
visibility
برای تعیین نمایش یا عدم نمایش المنت استفاده میشه
display
توضیح در مورد این خاصیت یکم سخته! میتونم بگم برای تعیین نحوه عرض گیری و نحوه نمایش المنت استفاده بشه، اگه به این خاصیت مقدار none داده بشه، المنت مدنظرتون نمایش داده نمیشه
overflow
برای تعیین نوع نمایش محتوای سرریز شده المنت استفاده میشه، ممکنه تو وب سایتتون محتوای یک المنت بیشتر از اندازه اون المنت باشه که در این حالت اطلاعات اضافی سرریز میشن، این المنت نحوه نمایش اطلاعات سرریز شده رو تعیین میکنه
z-index
برای تعیین ترتیب نمایش المنت ها استفاده میشود زمانی حالتی اتفاق میفتد که المنت ها روی هم قرار بگیرند، این خاصیت ترتیب نمایش المنت ها مشخص میکنه
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
برای تعیین قدار ضخامت متن استفاده میشه
خاصیت های متفرقه
@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
همون طور که از اسمش معلومه برای تعیین استایل آیتم های یک لیست استفاده میشه
خب دوستان عزیز اینم از اولین بخش این مقاله ی آموزشی , امیدوارم که استفاده ی لازم رو ببرید و این مقاله به دردتون بخوره ...
تا آموزش بعدی خدانگهدار :)