ఈ బ్లాగ్ క్రింది కంటెంట్ ప్రాంతాలను కవర్ చేస్తుంది:
- టెయిల్విండ్ హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్స్తో టెక్స్ట్ డెకరేషన్ని ఎలా అప్లై చేయాలి?
- 'హోవర్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం.
- 'ఫోకస్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం.
- 'యాక్టివ్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం.
టెయిల్విండ్ హోవర్, ఫోకస్ మరియు యాక్టివ్ స్టేట్స్తో టెక్స్ట్ డెకరేషన్ని ఎలా అప్లై చేయాలి?
వచనాన్ని '' ద్వారా అలంకరించవచ్చు వచన-అలంకరణ ”ఆస్తి. ఈ ప్రాపర్టీని వివిధ మాడిఫైయర్ స్టేట్లతో అన్వయించవచ్చు ' హోవర్ ',' దృష్టి 'మరియు' చురుకుగా ” తదనుగుణంగా వినియోగదారు చర్యపై వచనాన్ని అలంకరించడానికి.
ఉదాహరణ 1: 'హోవర్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం
ఈ ఉదాహరణ వర్తిస్తుంది ' వచన-అలంకరణ ” ఆస్తి అంటే అది డిఫాల్ట్గా అండర్లైన్ చేయబడదు కానీ మౌస్ హోవర్పై అండర్లైన్ అవుతుంది:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'నో-అండర్లైన్ హోవర్:అండర్లైన్' > ఇది టైల్విండ్ CSS < / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ లైన్ల ప్రకారం, '' లోపల CDN పాత్ను పేర్కొనండి <తల> ” Tailwind ఫంక్షనాలిటీలను ఉపయోగించుకోవడానికి ట్యాగ్ చేయండి. ఇప్పుడు, కలిపి వర్తించు ' వచన-అలంకరణ 'ఆస్తితో పాటు' హోవర్ ” ఎలిమెంట్ను హోవర్ చేసిన తర్వాత, అది అండర్లైన్ అవుతుంది.
అవుట్పుట్
చూసినట్లుగా, ' ” మూలకం విజయవంతంగా మౌస్ హోవర్పై అండర్లైన్ చేయబడింది.
ఉదాహరణ 2: 'ఫోకస్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం
కింది కోడ్ బ్లాక్ “ని చేర్చడం ద్వారా వచనాన్ని అలంకరిస్తుంది. దృష్టి ” రాష్ట్రం. ఇది '' ద్వారా ఫోకస్ చేయబడిన మూలకంపై వచనాన్ని (డిఫాల్ట్గా అండర్లైన్ చేయబడలేదు) అండర్లైన్ చేస్తుంది. ట్యాబ్ ”కీ:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'నో-అండర్లైన్ ఫోకస్:అండర్లైన్' >ఇది టైల్విండ్ CSS< / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ ప్రకారం:
- అదేవిధంగా, CDN పాత్ను చేర్చండి మరియు “ని చేర్చండి ' మూలకం.
- ఆ తరువాత, 'ని ఉపయోగించండి వచన-అలంకరణ ” వచనాన్ని డిఫాల్ట్గా అండర్లైన్ చేయని విధంగా చేసే లక్షణం.
- అనుబంధిత ' దృష్టి ” స్థితి ఆ తర్వాత ఫోకస్ అయ్యే మూలకంపై వచనాన్ని అండర్లైన్ చేస్తుంది.
అవుట్పుట్
ఈ ఫలితం మూలకంలో ఉన్న వచనం “ని నొక్కినప్పుడు అండర్లైన్లో ఉందని సూచిస్తుంది. ట్యాబ్ ”కీ అంటే, మూలకాన్ని ఫోకస్ చేయడం.
ఉదాహరణ 3: 'యాక్టివ్' స్టేట్తో టెక్స్ట్ డెకరేషన్ని వర్తింపజేయడం
ఈ ఉదాహరణలో, వచనాన్ని అలంకరించవచ్చు ' లైన్-త్రూ మూలకం సక్రియంగా ఉన్నప్పుడు దానిపై ఆస్తి వర్తించబడుతుంది:
< html >
< తల >
< మెటా అక్షర సమితి = 'utf-8' >
< మెటా పేరు = 'వ్యూపోర్ట్' విషయము = 'వెడల్పు=పరికర వెడల్పు, ప్రారంభ-స్థాయి=1' >
< స్క్రిప్ట్ src = 'https://cdn.tailwindcss.com' >< / స్క్రిప్ట్ >< / తల >
< శరీరం >
< వచన ప్రాంతం తరగతి = 'అండర్లైన్ యాక్టివ్: లైన్-త్రూ' >ఇది టైల్విండ్ CSS< / వచన ప్రాంతం >
< / శరీరం >
< / html >
ఈ కోడ్ స్నిప్పెట్లో, దిగువ అందించిన దశలను వర్తింపజేయండి:
- CDN పాత్ను చేర్చడానికి చర్చించిన పద్దతులను గుర్తుకు తెచ్చుకోండి మరియు “ ' మూలకం.
- ఇప్పుడు, వచన అలంకరణను వర్తింపజేయి ' లేదు-అండర్లైన్ 'డిఫాల్ట్గా ఆస్తి మరియు కేటాయించండి' చురుకుగా 'రాష్ట్రంతో' లైన్-త్రూ ”.
- దీని ఫలితంగా మూలకం యాక్టివ్గా ఉండటంపై ఉన్న టెక్స్ట్ ద్వారా లైన్లు వస్తాయి.
అవుట్పుట్
ఈ అవుట్పుట్ నుండి, వచనం తగిన విధంగా అనువర్తిత స్థితికి అనుగుణంగా అలంకరించబడిందని ధృవీకరించవచ్చు.
ముగింపు
వచనాన్ని '' ద్వారా అలంకరించవచ్చు వచన-అలంకరణ ”ఆస్తి. ఈ ఆస్తిని దీనితో వర్తింపజేయవచ్చు హోవర్ ',' దృష్టి 'మరియు' చురుకుగా ”మాడిఫైయర్ మౌస్ హోవర్పై వచనాన్ని అలంకరించాలని, మూలకం ఫోకస్ చేయబడిందని లేదా ఎలిమెంట్ యాక్టివ్గా ఉందని పేర్కొంటుంది.