أحدث البرامج التعليمية وتطوير الشبكة
×

CSS البرنامج التعليمي

CSS الصفحة الرئيسية CSS المقدمة CSS بناء الجملة CSS كيف CSS الألوان CSS خلفيات CSS حدود CSS هوامش CSS حشوة CSS عرض ارتفاع CSS نص CSS الخطوط CSS الروابط CSS قوائم CSS الجداول CSS صندوق نموذج CSS المخطط CSS العرض CSS العرض الاقصى CSS الوظيفة CSS تطفو CSS Inline-block CSS محاذاة CSS Combinators CSS الفئة المزيفة CSS شبه عنصر CSS شريط التنقل CSS القوائم المنسدلة CSS تلميحات CSS معرض الصور CSS صورة التعتيم CSS العفاريت صورة CSS ATTR المختارون أشكال CSS CSS عدادات

CSS3

CSS3 المقدمة CSS3 زوايا مدورة CSS3 صور الحدود CSS3 خلفيات CSS3 الألوان CSS3 التدرجات CSS3 ظلال CSS3 نص CSS3 الخطوط CSS3 2D التحويلات CSS3 التحويلات 3D CSS3 التحولات CSS3 الرسوم المتحركة CSS3 صور CSS3 أزرار CSS3 ترقيم الصفحات CSS3 أعمدة متعددة CSS3 واجهة المستخدم CSS3 مربع تحجيم CSS3 Flexbox CSS3 تساؤلات الإعلام CSS3 أمثلة MQ

CSS تصميم ويب مستجيب

تصميم ويب مستجيب مقدمة تصميم ويب مستجيب العرض تصميم ويب مستجيب شبكة عرض تصميم ويب مستجيب تساؤلات الإعلام تصميم ويب مستجيب صور تصميم ويب مستجيب فيديوهات تصميم ويب مستجيب الأطر

CSS Examples

CSS أمثلة CSS اختبار قصير CSS شهادة

CSS References

CSS مرجع CSS محددات CSS وظائف CSS إشارة أورال CSS Web Safe الخطوط CSS Animatable CSS وحدات CSS PX-EM محول CSS الألوان CSS قيم اللون CSS أسماء الألوان CSS3 دعم المتصفح

 

CSS بناء الجملة والمختارون

❮ السابق الفصل التالي ❯

CSS بناء الجملة

يتكون CSS حكم مجموعة من محدد وكتلة الإعلان:

CSS محدد

النقاط محدد لعنصر HTML تريد أسلوب.

كتلة إعلان يحتوي على واحد أو أكثر من الإعلانات مفصولة بفواصل منقوطة.

يتضمن كل إعلان اسم خاصية CSS وقيمة، مفصولة القولون.

إعلان CSS ينتهي دائما مع فاصلة منقوطة، وحاصرت كتل إعلان الأقواس المعقوفة.

في المثال التالي عن <p> ستكون العناصر محاذاة إلى الوسط، مع لون النص أحمر:

مثال

p {
    color: red;
    text-align: center;
}
انها محاولة لنفسك »

CSS المختارون

تستخدم محددات CSS إلى "find" (أو حدد) عناصر HTML بناء على اسمهم عنصر، والهوية، والطبقة، السمة، وأكثر من ذلك.

والمختار عنصر

محدد عنصر يختار العناصر استنادا إلى اسم عنصر.

يمكنك اختيار جميع <p> العناصر على صفحة مثل هذا (في هذه الحالة، كل <p> سوف عناصر تكون محاذاة إلى الوسط، مع لون النص أحمر):

مثال

p {
    text-align: center;
    color: red;
}
انها محاولة لنفسك »

ومحدد الهوية

يستخدم محدد الهوية سمة معرف عنصر HTML لتحديد عنصر معين.

يجب أن يكون معرف عنصر فريد من نوعه ضمن الصفحة، بحيث يتم استخدام محدد الهوية لتحديد عنصر فريد واحد!

لتحديد عنصر مع معرف معين، والكتابة تجزئة (#) حرف، يليه معرف العنصر.

حكم على غرار أدناه سيتم تطبيقها على عنصر HTML مع id="para1" :

مثال

#para1 {
    text-align: center;
    color: red;
}
انها محاولة لنفسك »
ملاحظة ملاحظة: لا يمكن أن يبدأ اسم معرف مع عدد!

والمختار الطبقة

محدد الدرجة يختار العناصر ذات سمة فئة معينة.

لتحديد العناصر مع فئة معينة، وكتابة period (.) حرف، يليه اسم الفئة.

في المثال التالي، جميع عناصر HTML مع class="center" سوف تكون حمراء وتوسيطه:

مثال

.center {
    text-align: center;
    color: red;
}
انها محاولة لنفسك »

يمكنك أيضا تحديد أن عناصر HTML محددة فقط أن تتأثر فئة.

في المثال التالي، فقط <p> العناصر مع class="center" ستكون محاذاة إلى الوسط:

مثال

p.center {
    text-align: center;
    color: red;
}
انها محاولة لنفسك »

يمكن أن عناصر HTML يشير أيضا إلى أكثر من صنف واحد.

في المثال التالي، و <p> سوف تكون على غرار عنصر وفقا ل class="center" و class="large" :

مثال

<p class="center large">This paragraph refers to two classes.</p>
انها محاولة لنفسك »
ملاحظة ملاحظة: لا يمكن بدء اسم فئة مع عدد!

تجميع المختارون

إذا كان لديك عناصر للتعاريف نفس النمط، مثل هذا:

h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

وسوف يكون من الأفضل أن مجموعة محددات، للحد من التعليمات البرمجية.

لمحددات مجموعة، فصل كل محدد بفاصلة.

في المثال أدناه قمنا تجميع محددات من التعليمات البرمجية أعلاه:

مثال

h1, h2, p {
    text-align: center;
    color: red;
}
انها محاولة لنفسك »

CSS تعليقات

يتم استخدام التعليقات لتفسير رمز، ويمكن أن تساعد عند تحرير التعليمات البرمجية المصدر في وقت لاحق.

يتم تجاهل تصريحات المتصفحات.

يبدأ تعليق المغلق مع /* and ends with */ . يمكن التعليقات أيضا تمتد خطوط متعددة:

مثال

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4»


❮ السابق الفصل التالي ❯