10 లో 01
CSS శైలి షీట్ సృష్టించండి
అదే విధంగా మేము HTML కోసం ఒక ప్రత్యేక టెక్స్ట్ ఫైల్ను సృష్టించాము, మీరు CSS కోసం ఒక టెక్స్ట్ ఫైల్ను సృష్టిస్తారు. ఈ ప్రక్రియ కోసం విజువల్స్ అవసరమైతే దయచేసి మొదటి ట్యుటోరియల్ని చూడండి. ఇక్కడ నోట్ప్యాడ్లో మీ CSS శైలి షీట్ సృష్టించడానికి దశలు:
- ఖాళీ విండోను పొందడానికి నోట్ప్యాడ్లో కొత్త> ఫైల్ను ఎంచుకోండి
- ఫైల్ను క్లిక్ చేయడం ద్వారా ఫైల్గా CSS గా సేవ్ చెయ్యి <ఇలా సేవ్ చెయ్యి ...
- మీ హార్డు డ్రైవులో my_website ఫోల్డర్కు నావిగేట్ చేయండి
- "సేవ్ రైట్ టైప్:" ను "అన్ని ఫైళ్ళు" గా మార్చండి
- పేరు మీ ఫైల్ "styles.css" (కోట్స్ వదిలివేయండి) మరియు సేవ్ క్లిక్ చేయండి
10 లో 02
మీ HTML కు CSS శైలి షీట్ లింక్
మీరు మీ వెబ్ సైట్ కోసం ఒక శైలి షీట్ పొందారు ఒకసారి, మీరు దానిని వెబ్ పేజీని అనుబంధించాలి. దీన్ని చేయటానికి మీరు లింక్ ట్యాగ్ను వాడతారు. మీ pets.htm పత్రం యొక్క
ట్యాగ్లలో ఎక్కడైనా క్రింది లింక్ ట్యాగ్ను ఉంచండి:10 లో 03
పేజీ అంచులను పరిష్కరించండి
మీరు వివిధ బ్రౌజర్ల కోసం XHTML ను వ్రాస్తున్నప్పుడు, మీరు నేర్చుకున్న ఒక విషయం ఏమిటంటే అవి అన్నింటికీ విభిన్న మార్జిన్లు మరియు నియమాలను ఎలా ప్రదర్శించాలో కనిపిస్తాయి. మీ బ్రౌజర్ చాలా బ్రౌజర్లలో అదే విధంగా కనిపిస్తుందని నిర్ధారించుకోవడానికి ఉత్తమ మార్గంగా మార్జిన్లు వంటి విషయాలు బ్రౌజర్ ఎంపికకు డిఫాల్ట్గా అనుమతించకూడదు.
నేను ఎగువ ఎడమ మూలలో నా పేజీలను ప్రారంభించాలనుకుంటున్నాను, టెక్స్ట్ చుట్టూ ఉన్న అదనపు పాడింగ్ లేదా మార్జిన్ లేదు. నేను విషయాలను ప్యాడ్ చేయబోతున్నాను, అంచులను సున్నాకి సెట్ చేసి, అదే ఖాళీ స్లేట్తో నేను ప్రారంభిస్తున్నాను. ఇది చేయటానికి, మీ styles.css పత్రానికి ఈ క్రింది వాటిని జోడించండి:
html, శరీరం {
మార్జిన్: 0px;
పాడింగ్: 0px;
సరిహద్దు: 0px;
ఎడమ: 0px;
పైన: 0px;
}
10 లో 04
పేజీలో ఫాంట్ను మార్చడం
ఫాంట్ తరచుగా మీరు వెబ్ పేజీలో మార్చాలనుకుంటున్న మొదటి విషయం. ఒక వెబ్ పుటలోని డిఫాల్ట్ ఫాంట్ అగ్లీగా ఉంటుంది మరియు వెబ్ ఫాంట్ ను మీరు అప్లై చేస్తే, మీరు ఫాంట్ను నిర్వచించకపోతే మీ పేజీ ఎలా ఉంటుందో తెలియదు.
సాధారణంగా, మీరు ఫాంట్ను పేరాల్లో లేదా కొన్నిసార్లు మొత్తం డాక్యుమెంట్లో మార్చవచ్చు. ఈ సైట్ కోసం మేము శీర్షిక మరియు పేరా స్థాయి వద్ద ఫాంట్ నిర్వచించే చేస్తాము. మీ styles.css పత్రానికి క్రింది వాటిని జోడించండి:
p, li {
font: 1em ఏరియల్, హెల్వెటికా, sans-serif;
}
h1 {
ఫాంట్: 2em ఏరియల్, హెల్వెటికా, సాన్స్-సెరిఫ్;
}
h2 {
ఫాంట్: 1.5 ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్;
}
h3 {
ఫాంట్: 1.25 ఏరియల్, హెల్వెటికా, సాన్స్-సెరిఫ్;
}
నేను పేమెంట్స్ మరియు జాబితా అంశాలకు నా మూల పరిమాణంగా 1em తో మొదలుపెట్టాను, ఆపై నా హెడ్లైన్లకు పరిమాణాన్ని సెట్ చేయడానికి ఉపయోగించారు. నేను h4 కంటే లోతైన హెడ్లైన్ ఉపయోగించాలనుకుంటున్నాను, కానీ మీరు ప్లాన్ చేస్తే అది శైలిని కావాలి.
10 లో 05
మీ లింకులు మరింత ఆసక్తికరంగా చేస్తోంది
లింకులు కోసం అప్రమేయ రంగులు వరుసగా అనుసంధానిత మరియు సందర్శించిన లింకులకు నీలం మరియు ఊదా ఉన్నాయి. ఇది ప్రమాణంగా ఉండగా, ఇది మీ పేజీల రంగు పథకానికి తగినది కాదు, కాబట్టి దాన్ని మార్చండి. మీ styles.css ఫైలులో, క్రింది వాటిని జోడించండి:
ఒక లింక్ {
ఫాంట్-కుటుంబం: ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్;
రంగు: # FF9900;
టెక్స్ట్ అలంకరణ: అండర్లైన్;
}
ఒక: సందర్శించిన {
రంగు: # FFCC66;
}
ఒక: హోవర్ {
background: #FFFFCC;
ఫాంట్-బరువు: బోల్డ్;
}
నేను మూడు లింక్ శైలులను ఏర్పాటు చేసాను, అ: డిఫాల్ట్ గా: లింక్: ఇది సందర్శించినప్పుడు సందర్శించినప్పుడు, నేను రంగును మార్చాను, మరియు ఒక: హోవర్. ఒక: హోవర్ నేను నేపథ్య రంగు పొందుటకు మరియు అది క్లిక్ ఒక లింక్ నొక్కి బోల్డ్ వెళ్ళి కలిగి.
10 లో 06
నావిగేషన్ విభాగం స్టైలింగ్
మేము HTML లో నావిగేషన్ (id = "nav") విభాగాన్ని మొదట ఉంచాము, మొదట శైలిని తెలపండి. ప్రధాన వ్యాసం దానిపై ఉన్నట్లు కాదు కాబట్టి, అది ఎంత విస్తృతంగా ఉండాలి మరియు కుడివైపున విస్తృత మార్జిన్ను ఉంచాలి. నేను దాని చుట్టూ సరిహద్దు ఉంచాను.
మీ styles.css పత్రానికి క్రింది CSS ను జోడించండి:
#nav {
వెడల్పు: 225px;
margin-right: 15px;
సరిహద్దు: మీడియం ఘన # 000000;
}
#nav li {
జాబితా శైలి: none;
}
.footer {
ఫాంట్ సైజు: .75 ఎమ్;
స్పష్టమైన: రెండు;
వెడల్పు: 100%;
టెక్స్ట్-సమలేఖనం: కేంద్రం;
}
జాబితా-శైలి లక్షణం నావిగేషన్ విభాగంలోని బులెట్లు లేదా సంఖ్యలను కలిగి ఉండదు, మరియు .footer శైలులు కాపీరైట్ విభాగం విభాగంలో చిన్నది మరియు కేంద్రీకృతమై ఉండాలి.
10 నుండి 07
ప్రధాన విభాగం స్థాన
సంపూర్ణ స్థానాలతో మీ ప్రధాన విభాగాన్ని ఉంచడం ద్వారా మీరు మీ వెబ్ పేజీలో ఉండాలని కోరుకుంటున్న చోట ఖచ్చితంగా ఉండాలని మీరు అనుకోవచ్చు. పెద్ద మానిటర్లను ఉంచుటకు నేను 800px వెడల్పును తయారుచేసాను, కానీ మీరు చిన్న మానిటర్ కలిగి ఉంటే, మీరు ఆ సన్నని చేయవలసి ఉంటుంది.
మీ styles.css పత్రంలో కింది ఉంచండి:
#main {
వెడల్పు: 800px;
పైన: 0px;
స్థానం: సంపూర్ణ;
ఎడమ: 250px;
}
10 లో 08
మీ పేరాలు స్టైలింగ్
నేను ఇప్పటికే పైన పేరా ఫాంట్ సెట్ చేసినప్పటి నుండి, నేను ప్రతి పేరా అది మంచి నిలబడి చేయడానికి కొద్దిగా అదనపు "కిక్" ఇవ్వాలని కోరుకున్నారు. నేను ఒంటరిగా చిత్రం మాత్రమే కాకుండా పేరా హైలైట్ ఆ పైన ఒక సరిహద్దు ఉంచడం ద్వారా ఈ చేసింది.
మీ styles.css పత్రంలో కింది ఉంచండి:
.టాప్ {
సరిహద్దు-టాప్: మందపాటి ఘన # FFCC00;
}
నేను ఆ విధంగా అన్ని పేరాలను నిర్వచించుటకు కాకుండా "topline" అనే తరగతిగా చేయాలని నిర్ణయించుకున్నాను. ఈ విధంగా, నేను ఒక పసుపు రేఖ లేకుండా ఒక పేరా కలిగి ఉండాలని నిర్ణయించినట్లయితే, నేను పేరా ట్యాగ్లో తరగతి = "topline" ను వదిలివేయగలను మరియు అది ఎగువ సరిహద్దుని కలిగి ఉండదు.
10 లో 09
చిత్రాలు స్టైలింగ్
చిత్రాలు సాధారణంగా వాటి చుట్టూ ఒక సరిహద్దు కలిగివుంటాయి, చిత్రం లింక్ కానప్పుడు ఇది ఎల్లప్పుడూ కనిపించదు, కానీ నేను నా CSS స్టైల్షీట్లో ఒక క్లాస్ ను కలిగి ఉండాలని కోరుకుంటున్నాను, అది సరిహద్దును స్వయంచాలకంగా ఆఫ్ చేస్తుంది. ఈ శైలి కోసం, నేను "nobder" తరగతి సృష్టించింది, మరియు పత్రం లో చాలా చిత్రాలు ఈ తరగతి భాగం.
ఈ చిత్రాల యొక్క ఇతర ప్రత్యేక భాగం పేజీలో వారి స్థానం. నేను వాటిని పారాగ్రాఫ్లో భాగమవ్వమని కోరుకున్నాను, అవి వాటిని సమలేఖనం చేయటానికి పట్టికలు ఉపయోగించకుండా. దీనిని చేయటానికి సరళమైన మార్గం float CSS ఆస్తిని ఉపయోగించడం.
మీ styles.css పత్రంలో కింది ఉంచండి:
#main img {
ఫ్లోట్: ఎడమ;
margin-right: 5px;
మార్జిన్-దిగువ: 15px;
}
.noborder {
సరిహద్దు: 0px none;
}
మీరు చూడగలరని, పేరాల్లో పక్కన ఉన్న ఆవిష్కృత టెక్స్ట్కు వ్యతిరేకంగా తాము కొట్టబడలేదని నిర్ధారించుకోవడానికి చిత్రాలపై సెట్ చేసిన మార్జిన్ లక్షణాలు కూడా ఉన్నాయి.
10 లో 10
ఇప్పుడు మీ పూర్తి పేజీ చూడండి
మీరు మీ CSS ను సేవ్ చేసిన తర్వాత మీరు మీ వెబ్ బ్రౌజర్లో పెంపుడు జంతువులను రీలోడ్ చేయవచ్చు. ఈ చిత్రం చూపినదానికి మీ పేజీ సమానంగా ఉండాలి, చిత్రాలు సమలేఖనం చేయబడి, పేజీకి సంబంధించిన లింకులు పేజీ యొక్క ఎడమ వైపు సరిగ్గా ఉంచబడుతుంది.
ఈ సైట్ కోసం మీ అన్ని అంతర్గత పేజీల కోసం ఈ అదే దశలను అనుసరించండి. మీరు మీ నావిగేషన్లో ప్రతి పేజీ కోసం ఒక పేజీని కలిగి ఉండాలని కోరుకుంటారు.