إليك مزيد من امثلة CSS 1 توضح طريقة كتابة الكود:
1. تنسيق الخطوط:
h1 {
font-family: ‘Arial’, sans-serif;
font-size: 28px;
font-weight: bold.
text-align: center;
}
هذا يُغيّر نوع الخط وحجمه وسماكته لعناوين الـ h1 في وسط الصفحة.
2. تحكم في العرض والارتفاع:
.element {
width: 200px;
height: 150px;
}
هذا يحدد العرض والارتفاع للعناصر التي تحمل الفئة element.
3. التحكم في التباعد بين العناصر:
.parent {
display: flex;
justify-content: space-between;
}
هذا يُضبط توزيع العناصر داخل عنصر يحمل الفئة parent باستخدام Flexbox، مع فضاء متساوي بين العناصر.
4. تحكم في الصور:
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
هذا يُجعل الصور تتلائم داخل العناصر التي تحمل <img>، ويوسطها داخل العنصر الذي تم وضع الصورة فيه.
5. الاستجابة (Responsive Design):
@media screen and (max-width: 600px) {
.menu {
display: none;
}
}
هذا يختفي عنصر القائمة إذا كان عرض الشاشة أقل من 600 بكسل.
6. تنسيق الروابط:
a {
text-decoration: none;
color: #3366cc;
}
a:hover {
text-decoration: underline;
}
هذا سيزيل تأثير التأشير الافتراضي للروابط ويغير لون الروابط إلى الأزرق، وعند تحويم الماوس فوق الرابط، سيتم ظهور تأثير تسطير للرابط.
7. تصميم الحواجز:
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
هذا يُظهر نافذة “مودال” (Modal) في وسط الشاشة، بخلفية بيضاء، وظلال لتمييز النافذة عن الخلفية.
8. تخطيط العناصر:
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
هذا ينشئ تخطيطاً شبكياً للعناصر داخل عنصر يحمل الفئة container، مع عمودين، الأول بعرض ثابت والثاني بعرض مرن.
9. تنسيق القوائم:
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 5px;
}
هذا يزيل الرموز النقطية من القوائم ويخفض المسافة بين كل عنصر من العناصر في القائمة.
10. تنسيق الحدود والزوايا:
.card {
border: 1px solid #ccc;
border-radius: 5px;
}
هذا يُضيف حدوداً خفيفة ويُستدير زوايا على عنصر يحمل الفئة card.
هذه أمثلة للاستخدامات الشائعة لـ CSS
Sharing to
