أفضل دروس CSS و CSS3

أوراق الأنماط المتتالية (CSS)

CSS هو اختصار لـ Cascading Style Sheets. تم اختراعه لأول مرة في عام 1996 ، وهو الآن ميزة قياسية لجميع متصفحات الويب الرئيسية.

يسمح CSS للمطورين بالتحكم في كيفية ظهور صفحات الويب من خلال "تصميم" بنية HTML لتلك الصفحة.

يتم الحفاظ على مواصفات CSS من قبل اتحاد شبكة الويب العالمية (W3C).

يمكنك بناء بعض الأشياء المدهشة في CSS وحدها ، مثل لعبة CSS Minesweeper الخالصة (التي لا تستخدم JavaScript).

البداية الجيدة هي مقدمة منهج freeCodeCamp إلى CSS الأساسي.

اقتراح آخر للمبتدئين هو W3C's البدء بـ HTML + CSS الذي يعلم كيفية إنشاء ورقة أنماط.

يعد موقع CSS Zen Garden مثالاً رائعًا على كيفية تصميم نفس لغة HTML لتبدو فريدة تمامًا.

لتوضيح قوة CSS ، تحقق من الأنواع في القطع.

دروس لبدء استخدام CSS و CSS3

أفضل مكان لبدء تعلم CSS هو مقدمة مجانية لمدة ساعتين لبرنامج CSS التعليمي.

بعد ذلك ، إذا كنت تشعر بمزيد من المغامرة ، فلدينا دورة تدريبية كاملة مدتها 12 ساعة تغطي HTML و HTML5 و CSS بالتفصيل.

فليكس بوكس

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

هناك 3 خطوات بسيطة لاستخدام Flexbox:

  1. قم بتحويل الحاوية الرئيسية إلى حاوية مرنة باستخدام display: flex;
  2. اضبط تخطيط الحاويات المختلفة باستخدام flex-direction
  3. ضبط تخطيط العناصر داخل وعاء باستخدام خصائص مثل justify-content، align-items، وهلم جرا

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

  • المحور الرئيسي : المحور الأساسي للحاوية المرنة التي توضع على طولها العناصر المرنة. ضع في اعتبارك أن هذا يمكن أن يكون أفقيًا أو عموديًا حسبflex-directionالخاصية.
  • البداية الرئيسية | النهاية الرئيسية :توضع العناصر المرنة في حاوية من main-startإلى main-end.
  • الحجم الرئيسي : يعمل البعد الرئيسي للعنصر المرن ، والذي يمكن أن يكون عرضه أو ارتفاعه ، كحجم أساسي للعنصر.
  • المحور المتقاطع : المحور المتعامد مع المحور الرئيسي. يعتمد اتجاه المحور المتقاطع على اتجاه المحور الرئيسي.
  • بداية متقاطعة | عرضية : توضع الخطوط المرنة والعناصر في حاوية مرنة تبدأ منالجانبcross-startإلىcross-endالجانب.
  • الحجم المتقاطع : يعمل البعد المتقاطع للعنصر (العرض أو الارتفاع) كحجم متقاطع للعنصر.

تخطيط الشبكة

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

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

لماذا الشبكة؟

  • يمكنك بسهولة الحصول على شبكة من 12 عمودًا بسطر واحد من CSS. grid-template-columns: repeat(12, 1fr)
  • تتيح لك الشبكة تحريك الأشياء في أي اتجاه. بخلاف Flex ، حيث يمكنك نقل العناصر إما أفقيًا ( flex-direction: row) أو عموديًا ( flex-direction: column) - وليس كليهما في نفس الوقت - تتيح لك الشبكة نقل أي عنصر شبكة إلى أي منطقة شبكة محددة مسبقًا على الصفحة. لا يجب أن تكون العناصر التي تنقلها متجاورة.
  • باستخدام CSS Grid ، يمكنك تغيير ترتيب عناصر HTML باستخدام CSS فقط . انقل شيئًا ما من أعلى إلى اليمين ، وانقل العناصر الموجودة في التذييل إلى الشريط الجانبي وما إلى ذلك. بدلاً من نقل العنصر من إلى في HTML ، يمكنك فقط تغيير موضعه grid-areaفي ورقة أنماط CSS.

