لیست دستورات css
در این مطلب از آموزش html و css می خواهیم به معرفی لیست دستورات css بپردازیم. شما به کمک کدها و ویژگی های css می توانید به صفحات سایت خود استایل دهی کنید و آنان را زیباتر و جذاب تر کنید. بنابراین لازم است که با کاربرد و نحوه کدنویسی کدها در لیست دستورات css آشنا شوید. بنابراین تا انتهای مطلب با ما همراه باشید تا تسلط کافی نسبت به این موضوع پیدا کنید.
لیست دستورات css
لیست دستورات css به چند دسته تقسیم می شود از جمله متن، زمینه، حاشیه. در این بخش تمام کد های css در دسته های مختلف قرار داده شده است. شما می توانید لیست دستورات css مربوط به هر بخش را به شکل منظم مطالعه کنید.
ویژگی های مربوط به متن
Color
این خاصیت از لیست دستورات css برای تغییر رنگ متن المنت استفاده می شود. به این خاصیت میتوانید به صورت های مختلف مانند اسم رنگ، کد رنگ، rgb، rgba و … مقدار بدهید و استایل داده شده به تگ مد نظر شما نسبت داده شود.
text-align
این خاصیت موقعیت متن داخل تگ های css را تعیین می کند. این که متن چپ چین، راست چین یا وسط چین باشد.
line-height
این خاصیت در لیست دستورات css ارتفاع متن را تعیین می کند.
text-decoration
این خاصیت نحوه نمایش متن را تعیین می کند. زیر خط دار، بالا خط دار و ….
@font-face
این دستور از لیست دستورات css برای تعریف یک فونت و تعیین اسم برای آن استفاده می شود.
word-spacing
این خاصیت در کد های css برای تعیین فاصله بین کلمات استفاده می شود.
letter-spacing
این خاصیت از لیست دستورات css برای تعیین فاصله بین حراف متون استفاده می شود.
text-shadow
این خاصیت کد های css برای تعیین سایه به متن استفاده می شود.
text-indent
این خاصیت در تگ های css برای تعیین مقدار تورفتگی متن استفاده می شود.
font-family
برای تعیین نوع فونت یک المنت در لیست تگ های css استفاده می شود.
font-size
در تمام کد های css از این خاصیت برای تعیین سایز متن استفاده می شود.
font-weight
از این ویژگی در لیست دستورات css برای تعیین مقدار ضخامت متن استفاده می شود.
ویژگی های مربوط به background در css
این دستور برای تعیین تمام خاصیت های مربوط به بک گراند المنت استفاده می شود.
background-color
با این خاصیت می توانید رنگ پس زمینه المنت مدنظرتون را تغییر دهید و هر رنگ دلخواهی را برایش استفاده کنید.
background-image
برای تعیین عکس بک گراند المنت استفاده می شود.
background-position
برای تعیین موقعیت قرار گیری بک گراند استفاده می شود.
background-size
برای تعیین اندازه عکس بک گراند استفاده می شود.
background-clip
برای برش دادن عکس بک گراند استفاده می شود.
background-repeat
برای تعیین تکرار یا عدم تکرار عکس بک گراند استفاده می شود.
box-shadow
برای تعیین سایه برای کل باکس المنت استفاده می شود.
خاصیت های مربوط به border
برای تعیین تمام خاصیت های مربوط به حاشیه (border) در لیست دستورات css استفاده می شود.
border-color
برای تعیین رنگ برای حاشیه المنت در تمام تگ های css از این ویژگی استفاده می شود.
border-radius
برای تعیین مقدار گرد بودن گوشه های المنت استفاده می شود.
border-style
در لیست دستورات css از این ویژگی برای تعیین نوع حاشیه استفاده می شود.
border-width
برای تعیین ضخامت کادر حاسیه استفاده می شود.
ویژگی های مربوط به Layout در css
width
در کل لیست دستورات css از این ویژگی برای تعیین عرض المنت استفاده می شود.
height
برای تعیین ارتفاع المنت استفاده می شود.
max-height و max-width
برای تعیین طول و عرض حداقلی المنت استفاده می شود.
max-height و max-width
برای تعیین طول و عرض حداقلی المنت استفاده می شود.
margin
برای تعیین فاصله المنت از جهات مختلف در تمام تگ های css از مارجین استفاده می شود. با این خاصیت می توانید فاصله المنت را از ۴ جهت صفحه کنترل کنید.
margin-left, margin-right, margin-top, margin-bottom
از این دستورات در تمام لیست دستورات css برای تعیین فاصله المنت از پایین، بالا، راست و چپ استفاده می شود.
padding
برای تعیین فاصله داخلی المنت در کد های css استفاده می شود. با این خاصیت می توانید فاصله داخلی المنت را از ۴ جهت مختلف کنترل کنید.
padding-left, padding-right, padding-top, padding-bottom
از تمامی این خاصیت ها در لیست دستورات css برای تعیین فاصله داخلی المنت از جهت های پایین، بالا، راست و چپ استفاده می شود.
position
داخل تمام لیست تگ های css از پوزیشن برای تعیین موقعیت (محل قرارگیری) المنت استفاده می شود.
top, left, right, bottom
همان طور که از اسمشان پیداست، از این ۴ خاصیت برای تعیین فاصله المنت از جهت های مختلف استفاده می شود.
opacity
ویژگی opacity از لیست دستورات css ویژگی ای است که در تمام تگ های 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 خواهید داشت و می توانید صفحات وب خود را با کمک این ویژگی ها به درستی طراحی کنید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید