هذا الدرس للتعمق قليلا في ارتابط css ب html مقدمين طرق الربط بينهم وكيف يتم هذا

تصميم HTML مع CSS

CSS تعني أوراق الأنماط المتتالية.

يصف CSS كيفية عرض عناصر HTML على الشاشة أو الورق أو في وسائط أخرى.

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

يمكن إضافة CSS إلى عناصر HTML بواسطة 3 طرق:

1 – مضمنة – باستخدام سمة style في عناصر HTML

مثال

<h1 style="color:green;">هذا هو اول عنوان رئيسي</h1>

2 – داخلي – باستخدام عنصر <style> في قسم ال <head>

مثال

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-size:13px;
  }
p {
  color: red;
  }
</style>
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

3 – خارجي – باستخدام ملف CSS خارجي

<!DOCTYPE html>
<html>
<head>
  <!-- يجب وضع مسار الملف بشكل صحيح اما من خلال رابط او موقعه في المجلدت -->
  <link rel="stylesheet" href="../../styles.css">
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

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

ومع ذلك، هنا سوف نستخدم التصميم الداخلي والمضمن، لأن هذا هو أسهل لإظهار كل شيء أمامك، وأسهل بالنسبة لك لمحاولة ذلك بنفسك.


تضمنين css

تقوم هذه الطريقة بتضمين css داخل العنصر نفسه

وتكون تأثيرها علي العنصر المضمن حيث يصف العنصر بعينة دون العناصر المتشابهه

يعين هذا المثال لون النص <h1> العنصر إلى اللون الاخضر

مثل

<h1 style="color:green;"></h1>

css الداخلي

ثم يتم استخدام CSS الداخلي (اي يتم كتابة اكواد css في نفس الصفحة الخاصة ب html)لتعريف نمط لصفحة HTML واحدة.

يتم تعريف CSS داخلي في مقطع صفحة HTML، ضمن عنصر:<head><style>

مثل

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-size:13px;
  }
p {
  color: red;
  }
</style>
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

CSS الخارجية

يتم استخدام ملفات css خارجية لعدة اسباب منها شكل جمالي للكود وايضا سيجعلك تطبيق نفس المواصفات في كل صفحات الموقع من خلال وضع مسار ملف الcss في كل صفحة في الموقع

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

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

مثل

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="../../style.css">
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

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

h1 {
  color: blue;
  font-size:13px;
  }
p {
  color: red;
  }

ولكننا سنستعمل css داخل الصفحة اثناء التعلم لانه اسهل في الشرح ويكون كل الرمز امامك


خطوط CSS

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

خاصية font-family تعريف الخط المراد استخدامه.

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

مثل

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-size:13px;
  font-family:courier;
  }
p {
  color: red;
  }
</style>
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

الخاصية border

خاصية border تقوم بعمل حد حول العنصر

شرح العنصر
border = الخاصية نفسها وتعني الحدود

1px وتخبره انه حجم الحدود 1 بكسل من كل اتجاه

solid وتصف نوع الحدود ان تكون متماسكه وقطعه واحدة ليست مخططه

ستتعلم انواع اكثر في css

مثل

<!DOCTYPE html>
<html>
<head>
<style>
p {
	border: 1px solid red;
  }
</style>
</head>
<body>
<p>هذه اول قطعة لي</p>
</body>
</html>

الخاصية padding

خاصية padding تعريف padding هي (مسافة) بين النص والحدود الخاصة بالعنصر نفسه

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
	border: 1px solid red;
    padding: 30px;
  }
</style>
</head>
<body>
<p>هذه اول قطعة لي</p>
</body>
</html>

الخاصية margin

خاصية margin تعريف margin هي (مسافة) خارج الحدود وليس من الداخل

مثال

<!DOCTYPE html>
<html>
<head>
<style>
p {
	border: 1px solid red;
    margin: 50px;
  }
</style>
</head>
<body>
<p>هذه اول قطعة لي</p>
</body>
</html>

الصورة التالية توضح الامر الفرق بينهم اكثر


السمة id

يستخدم في تعريف نمط معين لعنصر معين أو إلى عدة عناصر ولا يمكن استعمال اكثر من id في نفس العنصر

ومن ثم يستخدم الid في تحديد خواص احد العناصر عوضا عن تحديد كل العناصر من فئة ما

لدي id استعمالات عدة ايضا في java script سنتعلمها لاحقا

