మాస్టర్ స్టైల్షీట్తో డిఫాల్ట్ బ్రౌజర్ స్టైలింగ్ను ఎలా తొలగించాలి

ఈ చిట్కాలతో వాస్తవాలను పొందండి

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

డిఫాల్ట్ బ్రౌజర్ శైలులు ఉపయోగపడతాయి, కానీ అనేక సందర్భాల్లో వెబ్ డిజైనర్లు ఈ శైలులను తొలగించాలనుకుంటున్నారు, తద్వారా వారు 100% నియంత్రణలో ఉండే శైలులతో తాజాగా ప్రారంభించవచ్చు. దీనిని "మాస్టర్ స్టైల్ షీట్" గా పిలుస్తారు.

మాస్టర్ స్టైల్ షీట్ మీ పత్రాల్లో మీరు మొదటి స్టైల్ షీట్గా ఉండాలి. మీరు క్రాస్ బ్రౌజర్ వెబ్ డిజైన్లో సమస్యలను కలిగి ఉండే డిఫాల్ట్ బ్రౌజర్ సెట్టింగులను క్లియర్ చేయడానికి మాస్టర్ స్టైల్షీట్ను ఉపయోగిస్తారు. చిత్రలేఖనం కోసం ఒక క్లీన్ కాన్వాస్ వంటి - మాస్టర్ స్టైల్షీట్తో శైలులను తీసివేసిన తర్వాత, మీ బ్రౌజర్ అన్ని బ్రౌజర్లలో ఒకే చోట నుండి మొదలవుతుంది.

గ్లోబల్ డిఫాల్ట్లు

పేజీలో అంచులు, paddings మరియు సరిహద్దులు అవ్ట్ zeroing ద్వారా మీ మాస్టర్ శైలి ప్రారంభం కావాలి. కొన్ని వెబ్ బ్రౌజర్లు పత్రం యొక్క శరీరం డిఫాల్ట్గా 1 లేదా 2 పిక్సెల్లకు బ్రౌజర్ పేన్ అంచుల నుండి ఇండెంట్ చేయబడతాయి. ఇవి అన్నింటినీ ఒకే విధంగా ప్రదర్శిస్తాయి:

html, శరీరం {margin: 0px; పాడింగ్: 0px; సరిహద్దు: 0px; }

మీరు కూడా ఫాంట్ స్థిరమైన చేయాలనుకుంటున్నాము. ఫాంట్ పరిమాణాన్ని 100 శాతం లేదా 1 ని సెట్ చేసారని నిర్ధారించుకోండి, అందువల్ల మీ పేజీ అందుబాటులో ఉంటుంది, కానీ పరిమాణం ఇప్పటికీ స్థిరంగా ఉంటుంది. మరియు లైన్-ఎత్తు చేర్చడం తప్పకుండా ఉండండి.

శరీరం {font: 1em / 1.25 ఏరియల్, హెల్వెటికా, సాన్స్-సెరిఫ్; }

హెడ్లైన్ ఫార్మాటింగ్

హెడ్లైన్ లేదా హెడ్డర్ ట్యాగ్లు (H1, H2, H3, మొదలైనవి) సాధారణంగా వాటికి పెద్ద మార్జిన్లు లేదా పాడింగ్లను కలిగి ఉన్న బోల్డ్ టెక్స్ట్కు డిఫాల్ట్గా ఉంటాయి. బరువు, అంచులు మరియు పాడింగ్లను తొలగించడం ద్వారా, ఈ ట్యాగ్లు ఇంకా అదనపు శైలులు లేకుండా వాటి చుట్టూ ఉన్న టెక్స్ట్ కంటే పెద్దవిగా ఉంటాయి (లేదా చిన్నవి)

h1, h 2, h 3, h4, h5, h6 {margin: 0; పాడింగ్: 0; font-weight: normal; ఫాంట్-కుటుంబం: ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్; }

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

సాదా టెక్స్ట్ ఫార్మాటింగ్

ముఖ్యాంశాలు బియాండ్, మీరు తొలగించడానికి ఖచ్చితంగా ఉండాలి ఇతర టెక్స్ట్ ట్యాగ్లు ఉన్నాయి. ప్రజలు తరచుగా మర్చిపోతే చేసే ఒక సెట్ పట్టిక సెల్ టాగ్లు (TH మరియు TD) మరియు రూపం ట్యాగ్లు (SELECT, TEXTAREA మరియు INPUT). మీరు మీ శరీరాన్ని మరియు పేరాగ్రాఫ్ టెక్స్ట్ను అదే పరిమాణంలో సెట్ చేయకపోతే, బ్రౌజర్లు ఎలా అందించారనే దానిపై మీరు ఆశ్చర్యకరంగా ఆశ్చర్యపోవచ్చు.