الشبكة مقابل فليكس

  • المرن أحادي البعد - إما أفقيًا أو رأسيًا ، بينما الشبكة ثنائية الأبعاد ، مما يعني أنه يمكنك تحريك العناصر في كل من المستويات الأفقية والعمودية
  • في الشبكة ، نطبق أنماط التخطيط على الحاوية الأصلية وليس على العناصر. فليكس، من ناحية أخرى، يستهدف هذا البند المرن إلى خصائص مجموعة مثل flex-basis، flex-growوflex-shrink
  • Grid و Flex ليسا متعارضين. يمكنك استخدام كلاهما في نفس المشروع.

التحقق من توافق المتصفح مع @supports

من الناحية المثالية ، عند إنشاء موقع ، يمكنك تصميمه باستخدام Grid واستخدام Flex كبديل. يمكنك معرفة ما إذا كان متصفحك يدعم الشبكة مع @supportقاعدة CSS (المعروف أيضًا باسم استعلام الميزة). هذا مثال:

.container { display: grid; /* display grid by default */ } @supports not (display: grid) { /* if grid is not supported by the browser */ .container { display: flex; /* display flex instead of grid */ } }

ابدء

لجعل أي عنصر الشبكة، تحتاج إلى تعيين في displayالممتلكات grid، كما يلي:

.conatiner { display: grid; }

وهذا كل شيء. لقد صنعت شبكتك للتو .container. كل عنصر داخل العنصر .containerيصبح تلقائيًا عنصر شبكة.

تحديد القوالب

الصفوف و الأعمة

grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto 300px;

المناطق

grid-template-areas: "a a a a" "b c d e" "b c d e" "f f f f";

أو

grid-template-areas: "header header header header" "nav main main sidebar";

مناطق الشبكة

إليك بعض التعليمات البرمجية النموذجية حول كيفية تحديد مناطق الشبكة وتعيينها:

.site { display: grid; grid-template-areas: /* applied to grid container */ "head head" /* you're assigning cells to areas by giving the cells an area name */ "nav main" /* how many values kind of depends on how many cells you have in the grid */ "nav foot"; } .site > header { grid-area: head; } .site > nav { grid-area: nav; } .site > main { grid-area: main; } .site > footer { grid-area: foot; }

و frحدة

يقدم Grid frوحدة جديدة ، والتي تعني الكسر . الشيء الجيد في استخدام frالوحدة هو أنها تعتني بالحسابات نيابة عنك. استخدام frيتجنب مشاكل الهامش والحشو. مع %وما emإلى ذلك تصبح معادلة رياضية عند الحساب grid-gap. إذا كنت تستخدم frالوحدة ، فستحسب تلقائيًا أحجام كل من العمود والتوثيق وتعديل حجم الأعمدة وفقًا لذلك. بالإضافة إلى أنه لن يكون هناك فجوات نزيف في النهاية أيضًا.

أمثلة

تغيير ترتيب العناصر حسب حجم الشاشة

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

الحل البسيط هو تغيير grid-template-areasالحجم بناءً على حجم الشاشة. يمكنك أيضًا تغيير عدد الأعمدة والصفوف بناءً على حجم الشاشة أيضًا. هذا هو بديل أنظف وأبسط لنظام Bootstrap's Grid ( col-xs-8 col-sm-6 col-md-4 col-lg-3).

.site { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "title title" "main header" "main sidebar" } @media screen and (min-width: 34em) { /* If the screen is big enough, use a different template for grid areas */ .site { grid-template-columns: 2fr 1fr 1fr; grid-template-areas: "title title title" "main header header" "main sidebar footer" } }

