ஒரு மாஸ்டர் நடைதாளுடன் இயல்புநிலை உலாவி ஸ்டைலிங் அகற்று எப்படி

இந்த குறிப்புகள் மூலம் உண்மைகள் கிடைக்கும்

அனைத்து வலை உலாவிகளும் "இயல்புநிலை பாணியை" என அறியும். இந்த வேறு எந்த பாணி தகவல் இல்லாத நிலையில் HTML உறுப்புகள் தோற்றம் மற்றும் உணர்வை கட்டளையிடும் பாணிகள் உள்ளன. உதாரணமாக, ஒவ்வொரு உலாவியில், ஹைப்பர்லிங்க்களின் முன்னிருப்பு தோற்றம் ஒரு பிரகாசமான நீல நிறம் ஆகும். வேறுவிதமாகக் காண்பிப்பதற்காக நீங்கள் சொல்லும் வரை இந்த இணைப்புகள் எப்படி இருக்கும்.

இயல்புநிலை உலாவி பாணியை உதவியாக இருக்கும், ஆனால் பல சந்தர்ப்பங்களில் இணைய வடிவமைப்பாளர்கள் இந்த பாணிகளை அகற்ற வேண்டும், அதனால் அவர்கள் 100% கட்டுப்பாட்டில் உள்ள பாணியுடன் புதிதாக தொடங்கலாம். இது "மாஸ்டர் நடைதாள்" என்று அழைக்கப்படுகிறது.

ஒரு மாஸ்டர் நடைதாள் உங்களுடைய அனைத்து ஆவணங்களிலும் நீங்கள் அழைக்கும் முதல் நடைமுறை இருக்க வேண்டும். நீங்கள் குறுக்கு உலாவி வலை வடிவமைப்பு சிக்கல்களை ஏற்படுத்தும் இயல்புநிலை உலாவி அமைப்புகளை அழிக்க ஒரு மாஸ்டர் நடைதாளுடன் பயன்படுத்த. ஒரு மாஸ்டர் நடைதாளுடன் பாணியை நீக்கிவிட்டால், உங்கள் வடிவமைப்பு அனைத்து உலாவிகளில் இருந்தும் அதே இடத்திலிருந்து தொடங்குகிறது - ஓவியம் வரைவதற்கு ஒரு சுத்தமான கேன்வாஸ் போன்றது.

உலகளாவிய இயல்புநிலை

பக்கத்திலுள்ள விளிம்புகள், paddings மற்றும் எல்லைகளை நீக்குவதன் மூலம் உங்கள் மாஸ்டர் நடைதாள் தொடங்க வேண்டும். சில வலை உலாவிகள் ஆவணத்தின் உடலை இயல்புநிலை 1 அல்லது 2 பிக்சல்களுக்கு உலாவியின் பலகத்தின் முனைகளில் இருந்து உள்தள்ளுகின்றன. இது அவர்கள் அனைவரும் ஒரே மாதிரியாக இருப்பதை உறுதிப்படுத்துகிறது:

html, உடல் {margin: 0px; திணிப்பு: 0px; எல்லை: 0px; }

நீங்கள் எழுத்துரு நிலையான செய்ய வேண்டும். எழுத்துரு அளவு 100 சதவிகிதம் அல்லது 1 மணிநேரத்தை அமைக்க வேண்டும் என்பதால், உங்கள் பக்கம் அணுகக்கூடியதாக இருக்கும், ஆனால் அளவு இன்னும் சீராக உள்ளது. மற்றும் வரி உயரம் சேர்க்க வேண்டும்.

