पाठ डालने के लिए सीएसएस का उपयोग करना

Question

मैं CSS के लिए अपेक्षाकृत नया हूं, और पाठ की शैली और स्वरूपण को बदलने के लिए इसका उपयोग किया है।

अब मैं इसका उपयोग पाठ को सम्मिलित करने के लिए करना चाहूँगा जैसा कि नीचे दिखाया गया है:

<span class="OwnerJoe">reconcile all entries</span>

मुझे उम्मीद है कि मुझे इसके रूप में दिखाने के लिए मिल सकता है:

जो की टास्क: सभी प्रविष्टियों को समेट लें

अर्थात्, केवल "स्वामी जो" वर्ग के होने के आधार पर, मैं चाहता हूं कि पाठ Joe's Task:प्रदर्शित हो।

मैं इसे कोड के साथ कर सकता हूं जैसे:

<span class="OwnerJoe">Joe's Task:</span> reconcile all entries.

लेकिन यह दोनों वर्ग और पाठ को स्पष्ट रूप से बेमानी लगता है।

क्या यह संभव है कि मैं क्या देख रहा हूँ?

EDIT एक विचार है कि इसे एक ListItem के रूप में स्थापित करने का प्रयास किया जाए <li>जहां "बुलेट" पाठ "जोज़ टास्क" है। गोलियों के लिए विभिन्न बुलेट-शैलियों और यहां तक ​​कि छवियों को कैसे सेट किया जाए, इसके उदाहरण मैं देख रहा हूं। क्या सूची-गोली के लिए पाठ के एक छोटे से ब्लॉक का उपयोग करना संभव है?

Comments

<li> विचार अच्छा अभ्यास नहीं है। यदि आप वास्तव में यह चाहते हैं, तो इसके बजाय एक अस्थायी भाषा में देखें।

— गैरी

CSS3 के उपयोग की तरह लगता है: पहले या: छद्म तत्वों के बाद आप वास्तव में सिर्फ CSS भूमि के लिए अतिरेक को आगे बढ़ाएंगे (क्योंकि आपको OwnerJoe, OwnerJane, आदि के लिए एक CSS विवरण जोड़ने की आवश्यकता होगी)

— मैट बेकमैन

@ मैट बेकमैन: यह मेरे साथ ठीक है। मैं अपने प्रत्येक उपयोगकर्ता के लिए आसानी से CSS ब्लॉक्स को परिभाषित कर सकता हूं। HTML में इसे बार-बार दोहराना मेरे मामले में अत्यधिक लगता है।

— abelenky

मुझे लगता है कि व्यापक दर्शकों के लिए इसका अधिक व्यावहारिक उपयोग label.required:before {content: "* ";}आवश्यक क्षेत्रों के सामने तारांकन जोड़ने के लिए होगा , शायद।

— पैट्रिक

Answer 1

यह है, लेकिन एक CSS2 सक्षम ब्राउज़र (सभी प्रमुख ब्राउज़रों, IE8 +) की आवश्यकता है।

.OwnerJoe:before {
  content: "Joe's Task:";
}

लेकिन मैं इसके लिए जावास्क्रिप्ट का उपयोग करने की सलाह दूंगा। JQuery के साथ:

$('.OwnerJoe').each(function() {
  $(this).before($('<span>').text("Joe's Task: "));
});

Comments

बृहदान्त्र के बाद एक स्थान होना चाहिए।

— सिस्टम PAUSE

प्रारंभिक परीक्षण से संकेत मिलता है कि सामग्री-संपत्ति अच्छी तरह से काम करती है। जब हर कोई कहता है कि यह नहीं किया जा सकता है तो जवाब खोजने के लिए बधाई। :)

— abelenky

पुराने IE को कवर करने के लिए, आप सशर्त रूप से code.google.com/p/ie7-js शामिल कर सकते हैं जो आपके सीएसएस को सभी ब्राउज़रों के लिए समान रहने की अनुमति देगा। यह jQuery का एक विकल्प है जो मानकों के करीब है।

— सिस्टम PAUSE

आप जावास्क्रिप्ट का उपयोग करने की सलाह क्यों देंगे?

— रिक्की

दिलचस्प: एक या दो कॉलोन के साथ काम करने लगता है, जैसे .OwnerJoe:beforeऔर.OwnerJoe::before

— श्री केनेडी

Answer 2

JQuery का उपयोग करने वाला उत्तर जो हर किसी को पसंद आता है, उसकी एक बड़ी खामी है, जो कि यह स्केलेबल नहीं है (कम से कम जैसा लिखा है)। मुझे लगता है कि मार्टिन हेंसन के पास सही विचार है, जो एचटीएमएल 5 data-*विशेषताओं का उपयोग करना है। और आप एपोस्ट्रोफ का भी सही तरीके से उपयोग कर सकते हैं:

एचटीएमएल:

<div class="task" data-task-owner="Joe">mop kitchen</div>
<div class="task" data-task-owner="Charles" data-apos="1">vacuum hallway</div>

सीएसएस:

div.task:before { content: attr(data-task-owner)"'s task - " ; }
div.task[data-apos]:before { content: attr(data-task-owner)"' task - " ; }

उत्पादन:

Joe's task - mop kitchen
Charles' task - vacuum hallway

Comments

JQuery के विपरीत सीएसएस सामग्री का उपयोग करने के लिए एक दिलचस्प दुष्प्रभाव यह है कि सामग्री विशेषता द्वारा प्रदत्त पाठ चयन योग्य नहीं है, जो वांछनीय हो सकता है या नहीं भी ....

— जेफ

यदि पाठ पृष्ठ लेआउट का हिस्सा है और सामग्री का हिस्सा नहीं है, तो शायद सीएसएस इसके लिए सही जगह है। उदाहरण के लिए यदि आप चाहते थे कि आपका पृष्ठ सभी पन्नों पर शीर्षक से "हरे रंग की दुनिया" में बैंगनी हरे रंग की पृष्ठभूमि पर हो, तो यह समझ में आता है। अपने पेज की हेडिंग को बदलने में सभी को एक सीएसएस फाइल को एडिट करना होगा। यदि आपके पास HTML में पाठ था, तो यह आपकी साइट पर हर एक पृष्ठ पर एक संपादन लेगा और शायद आपके वेबपृष्ठों में भी परिवर्तित हो।

— सामान

Answer 3

सीएसएस सामग्री विशेषता के attr () फ़ंक्शन को भी देखें। यह एक टेक्स्ट नोड के रूप में तत्व की दी गई विशेषता को आउटपुट करता है। इसका उपयोग ऐसे करें:

<div class="Owner Joe" />

div:before {
  content: attr(class);
}

या नए HTML5 कस्टम डेटा विशेषताओं के साथ भी:

<div data-employeename="Owner Joe" />

div:before {
  content: attr(data-employeename);
}

Comments

यह एक बेहतर तरीका है - मैं सामग्री को प्रदर्शित करने के लिए एक सीएसएस वर्ग बनाने के विचार से नफरत करता हूं। यह एक sql क्वेरी पर गतिशील रूप से css जनरेट कर सकता है। मैं चयनकर्ता की जगह ले लूंगा div[data-employeename]:before।

— जॉनी 5

Answer 4

बस इसे इस तरह से कोड करें:

.OwnerJoe {
  //other things here
  &:before{
    content: "Joe's Task: ";
  }
}

Comments

यह सीएसएस मान्य नहीं है, लेकिन सैस सिंटैक्स है।

— असफंद काजी