معلومات اكثر:

  • CSS Grid Palyground من Mozilla: نقطة انطلاق رائعة إذا كنت جديدًا في CSS Grids. يحتوي على صور لمساعدتك على فهم المصطلحات بسهولة
  • YouTube: Morten Rand-Hendriksen: CSS Grid Changes Everything (About Web Layouts): سيقنعك هذا العرض التقديمي في أقل من ساعة لماذا تكون شبكات CSS رائعة ولماذا / كيف يجب عليك استخدامها.
  • مقاطع الفيديو: Learn Grid Layout Video Series بواسطة Rachel Andrew: راشيل أندرو خبيرة في هذا الموضوع. قد تبدو عناوين الفيديو غريبة ومدهشة ، لكن المحتوى قصير ومباشر
  • Book: Get Ready for CSS Grid Layout by Rachel Andrew

Selectors

Selectors are CSS rules to target HTML elements to apply styles. Tag names, class names, ids, and attributes are some of the hooks used as selectors.

Selector Syntax

Selectors arranged in a specific sequence build up to a rule to target elements. An example:

/* selects anchor tags */ a { color: orange; } /* selects elements with hero class */ .hero { text-align: center; }

Type of Selectors

  • TypeDescription are Type selectors and Tag names are used to select elements such as h1 or a.
  • Universal Selectors apply to all elements.
  • div * matches all elements within div elements.
  • Attribute Selectors are Selectors that target elements based on their attributes [and optionally, their values].
  • h1[title] selects h1 elements with title attribute.
  • Class Selectors are Selectors that target elements using their class names.
  • ID Selectors are Selectors that use ID to target elements. #logo selects the element with logo as ID.
  • Pseudo-class Selectors are Special selectors that target elements based on their state. a:hover selector applies style when pointer hovers over links.

Selector Combinators

Combinator: Purpose white spaceDescendant combinator. .nav li selects all li children within the class .nav, including nested li elements.>Child combinator. .menu > li selects all li that are direct children of elements with .menu class.+Adjacent sibling combinator. .logo + h1 targets h1 that is an immediate sibling to .logo class.~General sibling combinator. header ~ div targets div elements that are siblings to header elements.

This section details all of these electors.

More Information:

You can learn more about selectors on these resources:

  • Official CSS3 Selectors specification
  • Selectors page on Mozilla Developer Network
  • CSS Selectors Cheat Sheet on FreeCodeCamp Guides

Selectors in CSS (cascading style sheets) are determined based on specificity. With this we are able to be more specific on our style rules and override other rules that may be targeting the same element but are not as specific.

The way this specificity hierarchy works is based on weight. This means that an element Selector has a weight of 1 (one), a class selector has a weight of 10 (ten) and a id selector has a weight of 100 (one hundred). We are able to combine different selectors together be more specific on the element we want to change.

As an example:

 p { color: blue; } p .red { color: red; }

Our type selector p will select all p elements in our html document, but it only has a weight of one. In contrast, the class selector has a weight of 11, because we are combining a type selector with a class selector (this selector is matching all p elements with a class of red).

Note:

  • Directly targeted rules will always have precedence over rules which inherit elements from their ancestor.
  • Specificity is only applied when multiple declarations are targeting the same element, and only then this rule is applied.
  • Specificity is usually why some of the style rules do not apply to elements when you would expect them to.

CSS Display

The display property specifies the type of box used for an HTML element. It has 20 possible keyword values. The commonly used ones are:

 .none {display: none} .block {display: block} .inline-block {display: inline-block} .inline {display: inline} .flex {display: flex} .inline-flex {display: inline-flex} .inline-table {display: inline-table} .table {display: table} .inherit {display: inherit} .initial {display: initial}

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

هذا هو الاختلاف الأكبر بين هذه الخاصية visibility: hiddenوالخاصية ، والذي يخفي العنصر ولكنه يحتفظ بجميع عناصر الصفحة الأخرى في نفس المكان الذي تظهر فيه إذا كان العنصر المخفي مرئيًا.

يتم تجميع قيم الكلمات الرئيسية هذه في ست فئات: