ఒక వెబ్సైట్ యొక్క దృశ్య శైలి మరియు లేఅవుట్ CSS లేదా క్యాస్కేడింగ్ స్టైల్ షీట్లు నిర్దేశించబడ్డాయి. ఈ మార్కప్ నుండి ఫలితంగా పేజీలను ఎలా ప్రదర్శించాలో సూచనలతో వెబ్ బ్రౌజర్ల HTML మార్కప్ను రూపొందించే పత్రాలు ఇవి. CSS ఒక పేజీ యొక్క లేఅవుట్ నిర్వహిస్తుంది, అలాగే రంగు, నేపథ్య చిత్రాలు, టైపోగ్రఫీ మరియు మరింత.
మీరు CSS ఫైల్ను చూసినట్లయితే, ఏ మార్కప్ లేదా కోడింగ్ లాంగ్వేజ్ లాగే మీరు ఈ ఫైళ్ళకు ఒక నిర్దిష్ట సిన్టాక్స్ని కలిగి ఉంటారు. ప్రతి స్టైల్ షీట్ అనేక CSS నిబంధనలతో రూపొందించబడింది. ఈ నియమాలు, పూర్తిగా తీసినప్పుడు, సైట్ ఏ శైలులు.
ఒక CSS రూల్ యొక్క భాగాలు
సెలెక్టర్ మరియు ప్రకటన - ఒక CSS పాలన రెండు విభిన్న భాగాలు రూపొందించబడింది. సెలెక్టర్ ఒక పేజీలో శైలిలో ఏమి నిర్ణయిస్తుంది మరియు అది ఎలా శైలిలో ఉండాలో ప్రకటన ఉంటుంది. ఉదాహరణకి:
p {
రంగు: # 000;
}
ఇది CSS నియమం. సెలెక్టర్ భాగం "p", ఇది "పేరాగ్రామ్స్" కు ఒక ఎలిమెంట్ సెలెక్టర్. అందువల్ల, ఒక సైట్లోని అన్ని పేరాలను ఎంచుకుని, ఈ శైలిని అందించండి (మీ CSS డాక్యుమెంట్లో మరెక్కడైనా మరింత నిర్దిష్ట శైలులు లక్ష్యంగా ఉన్న పేరాలు ఉంటే).
"రంగు: # 000;" అనే నియమం యొక్క భాగం డిక్లరేషన్గా పిలవబడుతుంది. ఆస్తి మరియు విలువ - ప్రకటన రెండు ముక్కలు రూపొందించబడింది.
ఆస్తి ఈ ప్రకటన యొక్క "రంగు" భాగం. సెలెక్టర్ యొక్క ఏ అంశం దృశ్యమానంగా మారుతుంది అని ఇది నిర్ధారిస్తుంది.
విలువ ఎంచుకున్న CSS ఆస్తి మార్చబడుతుంది ఏమిటి. మా ఉదాహరణలో, మేము "నలుపు" కోసం CSS సంక్షిప్తలిపి అయిన # 000 యొక్క హెక్స్ విలువను ఉపయోగిస్తున్నాము.
కాబట్టి ఈ CSS నియమాన్ని ఉపయోగించి, మా పేజ్ నలుపు రంగు యొక్క ఫాంట్ రంగులో ప్రదర్శించబడే పేరాలు ఉంటాయి.
CSS ఆస్తి బేసిక్స్
మీరు CSS లక్షణాలను వ్రాస్తున్నప్పుడు, మీరు సరిగ్గా చూస్తున్నట్లుగా మీరు వాటిని తయారు చేయలేరు. సందర్భాల్లో, "రంగు" వాస్తవ CSS లక్షణం, కాబట్టి మీరు దీన్ని ఉపయోగించవచ్చు. ఈ లక్షణం మూలకం యొక్క టెక్స్ట్ రంగుని నిర్ణయిస్తుంది. మీరు CSS లక్షణాల వలె "టెక్స్ట్-రంగు" లేదా "font-color" ను ఉపయోగించినట్లయితే, అవి CSS భాష యొక్క వాస్తవ భాగాలు కావు ఎందుకంటే ఇవి విఫలమౌతాయి.
మరొక ఉదాహరణ ఆస్తి "background-image". ఈ ఆస్తి నేపథ్యంలో ఉపయోగించబడే ఒక చిత్రాన్ని సెట్ చేస్తుంది, ఇలాంటిది:
.లాగో {
నేపథ్య చిత్రం: url (/images/company-logo.png);
}
మీరు ఆస్తిగా "background-picture" లేదా "background-graphic" ను వాడాలని ప్రయత్నించినట్లయితే, వారు విఫలమౌతారు ఎందుకంటే, మరోసారి ఈ వాస్తవ CSS లక్షణాలు కాదు.
కొన్ని CSS గుణాలు
మీరు ఒక సైట్ శైలికి ఉపయోగించే అనేక CSS లక్షణాలు ఉన్నాయి. కొన్ని ఉదాహరణలు:
- సరిహద్దు (సరిహద్దు శైలి, సరిహద్దు-రంగు మరియు సరిహద్దు వెడల్పుతో సహా)
- పాడింగ్ (పాడింగ్-టాప్, పాడింగ్-కుడి, పాడింగ్-బాటమ్ మరియు పాడింగ్-లెఫ్ట్తో సహా)
- మార్జిన్లు (మార్జిన్-టాప్, మార్జిన్-కుడి, మార్జిన్-దిగువ మరియు మార్జిన్-లెఫ్ట్తో సహా)
- ఫాంట్ కుటుంబం
- ఫాంట్ పరిమాణం
- నేపథ్య రంగు
- వెడల్పు
- ఎత్తు
ఈ CSS లక్షణాలు ఉదాహరణలుగా ఉపయోగించడానికి గొప్ప వ్యక్తులు, వారు అన్ని చాలా సూటిగా మరియు మీరు CSS తెలియకపోయినా, బహుశా వారి పేర్ల ఆధారంగా వారు ఏమి చేస్తారో అంచనా వేయవచ్చు.
మీరు వారి పేర్ల ఆధారంగా పని ఎలా స్పష్టంగా కాకపోవచ్చు ఇది అలాగే మీరు ఎదుర్కునే ఇతర CSS లక్షణాలు ఉన్నాయి:
- ఫ్లోట్
- ప్రశాంతంగా
- ఫ్లో
- టెక్స్ట్ అనుకరిస్తే
- Z- ఇండెక్స్
మీరు వెబ్ డిజైన్ లో లోతుగా, మీరు ఈ లక్షణాలు మరియు మరిన్ని ఎదుర్కునే (మరియు ఉపయోగం)!
గుణాలు విలువలు కావాలి
మీరు ఒక ఆస్తిని ఉపయోగించిన ప్రతిసారి, మీరు తప్పనిసరిగా విలువను ఇవ్వాలి - మరియు కొన్ని లక్షణాలు కొన్ని విలువలను మాత్రమే ఆమోదించగలవు.
"రంగు" లక్షణం యొక్క మా మొదటి ఉదాహరణలో, మేము రంగు విలువను ఉపయోగించాలి. ఇది హెక్స్ విలువ , RGBA విలువ లేదా రంగు కీలక పదాలు కావచ్చు . ఆ విలువలు ఏవైనా పని చేస్తాయి, అయినప్పటికీ, మీరు ఈ లక్షణంతో "దిగులుగా" అనే పదాన్ని ఉపయోగించినట్లయితే అది ఏమీ చేయదు, ఎందుకంటే ఆ పదంగా వివరణాత్మకమైనది, ఇది CSS లో గుర్తించబడిన విలువ కాదు.
"Background-image" కు మా రెండవ ఉదాహరణకి మీ సైట్ ఫైళ్ళ నుండి ఒక వాస్తవ చిత్రాన్ని పొందటానికి చిత్ర మార్గాన్ని ఉపయోగించుకోవాలి. ఇది అవసరం విలువ / వాక్యనిర్మాణం.
అన్ని CSS లక్షణాలు వారు ఆశించే విలువలను కలిగి ఉంటాయి. ఉదాహరణకి:
- బోర్డర్-రంగు రంగు విలువను ఆశిస్తుంది
- బోర్డర్-సైజు పిక్సెల్స్ లేదా శాతాలు వంటి పరిమాణ విలువను అంచనా వేస్తుంది
- బోర్డర్ శైలులు ఈ ఆస్తి కోసం ఉపయోగించే రిజర్వు శైలుల్లో ఒకటి, "ఘన"
మీరు CSS లక్షణాలు జాబితా ద్వారా వెళ్ళి ఉంటే, మీరు వారు ప్రతి ఉద్దేశించిన శైలులు సృష్టించడానికి ఉపయోగించే ప్రత్యేక విలువలు ఉన్నాయి తెలుసుకుంటారు.
జెరెమీ గిరార్డ్ చే ఎడిట్ చేయబడింది