أقسام الوصول السريع (مربع البحث)

برمجة8 تطبيقات8 شرح12 html8
📁 آخر الأخبار
0

شرح اساسيات CSS هي لغة تُستخدم لوصف مظهر وتنسيق مستند مكتوب بلغة HTML #5

kroom87 kroom87

 CSS (أوراق الأنماط المتتالية) هي لغة تُستخدم لوصف مظهر وتنسيق مستند مكتوب بلغة HTML. باستخدام CSS، يمكنك التحكم في تخطيط الصفحات، الألوان، الخطوط، الهوامش، والتباعد، والكثير غير ذلك.

طرق تضمين CSS في HTML

هناك ثلاث طرق رئيسية لتضمين CSS في مستند HTML:

  1. الأنماط المدمجة (Inline Styles)
  2. الأنماط الداخلية (Internal Stylesheet)
  3. الأنماط الخارجية (External Stylesheet)

1. الأنماط المدمجة (Inline Styles)

يتم تضمين الأنماط مباشرة في عناصر HTML باستخدام السمة style.

مثال:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مثال على الأنماط المدمجة</title>
</head>
<body>
    <h1 style="color: blue; text-align: center;">عنوان باللون الأزرق</h1>
    <p style="font-size: 16px; color: red;">فقرة باللون الأحمر</p>
</body>
</html>

2. الأنماط الداخلية (Internal Stylesheet)

يتم تضمين الأنماط في قسم <head> من مستند HTML باستخدام عنصر <style>.

مثال: 

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مثال على الأنماط الداخلية</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
        h1 {
            color: blue;
            text-align: center;
        }
        p {
            font-size: 16px;
            color: red;
        }
    </style>
</head>
<body>
    <h1>عنوان باللون الأزرق</h1>
    <p>فقرة باللون الأحمر</p>
</body>
</html>

3. الأنماط الخارجية (External Stylesheet)

يتم تضمين الأنماط في ملف CSS خارجي ويتم ربطه بمستند HTML باستخدام عنصر <link> في قسم <head>.

مثال:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>مثال على الأنماط الخارجية</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>عنوان باللون الأزرق</h1>
    <p>فقرة باللون الأحمر</p>
</body>
</html>

ملف CSS (styles.css):

body {
    background-color: #f0f0f0;
}
h1 {
    color: blue;
    text-align: center;
}
p {
    font-size: 16px;
    color: red;
}

أساسيات CSS

1. القواعد الأساسية في CSS

القواعد في CSS تتكون من محدد (selector) وإعلان (declaration).

مثال:css

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

المحدد (selector): يحدد العنصر الذي سيتم تطبيق النمط عليه (h1 في هذا المثال).
الإعلان (declaration): يتكون من خاصية (property) وقيمة (value)، مفصولين بنقطتين (:) ومحاطين بأقواس معقوفة ({}).


2. المحددات (Selectors)

المحدد العنصري (Element Selector): يستهدف جميع العناصر من نوع معين.
p {
    color: red;
}
المحدد المعرفي (ID Selector): يستهدف عنصراً له معرف معين. يستخدم الرمز #.
#header {
    background-color: yellow;
}
المحدد الكلاسي (Class Selector): يستهدف عنصراً أو عناصر لها فئة معينة. يستخدم الرمز .
.highlight {
    font-weight: bold;
} 
3. الخصائص (Properties)
بعض الخصائص الأساسية المستخدمة في CSS:

الألوان (Colors):css
color: red; /* لون النص */
background-color: yellow; /* لون الخلفية */
الخطوط (Fonts):css
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
التباعد (Spacing):css
margin: 20px; /* المسافة الخارجية */
padding: 10px; /* المسافة الداخلية */
الحدود (Borders):css
border: 1px solid black;
border-radius: 5px;
4. الصناديق (Box Model)
نموذج الصندوق (Box Model) في CSS يصف كيفية تفاعل العناصر مع بعضها البعض 
ومع المساحات المحيطة بها.
  • المحتوى (Content): النص أو الصور داخل العنصر.
  • الحشو (Padding): المسافة بين المحتوى وحدود العنصر.
  • الحدود (Border): الخط المحيط بالحشو والمحتوى.
  • الهامش (Margin): المسافة بين الحدود والعناصر الأخرى المحيطة.
مثال:
div {
    width: 300px;
    padding: 20px;
    border: 1px solid black;
    margin: 10px;
}

    يمكنك الآن فهم كيفية استخدام CSS مع HTML لإنشاء نماذج إدخال بيانات وتنسيقها بشكل فعال 
    وجذاب إذا كان لديك أي استفسارات إضافية، فلا تتردد في طرحها!

    kroom87
    kroom87

    مقالات قد تهمك

    تعليقات