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

CSS இல் உள்ள கோடுகள்

வரிகளை உருவாக்க பல வழிகள் உள்ளன. அத்தகைய ஒரு வழி CSS ஐப் பயன்படுத்துவதாகும். அல்லது மாறாக, பார்டரைப் பயன்படுத்துதல். ஒரு உதாரணத்தைப் பார்ப்போம்.

இதன் விளைவாக இதுதான் நடக்கும்.

css ஐப் பயன்படுத்தி கிடைமட்ட மற்றும் செங்குத்து கோடு.

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

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

• எல்லை-மேல் - மேல் எல்லையின் மதிப்பை அமைக்கிறது
• எல்லை-கீழ் - கீழ் எல்லையின் மதிப்பை அமைக்கிறது
• எல்லை-இடது - இடது எல்லையின் மதிப்பை அமைக்கிறது
• எல்லை-வலது - வலது எல்லையின் மதிப்பை அமைக்கிறது.

HTML இல் செங்குத்து மற்றும் கிடைமட்ட கோடு

நீங்கள் HTML இல் வரிகளை உருவாக்கலாம். இதைச் செய்ய, நீங்கள் hr குறிச்சொல்லைப் பயன்படுத்தலாம்.

இந்த வழக்கில், ஒரு கிடைமட்ட கோடு வரையப்படும், ஒரு பிக்சல் உயரம் மற்றும் முழு அகலம்.

ஆனால் இந்த குறிச்சொல்லுக்கு சில மதிப்புகளையும் கொடுக்கலாம்.

• அகலம்- வரி அகல மதிப்பை அமைக்கிறது.
• நிறம்- வரி நிறத்தை அமைக்கிறது.
• சீரமைக்கவும்- இடது, மையம், வலதுபுறம் சீரமைப்பை அமைக்கிறது
• அளவு- கோட்டின் தடிமன் மதிப்பை பிக்சல்களில் அமைக்கிறது.

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

இந்த வழக்கில், ஒரு செங்குத்து கோடு நூறு பிக்சல்கள் உயரம், ஒரு பிக்சல் தடிமன் மற்றும் ஐந்து பிக்சல்கள் உள்தள்ளப்படும்.

முடிவுரை.

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

சரி, உங்களிடம் இன்னும் ஏதேனும் கேள்விகள் இருந்தால், கருத்துகளில் அவர்களிடம் கேளுங்கள்.

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

கிடைமட்ட கோடு என்றால் என்ன, அது எதற்காக?

html இல் ஒரு கிடைமட்டக் கோடு என்பது பல செயல்பாடுகளைச் செய்யும் பக்க வடிவமைப்பு உறுப்பு ஆகும்:

1. அலங்காரமானது. பக்கத்திற்கு கவர்ச்சியை சேர்க்க உதவுகிறது.
2. பிரித்தல். வெவ்வேறு அர்த்தங்களின் தகவல்களை திறம்பட பிரிப்பதை ஊக்குவிக்கிறது.
3. முன்னிலைப்படுத்துதல் அல்லது வலியுறுத்துதல். தேவையான மற்றும் மிக முக்கியமான தகவல்களுக்கு பக்க விருந்தினர்களின் கவனத்தை ஈர்க்கிறது.

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

• நீளம்;
• அகலம்;
• வண்ண பண்புகள்;
• ஒரு விளிம்பில் அல்லது மற்றொன்றில் சீரமைப்பு.

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

HTML இல் ஒரு கிடைமட்ட கோட்டை உருவாக்குதல்

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

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

இது போல் தெரிகிறது. எடுத்துக்காட்டாக, நமக்கு 100 பிக்சல்கள் நீளம் தேவைப்பட்டால், பின்வரும் குறிச்சொல்லை அமைக்கிறோம்: மணி அகலம்=”100″

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

இந்த வழக்கில் முடிக்கப்பட்ட குறிச்சொல் இப்படி இருக்கும். எடுத்துக்காட்டாக, 150 பிக்சல்கள் நீளமுள்ள கிடைமட்டக் கோட்டிற்கு மையச் சீரமைப்பை அமைக்க வேண்டும் என்றால், முடிக்கப்பட்ட குறிச்சொல் இப்படி இருக்கும்: hr align=”center” width=”150″.

பண்புக்கூறு அகல அளவீட்டைச் சார்ந்து இருந்தாலும், "அலைன்", சீரமைப்பு மெட்ரிக், 1வது இடத்தில் வைக்கப்பட்டுள்ளது என்பதை நினைவில் கொள்ளவும்.

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

எனவே, 15 பிக்சல்கள் அகலத்தில் ஒரு வரியை உருவாக்க வேண்டும் என்றால், பின்வரும் குறிச்சொல்லை உருவாக்க வேண்டும்: hr அளவு=”15″.

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

எனவே, நிலையான வெள்ளைக் கோடுக்கான குறிச்சொல்லை இரண்டு வழிகளில் எழுதலாம்: hr நிறம்=”#FFFFFF” அல்லது hr நிறம்=”வெள்ளை”

#000000 என்ற குறியீட்டைப் பயன்படுத்தி கருப்பு நிறத்தை உருவாக்கலாம்.

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

