مقدمة في CSS

ما هو CSS؟

مرحبًا بك في عالم CSS! CSS ، أو Cascading Style Sheets ، هي لغة تساعدك على تصميم مواقع الويب الخاصة بك. إنها مسؤولة عن جعل صفحات الويب الخاصة بك جذابة بصريًا من خلال التحكم في التنسيق والألوان والخطوط والمزيد. تخيل أن CSS هو الفنان الذي يضفي الحيوية على موقع الويب الخاص بك ، بينما HTML هو المهندس الذي يبني هيكله.

كيف يعمل CSS و HTML معًا

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

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

بنية CSS والبنية

تتكون قاعدة CSS من جزأين: محدد وكتلة تصريح. يستهدف المحدد عنصر HTML الذي تريد تصميمه ، وتحتوي كتلة الإعلان على تعريف واحد أو أكثر. كل إعلان هو زوج خاصية-قيمة يحدد نمطًا معينًا للعنصر المحدد.

إليك مثال بسيط:

p {
  color: blue;
  font-size: 16px;
}

في هذا المثال ، p هو المحدد ، الذي يستهدف جميع عناصر الفقرة في HTML. كتلة التصريح ، المحاطة بأقواس معقوفة {} ، على تعريفين. يحدد الإعلان الأول لون النص إلى اللون الأزرق ، والإعلان الثاني يضبط حجم الخط على 16 بكسل.

إنشاء وربط ملف CSS

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

ورقة الأنماط الخارجية (موصى بها):

  1. أنشئ ملفًا نصيًا جديدًا واحفظه بامتداد .css (على سبيل المثال ، styles.css ).
  2. اكتب قواعد CSS في الملف ، مثل المثال الذي ناقشناه للتو.
  3. في ملف HTML الخاص بك ، أضف السطر التالي من التعليمات البرمجية في ملف قسم: 
<link rel="stylesheet" href="styles.css">

يخبر هذا السطر المتصفح بتحميل styles.css وتطبيق الأنماط على مستند HTML.

ورقة الأنماط الداخلية:

ورقة الأنماط الداخلية هي عندما تقوم بتضمين أنماط CSS مباشرة في ملف HTML الخاص بك داخل ملف باستخدام قسم

