10 کد CSS کاربردی برای طراحی وب | آموزش کامل و مثال‌ها
1-کد cssتغییر رنگ متن
این کد رنگ متن با کلاس my-text را به آبی تغییر می‌دهد.
.my-text {
color: blue;
}
2-کد cssتغییر پس‌زمینه
این کد رنگ پس‌زمینه عنصری با کلاس my-box را به خاکستری روشن تغییر می‌دهد
.my-box {
background-color: lightgray;
}
3-کد cssتغییر فونت
این کد فونت متن با کلاس my-heading را به Arial یا یک فونت sans-serif مشابه تغییر می‌دهد.
.my-heading {
font-family: Arial, sans-serif;
}
4-کد cssایجاد حاشیه
این کد اندازه فونت متن با کلاس my-paragraph را به 16 پیکسل تغییر می‌دهد
.my-container {
border: 1px solid black;
}
5-کد cssتغییر اندازه متن
این کد یک حاشیه 1 پیکسلی جامد به رنگ مشکی برای عنصری با کلاس my-container ایجاد می‌کند
.my-paragraph {
font-size: 16px;
}
6-کد cssفاصله داخلی (padding)
این کد یک فاصله داخلی 10 پیکسلی از بالا و پایین و 20 پیکسلی از چپ و راست به عنصری با کلاس my-button می‌دهد
.my-button {
padding: 10px 20px;
}
7-کد cssفاصله خارجی (margin)
این کد یک فاصله خارجی 15 پیکسلی از هر چهار طرف به عنصری با کلاس my-item می‌دهد
.my-item {
margin: 15px;
}
8-کد cssمخفی کردن عناصر
این کد عنصری با کلاس hidden را مخفی می‌کند.
.hidden {
display: none;
}
9-کد cssتراز کردن متن
این کد متن با کلاس center-text را در وسط محفظه خود تراز می‌کند.
.center-text {
text-align: center;
}
9-کد cssگرد کردن گوشه‌ها
این کد گوشه‌های عنصری با کلاس rounded-box را 10 پیکسل گرد می‌کند
.rounded-box {
border-radius: 10px;
}