வீடியோவைப் பயன்படுத்தி ஒரு கிடைமட்ட கோட்டை உருவாக்குதல்

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

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

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

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

CSS இல் தொகுதிகளை வரிசைப்படுத்துவதற்கான அடிப்படை வழிகள்

நாங்கள் எதையும் சிக்கலாக்க மாட்டோம், 3 முக்கிய வழிகள் உள்ளன:

தொகுதிகளை இன்லைன் கூறுகளாக மாற்றவும். இந்த வழக்கில், தொகுதி பண்புகள் இழக்கப்படுகின்றன, எனவே இந்த விருப்பம் கிட்டத்தட்ட பயன்படுத்தப்படவில்லை

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

மிதவை பண்புகளைப் பயன்படுத்தி உறுப்புகளை மிதக்கச் செய்யுங்கள்.

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

தலைப்பு 1

தலைப்பு 2

தலைப்பு 3

இயற்கையாகவே, அனைத்து css பண்புகள் ஒரு தனி கோப்பில் (style.css) எழுதப்பட வேண்டும், இது html ஆவணத்துடன் இணைக்கப்பட வேண்டும். இந்த கோப்பில் நான் ஒரு குறைந்தபட்ச பாணியை எழுதுவேன், இதனால் எங்கள் துணை தலைப்புகள் வெறுமனே தெரியும்.

h3(பின்னணி: #EEDDCD;)

h3 ( பின்னணி : #EEDDCD;

இங்கே அவை பக்கத்தில் உள்ளன:

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

அதை வரிகளாக மாற்றி உடனடியாக உள்தள்ளல்களைச் சேர்ப்போம். இதைச் செய்ய, h3 தேர்வி பின்வரும் பண்புகளைச் சேர்க்க வேண்டும்:

காட்சி: இன்லைன்; திணிப்பு: 30px;

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

html இல், தேவையான தொகுதிகளின் குறியீட்டை இடைவெளிகள் இல்லாமல் ஒரு வரியில் வைக்கவும்

வலதுபுறத்தில் எதிர்மறை விளிம்பைச் சேர்க்கவும் -4 பிக்சல்கள். ஒரு இடம் எவ்வளவு எடுக்கும்.

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

கட்டமைப்பைப் பயன்படுத்தி ஒரு வரியில் தடுக்கிறது

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

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

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

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

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

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

CSS ஐப் பயன்படுத்தி உரையில் ஒரு வரியை உருவாக்குவது எப்படி

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

- எல்லை-மேல்- உரைக்கு மேலே அமைந்துள்ள ஒரு கிடைமட்ட கோடு;

- எல்லை-வலது- உரையின் வலதுபுறத்தில் அமைந்துள்ள ஒரு செங்குத்து கோடு;

- எல்லை-கீழ்- உரைக்கு கீழே அமைந்துள்ள ஒரு கிடைமட்ட கோடு;

- எல்லை-இடது- செங்குத்து கோடு இடதுபுறத்தில் அமைந்துள்ளது.

html இல் ஒரு வரியை உருவாக்குவது எப்படி

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

கட்டளைகளின் சுருக்கமான விளக்கம்

- அகலம்- வரி நீளம்;

- திடமான- திடமான வரி;

- புள்ளியிடப்பட்ட- புள்ளி கோடு.

பாணிகளைப் பற்றிய ஆழமான புரிதலுக்கு, இதைப் படிக்க பரிந்துரைக்கிறேன்.

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

இந்த முறை பல நன்மைகளைக் கொண்டுள்ளது:

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

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

HTML குறிச்சொல்லைப் பயன்படுத்தி நேராக கிடைமட்ட கோட்டை உருவாக்குவது எப்படி

---

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

குறிச்சொல் பண்புக்கூறுகள்

---

- அகலம்- வரியின் நீளத்திற்கு பொறுப்பு. சதவீதமாக அல்லது பிக்சல்களில் குறிப்பிடலாம்.

- அளவு- வரி தடிமன். பிக்சல்களில் குறிப்பிடப்பட்டுள்ளது.

- நிறம்- கோட்டின் நிறத்தை வரையறுக்கிறது.

- சீரமைக்க- வரி சீரமைப்புக்கு பொறுப்பான ஒரு பண்பு. இதையொட்டி, அணி அவருடன் தொடர்புடையது.

பணி

பக்கத்தில் ஒரு கிடைமட்ட கோட்டை உருவாக்கவும்.

தீர்வு

கிடைமட்ட கோடுகள் ஒரு தொகுதியிலிருந்து மற்றொரு உரையை பிரிக்க நல்லது. வழக்கமான உரையை விட மேல் மற்றும் கீழ் கிடைமட்ட கோடுகளுடன் கூடிய சிறிய உரை வாசகர்களின் கவனத்தை ஈர்க்கிறது.

ஒரு குறிச்சொல்லைப் பயன்படுத்துதல்

---

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

---

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

இயல்புநிலை வரி

---

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

எடுத்துக்காட்டு 1: கிடைமட்ட கோடு

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

உரை சரம்

---

இந்த எடுத்துக்காட்டின் முடிவு படத்தில் காட்டப்பட்டுள்ளது. 1.

அரிசி. 1. வண்ண கிடைமட்ட கோடு