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

قبل قراءة هذا المقال، إن كنت جاهلاً بمعنى الـclass والـid فسيساعدك [هذا الدرس]، افهمه بسرعة ثم عد لنكمل معاً.

تنسيق النص حسب الخواص (attributes)

لنفرض أن لديك هذا الكود:

<p title="creative">
المبدع العربي<br />
من المشروع - مجتمع مطوري المواقع
</p>

<p title="mobde3">
المشروع<br />
سعياً نحو التطور
</p>

<p id="almashroo">
مجتمع مطوري المواقع<br />
تطوير المواقع
</p>

وتريد أن تطبّق أمر الـcss أدناه على جميع الفقرات التي تحتوي على الخاصية title في العنصر (مثل الفقرة الأولى والفقرة الثانية):

p {
        color: Green;
    }

يمكنك فعل ذلك بهذا الأمر

p[title] {
        color: Green;
    }

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

تنسيق النص حسب القيم (values)

لنفرض الآن أن لدينا الكثير من الفقرات التي تحمل الخاصية title ، ونريد تحديد الفقرات التي تحمل الخاصية title التي تحتوي على القيمة almashroo مثلاً (الفقرة الثانية في المثال السابق).
يمكننا فعل ذلك بهذا الأمر:

p[title="almashroo"] {
        color: Green;
    }

هكذا، فإن أي فقرة تحمل الخاصية title بالقيمة almashroo ستصبح ذات لون أخضر.

تفاصيل أكثر

1- إذا كنت تريد تحديد الفقرة التي تحتوي على title يحتوي على كلمة almashroo، أي قد يكون الـtitle يحتوي على كلمة almashroo لوحدها أو كلمات أخرى معه، قم بإضافة إشارة ~ قبل إشارة المساواة هكذا:

p[title~="almashroo"] {
        color: Green;
    }

فهكذا إذا كان هناك وسم بهذه الطريقة:

<p title="almashroo development">
المشروع<br />
سعياً نحو التطور
</p>

سيتم تلوينه بالأخضر أيضاً لأن الـtitle يحتوي على كلمة almashroo

2- إذا كنت تريد تحديد الفقرة التي تحتوي على title يحتوي على كلمة almashroo مرتبطة بكلمة أخرى بإشارة (-) يمكنك ذلك بوضع | قبل علامة المساواة هكذا:

p[title|="almashroo"] {
        color: Green;
    }

فهكذا إذا كان هناك وسم بهذه الطريقة:

<p title="almashroo-development">
المشروع<br />
سعياً نحو التطور
</p>

سيتم تلوينه بالأخضر أيضاً لأن الـtitle يحتوي على كلمة almashroo مرتبطة بكلمة أخرى.

كيف نستفيد من النقطة الأخيرة؟

هذا يفيد في خاصية اللغة مثلاً Lang ، فهناك صفحات يكون الـlang الخاص بها يساوي قيم مثل ar-sa أو ar-ae، فيمكننا تحديد ar- ليلوّن كل الوسوم التي تملك هذا الـlang . أو استفد منه كما ترى

ملاحظة: النقاط الأخيرة لا تعمل في العادة على الإصدار السادس من متصفح الاكسبلورر!

تلوين السطر الأول

إذا أردت تلوين السطر الأول في فقرة ما، يمكنك استخدام الأمر التالي:

p:first-line {
        color: Green;
    }

قم بإضافته على صفحة تحتوي على هذه الفقرة مثلاً:

<p title="mobde3">
المشروع - مجتمع مطوري المواقع<br />
سعياً نحو التطور
</p>

وسترى أن السطر الأول الذي هو "المشروع - مجتمع مطوري المواقع" سيصبح باللون الأخضر.

تلوين الحرف الأول

إذا أردت تلوين الحرف الأول في فقرة ما (تراه عادة في القصص، حيث يتم تلوين أول حرف أو تكبير حجمه في العديد من الصفحات وفي بداية كل قصة)، يمكنك استخدام الأمر التالي:

p:first-letter {
        color: Green;
    }

قم بإضافته على صفحة تحتوي على هذه الفقرة مثلاً:

<p title="mobde3">
مشروع - مجتمع مطوري المواقع<br />
سعياً نحو التطور
</p>

وسترى أن الحرف الأول وهو حرف الميم سيصبح باللون الأخضر.

فكر بكل هذا.. وكيف يمكنك تطبيقه والاستفادة منه
هذا كل شيء لهذه المرة..
ونلقاكم في مرة قادمة