10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

10 أمثلة بسيطة لرموز CSS يمكنك تعلمها في 10 دقائق

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





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



1. رمز CSS الأساسي لتنسيق الفقرات بسهولة

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





لنفترض أنك تريد كل فقرة (

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

متعلق ب: ورقة الغش HTML



كود CSS لهذا هو:

p { font-size: 120%; color: dimgray; }

بسيط! الآن ، عندما يعرض المتصفح فقرة ، سيرث النص الحجم (120 بالمائة من العادي) واللون ('رمادي باهت').



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

2. مثال CSS لتغيير حالة الأحرف

هل تريد إنشاء تعيين للفقرات التي يجب أن تكون بأحرف كبيرة صغيرة؟ عينة CSS لذلك ستكون:



p.smallcaps { font-variant: small-caps; }

لعمل فقرة بأحرف كبيرة صغيرة بالكامل ، استخدم علامة HTML مختلفة قليلاً. هذا ما يبدو عليه:

Your paragraph here.

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

إذا كنت تريد تغيير مجموعة نصية إلى حالة معينة ، فاستخدم أمثلة كود CSS التالية:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

الأخير يجعل الحرف الأول من كل جملة كبيرًا.

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

مع الروابط ، كل 'أ' متبوعة بنقطتين وليس نقطة.

كل واحد من هذه الإعلانات يغير لون ارتباط في سياق معين. ليست هناك حاجة لتغيير فئة الارتباط لتغيير لونه.

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

a { text-decoration: none; }

سيظل أي شيء يحتوي على علامة الارتباط ('أ') بدون تسطير. هل تريد وضع خط تحته عندما يحوم المستخدم فوقه؟ ببساطة أضف:

a:hover { text-decoration: underline; }

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

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

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

دعنا نشرح نموذج كود CSS.

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

يتم تعيين لون الخلفية مع لون الخلفية ولون النص مع اللون. تحدد الحشوة حجم المربع - النص مبطن بمقدار 10 بكسل رأسيًا و 25 بكسل أفقيًا.

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

لا أعرف ماذا جوجل

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

6. كود مثال CSS لإنشاء مربع نص

فقرة بسيطة ليست مثيرة للغاية. إذا كنت تريد تمييز عنصر في صفحتك ، فقد ترغب في إضافة حد. إليك كيفية القيام بذلك بسلسلة من كود CSS البسيط:

p.important { border-style: solid; border-width: 5px; border-color: purple; }

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

Your important paragraph here.

سيعمل هذا بغض النظر عن حجم الفقرة.

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

border-width: 5px 8px 3px 9px;

ينتج عن ذلك حد علوي من خمسة بكسل ، وحد أيمن ثمانية ، وقاع ثلاثة ، وحد أيسر بحجم تسعة بكسلات.

7. توسيط العناصر بمحاذاة كود CSS الأساسي

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

بالنسبة لعنصر كتلة (عادة صورة) ، استخدم سمة الهامش:

.center { display: block; margin: auto; }

يضمن ذلك عرض العنصر ككتلة وأن الهامش على كل جانب يتم ضبطه تلقائيًا. إذا كنت تريد توسيط جميع الصور في صفحة معينة ، فيمكنك حتى إضافة 'margin: auto' إلى علامة img:

img { margin: auto; }

لمعرفة سبب عملها بهذه الطريقة ، تحقق من شرح نموذج مربع CSS في W3C .

ولكن ماذا لو كنت تريد توسيط النص باستخدام CSS؟ استخدم نموذج CSS هذا:

.centertext { text-align: center; }

هل تريد استخدام فئة 'centertext' لتوسيط النص في فقرة؟ ما عليك سوى إضافة هذا الفصل إلى

بطاقة شعار:

This text will be centered.

8. أمثلة CSS لضبط الحشو

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

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

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

ومع ذلك ، هناك تعليمات CSS أقصر تقدم كل هذه المعلومات في سطر واحد:

img { padding: 40px 25px 40px 25px; }

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

img { padding: 40px 25px }

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

9. قم بتمييز صفوف الجدول باستخدام ترميز CSS

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

tr:hover { background-color: #ddd; }

الآن كلما مررت بالماوس فوق خلية جدول ، سيتغير لون هذا الصف. لرؤية بعض الأشياء الرائعة الأخرى التي يمكنك القيام بها ، تحقق من صفحة W3C على جداول CSS الفاخرة .

10. مثال CSS لتحويل الصور بين شفافة وغير شفافة

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

img { opacity: 0.5; filter: alpha(opacity=50); }

تقوم سمة 'filter' بنفس الشيء مثل 'opacity' ، لكن Internet Explorer 8 وما قبله لا يتعرف على قياس العتامة. بالنسبة للمتصفحات القديمة ، من الجيد تضمينها.

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

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

10 أمثلة CSS مع شفرة المصدر

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

تم تلخيص هذه الأمثلة العشرة لرموز CSS السهلة:

  1. تنسيق سهل للفقرة
  2. تغيير حالة الأحرف
  3. تغيير ألوان الارتباط
  4. إزالة تسطير الارتباط
  5. قم بعمل زر ارتباط
  6. قم بإنشاء مربع نص
  7. عناصر محاذاة للوسط
  8. ضبط المساحة المتروكة
  9. قم بتمييز صفوف الجدول
  10. اجعل الصور معتمة

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

يشارك يشارك سقسقة بريد الالكتروني ورقة الغش الخاصة بخصائص CSS3 الأساسية

إتقان بناء جملة CSS الأساسي من خلال ورقة الغش الخاصة بخصائص CSS3.

اقرأ التالي مواضيع ذات صلة
  • برمجة
  • تصميم المواقع
  • CSS
  • البرمجة النصية
نبذة عن الكاتب كريستيان كاولي(تم نشر 1510 مقالة)

نائب محرر الأمان ، Linux ، DIY ، البرمجة ، و Tech Explained ، ومنتج Podcast مفيد حقًا ، مع خبرة واسعة في دعم سطح المكتب والبرامج. مساهم في مجلة Linux Format ، كريستيان هو من هواة Raspberry Pi tinkerer و Lego عاشق ومحب للألعاب القديمة.

المزيد من Christian Cawley

اشترك في نشرتنا الإخبارية

انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!

انقر هنا للاشتراك