فيما يلي مثال على استخدام ورقة أنماط داخلية:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
  <style>
    h1 {
      color: red;
    }

    p {
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Web Page</h1>
  <p>This is a paragraph with styled text.</p>
</body>
</html>

الأنماط المضمنة:

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

فيما يلي مثال على استخدام الأنماط المضمنة:

<!DOCTYPE html>
<html>
<head>
  <title>My Web Page</title>
</head>
<body>
  <h1 style="color: green;">Welcome to My Web Page</h1>
  <p style="font-size: 14px;">This is a paragraph with styled text.</p>
</body>
</html>

إتقان المحددات والخصوصية

مرحبًا بك في الفصل 2! في هذا القسم ، سنتعمق في قلب CSS: المحددات والخصوصية. يعد فهم هذه المفاهيم أمرًا ضروريًا لإتقان CSS ، لأنها تساعدك على تطبيق الأنماط على عناصر HTML الخاصة بك بدقة وكفاءة.

محددات CSS

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

محدد العنصر

يستهدف هذا المحدد جميع مثيلات عنصر HTML معين. على سبيل المثال ، إذا كنت تريد تصميم جميع عناصر الفقرة ، فيمكنك استخدام محدد العناصر كما يلي: 

p {
  font-size: 18px;
  color: blue;
}

محدد الفئة

تستهدف محددات الفئة العناصر ذات سمة فئة معينة. لاستخدام محدد فئة ، أضف نقطة (.) متبوعة باسم الفئة. على سبيل المثال ، لنفترض أنك تريد تصميم جميع العناصر باستخدام الفئة "تمييز". في هذه الحالة ، يمكنك استخدام محدد الفئة كما يلي: 

.highlight {
  background-color: yellow;
}

محدد الهوية

تستهدف محددات المعرف عنصرًا واحدًا بسمة معرف معينة. لاستخدام محدد المعرف ، أضف تجزئة (#) متبوعة باسم المعرف. على سبيل المثال ، إذا كنت تريد تصميم العنصر باستخدام المعرف "العنوان الرئيسي" ، فيمكنك استخدام محدد المعرف على النحو التالي: 

#main-heading {
  font-size: 24px;
  font-weight: bold;
}

محدد السمة

تستهدف محددات السمات العناصر ذات سمة معينة أو قيمة سمة. لاستخدام محدد السمة ، ضع السمة والقيمة بين قوسين مربعين ([]). على سبيل المثال ، إذا كنت تريد تصميم جميع العناصر باستخدام سمة "data-active" ، فيمكنك استخدام محدد السمة كما يلي: 

[data-active] {
  opacity: 1;
}

محدد الفئة الزائفة

تستهدف محددات الفئة الزائفة عناصر في حالة معينة ، مثل عندما يحوم المستخدم فوق ارتباط أو عند تحديد مربع اختيار. لاستخدام محدد فئة زائفة ، أضف نقطتين (:) متبوعًا باسم الفئة الزائفة. على سبيل المثال ، إذا كنت تريد تغيير لون الارتباط عندما يحوم المستخدم فوقه ، فيمكنك استخدام محدد الفئة الزائفة مثل هذا: 

a:hover {
  color: red;
}

دمج وتسلسل المحددات

يمكنك أيضًا دمج المحددات وتسلسلها لاستهداف العناصر بدقة أكبر. دعنا نستكشف بعض الأمثلة:

سليل Combinator

لاستهداف العناصر المتحدرة من عنصر معين ، ما عليك سوى فصل المحددات بمسافة. على سبيل المثال ، إذا كنت تريد تصميم جميع عناصر الفقرة داخل div مع الفئة "container" ، فيمكنك استخدام المُدمج الفرعي كما يلي: 

.container p {
  font-size: 16px;
}

المدمج الطفل

لاستهداف العناصر التي تكون توابعًا مباشرًا لعنصر معين ، استخدم المركب الفرعي (>). على سبيل المثال ، إذا كنت تريد تصميم جميع عناصر القائمة الفرعية المباشرة لعنصر "التنقل" ، فيمكنك استخدام المُجمع الفرعي كما يلي: 

nav > ul > li {
  display: inline-block;
}

مجمع الأخوة المجاور

لاستهداف عنصر يتبع عنصرًا آخر مباشرةً ، استخدم مُجمِع الأشقاء المجاور (+). على سبيل المثال ، إذا كنت تريد تصميم فقرة تتبع عنوانًا على الفور ، يمكنك استخدام 

h2 + p {
  margin-top: 2em;
}

مجمع الأخوة العام

لاستهداف العناصر التي تكون أشقاء (تشترك في نفس الأصل) لعنصر معين ، استخدم مُجمع الأشقاء العام (~). على سبيل المثال ، إذا كنت تريد تصميم جميع عناصر الفقرة التي تأتي بعد عنوان ، فيمكنك استخدام مُجمع الأشقاء العام كما يلي: 

h2 ~ p {
  margin-top: 1em;
}

محدد العناصر الزائفة

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

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

محدد التجميع

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

h1, h2, h3, h4, h5, h6, p {
  font-family: 'Arial', sans-serif;
}

محدد عالمي

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

* {
  margin: 0;
  padding: 0;
}

محددات معقدة

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

#content .important-text {
  font-weight: bold;
  color: red;
}

CSS Cascade والوراثة والقيم

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

فهم CSS Cascade

تتالي CSS هي العملية التي يقرر المتصفح من خلالها الأنماط التي سيتم تطبيقها على عنصر ما عند وجود عدة أنماط متعارضة. يتبع التسلسل مجموعة من القواعد لتحديد النمط الذي له الأولوية القصوى. هذه القواعد هي:

أهمية

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

النوعية

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

  1. الأنماط المضمنة
  2. محددات الهوية
  3. محددات الفئة والسمة والفئة الزائفة
  4. محددات العناصر والعناصر الزائفة

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

/* Specificity score: 0,1,0,0 */
#header {
  background-color: lightblue;
}

/* Specificity score: 0,0,1,0 */
.warning {
  color: red;
}

/* Specificity score: 0,0,0,1 */
p {
  font-size: 16px;
}

/* Specificity score: 0,0,1,1 */
nav .menu-item {
  display: inline-block;
}

في المثال أعلاه ، لكل قاعدة درجة خصوصية بناءً على أنواع المحددات المستخدمة. يتم تمثيل درجة الخصوصية كقائمة أرقام مفصولة بفواصل (أ ، ب ، ج ، د) حيث:

  • أ: يمثل عدد الأنماط المضمنة (غير معروضة في هذا المثال)
  • ب: يمثل عدد محددات الهوية
  • ج: يمثل عدد محددات الفئة والسمة والفئة الزائفة
  • د: يمثل عدد محددات العناصر والعناصر الزائفة

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

دعنا نفكر في مثال مع الأنماط المتضاربة:

