استكشاف مفاهيم CSS

  • 4 دقائق

بنية CSS

إذا كنت تريد أن تعرض صفحة HTML كل النص بين العلامات h1 باللون البرتقالي، يمكنك استخدام التعليمات البرمجية CSS التالية.

h1 {
    color: orange;
}

تبدأ التعليمة البرمجية CSS أعلاه ب (h1) الذي يحدد HTML الذي تريد نمطه. h1 يسمى في العينة محدد.

لاحظ التعليمات البرمجية داخل الأقواس المتعرجة، color: orange;t تعلن عن كيفية تصميم العلامة المحددة h1 . رمز CSS في الأقواس المتعرجة { }، مثل color: orange; يسمى إعلانا.

يحتوي نموذج التعريف الخاص بك على خاصية ، ، والتي يتم فصلها عن قيمة ، colorمع علامة نقطتين ()، ويتم وضع علامة على نهاية الإعداد بفواصل منقوطة (orange). :;

إشعار

ليست هناك حاجة لحفظ كل خاصية وقيمة متاحة في CSS. هناك العديد من مواقع الويب التي يمكنك الرجوع إليها. أيضا، توفر أدوات مثل vscode.dev أو Visual Studio Code خيارات الإكمال التلقائي التي يمكن أن تساعد في إرشادك أثناء إنشاء CSS.

تضمين ملف CSS

إحدى الطرق السريعة لإضافة معلومات النمط هي وضعها ضمن head علامات صفحة HTML باستخدام سمة style . لا يعتبر هذا الأسلوب أفضل الممارسات، ولكن لا بأس من استخدامه للتعلم والاختبار.

يضيف المثال التالي العلامة <style> مع معلومات التصميم لأي h1 علامة لعرضها باللون الرمادي. نظرا لأن هذا هو التصميم الوحيد، يتم عرض بقية HTML مع التصميم الافتراضي للمستعرض.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

عند عرضه في مستعرض، يظهر نص "الترحيب" في العلامة <h1> باللون الرمادي.

لقطة شاشة لصفحة H T M L المعروضة تعرض العنوان 1 باللون الرمادي.

تطبيق الأنماط على HTML باستخدام CSS

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

للإشارة إلى ملف CSS، يمكنك استخدام link العنصر .

link له سمتان، rel و href. rel يستخدم لتحديد نوع المورد الذي تشير إليه، ورقة أنماط لأوراق الأنماط. href يستخدم لتحديد المسار إلى ملف CSS. إذا كان ملف CSS الخاص بك في نفس المجلد مثل ملف HTML وكان له الاسم style.css، يمكنك استخدام ما يلي للإشارة إليه من صفحتك:

<link rel="stylesheet" href="style.css">

الآن لديك ملفان على الأقل ، ملف .html وملف..css سيكون للمثال السابق ملف HTML يرتبط ب CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>