التحكم بتنسيق أجزاء معينة من النص في CSS
مدرج تحت قسم: دروس
هذه بعض الخصائص في 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>
وسترى أن الحرف الأول وهو حرف الميم سيصبح باللون الأخضر.
فكر بكل هذا.. وكيف يمكنك تطبيقه والاستفادة منه
وبالتوفيق..
عن الكاتب
عبدالعزيز الزرعوني (المبدع العربي سابقاً). من الإمارات. أحد مؤسسي ومساعد رئيس التحرير في المشروع. طالب في كلية علوم الحاسب بالجامعة الأميركية في الشارقة. يؤمن بأن العقول العربية بدأت التركيز على المفيد، وأنها في الطريق إلى التقدم. يمكن متابعته عبر Twitter
درس بقمه الروعه
بارك الله فيكم وموفقين والله
اخوي عبدالعزيز ,
جزآك الله الف خير ماشاء الله عليك شرح مميز .
تقبل تحيات محمد المبارك ,
مقالة جميلة، وهذه الطريقة فعلا أسهل وأكثر وضوحا من الطريقة التى نستخدمها عادة، هل هذه الطريقة متوافقه مع أغلب المتصفحات؟
ملاحظة
نسيت تغيير الـ Pseudo-element إلى first-letter في الجزء الخاص بتغيير الحرف الأول ..
شكراً على التعليقات..
عمار
عذراً فلقد أخطأت وتم التعديل..
وأما على المتصفحات، فبالتجربة أرى أنها كلها تعمل مع كل المتصفحات.. ما عدا ما يتعلق بالنقطة “تفاصيل أكثر” حسب ما أذكر..
هذه مشاكل اكسبلورر 6 التي لا تنتهي
شكراُ لك استفدت جداً من مقالك واظن ان السبب في عدم إستخدامها هو جهلنا بها.
متصفح IE6 مازال أكثر استخداماً من IE7 خصوصاً هنا في المنطقة العربية، مما يجعل استخدام مثل هذه الخصائص الرائعة مجرد تجهيز للمستقبل أكثر منه للحاضر، ولكن لا يعني ذلك عدم استخدامها، فهناك عدد لا بأس به من مستخدمي IE7 و FireFox الذين سيتمكنون من قراءة هذه الخصائص.
فقط لا تنسى أن تضع في بالك الأغلبية المستخدمة لـ IE6 وذلك بتعريف Class لذلك المتصفح فقط، ولا تنسى كذلك أن تضع هذا التعريف في Conditional Comments (تعليق شرطي) في أعلى الصفحة، للمزيد من المعلومات عن Conditional Comments راجع: http://www.quirksmode.org/css/condcom.html
والسـلام
نعم.. لكن حصيلة فFirefox ارتفعت فعلاً ووصل إلى 36% من حصيلة المتصفحات حسب ما أذكر..
وأما عن الشروط هذه فلابد منها حتى يأتي الوقت الذي نتخلص فيه من IE6..
Quirksmode.. نضطر لنهج هذا الاتجاه أحياناً والسبب اكسبلورر..
شكراً لك على المعلومات والرابط
بارك الله فيك ، موضوع رائع
بارك الله فيك أخي
درس قيم استفدنا منه كثيرا ،
متشوقين للمزيد من الدروس.
شكرا لك اخي
على الدرس الاكثر من رائع
لكن اضن ان الكلاس افضل
تحياتي
مشكور يالغالي:)
درس رائع جاري التطبيف
درس رائع ،، ولكن كان يدور في بالي موضوع معين ..~
حول الـ url ..
مثلاً انا رابط عدد من الصفحات بعضها ببعض ..~
وكل صفحة مخصصة لـ بلد معين :
صفحة السعودية ( تايتيل = موقع سعودي)
صفحة الامارات ( تايتيل = موقع اماراتي )
صفحة البحرين ( تايتيل = موقع بحريني )
صفحة قطر ( تايتيل = موقع قطري)
جميع الصفحات متشابهة ،،
لكن ” تختلف بها الدولة ”
مثال على المحتوى لصفحة السعودية :
انت الان تتصفح صفحة موقع سعودي وهو موقع يهتم بمواضيع الشارع الـ سعودي
مثال على المحتوى لصفحة الامارات :
انت الان تتصفح صفحة موقع اماراتي وهو موقع يهتم بمواضيع الشارع الـ اماراتي
..آلخ
الان انا مثلاً اريد ان تتغير الكلمة تلقائياً : في كافة الصفحات // لكل صفحة تتحول لـ تايتلها الخاص ..~
ويكون مربوط مع url خاص بها ..~
===
كيف استطيع ان اقوم بـ هذا الامر !!
حاولت كثيراً : وبحثت عن دروس لكن هذا اقرب درس ،، ووقفت عليه كثيراً لكن لم اتوصل لـ حل ..
ارجو من الاخوان الافادة
عشق..
إن كانت الصفحات html فيمكنك فعل ذلك بسهولة.. لأنك قلت أنها صفحات مختلفة..
أم الأمر مختلف؟