شاركـ أصدقائك

كورس HTML | شرح Styles - CSS | موقع فولدرات

الرئيسية / الحاسب الآلي / لغات البرمجة / HTML / كورس HTML | شرح Styles - CSS

القرآن الكريم كامل المصحف الذكي (جديد) , المصحف النصي

شرح html للمبتدئين

يرمز CSS إلى أوراق الأنماط المتتالية.

تحفظ CSS الكثير من العمل. يمكنه التحكم في تخطيط صفحات ويب متعددة دفعة واحدة.

CSS = Styles and Colors

Manipulate Text

Colors, Boxes

ما هو CSS؟

تُستخدم أوراق الأنماط المتتالية (CSS) لتنسيق تخطيط صفحة الويب.

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

، وشاشات العرض المختلفة للأجهزة وأحجام الشاشة المختلفة ، و أكثر بكثير!

تلميح: تعني كلمة تعاقب أن النمط المطبق على العنصر الأصل ينطبق أيضاً على كافة العناصر التابعة داخل العنصر الأصل.

لذلك، إذا قمت بتعيين لون النص الأساسي إلى "أزرق"، فستحصل كل العناوين والفقرات والعناصر النصية الأخرى داخل النص على اللون نفسه أيضًا (ما لم تحدد شيئًا آخر)!

استخدام CSS:

يمكن إضافة CSS إلى مستندات HTML بثلاث طرق:

Inline - باستخدام سمة النمط داخل عناصر HTML
Internal - باستخدام عنصر <style> في قسم <head>
External - باستخدام عنصر <link> للارتباط بملف CSS خارجي

الطريقة الأكثر شيوعاً لإضافة CSS، هي الاحتفاظ بالأنماط في ملفات CSS الخارجية. ومع ذلك، في هذا البرنامج التعليمي،

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

Inline CSS

يتم استخدام Inline CSS لتطبيق نمط فريد على عنصر HTML واحد.

يستخدم Inline CSS سمة النمط لعنصر HTML.

يضبط المثال التالي لون نص العنصر <h1> على اللون الأزرق ، ولون النص الخاص بالعنصر <p> إلى اللون الأحمر:

مثال:

<h1 style="color:blue;">A Blue Heading</h1>
 
<p style="color:red;">A red paragraph.</p>

النتيجة كالآتي:

Internal CSS

يتم استخدام Internal CSS لتحديد نمط لصفحة HTML واحدة.

يتم تعريف Internal CSS في قسم <head> لصفحة HTML ، داخل عنصر <style>.

يقوم المثال التالي بتعيين لون النص لجميع عناصر <h1> (في تلك الصفحة) إلى اللون الأزرق ، ولون النص لجميع عناصر <p> إلى اللون الأحمر.

بالإضافة إلى ذلك ، سيتم عرض الصفحة بلون خلفية "مسحوق أزرق":

مثال:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

النتيجة كالآتي:

External CSS

يتم استخدام ورقة أنماط خارجية لتحديد النمط للعديد من صفحات HTML.

لاستخدام ورقة أنماط خارجية ، أضف ارتباطًا إليها في قسم <head> لكل صفحة HTML:

مثال:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

النتيجة كالاتي:

يمكن كتابة ورقة الأنماط الخارجية في أي محرر نص. يجب ألا يحتوي الملف على أي تعليمة برمجية بلغة HTML، ويجب حفظه بملحق .css.

فيما يلي شكل ملف "styles.css":

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

تلميح: باستخدام ورقة أنماط خارجية، يمكنك تغيير مظهر موقع ويب بأكمله، عن طريق تغيير ملف واحد!

ألوان وخطوط وأحجام CSS

هنا ، سوف نوضح بعض خصائص CSS شائعة الاستخدام. سوف تتعلم المزيد عنها لاحقًا.

تحدد خاصية CSS color لون النص الذي سيتم استخدامه.

تحدد خاصية CSS font-family الخط الذي سيتم استخدامه.

تحدد خاصية CSS font-size حجم النص الذي سيتم استخدامه.

مثال:

استخدام خصائص CSS color و font-family و font-size:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>
 
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 
</body>
</html>

النتيجة كالآتي:

CSS Border

تحدد خاصية CSS border حدًا حول عنصر HTML.

نصيحة: يمكنك تحديد حد لجميع عناصر HTML تقريبًا.

مثال:
استخدام خاصية CSS border:

p {
  border: 2px solid powderblue;
}

CSS Padding

تحدد خاصية CSS padding مساحة (مسافة) بين النص والحد.

مثال:
استخدام خصائص border and padding في CSS:

p {
  border: 2px solid powderblue;
  padding: 30px;
}

CSS Margin

تحدد خاصية CSS margin هامشًا (مسافة) خارج الحدود.

مثال:
استخدام خصائص border and margin في CSS:

p {
  border: 2px solid powderblue;
  margin: 50px;
}

Link to External CSS

يمكن الرجوع إلى أوراق الأنماط الخارجية بعنوان URL كامل أو بمسار متعلق بصفحة الويب الحالية.

مثال:
يستخدم هذا المثال عنوان URL كاملًا للارتباط بورقة أنماط:

<link rel="stylesheet" href="https://folderat.com/">

مثال:
يرتبط هذا المثال بورقة أنماط موجودة في مجلد html على موقع الويب الحالي:

<link rel="stylesheet" href="/html/styles.css">

مثال:
يرتبط هذا المثال بورقة أنماط موجودة في نفس المجلد مثل الصفحة الحالية:

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

ملخص الفصل:

استخدم سمة نمط HTML للتصميم المضمن
استخدم عنصر <style> لتعريف CSS الداخلية
استخدم عنصر <link> للإشارة إلى ملف CSS خارجي
استخدم عنصر <head> لتخزين عناصر <style> و <link>
استخدم خاصية CSS color لألوان النص
استخدم خاصية CSS font-family لخطوط النص
استخدم خاصية CSS font-size لأحجام النص
استخدم خاصية CSS border للحدود
استخدم خاصية CSS padding للمساحة داخل الحد
استخدم خاصية CSS margin للمساحة خارج الحدود

لا تنسى مشاركة الصفحة ومن صالح دعائكم

HTML | مقدمة

HTML | محرر النص

HTML | أساسيات لغة HTML

HTML | عناصر HTML

HTML | خصائص HTML

HTML | الأنماط (styles)

HTML | تنسيق نص html

HTML | شرح blockquote

HTML | شرح Colors

HTML | شرح Styles - CSS

القائمة الرئيسية

كورس HTML | شرح Styles - CSS | موقع فولدرات

CSS = Styles and Colors

ما هو CSS؟

استخدام CSS:

Inline CSS

Internal CSS

External CSS

ألوان وخطوط وأحجام CSS

CSS Border

CSS Padding

CSS Margin

Link to External CSS

ملخص الفصل:

كورس CSS | مقدمة css

كورس SQL | مقدمة SQL

كورس CSS | كيفية إضافة CSS

كورس JavaScript | شرح Where To

كورس JavaScript | مقدمة جافا سكريبت

كورس JavaScript | شرح Statements