10 இல் 01
CSS உடை தாளை உருவாக்கவும்
அதே வழியில் நாங்கள் HTML க்கு ஒரு தனி உரை கோப்பை உருவாக்கியுள்ளோம், நீங்கள் CSS க்கான ஒரு உரை கோப்பை உருவாக்கும். இந்த செயல்முறைக்கு உங்களுக்கு காட்சி தேவை என்றால், முதல் பயிற்சி பார்க்கவும். இங்கே Notepad இல் உங்கள் CSS நடை தாள் உருவாக்க வழிமுறைகள்:
- காலியான சாளரத்தை பெற நோட்பேட்டில் புதிய> கோப்பு தேர்வு செய்யவும்
- கோப்பை சேமி
- உங்கள் நிலைவட்டில் my_website கோப்புறைக்கு செல்லவும்
- "சேமி என வகை": "அனைத்து கோப்புகள்"
- உங்கள் கோப்பை "styles.css" (மேற்கோள்களை விட்டு விடுங்கள்) மற்றும் சேமி என்பதைக் கிளிக் செய்யவும்
10 இல் 02
உங்கள் HTML க்கு CSS உடை தாளை இணைக்கவும்
உங்களுடைய வலைத் தளத்திற்கான ஒரு நடை தாள் கிடைத்தவுடன், அதை வலைப்பக்கமாக இணைக்க வேண்டும். இதை செய்ய நீங்கள் இணைப்பு குறிச்சொல்லை பயன்படுத்தலாம். உங்களுடைய pets.htm ஆவணத்தின்
குறிச்சொற்களுக்குள் பின்வரும் இணைப்பு குறிச்சொல்லை வைக்கவும்:10 இல் 03
பக்க விளிம்புகளை சரிசெய்யவும்
நீங்கள் வெவ்வேறு உலாவிகளுக்கு XHTML எழுதுகிறீர்கள் போது, நீங்கள் கற்றுக் கொள்வது ஒன்று அவர்கள் எல்லோருக்கும் வித்தியாசமான விளிம்புகள் மற்றும் விதிமுறைகளை எப்படிக் காட்டுகிறார்கள் என்பதைப் புரிந்துகொள்வதுதான். உங்கள் உலாவி பெரும்பாலான உலாவிகளில் ஒரே மாதிரியாக இருப்பதை உறுதி செய்ய சிறந்த வழி, விளிம்புகள் போன்ற விஷயங்களை உலாவி தேர்வுக்கு இயல்புநிலையில் அனுமதிக்காது.
மேல் இடது மூலையில் உள்ள எனது பக்கங்களைத் தொடங்க விரும்புகிறேன், உரைக்கு சுற்றியுள்ள கூடுதல் திசைமாற்றி அல்லது விளிம்பு இல்லாமல். நான் உள்ளடக்கங்களை pad போகிறேன் என்றால், நான் எல்லைகளை பூஜ்யம் அமைக்க அதனால் நான் அதே வெற்று ஸ்லேட் தொடங்கி இருக்கிறேன். இதை செய்ய, உங்கள் styles.css ஆவணம் பின்வரும் சேர்க்க:
html, உடல் {
விளிம்பு: 0px;
திணிப்பு: 0px;
எல்லை: 0px;
இடது: 0px;
மேல்: 0px;
}
10 இல் 04
பக்கத்தின் எழுத்துருவை மாற்றுதல்
எழுத்துரு பெரும்பாலும் நீங்கள் ஒரு வலை பக்கம் மாற்ற வேண்டும் என்று முதல் விஷயம். வலைப்பக்கத்தின் இயல்புநிலை எழுத்துரு அசிங்கமாக இருக்கக்கூடும், மேலும் வலை உலாவியாகவே உள்ளது, எனவே நீங்கள் எழுத்துருவை வரையறுக்கவில்லை என்றால், உங்கள் பக்கம் எப்படி இருக்கும் என்று உங்களுக்கு உண்மையில் தெரியாது.
பொதுவாக, நீங்கள் பத்திகள், அல்லது சில நேரங்களில் முழு ஆவணம் மீது எழுத்துரு மாற்ற வேண்டும். இந்த தளத்திற்கு நாம் எழுத்துரு மற்றும் பத்தி நிலை எழுத்துருவை வரையறுக்க வேண்டும். உங்கள் styles.css ஆவணம் பின்வரும் சேர்:
p, li {
எழுத்துரு: 1 ஏ ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்;
}
h1 {
எழுத்துரு: 2 ஏம் ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்;
}
h2 {
எழுத்துரு: 1.5 ஏய் ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்;
}
h3 {
எழுத்துரு: 1.25 ஏஐரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்;
}
நான் பத்திகள் மற்றும் பட்டியல் உருப்படிகளுக்கு என் அடிப்படை அளவு 1em உடன் தொடங்கியது, பின்னர் எனது தலைப்புகளுக்கான அளவு அமைக்க பயன்படுத்தப்பட்டது. நான் h4 விட ஆழமான ஒரு தலைப்பை பயன்படுத்த எதிர்பார்க்கவில்லை, ஆனால் நீங்கள் திட்டமிட்டால் நீங்கள் அதே பாணி வேண்டும் என்று.
10 இன் 05
உங்கள் இணைப்புகளை மேலும் சுவாரஸ்யமாக்குதல்
இணைப்புகளுக்கான இயல்புநிலை நிறங்கள் முறையே unvisited மற்றும் பார்வையிடப்பட்ட இணைப்புகளுக்கான நீல மற்றும் ஊதா நிறத்தில் உள்ளன. இது தரநிலையாக இருந்தாலும், அது உங்கள் பக்கங்களின் வண்ணத் திட்டத்திற்கு பொருந்தாது, எனவே அதை மாற்றலாம். உங்கள் styles.css கோப்பு, பின்வரும் சேர்க்க:
ஒரு: இணைப்பு {
எழுத்துரு-குடும்பம்: ஏரியல், ஹெல்வெடிகா, சான்ஸ்-செரிஃப்;
நிறம்: # FF9900;
உரை அலங்காரம்: அடிக்கோடிடு;
}
ஒரு: விஜயம் {
நிறம்: # FFCC66;
}
ஒரு: மிதவை {
பின்புலம்: #FFFFCC;
எழுத்துரு-எடை: தடித்த;
}
நான் மூன்று இணைப்பு பாணிகளை அமைக்கிறேன், ஒரு: இணைப்பு இயல்புநிலை, ஒரு: இது பார்வையிடப்பட்டபோது பார்வையிட்டது, நான் நிறத்தை மாற்றினேன், மற்றும் ஒரு: மிதவை. ஒரு: hover நான் இணைப்பு பின்னணி வண்ணம் கிடைக்கும் மற்றும் சொடுக்கும் ஒரு இணைப்பை வலியுறுத்த தைரியமாக செல்ல.
10 இல் 06
ஊடுருவல் பிரிவு பாணி
HTML இல் உள்ள வழிநடத்துதல் (id = "nav") முதன்மையானது முதல், முதலில் நாம் பாணியில் பாருவோம். பிரதான உரைக்கு எதிராக அதை மூடிவிடாதபடி, அது எவ்வளவு பரந்த அளவில் இருக்க வேண்டும் என்பதைக் குறிக்க வேண்டும் மற்றும் வலதுபுறத்தில் ஒரு பரந்த விளிம்பு வைக்க வேண்டும். நான் அதை சுற்றி ஒரு எல்லை வைத்து.
உங்கள் styles.css ஆவணம் பின்வரும் CSS ஐ சேர்:
#nav {
அகலம்: 225px;
விளிம்பு வலது: 15px;
எல்லை: நடுத்தர திட # 000000;
}
#nav li {
பட்டியல் பாணி: எதுவும் இல்லை;
}
.footer {
எழுத்துரு-அளவு: .75;
தெளிவாக: இருவரும்;
அகலம்: 100%;
உரை-சீரமைப்பு: மையம்;
}
பட்டியல் பாணி சொத்து இல்லை வழிசெலுத்தல் பிரிவில் பட்டியல் இல்லை தோட்டாக்கள் அல்லது எண்கள், மற்றும் .பூட்டர் பாணியை பதிப்புரிமை பிரிவில் சிறிய மற்றும் மையம் மையமாக.
10 இல் 07
முக்கிய பகுதியை நிலைநிறுத்துகிறது
முழுமையான நிலைமையுடன் உங்கள் முக்கிய பகுதியை நிலைநிறுத்துவதன் மூலம் உங்கள் வலைப்பக்கத்தில் தங்குவதற்கு நீங்கள் எங்கு வேண்டுமானாலும் அதைத் தக்கவைத்துக் கொள்ளலாம். பெரிய திரைகள் கொண்டுவருவதற்காக என்னுடைய 800px அகலத்தை நான் செய்தேன், ஆனால் நீங்கள் ஒரு சிறிய மானிட்டர் வைத்திருந்தால், அந்த குறுகலானதை நீங்கள் செய்ய விரும்பலாம்.
உங்கள் styles.css ஆவணம் பின்வரும் வைக்கவும்:
#main {
அகலம்: 800px;
மேல்: 0px;
நிலை: முழுமையான;
இடது: 250px;
}
10 இல் 08
உங்கள் பத்திகளை பாணி
நான் ஏற்கனவே மேலே பத்தி எழுத்துருவை அமைத்திருப்பதால், ஒவ்வொரு பத்தியையும் சிறிதளவு கூடுதலாக "கிக்" செய்ய விரும்புகிறேன். நான் மட்டும் படத்தை மட்டும் விட பத்தி உயர்த்தி அந்த மேல் ஒரு எல்லை போடுவதன் மூலம் இதை செய்தேன்.
உங்கள் styles.css ஆவணம் பின்வரும் வைக்கவும்:
.மேல் வரி {
எல்லை-மேல்: அடர்த்தியான திட # FFCC00;
}
நான் அந்த வழியில் அனைத்து பத்திகள் வரையறுக்கும் விட "topline" என்று ஒரு வர்க்கம் அதை செய்ய முடிவு. இந்த வழியில், நான் முடிவு செய்தால், ஒரு மஞ்சள் நிற வரி இல்லாமல் ஒரு பத்தியில் இருக்க வேண்டும் எனில், நான் வெறுமனே வர்க்கம் = "topline" பத்தி குறிப்பில் விட்டுவிடலாம் மற்றும் அது மேல் எல்லை இல்லை.
10 இல் 09
படங்களை ஸ்டைலிங்
படங்களை பொதுவாக அவர்களை சுற்றி ஒரு எல்லை உள்ளது, படம் ஒரு இணைப்பு வரை இந்த எப்போதும் தெரியும், ஆனால் நான் தானாக எல்லையை கடந்து என் CSS நடைதாள் உள்ள ஒரு வர்க்கம் விரும்புகிறேன். இந்த நடைமுறைக்கு, நான் "nobder" வர்க்கத்தை உருவாக்கியிருக்கிறேன், ஆவணத்தில் உள்ள பெரும்பாலான படங்களும் இந்த வகுப்பின் ஒரு பகுதியாகும்.
இந்தப் படங்களின் மற்ற சிறப்பு பகுதி பக்கத்தின் இருப்பிடமாகும். அவர்கள் அவற்றை ஒருங்கிணைக்க அட்டவணைகள் பயன்படுத்தி இல்லாமல் இருந்தது பத்தி ஒரு பகுதியாக இருக்க வேண்டும் என்று நான் விரும்பினேன். இதை செய்ய எளிய வழி மிதவை CSS சொத்து பயன்படுத்த வேண்டும்.
உங்கள் styles.css ஆவணம் பின்வரும் வைக்கவும்:
#main img {
மிதவை: இடது;
விளிம்பு வலது: 5px;
விளிம்பு கீழே: 15px;
}
.noborder {
எல்லை: 0px ஒன்றுமில்லை;
}
நீங்கள் பார்க்க முடியும் எனில், படங்களில் அமைக்கப்பட்டுள்ள விளிம்பு பண்புக்கூறுகள் உள்ளன, அவை பத்திகளிலிருக்கும் பக்கவாட்டில் இருக்கும் மிதக்கும் உரைக்கு எதிராக அவை அழிக்கப்படுவதில்லை என்பதை உறுதிப்படுத்துகின்றன.
10 இல் 10
இப்போது உங்கள் முடிக்கப்பட்ட பக்கத்தைப் பாருங்கள்
நீங்கள் உங்கள் CSS சேமித்துவிட்டால் உங்கள் வலை உலாவியில் pets.htm பக்கத்தை மீண்டும் ஏற்றலாம். இந்தப் படத்தில் காட்டப்பட்டுள்ளதைப் போலவே உங்கள் பக்கம் தோற்றமளிக்க வேண்டும், படங்கள் சீரமைக்கப்பட்டு, பக்கத்தின் இடது பக்கத்தில் சரியாக வழிநடத்தும்.
இந்த தளத்திற்கு உங்கள் அனைத்து உள் பக்கங்களுக்கும் இதே படிநிலைகளைப் பின்பற்றவும். உங்கள் வழிசெலுத்திலுள்ள ஒவ்வொரு பக்கத்திற்கும் ஒரு பக்கம் இருக்க வேண்டும்.