నమూనా శైలి షీట్తో క్యాస్కేడింగ్ స్టైల్ షీట్స్ యొక్క అవలోకనం
మీరు స్క్రాచ్ నుండి ఒక వెబ్ సైట్ ను నిర్మించినప్పుడు, నిర్వచించిన ప్రాథమిక శైలులతో ప్రారంభం కావడం మంచిది. ఇది ఒక క్లీన్ కాన్వాస్ మరియు తాజా బ్రష్లు మొదలైంది. వెబ్ డిజైనర్లు ఎదుర్కొనే మొట్టమొదటి సమస్యల్లో ఒకటి వెబ్ బ్రౌజర్లు అన్ని వేర్వేరుగా ఉంటాయి. డిఫాల్ట్ ఫాంట్ సైజు ప్లాట్ఫారమ్ నుండి ప్లాట్ఫాంకు భిన్నంగా ఉంటుంది, డిఫాల్ట్ ఫాంట్ కుటుంబం భిన్నంగా ఉంటుంది, కొన్ని బ్రౌజర్లు అంచులు మరియు పాడింగ్లను శరీర ట్యాగ్పై వివరిస్తాయి, అయితే ఇతరులు అలా కాదు. మీ వెబ్ పేజీల కోసం డిఫాల్ట్ శైలులను నిర్వచించడం ద్వారా ఈ అసమానతలు చుట్టూ పొందండి.
CSS మరియు అక్షర సెట్
మొదటి విషయాలు మొదట, మీ CSS పత్రాల యొక్క utf-8 కు సెట్ చేయబడతాయి . మీరు రూపకల్పన చేసిన చాలా పేజీలలో ఆంగ్లంలో రాయబడి ఉండగా, కొన్ని భాషా మరియు సాంస్కృతిక అంశాలకు స్థానికీకరించబడి ఉండవచ్చు. వారు ఉన్నప్పుడు, UTF-8 ఈ విధానాన్ని సులభతరం చేస్తుంది. బాహ్య శైలి షీట్లో సెట్ చేసిన పాత్రను సెట్ చేయడం అనేది HTTP హెడర్లో ప్రాధాన్యత ఇవ్వదు , కానీ అన్ని ఇతర సందర్భాలలో, అది అవుతుంది.
ఇది అక్షర సమితిని సెట్ చేయడం సులభం. CSS పత్రం యొక్క మొదటి పంక్తికి వ్రాయండి:
@charset "utf-8";ఈ విధంగా, మీరు కంటెంట్ ఆస్తిలో అంతర్జాతీయ అక్షరాలను లేదా తరగతి మరియు ID పేర్లను ఉపయోగిస్తే, శైలి షీట్ సరిగ్గా పని చేస్తుంది.
పేజీ బాడీ స్టైలింగ్
తదుపరి విషయం డిఫాల్ట్ స్టైల్ షీట్ అవసరాలు శూన్యాలు, పాడింగ్ మరియు సరిహద్దులకి శైలులు. ఇది అన్ని బ్రౌజర్లు ఒకే స్థలంలో కంటెంట్ని ఉంచేలా చేస్తుంది మరియు బ్రౌజర్ మరియు కంటెంట్ మధ్య ఏదైనా రహస్య ఖాళీలను లేవు. చాలా వెబ్ పేజీల కోసం, ఇది వచనం కోసం అంచుకు చాలా దగ్గరగా ఉంటుంది, కానీ అక్కడ ప్రారంభించడం చాలా ముఖ్యం, తద్వారా నేపథ్య చిత్రాలు మరియు లేఅవుట్ విభాగాలు సరిగ్గా వరుసలో ఉంటాయి.
html, శరీరం {margin: 0px; పాడింగ్: 0px; సరిహద్దు: 0px; }డిఫాల్ట్ ముందుభాగం లేదా ఫాంట్ రంగును నలుపుకు మరియు డిఫాల్ట్ నేపథ్య రంగులో తెల్లగా సెట్ చేయండి. ఇది చాలా వెబ్పేజ్ డిజైన్లకు ఎక్కువగా మారుతుంది, అయితే ఈ ప్రామాణిక రంగులను HTML మరియు HTML ట్యాగ్లో సెట్ చేసి పేజీ సులభంగా చదవడం మరియు పని చేయడం సులభం చేస్తుంది.
html, శరీరం {రంగు: # 000; background: # ff; }డిఫాల్ట్ ఫాంట్ స్టైల్స్
ఫాంట్ సైజు మరియు ఫాంట్ కుటుంబం రూపకల్పన చేరిన తర్వాత అనివార్యంగా మార్చబడతాయి కానీ 1 మీట యొక్క డిఫాల్ట్ ఫాంట్ పరిమాణాన్ని మరియు ఏరియల్, జెనీవా, లేదా మరికొన్ని సాన్స్ సెరిఫ్ ఫాంట్ యొక్క డిఫాల్ట్ ఫాంట్ కుటుంబంతో ప్రారంభించండి. ఎమ్ యొక్క ఉపయోగం పేజీని సాధ్యమైనంత ప్రాప్యతగా ఉంచుతుంది, మరియు ఒక సాన్స్ సెరిఫ్ ఫాంట్ తెరపై మరింత స్పష్టంగా ఉంటుంది.
html, శరీరం, p, th, td, li, dd, dt {font: 1em ఏరియల్, హెల్వెటికా, sans-serif; }మీరు టెక్స్ట్ కనుగొనే ఇతర స్థలాలు ఉండవచ్చు, కానీ p , th , td , li , dd మరియు dt అనేవి ప్రాథమిక ఫాంట్ ను నిర్వచించుటకు మంచి ప్రారంభం. కేవలం విషయంలో HTML మరియు శరీరాన్ని చేర్చండి, కానీ HTML లేదా శరీరం కోసం మీ ఫాంట్లను మాత్రమే నిర్వచించినట్లయితే అనేక బ్రౌజర్లు ఫాంట్ ఎంపికలను భర్తీ చేస్తాయి.
ముఖ్యాంశాలు
HTML శీర్షికలు మీ సైట్ సరిహద్దుకు సహాయపడటానికి ముఖ్యమైనవి మరియు శోధన ఇంజిన్లు మీ సైట్లో లోతుగా ఉండనివ్వండి. శైలులు లేకుండా, వారు అన్ని చాలా అగ్లీ, కాబట్టి వాటిని అన్ని డిఫాల్ట్ శైలులు సెట్ మరియు ప్రతి ఫాంట్ కుటుంబం మరియు ఫాంట్ పరిమాణం నిర్వచించే.
h1, h2, h3, h4, h5, h6 {font-family: ఏరియల్, హెల్వెటికా, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; }లింక్లను మర్చిపోకండి
లింక్ రంగులు స్టైలింగ్ ఎల్లప్పుడూ డిజైన్ యొక్క ఒక క్లిష్టమైన భాగం, కానీ మీరు డిఫాల్ట్ శైలులు వాటిని నిర్వచించలేదు ఉంటే, అవకాశాలు మీరు నకిలీ తరగతులు కనీసం ఒక మర్చిపోతే చేస్తాము ఉంటాయి. మీరు నిర్వచించిన సైట్ కోసం రంగు పాలెట్ను కలిగి ఉన్న తర్వాత వాటిని నీలిరంగులో కొన్ని చిన్న వైవిధ్యాలతో నిర్వచించండి మరియు వాటిని మార్చండి.
నీలం, షేడ్స్ యొక్క షేడ్స్ లో లింకులు సెట్
- నీలం వలె లింకులు
- ముదురు నీలం వలె లింక్లను సందర్శించారు
- లేత నీలం వలె లింక్లను ఉంచండి
- చురుకైన లింక్లు కూడా నీలం రంగులో ఉంటాయి
ఈ ఉదాహరణలో చూపిన విధంగా:
a: లింక్ {color: # 00f; } a: సందర్శించిన {రంగు: # 009; } a: హోవర్ {color: # 06f; } a: చురుకుగా {color: # 0cf; } చాలా హాని కలిగించే కలర్ స్కీమ్తో ఉన్న లింకులను స్టైలింగ్ చేయడం ద్వారా నేను తరగతుల్లో ఏ ఒక్కటి మర్చిపోతానని నిర్ధారిస్తుంది మరియు అప్రమేయ నీలం, ఎరుపు మరియు ఊదా కంటే వాటిని కొద్దిగా తక్కువగా చేస్తుంది.పూర్తి శైలి షీట్
పూర్తి స్టైల్ షీట్ ఇక్కడ ఉంది:
@charset "utf-8"; html, శరీరం {margin: 0px; పాడింగ్: 0px; సరిహద్దు: 0px; రంగు: # 000; background: # ff; } html, శరీరం, p, th, td, li, dd, dt {font: 1em ఏరియల్, హెల్వెటికా, sans-serif; } h1, h2, h3, h4, h5, h6 {font-family: ఏరియల్, హెల్వెటికా, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {font-size: 0.9em; } h6 {font-size: 0.8em; } a: లింక్ {color: # 00f; } a: సందర్శించిన {రంగు: # 009; } a: హోవర్ {color: # 06f; } a: చురుకుగా {color: # 0cf; }