p, th, td, li, dd, dt, ul, ol, blockquote, q, ఎక్రోనిం, abbr, a, ఇన్పుట్, ఎంచుకోండి, టెక్స్ట్ఏరియా {margin: 0; పాడింగ్: 0; ఫాంట్: సాధారణ సాధారణ సాధారణ 1em / 1.25 ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్; }

మీ ఉల్లేఖనాలు (బ్లాక్క్లోట్ మరియు Q), అక్రోనిమ్స్ మరియు సంక్షిప్త కొద్దిగా శైలిని సంక్షిప్తంగా ఇవ్వడానికి కూడా బాగుంది, తద్వారా వారు కొంచం ఎక్కువగా నిలబడతారు:

blockquote {margin: 1.25em; padding: 1.25em} q {font-style: ఇటాలిక్; } ఎక్రోనిం, abbr {కర్సర్: సహాయం; సరిహద్దు-దిగువ: 1px గీతల; }

లింకులు మరియు చిత్రాలు

లింకులు నిర్వహించడానికి మరియు పైన పేర్కొన్న ప్రకాశవంతమైన నీలం అండర్లైన్ టెక్స్ట్ నుండి మార్చడానికి సులభం. నేను ఎల్లప్పుడూ నా లింకులను అండర్లైన్ చేయడాన్ని ఇష్టపడతాను, కానీ మీరు వేరొక మార్గానికి కావాలనుకుంటే, మీరు ఈ ఐచ్ఛికాలను ప్రత్యేకంగా సెట్ చేయవచ్చు. నమూనా మీద ఆధారపడినందున నేను మాస్టర్ స్టైల్ షీట్లో రంగులు కూడా చేర్చలేదు.

a, a: link, a: visited, a: active, a: hover {text-decoration: underline; }

చిత్రాలతో, సరిహద్దులను ఆపివేయడం చాలా ముఖ్యం. చాలా బ్రౌజర్లు సాదా చిత్రం చుట్టూ సరిహద్దు ప్రదర్శించకపోయినా, చిత్రం లింక్ అయినప్పుడు, బ్రౌజర్లు సరిహద్దుపై తిరుగుతాయి. దీన్ని పరిష్కరించడానికి:

img {border: none; }

పట్టికలు

పట్టికలు లేఅవుట్ ప్రయోజనాల కోసం ఇకపై ఉపయోగించబడకపోయినా, వాస్తవమైన టాబ్లార్ డేటా కోసం మీరు వాటిని ఉపయోగించుకోవచ్చు. ఈ HTML పట్టికలు జరిమానా ఉపయోగం. మేము మీ డిఫాల్ట్ టెక్స్ట్ పరిమాణం మీ టేబుల్ సెల్స్కు సమానంగా ఉన్నట్లు మేము ఇప్పటికే తయారు చేసాము, కానీ మీరు సెట్ చేయవలసిన కొన్ని ఇతర శైలులు ఉన్నాయి, కాబట్టి మీ పట్టికలు ఒకే విధంగా ఉంటాయి:

పట్టిక {margin: 0; పాడింగ్: 0; సరిహద్దు: none; }

పత్రాలు

ఇతర అంశాలతో మాదిరిగా, మీరు మీ రూపాలను చుట్టూ అంచులు మరియు paddings బయటకు క్లియర్ చేయాలి. నేను చేయాలనుకుంటున్న మరో విషయం " ఇన్లైన్ " గా రూపం ట్యాగ్ను మళ్లీ వ్రాయడం వలన మీరు కోడ్లో ట్యాగ్ ఉంచే అదనపు స్థలాన్ని జోడించలేరు. ఇతర వచన మూలకాల మాదిరిగా, నేను ఎంచుకున్న, టెక్స్ట్ఏరియా మరియు ఇన్పుట్ పై ఉన్న ఫాంట్ సమాచారాన్ని నేను నిర్వచించాను, అందుచే ఇది మిగిలిన నా వచనం వలె ఉంటుంది.

రూపం {margin: 0; పాడింగ్: 0; ప్రదర్శన: ఇన్లైన్; }

మీ లేబుల్స్ కోసం కర్సర్ను మార్చడం కూడా మంచిది. ఇది వారు క్లిక్ చేసినప్పుడు లేబుల్ ఏదో చేస్తానని చూడటానికి ప్రజలు సహాయపడుతుంది.

లేబుల్ {కర్సర్: పాయింటర్; }

సాధారణ తరగతులు

