Home-theater-designers
మీరు 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;చివరిది ప్రతి వాక్యం యొక్క మొదటి అక్షరాన్ని పెద్ద అక్షరం చేస్తుంది.
3. లింక్ రంగులను మార్చడానికి సులువు CSS
శైలి మార్పులు పేరాగ్రాఫ్‌లకే పరిమితం కాదు. ఒక లింక్ కేటాయించబడే నాలుగు విభిన్న రంగులు ఉన్నాయి: దాని ప్రామాణిక రంగు, దాని సందర్శించిన రంగు, దాని హోవర్ రంగు మరియు దాని క్రియాశీల రంగు (మీరు దానిపై క్లిక్ చేస్తున్నప్పుడు ఇది ప్రదర్శించబడుతుంది). ఈ నమూనా CSS కోడ్‌ని ఉపయోగించండి:
a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }లింక్‌లతో, ప్రతి 'a' తరువాత పెద్దప్రేగు ఉంటుంది, చుక్క కాదు.
ఆ ప్రకటనలలో ప్రతి ఒక్కటి నిర్దిష్ట సందర్భంలో లింక్ యొక్క రంగును మారుస్తుంది. రంగు మార్చడానికి లింక్ యొక్క క్లాస్‌ని మార్చాల్సిన అవసరం లేదు.
4. ఈ నమూనా CSS తో లింక్ అండర్‌లైన్‌లను తీసివేయండి
అండర్‌లైన్ టెక్స్ట్ లింక్‌ని స్పష్టంగా సూచిస్తున్నప్పటికీ, కొన్నిసార్లు ఆ అండర్‌లైన్‌ని స్క్రాప్ చేయడం మంచిది. ఇది 'టెక్స్ట్-డెకరేషన్' లక్షణంతో సాధించబడింది. ఈ CSS ఉదాహరణ లింక్‌లపై అండర్‌లైన్‌లను ఎలా తొలగించాలో చూపుతుంది:
a { text-decoration: none; }లింక్ ('a') ట్యాగ్ ఉన్న ఏదైనా అండర్‌లైన్ చేయబడదు. యూజర్ దాని మీద హోవర్ చేసినప్పుడు దాన్ని అండర్‌లైన్ చేయాలనుకుంటున్నారా? కేవలం జోడించండి:
a:hover { text-decoration: underline; }లింక్‌ని క్లిక్ చేసినప్పుడు అండర్‌లైన్ కనిపించకుండా పోవడానికి మీరు ఈ టెక్స్ట్-డెకరేషన్‌ను యాక్టివ్ లింక్‌లకు కూడా జోడించవచ్చు.
5. CSS కోడ్‌తో లింక్ బటన్ చేయండి
మీ లింక్‌పై మరింత దృష్టిని ఆకర్షించాలనుకుంటున్నారా? దాని గురించి తెలుసుకోవడానికి లింక్ బటన్ గొప్ప మార్గం. దీనికి మరికొన్ని పంక్తులు అవసరం:
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 నమూనా కోడ్‌ను వివరిద్దాం.
నాలుగు లింక్ స్టేట్‌లతో సహా, యూజర్ దానిపై హోవర్ చేసినప్పుడు లేదా క్లిక్ చేసినప్పుడు బటన్ కనిపించకుండా పోతుంది. మీరు హోవర్ మరియు యాక్టివ్ లింక్‌ల కోసం విభిన్న పారామితులను కూడా సెట్ చేయవచ్చు, ఉదా., బటన్ లేదా టెక్స్ట్ రంగును మార్చడం.
నేపథ్య రంగు నేపథ్య-రంగుతో మరియు టెక్స్ట్ రంగు రంగుతో సెట్ చేయబడింది. ప్యాడింగ్ బాక్స్ పరిమాణాన్ని నిర్వచిస్తుంది --- టెక్స్ట్ నిలువుగా 10px మరియు అడ్డంగా 25px ద్వారా ప్యాడ్ చేయబడుతుంది.
టెక్స్ట్-అలైన్ టెక్స్ట్ ఒక వైపుకు బదులుగా బటన్ మధ్యలో ప్రదర్శించబడుతుందని నిర్ధారిస్తుంది. టెక్స్ట్-డెకరేషన్, చివరి ఉదాహరణలో వలె, అండర్‌లైన్‌ను తొలగిస్తుంది.
విండోస్ 10 వైఫైకి కనెక్ట్ చేయబడింది కానీ ఇంటర్నెట్ లేదు
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; }ఇది మూలకం బ్లాక్‌గా ప్రదర్శించబడుతుందని మరియు ప్రతి వైపు మార్జిన్ స్వయంచాలకంగా సెట్ చేయబడిందని నిర్ధారిస్తుంది. మీరు ఇచ్చిన పేజీలోని అన్ని చిత్రాలను మధ్యలో ఉంచాలనుకుంటే, మీరు img ట్యాగ్‌కు 'మార్జిన్: ఆటో' కూడా జోడించవచ్చు:
img { margin: auto; }ఇది ఈ విధంగా ఎందుకు పనిచేస్తుందో తెలుసుకోవడానికి, తనిఖీ చేయండి W3C వద్ద CSS బాక్స్ మోడల్ వివరణ .
మీరు CSS తో టెక్స్ట్‌ని కేంద్రీకరించాలనుకుంటే? ఈ నమూనా CSS ని ఉపయోగించండి:
.centertext { text-align: center; }పేరాగ్రాఫ్‌లోని వచనాన్ని మధ్యలో ఉంచడానికి 'సెంటర్‌టెక్స్ట్' క్లాస్‌ని ఉపయోగించాలనుకుంటున్నారా? కేవలం ఆ తరగతికి జోడించండి
ట్యాగ్:
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; }ఇప్పుడు మీరు టేబుల్ సెల్ మీద మౌస్ చేసినప్పుడు, ఆ అడ్డు వరుస రంగు మారుతుంది. మీరు చేయగలిగే మరికొన్ని మంచి పనులను చూడటానికి, తనిఖీ చేయండి ఫాన్సీ CSS పట్టికలలో W3C పేజీ .
10. పారదర్శక మరియు అపారదర్శక మధ్య ఇమేజ్‌లను మార్చడానికి ఉదాహరణ CSS
CSS కోడ్ మీకు ఇమేజ్‌లతో మంచి పనులు చేయడానికి సహాయపడుతుంది. పూర్తి అస్పష్టత కంటే తక్కువ చిత్రాలను ప్రదర్శించడానికి ఇక్కడ ఒక CSS ఉదాహరణ ఉంది, కనుక అవి కొద్దిగా 'తెల్లగా' కనిపిస్తాయి. మీరు చిత్రాలను మౌస్ చేసినప్పుడు, అవి పూర్తి అస్పష్టతకు తీసుకురాబడతాయి:
img { opacity: 0.5; filter: alpha(opacity=50); }'ఫిల్టర్' లక్షణం 'అస్పష్టత' వలెనే చేస్తుంది, కానీ ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 8 మరియు అంతకుముందు అస్పష్టత కొలతను గుర్తించలేదు. పాత బ్రౌజర్‌ల కోసం, దీన్ని చేర్చడం మంచిది.
ఇప్పుడు చిత్రాలు కొద్దిగా పారదర్శకంగా ఉంటాయి, మీరు వాటిని మౌస్‌ఓవర్‌లో పూర్తిగా అపారదర్శకంగా చేయవచ్చు:
img:hover { opacity: 1.0; filter: alpha(opacity=100); }సోర్స్ కోడ్‌తో 10 CSS ఉదాహరణలు
ఈ CSS కోడ్ ఉదాహరణలతో, CSS ఎలా పనిచేస్తుందనే దాని గురించి మీకు మరింత మెరుగైన ఆలోచన ఉండాలి. CSS టెంప్లేట్లు సహాయపడవచ్చు, కానీ ముడి అంశాలను అర్థం చేసుకోవడం చాలా అవసరం.
ఆ 10 సులభమైన CSS కోడ్ ఉదాహరణలు తిరిగి పొందబడ్డాయి:
- సులభమైన పేరా ఫార్మాటింగ్
- లేఖ కేసు మార్చండి
- లింక్ రంగులను మార్చండి
- లింక్ అండర్‌లైన్‌లను తీసివేయండి
- లింక్ బటన్ చేయండి
- ఒక టెక్స్ట్ బాక్స్ సృష్టించండి
- సెంటర్-అలైన్ అంశాలు
- ప్యాడింగ్ సర్దుబాటు చేయండి
- పట్టిక వరుసలను హైలైట్ చేయండి
- చిత్రాలను అపారదర్శకంగా చేయండి
వాటిని మళ్లీ సమీక్షిస్తే, మీరు భవిష్యత్తు కోడ్‌కు వర్తించే అనేక నమూనాలను మీరు గమనించవచ్చు. మరియు మీరు నిజంగా CSS మాస్టర్‌గా మారడం ప్రారంభించారని మీకు తెలుస్తుంది. కానీ దానిని గుర్తుంచుకోవడం కష్టంగా ఉంటుంది. భవిష్యత్తు సూచన కోసం మీరు ఈ పేజీని బుక్ మార్క్ చేయాలనుకోవచ్చు.
షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ ఎసెన్షియల్ CSS3 ప్రాపర్టీస్ చీట్ షీట్మా CSS3 లక్షణాల చీట్ షీట్‌తో ముఖ్యమైన CSS వాక్యనిర్మాణం.
తదుపరి చదవండి సంబంధిత అంశాలు- ప్రోగ్రామింగ్
- వెబ్ డిజైన్
- CSS
- స్క్రిప్టింగ్
సెక్యూరిటీ, లైనక్స్, DIY, ప్రోగ్రామింగ్ మరియు టెక్ వివరించిన డిప్యూటీ ఎడిటర్, మరియు నిజంగా ఉపయోగకరమైన పాడ్‌కాస్ట్ ప్రొడ్యూసర్, డెస్క్‌టాప్ మరియు సాఫ్ట్‌వేర్ మద్దతులో విస్తృతమైన అనుభవం. లైనక్స్ ఫార్మాట్ మ్యాగజైన్‌కు సహకారి, క్రిస్టియన్ ఒక రాస్‌ప్బెర్రీ పై టింకరర్, లెగో ప్రేమికుడు మరియు రెట్రో గేమింగ్ అభిమాని.
క్రిస్టియన్ కౌలీ నుండి మరిన్నిమా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి
టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!
సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి