كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

كتابة صيغة الصفحات الإنسيابية المتتالية CSS Syntax#

يتكون CSS من قواعد النمط التي يتم تفسيرها بواسطة المستعرض ثم يتم تطبيقها على العناصر المقابلة في موقعك.  يتكون أسلوب القاعدة من ثلاثة أجزاء -

•  محدد Selector - محدد هو علامة HTML التي سيتم تطبيق نمط.  قد يكون هذا أي علامة مثل

  أو إلخ.

•  الخاصية property الخاصية هي نوع من السمة أو علامة HTML.  ببساطة ، يتم تحويل كل سمات HTML إلى خصائص CSS.  يمكن أن يكون اللون ، والحدود الخ

•  القيمة value  - يتم تعيين القيم إلى الخصائص.  على سبيل المثال ، يمكن أن يكون لخاصية اللون قيمة إما باللون الأحمر أو # F1F1F1 وما إلى ذلك.

 يمكنك وضع بناء جملة CSS Style Rule كما يلي -

selector { property: value }

مثال - يمكنك تحديد حد الجدول كما يلي -

table{ border :1px solid #C00; }

الجدول هنا محدد والحدود border هي خاصية والقيمة المعطاة 1px solid # C00 هي قيمة تلك الخاصية.

 يمكنك تحديد محددات بطرق بسيطة مختلفة بناءً على راحتك.  اسمحوا لي أن أضع هؤلاء المختارين واحدا تلو الآخر.

 نوع محددات Selectors  type

 هذا هو نفس المحدد الذي رأيناه أعلاه.  مرة أخرى ، مثال واحد لإعطاء لون لجميع عناوين المستوى  h1 -

h1 {
   color: #36CFFF; 
}

محدد عام The Universal Selectors

بدلاً من تحديد عناصر من نوع معين ، يتطابق المحدد العالمي او العام تمامًا مع اسم أي نوع عنصر -

* { 
   color: #000000; 
}

هذه القاعدة تجعل محتوى كل عنصر في الصفحة باللون الأسود.

The Descendant Selectors

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

ul em {
   color: #000000; 
}

محدد الفئة The Class Selectors

يمكنك تحديد قواعد النمط بناءً على سمة الفئة  للعناصر.  سيتم تنسيق جميع العناصر التي تحتوي على هذه الفئة وفقًا للقاعدة المحددة.

.black {
   color: #000000; 
}

تعرض هذه القاعدة المحتوى باللون الأسود لكل عنصر مع تعيين السمة class إلى الأسود في الصفحة .  يمكنك جعله أكثر تحديدا قليلا.  على سبيل المثال -

h1.black {
   color: #000000; 
}

تعرض هذه القاعدة المحتوى باللون الأسود لعناصر

فقط مع تعيين سمات الفئة على اللون الأسود.

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

 class = "center bold">
   This para will be styled by the classes center and bold.

محدد المعرف The ID Selectors

يمكنك تحديد قواعد النمط بناءً على سمة id للعناصر.  سيتم تنسيق جميع العناصر التي لها هذا المعرف وفقًا للقاعدة المحددة.

#black {
   color: #000000; 
}

This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example −

h1#black {
   color: #000000; 
}

تعرض هذه القاعدة المحتوى باللون الأسود لعناصر

فقط مع تعيين سمات المعرّف على اللون الأسود.

 القوة الحقيقية لمحددي الهوية هي عندما يتم استخدامها كأساس لمحددي السليل ، على سبيل المثال

#black h2 {
   color: #000000; 
}

في هذا المثال ، سيتم عرض جميع عناوين المستوى 2 باللون الأسود عندما تكمن هذه العناوين في العلامات التي لها سمات معرف مضبوطة على اللون الأسود.

 محدد الفرعي او الابن The Child Selectors

لقد رأيت محددات السليل descent.  هناك نوع واحد من المحددات ، والذي يشبه إلى حد بعيد المتحدرين ولكن لديه وظائف مختلفة.  النظر في المثال التالي -

body > p {
   color: #000000; 
}

ستجعل هذه القاعدة جميع الفقرات باللون الأسود إذا كانت تابعة مباشرة لعنصر .  لن يكون للفقرات الأخرى الموضوعة داخل عناصر أخرى مثل

أو أي تأثير على هذه القاعدة.

 محددات الصفات The Attribute Selectors

يمكنك أيضًا تطبيق الأنماط على عناصر HTML ذات سمات معينة.  ستطابق قاعدة النمط أدناه جميع عناصر الإدخال التي لها سمة كتابة بقيمة نصية -

input[type = "text"] {
   color: #000000; 
}

تتمثل ميزة هذه الطريقة في أن عنصر <الإدخال type = "submit" /> لا يتأثر ، ويتم تطبيق اللون فقط على حقول النص المطلوبة.

 هناك القواعد التالية المطبقة على محدد السمة.

 p [lang] - لتحديد كل عناصر الفقرة ذات السمة الطويلة.

 p [lang = "fr"] - تحديد جميع عناصر الفقرة التي لها سمة طويلة لها قيمة "fr" تمامًا.

 p [lang ~ = "fr"] - لتحديد جميع عناصر الفقرة التي تحتوي السمة الطويلة على الكلمة "fr".

 p [lang | = "en"] - تحديد جميع عناصر الفقرة التي تحتوي السمة الطويلة على قيم "بالضبط" أو تبدأ بـ "en".

قواعد الاستايل او النمط المتعدد Multiple Style Rules

قد تحتاج إلى تحديد قواعد نمط متعددة لعنصر واحد.  يمكنك تحديد هذه القواعد لدمج خصائص متعددة والقيم المقابلة في كتلة واحدة على النحو المحدد في المثال التالي -

h1 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

هنا يتم فصل كل الممتلكات وأزواج القيمة بفاصلة منقوطة (؛).  يمكنك الاحتفاظ بها في سطر واحد أو خطوط متعددة.  لسهولة القراءة ، نحتفظ بها في سطور منفصلة.

 لفترة من الوقت ، لا تقلق بشأن الخصائص المذكورة في المربع أعلاه.  سيتم شرح هذه الخصائص في الفصول القادمة ويمكنك العثور على تفاصيل كاملة حول الخصائص في CSS References

محدد  المجموعة Grouping Selectors

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

h1, h2, h3 {
   color: #36C;
   font-weight: normal;
   letter-spacing: .4em;
   margin-bottom: 1em;
   text-transform: lowercase;
}

سيتم تطبيق قاعدة النمط المعرفة هذه على عنصر h1 و h2 و h3 أيضًا.  ترتيب القائمة غير ذي صلة.  جميع العناصر في المحدد سوف يكون لها التصريحات المقابلة المطبقة عليها.

 يمكنك الجمع بين محددات الهوية المختلفة معًا كما هو موضح أدناه

#content, #footer, #supplement {
   position: absolute;
   left: 510px;
   width: 200px;
}