معرفی کد های CSS
کد های CSS
در این بخش می خواهم به توضیح و آموزش هر یک از کد های CSS بپردازم.
[button style=”btn-success btn-lg” icon=”glyphicon glyphicon-arrow-down” align=”left” type=”link” target=”true” title=”دانلود فایل مقاله” link=”http://k1z.me/wp-content/uploads/2022/08/کد-های-css.pdf” linkrel=””]
ردیف |
نام کد |
مقدار کد |
توضیحات |
| ۱ | Color | 1- Color name => red
2- Color RGB code Rgb(255,0,100)
3- Color Hex Code #ff0099 |
برای تغییر رنگ متن استفاده می شود.
1- وارد کردن نام رنگ 2- وارد کردن کد ار جی بی رنگ 3- وارد کردن کد هگزه رنگ |
| ۲ | Background-color | 1- Color name => red
2- Color RGB code Rgb(255,0,100)
3- Color Hex Code #ff0099 |
برای تغییر رنگ پس زمینه
1- وارد کردن نام رنگ 2- وارد کردن کد ار جی بی رنگ 3- وارد کردن کد هگزه رنگ |
| ۳ | Font-size | ۲۰px | میزان سایز فونت متن را مشخص می نماید. می بایست به پیکسل باشد. |
| ۴ | Font-weight |
Bold bolder |
این کد برای زخامت فونت ها به کار می رود.
|
| ۵ | Text-transform |
Capitalize Uppercase Lowercase |
این کد برای زبان انگلیسی و بزرگ و کوچک نوشتن حروف به کار میرود.
اول هر کلمه بزرگ همه کلمات بزرگ همه کلمات کوچک |
| ۶ | Text-align |
Right Left Center Justify |
مشخص کردن محل قرار گیری متن
راست چپ وسط تراز از هر دو سمت |
| ۷ | Width |
200px 20% |
عرض محتوا
هم به پیکسل هم به درصد |
| ۸ | Height |
400px 40% |
ارتفاع محتوا
هم به پیکسل هم به درصد |
| ۹ | Transition |
2000ms 2s |
مدت زمان اجرا درخواست
هم به میلی ثانیه هم به ثانیه |
| ۱۰ | Transform |
Rotate(360deg) Skew Transform Scale |
نوع انیمیشن
چرخیدن کشیده شدن جا به جایی تغییر مقیاس |
| ۱۱ | Display |
Block Inline Inline-block none |
نحوه نمایش محتوا در صفحه
تمام عرض اشغال فضا به اندازه محتوا اشغال فضا به اندازه محتوا با حالات بلاک عدم نمایش |
| ۱۲ | Position |
Absolute Relative Static Sticky fixed |
موقعیت قرار گیری محتواها در صفحه
تنظیم بدون محدودیت تنظیم با تگ پدر حالت عادی ابتدا عادی می باشد سپس فیکس می گردد. در یک جا قرار گرفته و بالا و پایین می شود. |
| ۱۳ | Margin |
20px 20% |
فاصله خارجی
هم به پیکسل هم به درصد |
| ۱۴ | Padding |
20px 20% |
فاصله داخلی
هم به پیکسل هم به درصد |
| ۱۵ | Letter-space |
20px |
فاصله بین هر حرف (مناسب انگلیسی)
به پیکسل |
| ۱۶ | Word-space |
20px |
فاصله بین هر کلمه
به پیکسل |
| ۱۷ | Text-indent |
20px |
تو رفتگی اولیه هر پاراگراف
به پیکسل |
| ۱۸ | Line-height |
20px |
فاصله بین هر دو خط
به پیکسل |
| ۱۹ | Text-decoration |
None |
نداشتن خط زیر تگ های لینک دار (یا محتوای دیگر)
عدم نمایش |
| ۲۰ | @keyframe |
Form To |
ساخت انیمیشن
شروع پایان |
| ۲۱ | Box-shadow |
20px 20px 10px black |
سایه باکس
عمود افق محوی رنگ |
| ۲۲ | Background-image |
url() |
تصویر در بک گراند
مسیر تصویر |
| ۲۳ | Border |
2px solid black |
حاشیه
ضخامت خط نوع خط رنگ |
| ۲۴ | Overflow |
Visible Hidden Scroll Auto |
نمایش محتواهای بیشتر
در دسترس مخفی اسکرول را نمایش بده در صورت نیاز نمایش بده |
| ۲۵ | z-index |
1000 |
اولویت محتواهای روی هم
به عدد |
| ۲۶ | White-space |
Norwrap |
قراردادن محتوا در جای خالی
… |
| ۲۷ | Text-overflow |
hidden |
زیادی متن
عدم نمایش |
| ۲۸ | Top |
20px |
قرار گیری از بالا
به پیکسل |
| ۲۹ | Left |
20px |
قرار گیری از چپ
به پیکسل |
| ۳۰ | Right |
20px |
قرارگیری از راست
به پیکسل |
| ۳۱ | bottom |
20px |
قرار گیری از پایین
به پیکسل |
| ۳۲ | @media |
@media only screen and (max-width:768px) |
برای ریسپانسیو کردن از این تگ استفاده می شود.
|