CSS తో వెబ్సైట్ ఫాంట్ రంగులు మార్చండి ఎలా

మంచి టైపోగ్రఫిక్ డిజైన్ ఒక విజయవంతమైన వెబ్సైట్ యొక్క ఒక ముఖ్యమైన భాగం. CSS మీరు నిర్మించే వెబ్ పేజీలలో వెబ్ పుటలో టెక్స్ట్ యొక్క రూపాన్ని గొప్ప నియంత్రణ ఇస్తుంది. ఇది మీరు ఉపయోగించే ఏ ఫాంట్ల రంగును మార్చగల సామర్థ్యాన్ని కలిగి ఉంటుంది.

బాహ్య శైలి షీట్ , అంతర్గత శైలి షీట్ ఉపయోగించి ఫాంట్ రంగులు మార్చవచ్చు లేదా ఇది HTML పత్రంలో ఇన్లైన్ స్టైలింగ్ను ఉపయోగించుకోవచ్చు. ఉత్తమ పద్ధతులు మీరు మీ CSS శైలుల కోసం బాహ్య శైలి షీట్ను ఉపయోగించాలని నిర్దేశిస్తాయి. మీ డాక్యుమెంట్ యొక్క "తల" లో వ్రాసిన శైలులు కలిగిన అంతర్గత శైలి షీట్ సాధారణంగా చిన్న, ఒక-పేజీ సైట్లకు మాత్రమే ఉపయోగిస్తారు. మేము అనేక సంవత్సరాల క్రితం వ్యవహరించే పాత "ఫాంట్" ట్యాగ్లకు అనుబంధం ఉన్నందున ఇన్లైన్ శైలులను వాడకూడదు. మీరు ఇన్లైన్ శైలి ప్రతి ఉదాహరణకు వాటిని మార్చడానికి అవసరం నుండి ఆ ఇన్లైన్ శైలులు చాలా కష్టం ఫాంట్ శైలిని నిర్వహించడానికి.

ఈ ఆర్టికల్లో, బాహ్య శైలి షీట్ మరియు పేరా ట్యాగ్లో ఉపయోగించే శైలిని ఉపయోగించి ఫాంట్ రంగును ఎలా మార్చాలో మీరు నేర్చుకుంటారు. మీరు ట్యాగ్తో సహా టెక్స్ట్ చుట్టూ ఉన్న ట్యాగ్లో ఫాంట్ రంగుని మార్చడానికి అదే శైలి లక్షణాన్ని వర్తింపజేయవచ్చు.

ఫాంట్ రంగు మార్చడానికి స్టైల్స్ కలుపుతోంది

ఈ ఉదాహరణ కోసం, మీరు మీ పేజీ మార్కప్ మరియు ఆ పత్రానికి జోడించబడిన ఒక ప్రత్యేక CSS ఫైల్ కోసం ఒక HTML పత్రాన్ని కలిగి ఉండాలి. HTML పత్రం దానిలో ఎలిమెంట్ల సంఖ్యను ఎక్కువగా చేస్తుంది. మనము ఈ ఆర్టికల్ యొక్క ఉద్దేశ్యం కొరకు పేరా మూలకం.

ఇక్కడ మీ బాహ్య శైలి షీట్ ఉపయోగించి పేరా ట్యాగ్ల లోపల టెక్స్ట్ యొక్క ఫాంట్ రంగును మార్చడం ఎలా.

రంగు విలువలు రంగు కీలక పదాలు, RGB రంగు సంఖ్యలు, లేదా హెక్సాడెసిమల్ రంగు సంఖ్యలుగా చెప్పవచ్చు.

1. పేరా ట్యాగ్ కోసం శైలి లక్షణాన్ని జోడించండి:
   1. p {}
2. శైలిలో రంగు ఆస్తి ఉంచండి. ఆ ఆస్తి తర్వాత ఒక కోలన్ ఉంచండి:
   1. p {color:}
3. అప్పుడు ఆస్తి తర్వాత మీ రంగు విలువను జోడించండి. సెమీ కోలన్తో ఆ విలువను ముగించాలని నిర్ధారించుకోండి:
   1. p {color: black;}

మీ పేజీలోని పేరాలు ఇప్పుడు నలుపుగా ఉంటాయి.

