تقوم CSS أو Cascading Stylesheets بإكمال اللغة المحددة لقواعد التصميم الخاصة بشبكتنا. يستخدم الفنانون في كل مكان CSS على أساس يومي لإنشاء مجموعات قواعد القواعد وتنظيمها وترميزها. أصبحت هذه هي اللغة الأكثر شعبية للتصميم الأمامي وتوفر قدرات مذهلة مع الإصدار الأخير من CSS3. ولكن ماذا يعني كل هذا الرمز في الواقع؟
اللغة نفسها تم تطويرها بشكل كامل لبضع سنوات حتى الآن. يمكن أن يحدث الارتباك في الغالب بسبب سوء الفهم وسوء استخدام مصطلحات مماثلة. CSS يجلب الكثير من المفاهيم الجديدة إلى الجدول. سنقوم بتغطية بعض المصطلحات الأكثر شيوعًا لإتقانها كمعلم CSS.
لماذا تتخصص في CSS؟
لقد تم طرح هذا السؤال من قبل ، وحتى دخول عام 2011 ، يمكننا أن نرى النتائج نفسها تظهر. CSS هي لغة قوية لا تحب البرمجة النصية أو البرمجة. إنها لغة أسلوب ، وبشكل أكثر تحديداً رمز يستخدم لوصف كيفية تصرف صفحة الويب.
باستخدام CSS ، يمكننا معالجة السمات مباشرة من عناصر HTML الفردية. يمكن أن تتأثر جميع الكتل والفقرات والروابط والصور من خلال قواعد CSS. لقد كان تحسين دلالات العرض التقديمي لشبكة الويب خطوة كبيرة دائمًا. هذا هو السبب الرئيسي وراء كون CSS لا تزال اللاعب الرائد للمصممين - لم يخلق أحد أي شيء أفضل
الخصائص والقيم
هذه هي أبسط طريقة لاقتحام CSS. جميع التعليمات البرمجية تنقسم إلى إجراءين: اختيار عنصر لتطبيق التصميمات وما يجب تطبيقه. يتم إنشاء الأخير من خلال أزواج الممتلكات / القيمة.
كمثال
color: red;على ذلك خاصية زوج / قيمة بسيطة للغاية. الخاصية التي استخدمناها هي اللون الذي يسمح لنا بالمرور بأي قيمة مقبولة لتغيير لون النص. قد يكون هذا أيضًا رمزًا سداسيًا أو بيانات ألوان RGB (Red-Green-Blue). في كثير من الأحيان لن يذكر المصممون فكرة القيم لأنها قد تكون مضللة.
الخصائص والقيم هي حقا فكرة واحدة. كل إعلان الممتلكات يتطلب قيمة ، والقيم من تلقاء نفسها لا معنى لها. هناك الكثير من الوثائق عبر الإنترنت والتي تتخطى العديد من الخصائص المختلفة وكيفية تأثيرها على عناصر HTML. أوصي بشراء دفتر مرجع CSS من أي متجر كتب قريب. إنها رخيصة إلى حد ما وتحتوي على معظم المعلومات التي تحتاجها.
قيم محددة
هناك حاجة إلى محددات لإكمال سطر كامل من كود CSS. هذه هي ما نعلن تعيين نوع العنصر الذي نستهدفه. هناك العديد من المختارين والكثير منهم ملتزمون للغاية المصمم العادي لن يحتاج إلى المهارات. تحقق من مستندات محدد W3 إذا كنت تريد معرفة المزيد.
إن أبسط طريقة لبدء تعريفات النمط هي استخدام العناصر المجردة كمحددات للخاصية. وهذا يعني التلاعب كود الجذرية مثل
pللفقرات، و divعن الانقسامات، وحتى bodyو htmlيمكن استخدامها لمعالجة مستند صفحة ويب بأكملها. يوجد أدناه مثال سريع لتصميم كل عناصر الفقرة.
1
| p { font-family: Arial, sans-serif; color: #222; font-weight: bold; } |
ما يعطي CSS وزنا حقيقيا هو مدى دقة القنص المحدد يمكن أن يكون. أفضل طريقة لتحقيق أنماط المستهدفة هي من خلال 2 الأساليب المعروفة باسم الطبقات و معرفات . هذه هي الأفكار الشائعة في HTML حيث يمكنك تعيين أي عنصر ليكون له معرف وقيمة فئة من خلال السمات. ثم باستخدام CSS ، من السهل تطبيق الأنماط على تلك الكتلة المحددة.
1
2
| p#firstpar { font-size: 14px; } /* styles paragraph with ID of "firstpar" */p.comment { font-size: 1.0em; line-height: 1.3em; } /* styles paragraph(s) with class of "comment" */ |
وحدات طول والقيم
في كثير من الأحيان تختلط هذه الشروط ، وليس مفاجأة كبيرة. تم شرح القيم في وقت سابق على أنها الموضع الذي نستخدمه لوصف خاصية. وحدات الطول هي أيضًا قيم حيث يتم استخدامها لوصف خاصية.
الفرق هو أن هذه القيم تتطلب بيانات رقمية وبالتالي يجب أن تعيد بعض أشكال الوحدات. البكسل (بكسل) هي الأكثر انتشارًا ويمكن استخدامها لمعظم أي شيء: العرض / الارتفاع ، حجم الخط ، الحشو / الهوامش ، على سبيل المثال لا الحصر.
بخلاف هذه قد ترى النسب المئوية (٪) تستخدم في كثير من الأحيان من خلال تخطيطات السوائل. عند تعيين قيم العرض إلى نسبة مئوية ، يفترض المترجم أن يكون 100٪ هو العرض الكامل لمتصفح الويب. هذا يعطي الكثير من الدقة للمصممين عند تطبيق الأنماط على هياكل التخطيط وحتى طباعة الصفحات.
إعلان كتلة
الآن بعد وضع كل هذه المصطلحات معًا ، يمكننا أخيرًا مناقشة الفكرة الأساسية وراء أوراق الأنماط. يتم استخدام كتل التعليمات البرمجية لتحديد مناطق المواضيع وتحديد تفاصيل العنصر. على سبيل المثال ، يوجد أدناه سطر من التعليمات البرمجية لحاوية التنقل البسيطة:
1
| div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; } |
أسهل طريقة لعرض هذا الرمز هي خصائص الخط واحدة تلو الأخرى. استخدم مطورو CSS كتل التعليمات البرمجية لكسر كل خاصية على خطها الخاص. لا يشغل جدول الأعمال هذا مساحة أكبر بكثير ولكنه يقلل أيضًا من القدرة على "تحريك" الورقة الخاصة بك للعثور على ما تريده بالضبط.
أفضل طريقة لتقسيم مقاطع التعليمات البرمجية هي فصل العناصر المعقدة إلى عناصر خاصة بها بعد أن تصل إلى حد. هذا الرقم شخصي وسيختلف بين المطورين. إنها نقطة التحول حيث يفرض المنطق أنه من السخف إبقاء كل شيء على سطر واحد ، معظمه بسبب قابلية القراءة.
أدناه كتبت مثالًا على مجموعة من خصائص التنقل معًا. تحتفظ هذه الممارسة بالعناصر الأعمق في نفس الموقع بحيث تكون عمليات التحرير لجميع عناصر التنقل أكثر بساطة.
1
2
3
4
| div#nav { display: block; width: 100%; padding: 3px 6px; margin-bottom: 20px; }div#nav ul { list-style: none; display: block; }div#nav ul li { float: left; margin-right: 10px; font-size: 12px; }div#nav ul li a { color: #0f0f0f; text-decoration: none; display: inline-block; padding: 2px 5px; } |
التطورات المحتملة من CSS2 / CSS3
في العناوين الرئيسية الأخيرة ، كان الحديث بلا توقف عن الفوائد المذهلة من CSS3. ولكن ما الذي تغير بالفعل في اللغة؟ من الواضح أن الكود القديم لا يزال يعمل بشكل جيد. يوضح هذا على الأقل التوافق التام بين المترجمين (وهو أمر جيد دائمًا).
ترتبط الاختلافات الرئيسية في الغالب بخصائص جديدة. هذه تسمح بزوايا مدورة وتأثيرات الظل المسقط في المتصفح. يوفر CSS3 أيضًا أدوات جديدة لوصف الألوان في المستند. يعد HSL (Hue-Saturation-Lightness) الأحدث بالإضافة إلى HSLA الذي يتضمن قناة Alpha لتقليل التعتيم.
تعتبر محددات السمات خطوة كبيرة للأمام فيما يتعلق بالتصميم المستقيم للعلامات. باستخدام هذا النمط من التعليمات البرمجية ، يمكنك استهداف اسم عنصر محدد يحتوي على سمات لها قيم معينة. تكون هذه مفيدة في الغالب عند التعامل مع العلامات مثل XML حيث لا توجد مبادئ تصميم قياسية لمعالجة العقد. المثال التالي هو فكرة بسيطة نسبيًا:
1
| div[attrib^="1"] { /* styles here */ } |
الرمز أعلاه جزء من مكتبة محددات CSS. سيؤثر هذا على جميع عناصر div مع سمة "attrib" والتي تحتوي أيضًا على القيمة "1". إذا كان هذا لا يزال مربكًا ، فراجع المثال أدناه للتوضيح. من الناحية النظرية ، يجب أن يقوم هذان المحددان بنفس الإجراءات.
1
2
| p[id^="primary"] { /* styles */ }p#primary { /* styles */ } |
استنتاج
بعد انهيار بعض المصطلحات الأكثر تشويشًا ، يبدو CSS وكأنه نزهة في الحديقة. اللغة بديهية للغاية ويمكن للمبتدئين البدء في التصميم خلال الساعات القليلة الأولى. هذا ما يجعل CSS مشهورًا جدًا بين مطوري الويب.
بدأت فوائد CSS3 فقط سريان مفعولها. على مدار الأعوام القليلة القادمة ، ستظهر لنا اتجاهات الويب المتطورة مدى التحكم الذي نتمتع به حقًا على تصميم صفحات الويب. تقف CSS حاليًا فخورة باعتبارها اللغة السائدة في تصميم مواقع الويب الأمامية. يمكن أن تؤدي الممارسة حتى في مهارات المستوى المتوسط البدائي إلى تجربة تصميم وفيرة ومزيد من المعرفة.