உடல் {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

தலைப்பு வடிவமைப்பு

தலைப்பில் அல்லது தலைப்பு குறிச்சொற்கள் (H1, H2, H3, முதலியன) பொதுவாக தடிமனான உரையை இயல்புநிலைக்கு அல்லது பெரிய திசையுடன் கொண்டிருக்கும். எடை, விளிம்புகள் மற்றும் திணிப்பு ஆகியவற்றை நீக்குவதன் மூலம், இந்த குறிச்சொற்கள் இன்னும் கூடுதலான பாணிகளைக் கொண்டிருக்காமல், அவற்றைச் சுற்றியுள்ள உரையை விட பெரியதாகவோ அல்லது சிறியதாகவோ இருக்கும்.

h1, h2, h3, h4, h5, h6 {margin: 0; திணிப்பு: 0; எழுத்துரு-எடை: சாதாரண; எழுத்துரு-குடும்பம்: ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; }

குறிப்பிட்ட தலைப்புகளை, கடிதம் இடைவெளி மற்றும் paddings ஐ உங்கள் தலைப்பு குறிச்சொற்களை அமைப்பதை நீங்கள் கருத்தில் கொள்ள வேண்டும், ஆனால் உண்மையில் நீங்கள் வடிவமைத்த தளத்தின் பாணியைப் பொறுத்து, மாஸ்டர் பாணியில் இருந்து வெளியேற வேண்டும். உங்கள் குறிப்பிட்ட வடிவமைப்புக்கு தேவையான இந்த தலைப்பகுதிகளுக்கு நீங்கள் இன்னும் பாணியை சேர்க்கலாம்.

எளிய உரை வடிவமைத்தல்

தலைப்புகளுக்கு அப்பால், வேறு உரைக் குறிச்சொற்கள் உள்ளன, அவை நீக்கப்பட்டிருக்க வேண்டும். மக்கள் பெரும்பாலும் மறந்துவிடுகிற ஒரு அட்டவணை அட்டவணையின் குறிச்சொற்களை (TH மற்றும் TD) மற்றும் வடிவம் குறிச்சொற்கள் (SELECT, TEXTAREA மற்றும் INPUT) ஆகும். உங்கள் உடல் மற்றும் பத்தி உரையானது அதே அளவிற்கு அமைக்கவில்லை எனில், உலாவிகள் எவ்வாறு வழங்கப்படுகின்றன என்பதில் நீங்கள் ஆச்சரியப்படுவீர்கள்.

p, th, td, li, dd, dt, ul, ol, blockquote, q, சுருக்க, abbr, a, உள்ளீடு, தேர்ந்தெடு, textarea {margin: 0; திணிப்பு: 0; எழுத்துரு: சாதாரண சாதாரண சாதாரண 1em / 1.25 ஏரியல், ஹெல்வெடிகா, sans-serif; }

உங்கள் மேற்கோள்களை (பிளாக்வாட் மற்றும் கே), சுருக்கெழுத்துகள், மற்றும் சுருக்கமான சிறிய பாணியை சுருக்கவும், அவை இன்னும் கொஞ்சம் வெளியே நிற்கும்:

blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } சுருக்க, abbr {cursor: உதவி; எல்லை-கீழ்: 1px குறிக்கப்பட்டது; }

இணைப்புகள் மற்றும் படங்கள்

இணைப்புகள் நிர்வகிக்க மற்றும் மேற்கூறிய பிரகாசமான நீல அடிக்கல் உரை இருந்து மாற்ற எளிதானது. நான் எப்போதும் என் இணைப்புகள் அடிக்கோடிட்டு வேண்டும் விரும்புகிறேன், ஆனால் நீங்கள் வேறு வழி விரும்பினால் நீங்கள் தனித்தனியாக இந்த விருப்பங்களை அமைக்க முடியும். வடிவமைப்பு அடிப்படையிலானது, ஏனெனில் மாஸ்டர் நடை தாள் நிறத்தில் நான் சேர்க்க மாட்டேன்.

a, link: a: விஜயம், a: செயலில், a: hover {text-decoration: underline; }

படங்களை கொண்டு, எல்லைகளை அணைக்க முக்கியம். பெரும்பாலான உலாவிகள் வெற்று படத்தை சுற்றி ஒரு எல்லை காட்டாத நிலையில், படம் இணைக்கப்படும் போது, ​​உலாவிகளில் எல்லைக்குத் திரும்பும். இதை சரிசெய்ய:

img {border: none; }

அட்டவணைகள்