"నలుపు" - ఈ ఉదాహరణ ఒక రంగు కీవర్డ్ ఉపయోగిస్తుంది. CSS లో రంగును జోడించడానికి ఇది ఒక మార్గం, కానీ చాలా పరిమితి ఉంది. "నలుపు" మరియు "తెలుపు" లకు కీలక పదాలను ఉపయోగించడం వలన ఆ రెండు రంగులు చాలా నిర్దిష్టంగా ఉంటాయి, కానీ మీరు "ఎరుపు", "నీలం", లేదా "ఆకుపచ్చ" వంటి కీలక పదాలను ఉపయోగిస్తే ఏమి జరుగుతుంది? ఎరుపు, నీలం లేదా ఆకుపచ్చ నీడలు సరిగ్గా మీరు పొందుతారా? కీలక పదాలతో మీకు కావలసిన రంగు నీడను సరిగ్గా పేర్కొనలేరు. ఈ కారణంగా రంగు వర్ణ పదాల స్థానంలో హెక్సాడెసిమల్ విలువలు తరచుగా ఉపయోగించబడతాయి.

p {color: # 000000; }

# 000000 యొక్క hex కోడ్ నల్లగా అనువదించబడినందున ఈ CSS శైలి కూడా మీ పేరాగ్రాఫ్ల యొక్క రంగును బ్లాక్ చేస్తుంది. మీరు హెక్స్ విలువతో షార్ట్హ్యాండ్ ను కూడా ఉపయోగించుకోవచ్చు మరియు అది కేవలం # 000 గా వ్రాయవచ్చు మరియు మీరు అదే విషయం పొందుతారు.

మేము ఇప్పటికే చెప్పినట్లుగా, మీరు కేవలం నలుపు లేదా తెలుపు రంగు కానవసరం లేనప్పుడు హెక్స్ విలువలు బాగా పనిచేస్తాయి. ఇక్కడ ఒక ఉదాహరణ:

p {color: # 2f5687; }

ఈ హెక్స్ విలువ నీలం రంగుకు పేరాలను సెట్ చేస్తుంది, కానీ కీవర్డ్ "నీలం" వలె కాకుండా, ఈ హెక్స్ కోడ్ నీలం యొక్క ప్రత్యేకమైన నీడను సెట్ చేసే సామర్ధ్యాన్ని ఇస్తుంది - డిజైనర్ వారు ఇంటర్ఫేస్ను సృష్టిస్తున్నప్పుడు ఈ వెబ్సైట్. ఈ సందర్భంలో, రంగు మధ్యస్థాయి, స్లేట్-వంటి నీలం అవుతుంది.

చివరగా, మీరు ఫాంట్ రంగులు కోసం RGBA రంగు విలువలను ఉపయోగించవచ్చు. RGCA ఇప్పుడు అన్ని ఆధునిక బ్రౌజర్లలో మద్దతు ఉంది, కాబట్టి మీరు ఈ విలువలను వెబ్ బ్రౌజర్లో మద్దతు ఇవ్వలేరు కనుక ఆందోళన చెందుతారు, కానీ మీరు సులభంగా తిరిగి పొందవచ్చు.

p {color: rgba (47,86,135,1); }

ఈ RGBA విలువ ముందు పేర్కొన్న స్లేట్ నీలం రంగు వలె ఉంటుంది. మొదటి 3 విలువలు రెడ్, గ్రీన్ మరియు బ్లూ విలువలను సెట్ చేస్తాయి మరియు చివరి సంఖ్య ఆల్ఫా సెట్టింగ్. ఇది "1" కు సెట్ చేయబడింది, అంటే "100%", దీని అర్థం ఈ రంగు పారదర్శకత కలిగి ఉంటుంది. మీరు .85 వంటి ఒక దశాంశ సంఖ్యకు సెట్ చేస్తే, అది 85% అస్పష్టతకు అనువదించబడుతుంది మరియు రంగు కొద్దిగా పారదర్శకంగా ఉంటుంది.

మీరు మీ రంగు విలువలను తూటా చేయదలిస్తే, మీరు ఇలా చేస్తారు:

p {
రంగు: # 2f5687;
రంగు: rgba (47,86,135,1);
}

ఈ వాక్యనిర్మాణం మొదటి హెక్స్ కోడ్ను అమర్చుతుంది. ఇది ఆ విలువను RGBA సంఖ్యతో ఓవర్రైట్ చేస్తుంది. దీని అర్థం RGBA కి మద్దతు ఇవ్వని ఏ పాత బ్రౌజర్ మొదటి విలువను పొందుతుంది మరియు రెండో విస్మరిస్తుంది. ఆధునిక బ్రౌజర్లు CSS క్యాస్కేడ్కు రెండోదాన్ని ఉపయోగిస్తాయి.