کیوان زینلی

0 %
کیوان زینلی
مدیرعامل، دیجیتال مارکتر
مدرس و طراح سایت سابق
  • محل سکونت:
    امارات متحده عربی
  • شهر:
    دبی
  • سن:
    27
زبان ها
انگلیسی
کدنویسی و دیجیتال مارکتینگ
html
CSS
جاوا اسکریپت
PHP
وردپرس
Laravel
Marketing
Search Engine Marketing
Search Engine Optimization
Digital Marketing Canvas
Typing speed of 105 WPM
Social Network
مهارت های نرم
  • رهبری تیم
  • دیجیتال مارکتینگ
  • استراتژی نویسی
  • مدرس
  • اقناع کنندگی
  • مدیریت عملکرد و سنجش ریسک
  • فن بیان قوی
  • مدیریت منابع انسانی
  • استراتژی دیجیتال مارکتینگ
  • آنالیزر
  • حل مسئله و مشکل
  • مارکتینگ
  • Scram Master & Project Management

معرفی کد های CSS

25 مرداد 1401

کد های 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)

برای ریسپانسیو کردن از این تگ استفاده می شود.

 

 

ارسال شده در آموزش, آموزش HTML, طراحی وب سایت
یک دیدگاه بنویسید
© تمامی حفوق سایت برای کیوان زینلی محفوظ است.