ما هو CSS؟
يرمز CSS إلى C التصاعدي S tyle S heets
يصف CSS كيفية عرض عناصر HTML
مثال CSS
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
انقر فوق الزر "جربها بنفسك" لترى كيف يعمل.
بنية CSS
تتكون قاعدة CSS من محدد وكتلة إعلان :
يشير المحدد إلى عنصر HTML إلى النمط (h1).
تحتوي كتلة التعريف (بأقواس معقوفة) على تعريف واحد أو أكثر مفصولة بفواصل منقوطة.
يتضمن كل إعلان اسم خاصية CSS وقيمة مفصولة بنقطتين.
في المثال التالي ، ستتم محاذاة جميع عناصر <p> إلى المنتصف ، باللون الأحمر ويكون حجم خطها 32 بكسل:
مثال
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
يمكن أيضًا كتابة نفس المثال على النحو التالي:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
ورقة الأنماط الخارجية
يمكن تخزين ورقة أنماط CSS في ملف خارجي :
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
ترتبط أوراق الأنماط الخارجية بصفحات HTML بعلامات <link> :
مثال
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
أسلوب مضمّن
مثال
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
ترتيب متتالي
إذا تم تحديد أنماط مختلفة لعناصر HTML ، فإن الأنماط ستتتالي إلى أنماط جديدة بالأولوية التالية:
- الأولوية 1: الأنماط المضمنة
- الأولوية 2: أوراق الأنماط الخارجية والداخلية
- الأولوية 3: المتصفح الافتراضي
- إذا تم تحديد أنماط مختلفة على نفس مستوى الأولوية ، فسيكون للأنماط الأخيرة الأولوية القصوى.
مثال
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
عرض CSS - صفحة HTML واحدة - أنماط متعددة!
سنعرض هنا صفحة HTML واحدة معروضة بأربعة أنماط مختلفة.
انقر على أزرار ورقة الأنماط (1-4) لترى أيضًا الصفحة المعروضة بأنماط مختلفة.
دروس CSS كاملة
لقد كان هذا وصفًا موجزًا لـ CSS.
للحصول على برنامج تعليمي CSS كامل ، انتقل إلى W3Schools CSS Tutorial .
للحصول على مرجع CSS كامل ، انتقل إلى W3Schools CSS Reference .