அட்டவணையானது தள நோக்கங்களுக்காக இனி பயன்படுத்தப்படாமல் இருக்கும்போது, ​​உண்மையான தளவாட தரவுக்காக அவற்றை நீங்கள் இன்னும் பயன்படுத்தலாம். இது HTML அட்டவணைகளை நன்றாக பயன்படுத்துகிறது. முன்னிருப்பு உரை அளவு என்பது உங்கள் அட்டவணை கலங்களுக்கு ஒரே மாதிரியாக இருப்பதை உறுதிசெய்துள்ளோம், ஆனால் நீங்கள் அமைக்க வேண்டிய வேறு சில பாணிகள் உள்ளன, எனவே உங்கள் அட்டவணைகள் ஒரே மாதிரியாக இருக்க வேண்டும்:

அட்டவணை {margin: 0; திணிப்பு: 0; எல்லை: எதுவும் இல்லை; }

படிவங்கள்

மற்ற உறுப்புகளைப் போலவே, நீங்கள் உங்கள் வடிவங்களை சுற்றி விளிம்புகள் மற்றும் 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-style: italic; }. அஞ்சல் {உரை அலங்காரம்: அடிக்கோடிடு; }. அடையாளம் {margin-left: 0; திணிப்பு-இடது: 0; }. nomargin {margin: 0; }. நெப்போடிங் {திணிப்பு: 0; } .நண்பூட்டில் {list-style: none; பட்டியல் பாணி-படம்: எதுவும் இல்லை; }

இந்த வகுப்புகள் ஏதேனும் வேறு பாணிகளுக்கு முன்பாக எழுதப்பட்டிருக்கின்றன, மேலும் அவை வகுப்புகள்தான் என்பதால் நினைவில் வைத்துக் கொள்ளுங்கள், அவை பின்னர் குறிப்பிட்ட அடுக்கு பாணி பண்புகளுடன் புறக்கணிக்க எளிதானது. நீங்கள் ஒரு உறுப்பு மீது ஒரு பொது வர்க்கத்தை அமைத்துவிட்டால், அது நடைமுறைக்கு வரவில்லை என்றால், அதே பாணியை பாதிக்கும் உங்கள் அடுத்த ஸ்டைல்ஷைகளில் வேறு வேறு பாணியில் இல்லை என்பதை உறுதிப்படுத்திக்கொள்ள வேண்டும்.

முழு மாஸ்டர் நடைதாள்

/ * குளோபல் தவறுகள் * / html, உடல் {margin: 0px; திணிப்பு: 0px; எல்லை: 0px; } உடல் {font: 1em / 1.25 ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; } / * தலைப்பு * * / h1, h2, h3, h4, h5, h6 {margin: 0; திணிப்பு: 0; எழுத்துரு-எடை: சாதாரண; எழுத்துரு-குடும்பம்: ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்; } / * உரை பாங்குகள் * / ப, th, td, li, dd, dt, ul, ol, blockquote, q, சுருக்க, abbr, a, உள்ளீடு, தேர்ந்தெடு, textarea {margin: 0; திணிப்பு: 0; எழுத்துரு: சாதாரண சாதாரண சாதாரண 1em / 1.25 ஏரியல், ஹெல்வெடிகா, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } சுருக்க, abbr {cursor: உதவி; எல்லை-கீழ்: 1px குறிக்கப்பட்டது; } சிறிய {font-size: .85em; } பெரிய {font-size: 1.2em; } / * இணைப்புகள் மற்றும் படங்கள் * / a, a: link, a: விஜயம், a: செயலில், a: hover {text-decoration: underline; } img {border: none; } / * அட்டவணைகள் * / அட்டவணை {margin: 0; திணிப்பு: 0; எல்லை: எதுவும் இல்லை; } / * படிவங்கள் * / வடிவம் {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-style: italic; }. அஞ்சல் {உரை அலங்காரம்: அடிக்கோடிடு; }. அடையாளம் {margin-left: 0; திணிப்பு-இடது: 0; }. nomargin {margin: 0; }. நெப்போடிங் {திணிப்பு: 0; } .நண்பூட்டில் {list-style: none; பட்டியல் பாணி-படம்: எதுவும் இல்லை; }

ஜெனிபர் கிரைனின் அசல் கட்டுரை. 10/6/17 அன்று ஜெர்மி ஜாராரால் திருத்தப்பட்டது