CSS இல் பின்னணி படத்தை எப்படி அமைப்பது

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

CSS என்றால் என்ன?

CSS என்பது Cascading Style Sheet. இது ஒரு நிரலாக்க மொழி, இது மார்க்அப் மொழிகளை ஸ்டைல் ​​செய்ய அனுமதிக்கிறது. அத்தகைய ஒரு மார்க்அப் மொழி HTML அல்லது ஹைப்பர்-டெக்ஸ்ட் மார்க்அப் மொழி. வலைத்தளங்களை உருவாக்க HTML பயன்படுத்தப்படுகிறது. HTML ஐப் பயன்படுத்தி வலைத்தளத்தின் சில பாணிகளை நீங்கள் கட்டுப்படுத்த முடியும் என்றாலும், CSS அதிக கட்டுப்பாடு மற்றும் வடிவமைப்பு விருப்பங்களை வழங்குகிறது.

---

---

HTML உடன் ஒரு அடிப்படை வலைத்தளத்தை உருவாக்குதல்

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

Hello World

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

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

தொடர்புடையது: 10 எளிய CSS குறியீடு உதாரணங்கள் நீங்கள் 10 நிமிடங்களில் கற்றுக்கொள்ளலாம்

---

---

HTML இல் CSS ஐச் சேர்த்தல்

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

Hello World

---

---

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

Hello World

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

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

Hello World

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

நீக்கப்பட்ட ஃபேஸ்புக் செய்திகளை எவ்வாறு மீட்டெடுப்பது

உங்கள் வலைத்தளத்திற்கு ஒரு CSS கோப்பை இறக்குமதி செய்தல்

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

அதற்கு பதிலாக, நாங்கள் CSS தகவலை ஒரு தனி கோப்பில் வைத்து, பக்கத்தை வடிவமைக்க கோப்பை இறக்குமதி செய்கிறோம். புதிய CSS கோப்பில் ஸ்டைல் ​​டேக்குகளுக்கு இடையில் உள்ள தகவல்களை நகலெடுத்து ஒட்டவும் எங்கள் CSSfile.css .

p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

பின்னர், கோப்பை HTML கோப்பில் இறக்குமதி செய்யவும்.

Hello World

CSS உடன் பின்னணி படத்தைச் சேர்த்தல்

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

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}

CSS இல் உடல் பாணியை மாற்ற, முதலில் பயன்படுத்தவும் உடல் முக்கிய சொல். நாங்கள் முன்பு செய்ததைப் போல சுருள் அடைப்புக்குறிகளைச் சேர்க்கவும் {}. உடலுக்கான அனைத்து பாணி தகவல்களும் சுருள் அடைப்புக்குறிக்குள் இருக்க வேண்டும். நாம் மாற்ற விரும்பும் பாணி பண்பு பின்னணி-படம் . பல பாணி பண்புகள் உள்ளன. அவை அனைத்தையும் மனப்பாடம் செய்ய எதிர்பார்க்காதீர்கள். நீங்கள் நினைவில் கொள்ள விரும்பும் பண்புகளுடன் ஒரு CSS பண்புகள் ஏமாற்றுத் தாளை புக்மார்க் செய்யவும்.

தொடர்புடையது: 8 யார் வேண்டுமானாலும் தங்கள் வலைத்தளத்தில் சேர்க்கக்கூடிய குளிர் HTML விளைவுகள்

மடிக்கணினி வன்பொருள் சிக்கல்களை எவ்வாறு கண்டறிவது

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

எங்கள் உதாரணம் இதுபோல் தெரிகிறது:

படத்தின் அளவு காரணமாக உங்கள் படம் சரியாக காட்டப்படவில்லை என்றால், நீங்கள் படத்தை நேரடியாக மாற்றலாம். இருப்பினும், பின்னணியை மாற்ற நீங்கள் பயன்படுத்தக்கூடிய CSS இல் பின்னணி பாணி பண்புக்கூறுகள் உள்ளன. பின்னணியை விட சிறிய படங்கள் தானாகவே பின்னணியில் மீண்டும் மீண்டும் செய்யப்படும். அதை அணைக்க, சேர்க்கவும் பின்னணி-மீண்டும்:மீண்டும் மீண்டும் இல்லை; உங்கள் உறுப்புக்கு.

முழு பின்னணியையும் ஒரு படத்தை மறைக்க இரண்டு வழிகள் உள்ளன. முதலில், நீங்கள் திரையின் அளவிற்கு பின்னணி அளவை அமைக்கலாம் பின்னணி அளவு: 100% 100%; , ஆனால் இது படத்தை நீட்டி, படத்தை அதிகமாக சிதைக்கலாம். படத்தின் விகிதாச்சாரத்தை நீங்கள் மாற்ற விரும்பவில்லை என்றால், பின்னணி அளவையும் அமைக்கலாம் கவர் . கவர் பின்னணி படத்தை பின்னணியை மறைக்கும், ஆனால் படத்தை சிதைக்காது.

பின்னணி நிறத்தை மாற்றுதல்

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

body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}

மிகவும் சிறப்பாக.

உங்கள் வலைத்தளத்தை CSS உடன் தொடர்ந்து வடிவமைத்தல்

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் தரமான HTML குறியீட்டு எடுத்துக்காட்டுகளுக்கான 8 சிறந்த தளங்கள்

உங்கள் சொந்த வலைத்தளங்கள் மற்றும் பயன்பாடுகளை குறியிட HTML கற்க விரும்புகிறீர்களா? உங்களுக்கு HTML மற்றும் CSS கற்பிக்க இந்த வலைப்பக்க எடுத்துக்காட்டுகள் மற்றும் மூலக் குறியீட்டைப் பயன்படுத்தவும்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

• நிரலாக்க
• HTML
• வலை வடிவமைப்பு
• CSS

எழுத்தாளர் பற்றி ஜெனிபர் சீடன்(21 கட்டுரைகள் வெளியிடப்பட்டன)

ஜே. சீடன் ஒரு அறிவியல் எழுத்தாளர், சிக்கலான தலைப்புகளை உடைப்பதில் நிபுணத்துவம் பெற்றவர். அவர் சஸ்காட்செவான் பல்கலைக்கழகத்தில் முனைவர் பட்டம் பெற்றார்; மாணவர்களின் ஈடுபாட்டை ஆன்லைனில் அதிகரிக்க விளையாட்டு அடிப்படையிலான கற்றலைப் பயன்படுத்துவதில் அவரது ஆராய்ச்சி கவனம் செலுத்தியது. அவள் வேலை செய்யாதபோது, ​​அவளுடைய வாசிப்பு, வீடியோ கேம்ஸ் அல்லது தோட்டக்கலை ஆகியவற்றைக் காணலாம்.

ஜெனிபர் சீட்டனிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்