<!DOCTYPE html>
<html>
<head>
  <style>
    #content p {
      color: blue; /* Specificity score: 0,1,0,1 */
    }

    .highlight {
      color: green; /* Specificity score: 0,0,1,0 */
    }

    p {
      color: red; /* Specificity score: 0,0,0,1 */
    }
  </style>
</head>
<body>
  <div id="content">
    <p class="highlight">This paragraph has multiple conflicting styles.</p>
  </div>
</body>
</html>

في هذا المثال ، تحتوي الفقرة على ثلاثة أنماط ألوان متعارضة. عند مقارنة درجات الخصوصية الخاصة بهم ، #content p أعلى درجة دقة (0،1،0،1) ، لذلك سيتم عرض الفقرة باللون الأزرق.

ترتيب المصدر

إذا كانت الأنماط لها نفس الأهمية والخصوصية ، فستكون الأولوية للأنماط التي تظهر لاحقًا في التعليمات البرمجية المصدر.

لنلقِ نظرة على مثال لتوضيح التسلسل:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
    }

    .highlight {
      color: green;
    }
  </style>
</head>
<body>
  <p class="highlight" style="color: red;">This paragraph has multiple conflicting styles.</p>
</body>
</html>

في هذا المثال ، تحتوي الفقرة على ثلاثة أنماط ألوان متعارضة. نظرًا لأن النمط المضمن (الأحمر) له الأهمية القصوى ، سيتم عرض الفقرة باللون الأحمر.

الوراثة CSS

الوراثة هي آلية في CSS تسمح لأبناء العنصر بأن يرثوا أنماط العنصر الأصلي. بعض الخصائص ، مثل اللون وعائلة الخطوط ، بشكل افتراضي ، بينما لا يتم توريث الهامش والحشو

على سبيل المثال ، إذا قمت بتعيين عائلة الخطوط لعنصر div عائلة الخطوط الخاصة بهم .

div {
  font-family: 'Arial', sans-serif;
}

استخدام القيم الأولية ، وراث ، وعكس

يمكن استخدام هذه القيم الخاصة للتحكم في كيفية تصرف خصائص CSS فيما يتعلق بالتتالي والوراثة:

أولي

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

p {
  color: initial; /* Sets the color to the browser's default paragraph color */
}

يرث

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

button {
  font-family: inherit; /* Inherits the font-family from its parent element */
}

يرجع

الإرجاع إعادة تعيين الخاصية إلى القيمة التي كانت ستحصل عليها إذا لم يتم تطبيق أنماط عليها ، مع مراعاة كلاً من التتالي والوراثة. على سبيل المثال: 

.highlight {
  color: revert; /* Resets the color to the value it would have without the .highlight class */
}

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

نموذج الصندوق

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

فهم نموذج الصندوق

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

محتوى

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

حشوة

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

حدود

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

هامِش

الهامش هو المساحة الموجودة خارج الحدود التي تفصل العنصر عن العناصر الأخرى في الصفحة. يمكنك ضبط الهامش باستخدام margin أو جوانبها الفردية مثل margin-top و margin-right و margin-bottom و margin-left .

فيما يلي مثال على كيفية تصميم مكونات نموذج الصندوق:

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  margin: 20px;
}

التحكم في حجم الصندوق

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

مربع المحتوى

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

مربع الحدود

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

.box {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid black;
  box-sizing: border-box;
}

إدارة الفائض

عندما يتجاوز محتوى عنصر أبعاده المحددة ، يمكنك التحكم في كيفية معالجة تجاوز السعة باستخدام overflow :

مرئي

القيمة الافتراضية ، التي تسمح للمحتوى بالتجاوز خارج مربع العنصر.

مختفي

يقطع المحتوى ويخفي أي تجاوز.

التمرير

يضيف أشرطة التمرير إلى العنصر ، مما يسمح للمستخدمين بالتمرير عبر محتوى الفائض.

آلي

يضيف تلقائيًا أشرطة التمرير عندما يفيض المحتوى ، ولكن فقط إذا لزم الأمر.

.box {
  width: 200px;
  height: 100px;
  overflow: auto;
}

خاتمة

في هذا الدليل ، استكشفنا المفاهيم الأساسية لـ CSS ، بما في ذلك الأساسيات والمحددات والخصوصية ، والتتالي ، والوراثة ، والقيم ، ونموذج الصندوق. لقد شاركنا أيضًا مواضيع ونصائح وحيل متقدمة لمساعدتك على إتقان فن إنشاء تخطيطات دقيقة ومرنة لمشاريع الويب الخاصة بك.

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

https://ahmedradwan.dev

تواصل معنا إذا كنت ترغب في الانضمام إلي وكتابة مقالات مع المهووسين 🙂

ربما يعجبك أيضا