الآن قم بتعريف نمط للعنصر مع معرف معين

مثل

<!DOCTYPE html>
<html>
<head>
<style>
#p1 {
	border: 1px solid red;
  }
</style>
</head>
<body>
    <!-- فقط id يقوم بتعرف العنصر الذي يحتوي علي ال -->
<p id="p1">هذه اول قطعة لي</p>
  
<!-- الذي تم وصفة في الاعلي id لا يظهر شئ علي هذا العنصر لانه لا يحتوي علي ال -->
  <p>هذه اول قطعة لي</p>
      <!-- فقط id يقوم بتعرف العنصر الذي يحتوي علي ال -->
<h1 id="p1">انت هو الافضل</h1>
</body>
</html>

ملاحظة: يجب أن يكون معرف العنصر فريدا داخل الصفحة، لذلك يتم استخدام محدد المعرف لتحديد عنصر فريد واحد!


السمة class 

لتعريف شكل أو أستايل لأنواع خاصة من العناصر، يمكنك أضافة class إلى العنصر أو إلى عدة عناصر

ثم قم بتعريف شكل للعناصر مع الفئة المحددة:

مثل

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
	border: 1px solid red;
  }
</style>
</head>
<body>
    <!-- فقط class يقوم بتعرف العنصر الذي يحتوي علي ال -->
<p class="p1">هذه اول قطعة لي</p>
  
<!-- الذي تم وصفة في الاعلي class لا يظهر شئ علي هذا العنصر لانه لا يحتوي علي ال -->
  <p>هذه اول قطعة لي</p>
      <!-- فقط class يقوم بتعرف العنصر الذي يحتوي علي ال -->
<h1 class="p1">انت هو الافضل</h1>
</body>
</html>

المزيد من الحالات في class

في البدايه ظهر باللون الاحمر في القطعة لانك قمت بالفعل بتحديد الي اين تريد وضع اللون تحديدا وهنا قلت ضع اللون الازرق داخل الكلاس p1 بشكل عام لهذا حصل h1 الذي يحوي p1 علي لون ازرق لكن في السطر التالي قلت ضع اللون الاحمر في العنصر p الذي يوجد به الكلاس p1 من خلال هذه الطريقة p.p1

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
	border: 1px solid blue;
  }
p.p1 {
	border: 1px solid red;
  }
</style>
</head>
<body>
    <!-- فقط class يقوم بتعرف العنصر الذي يحتوي علي ال -->
<p class="p1">هذه اول قطعة لي</p>
  <!-- الذي تم وصفة في الاعلي class لا يظهر شئ علي هذا العنصر لانه لا يحتوي علي ال -->
  <p>هذه اول قطعة لي</p>
  <!-- لن تظهر التغييرات في هذه الحاله -->
<h1 class="p1">انت هو الافضل</h1>
  <!-- الذي تم وصفة في الاعلي class لا يظهر شئ علي هذا العنصر لانه لا يحتوي علي ال -->
  <h1>انت هو الافضل</h1>
</body>
</html>

يمكنك عملها ف كل العناصر فهي تساوي اسم-الكلاس.اسم-الوسم مثل h1.classname


المراجع الخارجية

يمكن ربط صفحات css بعنوان URL كامل أو مع المسار الصحيح بالنسبة لصفحة الويب الحالية.

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

مثال

<!DOCTYPE html>
<html>
<head>
  <!-- يجب وضع مسار الملف بشكل صحيح اما من خلال رابط او موقعه في المجلدت -->
  <link rel="stylesheet" href="https://arschools.com/style.css">
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

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

مثل

<!DOCTYPE html>
<html>
<head>
  <!-- يجب وضع مسار الملف بشكل صحيح اما من خلال رابط او موقعه في المجلدت -->
  <link rel="stylesheet" href="../../style.css">
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

لكن ان كان ملف html وملف css موجودون في نفس المجلد او الفولدر يجب استعمالها بهذا الشكل

مثل

<!DOCTYPE html>
<html>
<head>
  <!-- يجب وضع مسار الملف بشكل صحيح اما من خلال رابط او موقعه في المجلدت -->
  <link rel="stylesheet" href="../../style.css">
</head>
<body>
<h1>هذا هو اول عنوان رئيسي</h1>
<p>هذه اول قطعة لي</p>
</body>
</html>

يمكنك قراءة المزيد حول مسارات الملفات في 


ملخص الفصل

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