مقدمة في CSS

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

ما هو CSS

CSS(اختصار لـاوراق النمط المتعاقب) هي اللغة التي نستخدمها لتصميم ملف HTML ، وإخبار المتصفح بكيفية عرض العناصر على الصفحة.

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

قدم HTML 3.2 خيار تحديد الألوان المضمنة كسمات عنصر HTML وعلامات العرض مثلcenterوfontولكن سرعان ما تصاعد هذا الوضع إلى وضع بعيد عن المثالية 😱

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

تتطور CSS باستمرار ، وقد تكون CSS التي استخدمتها منذ 5 سنوات قديمة ، حيث ظهرت تقنيات CSS اصطلاحية جديدة وتغيرت المتصفحات.

تاريخ موجز لـ CSS

قبل الانتقال ، أود أن أقدم لك ملخصًا موجزًا لتاريخ CSS.

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

قدم HTML 3.2 خيار تحديد الألوان المضمنة كسمات عنصر HTML وعلامات العرض مثلcenterوfont، لكن ذلك تصاعد بسرعة إلى وضع بعيد عن المثالية.

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

تتطور CSS باستمرار ، وقد تكون CSS التي استخدمتها منذ 5 سنوات قديمة ، حيث ظهرت تقنيات CSS اصطلاحية جديدة وتغيرت المتصفحات.

من الصعب تخيل الأوقات التي ولدت فيها CSS ومدى اختلاف الويب.

في ذلك الوقت ، كان لدينا العديد من المتصفحات المنافسة ، أهمها Internet Explorer أو Netscape Navigator.

تم تصميم الصفحات باستخدام HTML ، مع علامات عرض خاصة مثلboldوالسمات الخاصة ، والتي تم إهمال معظمها الآن.

هذا يعني أن لديك قدرًا محدودًا من فرص التخصيص.

تم ترك الجزء الأكبر من قرارات التصميم للمتصفح.

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

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

بعد اقتراح الفكرة الأولية في عام 1994 ، تم إصدار CSS لأول مرة في عام 1996 ، عندما تم نشر توصية CSS المستوى 1 ("CSS 1").

تم نشر CSS المستوى 2 ("CSS 2") في عام 1998.

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

لم تكن المتصفحات سريعة بشكل خاص في تنفيذ CSS. كان علينا الانتظار حتى عام 2002 حتى يقوم المستعرض الأول بتنفيذ مواصفات CSS الكاملة: IE for Mac ، كما هو موضح جيدًا في منشور CSS Tricks هذا:https://css-tricks.com/look-back-history-css/

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

الأمور اليوم أفضل بكثير. يمكننا فقط استخدام معايير CSS دون التفكير في المراوغات ، في معظم الأوقات ، ولم تكن CSS أقوى من أي وقت مضى.

لم يعد لدينا أرقام إصدار رسمية لـ CSS الآن ، ولكن مجموعة عمل CSS تصدر "لقطة" للوحدات النمطية التي تعتبر حاليًا مستقرة وجاهزة للتضمين في المتصفحات. هذه أحدث لقطة من 2018:https://www.w3.org/TR/css-2018/

لا يزال CSS Level 2 أساس CSS الذي نكتبه اليوم ، ولدينا العديد من الميزات المبنية فوقه.

كيف تبدو CSS

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

في هذا المثال،pهو المحدد ، ويطبق قاعدة واحدة تحدد القيمة20pxالىfont-sizeمنشأه:

p {
  font-size: 20px;
}

قواعد متعددة مكدسة واحدة تلو الأخرى:

p {
  font-size: 20px;
}

a {
color: blue;
}

يمكن أن يستهدف المحدد عنصرًا واحدًا أو أكثر:

p, a {
  font-size: 20px;
}

ويمكن أن تستهدف علامات HTML ، مثل أعلاه ، أو عناصر HTML التي تحتوي على سمة فئة معينة مع.my-class، أو عناصر HTML التي تحتوي على ملفidالسمة مع#my-id.

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

فاصلة منقوطة

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

التنسيق والمسافة البادئة

لا توجد قاعدة ثابتة للتنسيق. هذا CSS صالح:

      p
      {
  font-size:           20px   ;
                      }

a{color:blue;}

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

يعد الاستخدام الصحيح والمتسق للتباعد والمسافة البادئة أداة مساعدة مرئية في فهم الكود الخاص بك.

كيف تقوم بتحميل CSS في صفحة ويب

يمكن تحميل CSS في صفحة بثلاث طرق: باستخدام ملفstyleعلامة في الصفحةhead، مع ملف CSS خارجي ، وعلامات مضمنة. يتم إرفاق CSS بصفحة HTML بطرق مختلفة.

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

لاستخدام هذه الطريقة ، يمكنك إضافةlinkعلامة معhrefتشير إلى ملف CSS الذي تريد تضمينه. يمكنك إضافته داخل ملفheadعلامة الموقع (وليس داخل ملفbodyبطاقة شعار):

<link rel="stylesheet" type="text/css" href="myfile.css">

الrelوtypeالسمات مطلوبة أيضًا ، لأنها تخبر المتصفح بنوع الملف الذي نرتبط به.

2: استخدام ملفstyleبطاقة شعار

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

<style>
...our CSS...
</style>

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

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

الأنماط المضمنة هي الطريقة الثالثة لإضافة CSS إلى الصفحة. يمكننا إضافةstyleإلى أي علامة HTML ، وأضف CSS إليها.

<div style="">...</div>

مثال:

<div style="background-color: yellow">...</div>

تحميل مجانيكتيب CSS


المزيد من دروس css:


Tech Wiki على الإنترنت!