మాస్టర్ స్టైల్ షీట్ యొక్క ఈ భాగం కోసం, మీకు అర్హమైన తరగతులను మీరు నిర్వచించాలి. ఈ నేను చాలా తరచుగా ఉపయోగించే తరగతులు కొన్ని. ఏ ప్రత్యేక అంశానికి వారు సెట్ చేయబడలేదని గమనించండి, అందువల్ల మీకు అవసరమైన వాటిని మీరు కేటాయించవచ్చు:

క్లియర్. } .floatLeft {float: left; }. floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .text {text-align: justify; }. blockCenter {display: block; మార్జిన్-ఎడమ: ఆటో; మార్జిన్-కుడి: ఆటో; } / * వెడల్పు * గుర్తుంచుకోండి గుర్తుంచుకోండి. / ఫాంట్ {font-weight: bold; }. ముఖ్యమైన {font-style: italic; } .లైన్ {text-decoration: underline; }. గుర్తించబడని {margin-left: 0; పాడింగ్-లెఫ్ట్: 0; }. nomargin {margin: 0; }. నొప్పింగ్ {పాడింగ్: 0; }. నోబులెట్ {జాబితా శైలి: none; జాబితా-శైలి-ఇమేజ్: none; }

గుర్తుంచుకోండి ఎందుకంటే ఈ తరగతులు ఏ ఇతర శైలుల ముందు వ్రాయబడ్డాయి మరియు అవి కేవలం తరగతులుగా ఉన్నాయి, తర్వాత ఇవి ప్రత్యేకమైన శైలి లక్షణాలను భర్తీ చేయడం సులభం కాస్కేడ్లో జరుగుతాయి. మీరు ఒక మూలకం మీద ఒక సాధారణ తరగతి సెట్ మరియు అది ప్రభావితం కాదు కనుగొంటే, మీరు అదే మూలకం ప్రభావితం మీ తరువాత స్టైల్షీట్స్ ఒకటి కొన్ని ఇతర శైలి లేదు నిర్ధారించుకోండి తనిఖీ చేయాలి.

మొత్తం మాస్టర్ స్టైల్షీట్

/ * గ్లోబల్ డిఫాల్ట్ * / html, శరీరం {margin: 0px; పాడింగ్: 0px; సరిహద్దు: 0px; } శరీరం {font: 1em / 1.25 ఏరియల్, హెల్వెటికా, సాన్స్-సెరిఫ్; } / * ముఖ్యాంశాలు * / h1, h2, h3, h4, h5, h6 {margin: 0; పాడింగ్: 0; font-weight: normal; ఫాంట్-కుటుంబం: ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్; } / * టెక్స్ట్ స్టైల్స్ * / p, th, td, li, dd, dt, ul, ol, blockquote, q, ఎక్రోనిం, abbr, a, ఇన్పుట్, ఎంచుకోండి, టెక్స్ట్ఏరియా {margin: 0; పాడింగ్: 0; ఫాంట్: సాధారణ సాధారణ సాధారణ 1em / 1.25 ఏరియల్, హెల్వెటికా, సాన్స్ సెరిఫ్; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: ఇటాలిక్; } ఎక్రోనిం, abbr {కర్సర్: సహాయం; సరిహద్దు-దిగువ: 1px గీతల; } చిన్న {font-size: .85em; } పెద్ద {font-size: 1.2em; } / * లింకులు మరియు చిత్రాలు * / a, a: link, a: సందర్శించిన, a: క్రియాశీల, a: hover {text-decoration: underline; } img {border: none; } / * పట్టికలు * / పట్టిక {margin: 0; పాడింగ్: 0; సరిహద్దు: none; } / * రూపాలు * / రూపం {margin: 0; పాడింగ్: 0; ప్రదర్శన: ఇన్లైన్; } లేబుల్ {కర్సర్: పాయింటర్; } / * సాధారణ తరగతులు * /. క్లియర్ {స్పష్టమైన: రెండూ; } .floatLeft {float: left; }. floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; } .text {text-align: justify; }. blockCenter {display: block; మార్జిన్-ఎడమ: ఆటో; మార్జిన్-కుడి: ఆటో; } / * వెడల్పు * గుర్తుంచుకోండి గుర్తుంచుకోండి. / ఫాంట్ {font-weight: bold; }. ముఖ్యమైన {font-style: italic; } .లైన్ {text-decoration: underline; }. గుర్తించబడని {margin-left: 0; పాడింగ్-లెఫ్ట్: 0; }. nomargin {margin: 0; }. నొప్పింగ్ {పాడింగ్: 0; }. నోబులెట్ {జాబితా శైలి: none; జాబితా-శైలి-ఇమేజ్: none; }

జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత 10/6/17 న సవరించబడింది