CSS العودة إلى الأساسيات شرح المصطلحات
تقوم CSS أو Cascading Stylesheets بإكمال اللغة المحددة لقواعد التصميم الخاصة بشبكتنا. يستخدم الفنانون في كل مكان CSS على أساس يومي لإنشاء مجموعات قواعد القواعد وتنظيمها وترميزها. أصبحت هذه هي اللغة الأكثر شعبية للتصميم الأمامي وتوفر قدرات مذهلة مع الإصدار الأخير من CSS3. ولكن ماذا يعني كل هذا الرمز في الواقع?
اللغة نفسها تم تطويرها بشكل كامل لبضع سنوات حتى الآن. يمكن أن يحدث الارتباك في الغالب بسبب سوء الفهم وسوء استخدام مصطلحات مماثلة. CSS يجلب الكثير من المفاهيم الجديدة إلى الجدول. سنقوم بتغطية بعض المصطلحات الأكثر شيوعًا لإتقانها كمعلم CSS.
لماذا تتخصص مع CSS?
لقد تم طرح هذا السؤال من قبل ، وحتى دخول عام 2011 ، يمكننا أن نرى النتائج نفسها تظهر. CSS هي لغة قوية لا تحب البرمجة النصية أو البرمجة. إنها لغة نمط ، وبشكل أكثر تحديداً رمز يستخدم لوصف كيفية تصرف صفحة الويب.
باستخدام CSS ، يمكننا معالجة السمات مباشرة من عناصر HTML الفردية. يمكن أن تتأثر جميع الكتل والفقرات والروابط والصور من خلال قواعد CSS. لقد كان تحسين دلالات العرض التقديمي على الويب خطوة كبيرة. هذا هو السبب الرئيسي وراء كون CSS لا تزال اللاعب الرائد للمصممين - لم يخلق أحد أي شيء أفضل!
الخصائص والقيم
هذه هي أبسط طريقة لاقتحام CSS. جميع التعليمات البرمجية تنقسم إلى إجراءين: اختيار عنصر لتطبيق التصميمات وما يجب تطبيقه. يتم إنشاء الأخير من خلال أزواج الممتلكات / القيمة.
كمثال لون احمر؛ هو خاصية / قيمة زوج بسيط للغاية. الخاصية التي استخدمناها هي اللون مما يسمح لنا بالمرور في أي مقبول القيمة لتغيير لون النص. يمكن أن يكون هذا أيضًا رمزًا سداسيًا أو بيانات ألوان RGB (أحمر - أخضر - أزرق). في كثير من الأحيان لن يذكر المصممون فكرة القيم لأنها قد تكون مضللة.
الخصائص والقيم هي حقا فكرة واحدة. كل إعلان الممتلكات يتطلب قيمة ، والقيم من تلقاء نفسها لا معنى لها. هناك الكثير من الوثائق عبر الإنترنت والتي تتخطى العديد من الخصائص المختلفة وكيفية تأثيرها على عناصر HTML. أوصي بشراء دفتر مرجع CSS من أي متجر كتب قريب. إنها رخيصة إلى حد ما وتحتوي على معظم المعلومات التي تحتاجها.
القيم محدد
هناك حاجة إلى محددات لإكمال سطر كامل من كود CSS. هذه هي ما نعلن تعيين نوع العنصر الذي نستهدفه. هناك العديد من المحددات والكثير منهم مصممون لدرجة أن المصمم العادي لن يحتاج إلى المهارات. تحقق من مستندات محددات W3 إذا كنت تريد معرفة المزيد.
إن أبسط طريقة لبدء تعريفات النمط هي استخدام العناصر المجردة كمحددات للخاصية. وهذا يعني معالجة رمز الجذر مثل ص للفقرات, شعبة للانقسامات ، وحتى الجسم و أتش تي أم أل يمكن استخدامها لمعالجة وثيقة صفحة الويب بأكملها. يوجد أدناه مثال سريع لتصميم كل عناصر الفقرة.
p font-family: Arial، sans-serif؛ اللون: # 222 ؛ وزن الخط: غامق ؛
ما يعطي CSS وزنا حقيقيا هو مدى دقة القنص المحدد يمكن أن يكون. أفضل طريقة لإنجاز الأنماط المستهدفة هي من خلال 2 طرق معروفة باسم الطبقات و معرفات. هذه أفكار شائعة في HTML حيث يمكنك تعيين أي عنصر ليكون له معرف وقيمة فئة من خلال السمات. ثم باستخدام CSS ، من السهل تطبيق الأنماط على تلك الكتلة المحددة.
p # firstpar font-size: 14px؛ / * أنماط الفقرة بمعرف "firstpar" * / p.comment font-size: 1.0em؛ ارتفاع الخط: 1.3em ؛ / * أنماط (فقرات) الأنماط مع فئة "التعليق" * /
طول الوحدات والقيم
في كثير من الأحيان تختلط هذه الشروط ، وليس مفاجأة كبيرة. تم شرح القيم في وقت سابق على أنها الموضع الذي نستخدمه لوصف خاصية. وحدات الطول هي أيضًا قيم حيث يتم استخدامها لوصف خاصية.
الفرق هو أن هذه القيم تتطلب بيانات رقمية وبالتالي يجب أن تعيد بعض أشكال الوحدات. البكسل (بكسل) هي الأكثر انتشارًا ويمكن استخدامها لمعظم أي شيء: العرض / الارتفاع ، حجم الخط ، الحشو / الهوامش ، على سبيل المثال لا الحصر.
بخلاف هذه قد ترى النسب المئوية (٪) تستخدم في كثير من الأحيان من خلال تخطيطات السوائل. عند تعيين قيم العرض إلى نسبة مئوية ، يفترض المترجم أن يكون 100٪ هو العرض الكامل لمتصفح الويب. هذا يعطي الكثير من الدقة للمصممين عند تطبيق الأنماط على هياكل التخطيط وحتى طباعة الصفحات.
إعلان كتلة
الآن بعد وضع كل هذه المصطلحات معًا ، يمكننا أخيرًا مناقشة الفكرة الأساسية وراء أوراق الأنماط. يتم استخدام كتل التعليمات البرمجية لتحديد مناطق المواضيع وتحديد تفاصيل العنصر. على سبيل المثال ، يوجد أدناه سطر من التعليمات البرمجية لحاوية التنقل البسيطة:
div # nav display: block؛ العرض: 100 ٪ ؛ الحشو: 3px 6px ؛ الهامش السفلي: 20 بكسل ؛
أسهل طريقة لعرض هذا الرمز هي خصائص الخط واحدة تلو الأخرى. استخدم مطورو CSS كتل التعليمات البرمجية لكسر كل خاصية على خطها الخاص. هذه الأجندة لا تأخذ مساحة أكبر فحسب ، بل تقلل من القدرة على ذلك “المقشود” ورقة الخاص بك للعثور بالضبط ما تحتاجه.
أفضل طريقة لتقسيم مقاطع التعليمات البرمجية هي فصل العناصر المعقدة إلى عناصر خاصة بها بعد وصولها إلى الحد الأدنى. هذا الرقم شخصي وسيختلف بين المطورين. إنها نقطة التحول حيث يفرض المنطق أنه من السخف إبقاء كل شيء على سطر واحد ، معظمه بسبب قابلية القراءة.
أدناه كتبت مثالًا على مجموعة من خصائص التنقل معًا. تحتفظ هذه الممارسة بالعناصر الأعمق في نفس الموقع بحيث تكون عمليات التحرير لجميع عناصر التنقل أبسط بكثير.
div # nav display: block؛ العرض: 100 ٪ ؛ الحشو: 3px 6px ؛ الهامش السفلي: 20 بكسل ؛ div # nav ul list-style: none؛ العرض محجوب؛ div # nav ul li float: left؛ الهامش الأيمن: 10 بكسل ؛ حجم الخط: 12 بكسل ؛ div # nav ul li a color: # 0f0f0f؛ زخرفة النص: لا شيء ؛ عرض: كتلة مضمنة. الحشو: 2px 5px.
التطورات المحتملة من CSS2 / CSS3
في العناوين الرئيسية الأخيرة ، تم الحديث بدون توقف عن الفوائد المذهلة من CSS3. ولكن ما لديه حقا تغير في اللغة؟ من الواضح أن الكود القديم لا يزال يعمل بشكل جيد هذا على الأقل يظهر توافقًا كاملاً مع الإصدارات السابقة بين المترجمين (يكون دائمًا أمرًا جيدًا).
وترتبط معظم الاختلافات الرئيسية في الخصائص الجديدة. هذه تسمح بزوايا مدورة وتأثيرات الظل المسقط في المتصفح. يوفر CSS3 أيضًا أدوات جديدة لوصف الألوان في المستند. يعد HSL (Hue-Saturation-Lightness) الأحدث بالإضافة إلى HSLA الذي يتضمن قناة ألفا لتقليل التعتيم.
تعتبر محددات السمات خطوة كبيرة للأمام فيما يتعلق بالتصميم المستقيم للعلامات. باستخدام هذا النمط من التعليمات البرمجية ، يمكنك استهداف اسم عنصر محدد يحتوي على سمات لها قيم معينة. هذه مفيدة في الغالب عند العمل مع العلامات مثل XML حيث لا توجد مبادئ تصميم قياسية لمعالجة العقد. المثال التالي هو فكرة بسيطة نسبيًا:
div [attrib ^ = "1"] / * الأنماط هنا * /
الرمز أعلاه جزء من مكتبة محددات CSS. سيؤثر هذا على جميع عناصر div ذات سمة “ATTRIB” الذي يحمل أيضا القيمة “1”. إذا كان هذا لا يزال مربكًا ، فراجع المثال أدناه للتوضيح. من الناحية النظرية ، يجب أن يقوم هذان المحددان بنفس الإجراءات.
p [id ^ = "primary"] / * styles * / p # primary / * styles * /
استنتاج
بعد انهيار بعض المصطلحات الأكثر تشويشًا ، يبدو CSS وكأنه نزهة في الحديقة. اللغة بديهية للغاية ويمكن للمبتدئين البدء في التصميم خلال الساعات القليلة الأولى. هذا ما يجعل CSS مشهورًا جدًا بين مطوري الويب.
بدأت فوائد CSS3 فقط سريان مفعولها. على مدار الأعوام القليلة القادمة ، ستظهر لنا اتجاهات الويب المتطورة مدى التحكم الذي نتمتع به حقًا على تصميم صفحات الويب. تقف CSS حاليًا فخورة باعتبارها اللغة السائدة في تصميم مواقع الويب الأمامية. يمكن أن تؤدي الممارسة حتى في مهارات المستوى المتوسط البدائي إلى تجربة تصميم وفيرة ومزيد من المعرفة.
