மாதிரி உடை தாள் கொண்ட அடுக்கு நடைத்தாள்கள் கொண்ட கண்ணோட்டம்
கீறல் இருந்து ஒரு வலைத்தளம் உருவாக்க போது, அது வரையறுக்கப்பட்ட அடிப்படை பாணிகளை தொடங்க புத்திசாலி. இது ஒரு சுத்தமான கேன்வாஸ் மற்றும் புதிய தூரிகைகள் தொடங்கி போல. வலை வடிவமைப்பாளர்கள் எதிர்கொள்ளும் முதல் சிக்கல்களில் ஒன்று, வலை உலாவிகள் எல்லாமே வேறுபட்டவை. இயல்புநிலை எழுத்துரு அளவு மேடையில் இருந்து மேடையில் மாறுபட்டது, இயல்புநிலை எழுத்துரு குடும்பம் வித்தியாசமானது, மற்ற உலாவிகளில் உடல் குறிச்சொல்லில் சில உலாவிகள் விளிம்புகள் மற்றும் திணிப்பு ஆகியவற்றை வரையறுக்கின்றன, மேலும் பல. உங்கள் இணைய பக்கங்களுக்கு இயல்புநிலை பாணியை வரையறுப்பதன் மூலம் இந்த சீரற்ற தன்மைகளைப் பெறுங்கள்.
CSS மற்றும் எழுத்து அமை
முதல் விஷயங்களை முதலில், உங்கள் CSS ஆவணங்களின் பாத்திரத்தை UTF-8 க்கு அமைக்கவும். நீங்கள் ஆங்கிலத்தில் எழுதப்பட்டிருக்கும் பெரும்பாலான பக்கங்கள் ஆங்கிலத்தில் எழுதப்பட்டிருக்கலாம், சிலர் மொழியியல் மற்றும் கலாசார சூழலுக்குத் தழுவி இருக்கலாம். அவர்கள் இருக்கும்போது, UTF-8 செயல்முறையை எளிதாக்குகிறது. வெளிப்புற நடை தாள் தொகுப்பில் உள்ள எழுத்தை அமைப்பது HTTP தலைப்புக்கு முன்னுரிமை பெறாது, ஆனால் மற்ற எல்லா சூழ்நிலைகளிலும், அது இருக்கும்.
இது தன்மையை அமைப்பது எளிது. CSS ஆவணத்தின் முதல் வரி எழுத:
@charset "utf-8";இந்த வழியில், நீங்கள் உள்ளடக்க சொத்து அல்லது வர்க்கம் மற்றும் ஐடி பெயர்களில் சர்வதேச எழுத்துக்கள் பயன்படுத்தினால் , நடை தாள் இன்னும் சரியாக வேலை செய்யும்.
பக்கம் உடல் பாணி
இயல்புநிலை நடை தாள் தேவை அடுத்த விஷயம், ஓரங்கள், திணிப்பு, மற்றும் எல்லைகளை பூஜ்ஜியமாக வெளியேற்றும். இது அனைத்து உலாவிகளும் ஒரே இடத்திலேயே உள்ளடக்கத்தை வைத்திருப்பதை உறுதிசெய்கிறது, மேலும் உலாவிக்கும் உள்ளடக்கத்திற்கும் இடையில் மறைக்கப்பட்ட இடைவெளிகள் எதுவும் இல்லை. பெரும்பாலான வலைத்தளங்களுக்கான, உரைக்கு விளிம்பில் இது மிகவும் நெருக்கமாக இருக்கிறது, ஆனால் பின்னணி படங்கள் மற்றும் தளவமைப்பு பிளவுகள் சரியாக ஒழுங்கமைக்கப்பட்டிருப்பதால் அங்கு தொடங்குவது முக்கியம்.
html, உடல் {margin: 0px; திணிப்பு: 0px; எல்லை: 0px; }முன்னிருப்பு பின்னணி அல்லது எழுத்துரு வண்ணத்தை கருப்பு மற்றும் இயல்புநிலை பின்னணி நிறத்தை வெள்ளைக்கு அமைக்கவும். இந்த பெரும்பாலான வலைப்பக்கத்தில் வடிவமைப்புகளை பெரும்பாலும் மாறும் போது, உடலில் மற்றும் HTML குறியீட்டில் அமைக்கப்பட்டுள்ள இந்த நிலையான நிறங்கள் முதல் பக்கம் எளிதாக படிக்க மற்றும் வேலை செய்ய உதவுகிறது.
html, உடல் {color: # 000; பின்னணி: # ff; }இயல்புநிலை எழுத்துரு பாங்குகள்
எழுத்துரு அளவு மற்றும் எழுத்துரு குடும்பம் வடிவமைப்பு வைத்திருக்கும் ஒருமுறை இயல்புநிலை எழுத்துரு அளவு 1 எம் மற்றும் Arial, ஜெனீவா, அல்லது வேறு சில சான்ஸ்-செரிஃப் எழுத்துரு ஒரு இயல்புநிலை எழுத்துரு குடும்பம் தொடங்கும் முறை தவிர்க்க முடியாமல் மாற்ற வேண்டும் என்று ஒன்று இருக்கிறது. ஈஸ் பயன்பாடு முடிந்தவரை அணுகக்கூடிய பக்கத்தை வைத்து, மற்றும் ஒரு sans-serif எழுத்துரு திரையில் மிகவும் தெளிவாக உள்ளது.
html, உடல், p, th, td, li, dd, dt {font: 1em ஏரியல், ஹெல்வெடிகா, sans-serif; }நீங்கள் உரை காணும் மற்ற இடங்களில் இருக்கலாம், ஆனால் ப , 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: விஜயம் {color: # 009; } a: மிதவை {நிறம்: # 06f; } a: செயலில் {color: # 0cf; } மிகவும் தீங்கான வண்ணத் திட்டத்துடன் இணைப்புகளைத் திணிப்பதன் மூலம், நான் வகுப்புகள் எதையும் மறக்க மாட்டேன் என்பதையும், இயல்புநிலை நீல, சிவப்பு மற்றும் ஊதா ஆகியவற்றைக் காட்டிலும் சிறிது குறைந்த உரையாடலை உருவாக்குவதையும் உறுதிப்படுத்துகிறது.முழு உடை தாள்
இங்கே முழு நடை தாள்:
@charset "utf-8"; html, உடல் {margin: 0px; திணிப்பு: 0px; எல்லை: 0px; நிறம்: # 000; பின்னணி: # 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: விஜயம் {color: # 009; } a: மிதவை {நிறம்: # 06f; } a: செயலில் {color: # 0cf; }