html இல் div என்றால் என்ன. HTML5 மார்க்அப்பில் பொதுவான தவறுகளைத் தவிர்க்கவும். உதாரணம். div உடன் அழகான சட்டகம்
எந்தவொரு வலைப்பக்கமும் அதில் அமைந்துள்ள கூறுகளைக் கொண்டுள்ளது, மேலும் அவற்றின் இருப்பிடத்திற்கு டிவ் பிளாக் தளவமைப்பு எப்போதும் பொறுப்பாகும். நிச்சயமாக, குறிச்சொற்களைப் பயன்படுத்தி ஒரு அட்டவணை தளவமைப்பு உள்ளது
| , மற்றும் எந்த அமைப்பைப் பயன்படுத்துவது சிறந்தது என்பது பற்றிய விவாதம் கூட உள்ளது - தொகுதி அல்லது அட்டவணை அடிப்படையிலானது. இருப்பினும், உண்மையில், தற்போது அட்டவணை அமைப்பை மட்டுமே பயன்படுத்தும் நவீன, பிரபலமான மற்றும் வசதியான தளங்கள் எதையும் நீங்கள் காண முடியாது. சிறந்தது, இது எதை நோக்கமாகக் கொண்டுள்ளது என்பதற்கு மட்டுமே பயன்படுத்தப்படுகிறது - அதாவது, அட்டவணைகளை உருவாக்க, ஆனால் தள கட்டமைப்பை உருவாக்க அல்ல.
உண்மை என்னவென்றால், தளத்தின் div தளவமைப்பு அட்டவணைகளுக்கு கிடைக்காத பல CSS பண்புகளை அமைக்க உங்களை அனுமதிக்கிறது. கூடுதலாக, டேபிள் சிஸ்டத்தின் மிகப்பெரிய குறைபாடு என்னவென்றால், உலாவியால் முழுமையாக ஏற்றப்படும் வரை அட்டவணை திரையில் காட்டப்படாது. முழு தளமும் ஒரு அட்டவணையில் செய்யப்பட்டிருந்தால், பக்கத்தின் முழு html குறியீடும் முழுமையாக ஏற்றப்பட்ட பின்னரே அது காட்சியில் தோன்றும். DIV குறிச்சொல் மற்றும் மிதவை சொத்துதொகுதி அமைப்பின் அடிப்படையானது டேக் ஆகும், இது உள்ளடக்கத்திற்கான கொள்கலன் ஆகும். அதில் மற்ற கொள்கலன்களும் இருக்கலாம். DIV குறிச்சொல்லைப் பயன்படுத்துவதை விட கடினமாக இல்லை. ஒரு விதியாக, ஒரு தளத்தின் நிலையான அமைப்பு பின்வருமாறு உருவாகிறது: ஒரு முக்கிய கொள்கலன் உள்ளது (பெரும்பாலும் அது ரேப்பர், கொள்கலன், முக்கிய, முதலியன எனப்படும் ஒரு வகுப்பு ஒதுக்கப்படுகிறது). இந்த கொள்கலனுக்குள் மெனு, உள்ளடக்க பகுதி மற்றும் பக்கப்பட்டியின் தொகுதிகள் உள்ளன. முன்னிருப்பாக, ஒவ்வொரு புதிய தொகுதியும் ஒரு புதிய வரியில் வைக்கப்படும். ஒரு தொகுதியை மற்றொன்றின் இடது அல்லது வலதுபுறத்தில் நிலைநிறுத்துவதற்கு (உதாரணமாக, வலதுபுறத்தில் ஒரு பக்கப்பட்டியை வைக்க), மிதவை சொத்து பயன்படுத்தப்படுகிறது. இயல்பாக, இது "இல்லை" என்ற மதிப்பைக் கொண்டுள்ளது, ஆனால் நீங்கள் "இடது" மற்றும் "வலது" மதிப்புகளையும் அமைக்கலாம். இரண்டு தொகுதிகள் கொண்ட உதாரணத்தைப் பயன்படுத்தி இந்த சொத்தை பார்க்கலாம். உள்ளடக்கத்திற்கான தடுப்பு பக்கப்பட்டிக்கான பிளாக் இந்த குறியீடு பின்வரும் முடிவைக் கொடுக்கும்: தெளிவான சொத்துமிதவை சொத்து அது பதிவுசெய்யப்பட்ட தொகுதிக்கு மட்டுமல்ல, இந்தத் தொகுதியைப் பின்பற்றும் அடுத்த உறுப்புக்கும் பொருந்தும் என்பதைக் கருத்தில் கொள்வது அவசியம். அதாவது, மேலே விவரிக்கப்பட்ட இரண்டு தொகுதிகளுக்கு எந்த பண்புகளையும் குறிப்பிடாமல் மற்றொரு தொகுதியைச் சேர்த்தால், அது புதிய வரியில் அமைந்திருக்காது, ஆனால் இரண்டாவது தொகுதியின் வலதுபுறத்தில் தொடங்கும். இதைத் தவிர்க்க, தொகுதி div தளவமைப்பு தெளிவான பண்புகளைப் பயன்படுத்துகிறது, இது ஒரு புதிய வரியில் நாம் வைக்க விரும்பும் தொகுதிக்கு அமைக்கப்பட வேண்டும். பெரும்பாலும், இது "இரண்டும்" என அமைக்கப்பட்டுள்ளது, ஆனால் புதிய வரியில் தொகுதியை நிலைநிறுத்துவது மட்டுமல்லாமல், அதன் சீரமைப்பையும் அமைக்க விரும்பினால், அதை "இடது" அல்லது "வலது" என அமைக்கலாம். மேலே உள்ள எடுத்துக்காட்டில் ஒரு புதிய உறுப்பைச் சேர்ப்போம்: உள்ளடக்கத் தொகுதி பக்கப்பட்டி தொகுதி கீழே அமைந்துள்ள புதிய தொகுதி முடிவு:
தொகுதிகளின் இருப்பிடத்திற்கு கூடுதலாக, தொகுதிகளுக்கு இடையில் மற்றும் அவற்றுக்குள் உள்தள்ளல்களை அமைப்பது முக்கியம். இதற்காக, விளிம்பு மற்றும் திணிப்பு பண்புகள் முறையே பயன்படுத்தப்படுகின்றன. உறுப்பின் மேல், வலது, கீழ் மற்றும் இடது பகுதிகளுக்கு தனித்தனியாக உள்தள்ளல்கள் அமைக்கப்பட்டுள்ளன. நான்கு மதிப்புகளை பட்டியலிடுவதன் மூலம் அவற்றை ஒரு வரியில் குறிப்பிடலாம்: விளிம்பு: 20px 10px 0 40px இந்த அளவுருக்கள் கொண்ட ஒரு தொகுதியானது மூல உறுப்புக்கு கீழே 20 பிக்சல்கள் இருக்கும், வலது புறத்தில் இருந்து பத்து பிக்சல்கள், கீழே பூஜ்ஜிய திணிப்பு இருக்கும், மேலும் இடதுபுறத்தில் 40 பிக்சல்கள் திணிப்பு இருக்கும். திணிப்பு சொத்தில் ஒரே மாதிரியான குறிகாட்டிகள் குறிப்பிடப்பட்டிருந்தால், அவை அமைந்துள்ள தொகுதியின் எல்லைகளுடன் தொடர்புடைய உள்ளடக்கத்திற்கான உள் திணிப்பாக இருக்கும். விளிம்பு-மேல், விளிம்பு-கீழ், விளிம்பு-இடது, விளிம்பு-வலது (மற்றும் திணிப்புக்காக) ஆகியவற்றைப் பயன்படுத்தி தனிப்பட்ட விளிம்புகளுக்கான தனிப்பட்ட பண்புகளையும் நீங்கள் அமைக்கலாம். இந்த வழக்கில், எந்த விளிம்புகளும் குறிப்பிடப்படவில்லை என்றால், அதன் பக்கத்தில் உள்ள உள்தள்ளல் பூஜ்ஜியமாக இருக்கும் அல்லது பக்கத்தில் உள்ள தொகுதிகளுக்கு குறிப்பிடப்பட்ட பொதுவான css பண்புகளால் தீர்மானிக்கப்படும். HTML உள்ளடக்கப் பிரிவு உறுப்பு ( ) என்பது ஓட்ட உள்ளடக்கத்திற்கான பொதுவான கொள்கலன் ஆகும். CSS ஐப் பயன்படுத்தி வடிவமைக்கும் வரை உள்ளடக்கம் அல்லது தளவமைப்பில் இது எந்த விளைவையும் ஏற்படுத்தாது. இந்த ஊடாடும் உதாரணத்திற்கான ஆதாரம் GitHub களஞ்சியத்தில் சேமிக்கப்பட்டுள்ளது. ஊடாடும் எடுத்துக்காட்டுகள் திட்டத்திற்கு நீங்கள் பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/interactive-examples ஐ க்ளோன் செய்து எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும். ஒரு "தூய" கொள்கலனாக, உறுப்பு இயல்பாக எதையும் பிரதிநிதித்துவப்படுத்துவதில்லை. மாறாக, இது உள்ளடக்கத்தை குழுவாக்கப் பயன்படுகிறது, எனவே இது வகுப்பு அல்லது பண்புக்கூறுகளைப் பயன்படுத்தி எளிதாக வடிவமைக்க முடியும், ஒரு ஆவணத்தின் ஒரு பகுதியை வேறு மொழியில் எழுதப்பட்டதாகக் குறிக்கும் (லாங் பண்புக்கூறைப் பயன்படுத்தி) மற்றும் பல.
குறிப்பு: align பண்புக்கூறு வழக்கற்றுப் போய்விட்டது; இனி பயன்படுத்த வேண்டாம். அதற்கு பதிலாக, நீங்கள் CSS பண்புகள் அல்லது CSS கட்டம் அல்லது CSS ஃப்ளெக்ஸ்பாக்ஸ் போன்ற நுட்பங்களைப் பயன்படுத்தி பக்கத்தில் உள்ள உறுப்புகளை சீரமைக்க மற்றும் நிலைநிறுத்த வேண்டும். பயன்பாட்டு குறிப்புகள்
எந்த வகையான உள்ளடக்கமும் இங்கே. போன்ற ,
இந்தப் பக்கத்தில் உள்ள இணக்க அட்டவணை கட்டமைக்கப்பட்ட தரவிலிருந்து உருவாக்கப்பட்டது. நீங்கள் தரவில் பங்களிக்க விரும்பினால், தயவுசெய்து https://github.com/mdn/browser-compat-data ஐப் பார்க்கவும் மற்றும் எங்களுக்கு இழுக்கும் கோரிக்கையை அனுப்பவும். GitHub இல் பொருந்தக்கூடிய தரவைப் புதுப்பிக்கவும்
நல்ல மதியம் நண்பர்களே! எப்படியோ html பற்றிய எனது பல பாடங்களில் நான் பேசினேன் மற்றும் div layout போன்ற ஒரு கருத்தைப் பயன்படுத்தினேன். உங்களிடம் கேள்விகள் இருக்கலாம், குறிப்பாக நீங்கள் புதியவர்களாக இருந்தால், அது என்ன? இன்றைய கட்டுரையில் உங்களின் அனைத்து சந்தேகங்களையும் களைந்து, DIV Blocks எதில் உள்ளது என்ற கேள்விகளுக்கு பதிலளிப்பேன் படிக்க ஆரம்பிக்கலாம். HTML div தொகுதிகள் மற்றும் தளவமைப்புஉங்கள் மூளையை ஒழுங்கீனம் செய்யாமல் இருக்க, எல்லா வலை வடிவமைப்பாளர்களும் டெவலப்பர்களும் பக்கங்கள் மற்றும் தளங்களை உருவாக்கும் போது அட்டவணை அமைப்பைப் பயன்படுத்தினர் என்று சுருக்கமாகச் சொல்கிறேன், அங்கு ஒவ்வொரு கலமும் ஒரு குறிப்பிட்ட உறுப்பைக் குறிக்கும். இது இப்படி இருந்தது: இணையதள உருவாக்கம் இப்படித்தான் இருந்தது. இது மிகவும் பழமையான உதாரணம், ஆனால் அந்த தொலைதூர காலங்களில் வலைத்தளங்கள் எவ்வாறு உருவாக்கப்பட்டன என்பதை நீங்கள் தெளிவாக கற்பனை செய்யலாம். இன்டர்நெட் டெக்னாலஜிகள் இன்னும் நிற்கவில்லை, ஒரு கட்டத்தில் html div லேஅவுட் என்ற கருத்து நமக்கு வந்தது. பின்னர், அவர்கள் சொல்வது போல், அது தொடங்கியது. இணையதள மேம்பாட்டில் அதன் முக்கியத்துவம் மிகவும் பெரியது. இப்போது இணையதளங்களை உருவாக்குவதும் html தொகுதிகளை நிர்வகிப்பதும் முன்னெப்போதையும் விட எளிதாகிவிட்டது. தளங்கள் அழகாகவும் சுவாரஸ்யமாகவும் மாறத் தொடங்கின. இப்போது முழு உலகமும் தங்கள் வழியை உருவாக்குகிறது. div html பிளாக்குகளைப் பயன்படுத்துவதற்கான மாதிரியை இப்போது நாம் எளிமைப்படுத்திய விதத்தில் இப்படித்தான் சித்தரிக்க முடியும். வசதி என்பது ஒருவருக்கொருவர் தொகுதிகளின் சுதந்திரத்தில் உள்ளது, அவை தனித்தனியாக நிர்வகிக்க எளிதானது, நீங்கள் விரும்பியபடி நகர்த்தலாம், பாணிகளைச் சேர்க்கலாம், பல டிவ் குழுக்களுக்கு CSS விதிகள் மூலம் பொதுவான பாணிகளை அமைக்கலாம். இது வசதியானது என்பதை ஒப்புக்கொள். div குறிச்சொற்களைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டுகள்ஒரு html பக்கத்தில் div குறிச்சொற்களை எவ்வாறு பயன்படுத்தலாம் என்பதற்கான சில நடைமுறை எடுத்துக்காட்டுகளைப் பார்ப்போம். ஒரு எளிய எடுத்துக்காட்டில், பக்கத்தில் 4 தொகுதிகளை உருவாக்குவோம். நான் எப்போதும் இந்த மற்றும் எதிர்கால உதாரணங்களில் Notepad++ ஐப் பயன்படுத்துவேன்.
எனவே விளக்குகிறேன். எங்களிடம் ஒரு வடிவமைப்பு உள்ளது< ! DOCTYPE html >இது நவீன உலாவிகளுக்கு ஏற்றது மற்றும் HTML 5 மார்க்அப்பை ஆதரிக்கிறது, எதிர்கால சிக்கல்களில் இதைப் பற்றி பேசுவோம். அடுத்து, ஒரு பெரிய "பெற்றோர்" கொள்கலன் திறக்கிறது< html >. இது ஜோடியாக உள்ளது மற்றும் இறுதியில் மூடப்பட வேண்டும்! பின்னர் சேவை குறிச்சொல் திறக்கும்< head >, இது இணைக்கப்பட்டுள்ளது மற்றும் குறியாக்கத்தைப் பற்றிய சேவைத் தகவலைக் கொண்டுள்ளது< meta charset >, மிக முக்கியமான SEO பக்க தலைப்பு தலைப்பு, விளக்கம் (நான் அதை இங்கே சேர்க்கவில்லை, ஏனெனில் தேவை இல்லை, நாங்கள் முற்றிலும் தொழில்நுட்ப அம்சத்தை பகுப்பாய்வு செய்கிறோம்), CSS பாணிகள், எழுத்துருக்கள் (Google எழுத்துரு நூலகம்), ஜாவாஸ்கிரிப்ட் ஆகியவையும் இங்கே சேர்க்கப்பட்டுள்ளன. அடுத்து டேக் வரும்< body >. இது ஏற்கனவே எங்களின் அனைத்து பிளாக் மார்க்கிங்கும் மற்றும் அனைத்து கன்டெய்னர்களையும் குறிச்சொற்களுடன் சேமிக்கும். அதை ஒரு பெரிய "பீப்பாய்" என்று நினைவில் கொள்ளுங்கள். இறுதியாக, இங்கே எங்கள் div கொள்கலன்கள் வந்து.
முக்கியமானது! அவையும் ஜோடியாக உள்ளன, அவை மற்ற குறிச்சொற்களுடன் மூடப்பட வேண்டும். நீங்கள் பார்க்க முடியும் என, ஒவ்வொரு DIV தொகுதிக்கும் சமமான அடையாளத்திற்குப் பிறகு ஒரு வகுப்பு பண்பு உள்ளது, நீங்கள் அவற்றை சுயாதீனமாகவும் தன்னிச்சையாகவும் அமைக்கலாம். இந்த வகுப்புகள் குறிப்பாக CSSக்காக உருவாக்கப்பட்டவை. அதாவது, உலாவி பக்கத்திற்கு வந்து, div block ஐப் பார்த்து, அதில் என்ன தகவல் உள்ளது என்பதைப் பார்த்து, CSS கோப்புக்குச் சென்று, அங்கு தேவையான வகுப்பைத் தேடுகிறது. நீங்கள் வகுப்பு பண்புக்கூறை மட்டும் அமைக்க முடியாது, ஆனால் ஐடியையும் (அடையாளங்காட்டி) பயன்படுத்தலாம். நீங்கள் கேள்வி கேட்கலாம்: "நான் எதைப் பயன்படுத்துகிறேன் என்பதில் எனக்கு என்ன வித்தியாசம்?" நான் பதிலளிக்கிறேன், நீங்கள் தளவமைப்புக்கு எந்த முறையையும் பயன்படுத்தலாம். ஒரே ஒரு வித்தியாசத்துடன் - முன்னுரிமையின் அடிப்படையில், வகுப்பை விட ஐடிக்கு அதிக சலுகைகள் உள்ளன. கீழே உள்ள வீடியோ ஏமாற்று தாளில் இதை விளக்குகிறேன். ஒவ்வொருவருக்கும் வலைத்தளங்களை உருவாக்குவதற்கான சொந்த பாணி உள்ளது, நான் வகுப்பைப் பயன்படுத்த விரும்புகிறேன், ஏனெனில் CSS இல் இந்த நுழைவு ஒரு புள்ளியுடன் காட்டப்படும். தேர்வாளர் ஆம், நான் சொல்ல விரும்புகிறேன், தலைப்பு, பக்கப்பட்டி, உள்ளடக்கம், அடிக்குறிப்பு அனைத்தும் CSS தேர்வாளர்கள், மேலும் அவை ஏற்கனவே பண்புக்கூறுகளைக் கொண்டிருக்கும். எனவே, பயனர்களின் தலையில் உள்ள குழப்பத்தை நாங்கள் தொடர்ந்து அகற்றுகிறோம். வகுப்பைக் கொண்டு div தொகுதிகளை உருவாக்கியுள்ளோம், இப்போது CSS க்கு செல்லலாம். ஹெட் டேக்கிற்குள் எங்கள் பக்கத்திற்கான css விதிகளைத் திறப்போம், அதாவது அதை வடிவமைப்போம். இதை இப்படி செய்வோம்:
நுழைவு பின்வருமாறு இருக்கும் (உங்கள் உதாரணத்தில் நகலெடுத்து ஒட்டவும் மற்றும் உலாவியில் பார்க்கவும்) div குறிச்சொற்களைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு .தலைப்பு (அகலம்:600px; உயரம்:120px; எல்லை:1px திட கருப்பு; ) .sidebar (அகலம்:200px; உயரம்:300px; எல்லை:1px திட கருப்பு; மிதவை:இடது; ) .உள்ளடக்கம் (அகலம்: 370px; 1px திட கருப்பு;
இந்தக் கட்டுரையில் டேக் என்றால் என்ன, அது எங்கு பயன்படுத்தப்படுகிறது, படங்கள், உரைகள் மற்றும் பலவற்றை வைக்க குறிச்சொல்லை எவ்வாறு பயன்படுத்துவது என்பதைப் புரிந்துகொள்வோம். மேலும், குறிச்சொல் பெரும்பாலும் CSS நடைத் தாள்களுடன் இணைந்து பயன்படுத்தப்படுவது முக்கியமல்ல. அவற்றில் சிலவற்றையும் கையாள்வோம். எனவே, ஒரு குறிச்சொல் என்பது ஒரு html பக்கத்தின் ஒரு தொகுதி உறுப்பு ஆகும், இது வேலைவாய்ப்பைக் கட்டுப்படுத்தவும், உரைகள், படங்கள், இணைப்புகள் மற்றும் பிற பொருள்களுக்குப் பலதரப்பட்ட பண்புகளை வழங்கவும் வடிவமைக்கப்பட்டுள்ளது. தானாகவே (பண்புகள் மற்றும் css பாணிகள் இல்லாமல்), குறிச்சொல் html பக்கங்களின் கூறுகளை எந்த வகையிலும் பாதிக்காது. பாணிகளைப் பயன்படுத்தாமல், குறிச்சொல் ஒரு html பக்கத்தில் கூறுகளை வைக்கும் நோக்கம் கொண்டது. இதைச் செய்ய, குறிச்சொல்லில் align பண்புக்கூறு இருக்க வேண்டும். ஆனால் அடிக்காமல் நேராக பயிற்சிக்கு வருவோம். 2. html பக்கத்தில் உரைத் தொகுதிகளை வைக்க குறிச்சொற்கள் எவ்வாறு பயன்படுத்தப்படுகின்றன?குறிச்சொல்லைப் பயன்படுத்தி, பக்கத்தின் எந்தப் பகுதியிலும் எந்த உறுப்பையும் வைக்கலாம். உதாரணமாக, "TEXT" என்ற சொல் உள்ளது. அதை வைக்க, இது போன்ற குறிச்சொல்லைப் பயன்படுத்தவும்: உலாவியில் இது போல் தெரிகிறது: 3. குறிச்சொல்லைப் பயன்படுத்தி ஒரு படத்தை (படம்) வைப்பது எப்படி?குறிச்சொல்லைப் பயன்படுத்தி, html பக்கத்தில் உரையை மட்டுமல்ல, படங்களையும் தேவையான இடத்தில் விரைவாகவும் எளிதாகவும் வைக்கலாம். இது இப்படி செய்யப்படுகிறது: எங்களிடம் flow.jpg என்று ஒரு படம் உள்ளது என்று வைத்துக்கொள்வோம், அது எந்த கோப்பில் வைக்கப்படுகிறதோ அதே கோப்பகத்தில் (அதே கோப்புறையில்) வைக்கப்பட்டுள்ளது. மேலும் இதன் அகலம் 100 பிக்சல்கள் மற்றும் உயரம் 72 பிக்சல்கள். இந்த வழக்கில், குறிச்சொற்கள் இவ்வாறு எழுதப்படுகின்றன: உலாவியில் இது போல் தெரிகிறது:
குறிச்சொற்களைப் பயன்படுத்தி, நீங்கள் ஒரு html பக்கத்தில் எளிய உரை அல்லது படங்களை மட்டுமல்ல, இணைப்புகளையும் வைக்கலாம். இது இப்படி செய்யப்படுகிறது: http://site என்ற தளத்திற்கு செல்லும் html பக்கத்தில் எங்காவது ஒரு இணைப்பை நிறுவ வேண்டும் என்று வைத்துக்கொள்வோம். கடந்த காலத்திலிருந்து நீங்கள் ஏற்கனவே அறிந்திருக்க வேண்டும், தளத்திற்கான இணைப்பு இப்படி எழுதப்பட்டுள்ளது: பாடங்கள்
சரி, குறிச்சொற்களைப் பயன்படுத்தி html இணையதளப் பக்கங்களில் உரைகள், படங்கள் மற்றும் இணைப்புகள் எவ்வாறு வைக்கப்படுகின்றன என்பதை நாங்கள் கண்டுபிடித்தோம். இங்கே சிக்கலான எதுவும் இல்லை. 5. tag மற்றும் css ஸ்டைல்களைப் பயன்படுத்தி html பக்கத்தில் எந்தப் பொருளையும் ஹைலைட் செய்வது எப்படி அல்லது டேக் மற்றும் css ஸ்டைல்களைப் பயன்படுத்தி ஒரு பொருளைச் சுற்றி ஒரு சட்டத்தை எப்படி உருவாக்குவது?இந்த தலைப்பைப் புரிந்துகொள்வது இன்னும் கொஞ்சம் கடினமாக உள்ளது, ஏனெனில் நாம் css பாணிகளை சேர்க்க வேண்டும். எனவே, வழக்கமாக ஒரு css நீட்டிப்புடன் ஒரு தனி உரை கோப்பு பாணிகளுக்காக உருவாக்கப்படுகிறது, இது அதன் தலைப்பில் உள்ள பக்கத்துடன் இணைக்கப்பட்டுள்ளது, அதாவது இல். நாங்கள் இதைச் செய்ய மாட்டோம், ஆனால் தேவையான அனைத்து பாணிகளையும் நேரடியாக குறிச்சொல்லில் எழுதுவோம். குறிச்சொல்லில் CSS பாணிகளை அமைக்க, style="பாணிகள் அரைப்புள்ளிகளால் பிரிக்கப்பட்டிருக்க வேண்டும்" என்பதைப் பயன்படுத்தவும்.
7. திணிப்பு-மேல்:30px;
- மேல் விளிம்பு 20 பிக்சல்கள் 8. திணிப்பு-இடது:15px; - தொகுதியை பச்சை நிறத்தில் நிரப்பவும் (நீங்கள் ஹெக்ஸாடெசிமலில் வண்ணங்களை அமைக்கலாம்) கோப்பைச் சேமித்த பிறகு, உலாவியில் பின்வருவனவற்றைக் காண்போம்:இங்கே ஸ்டைல் குறியீட்டை சிறிது சுருக்கலாம். எடுத்துக்காட்டாக, வெளிப்புற உள்தள்ளல் குறியீட்டை நீங்கள் இவ்வாறு சுருக்கலாம்:
- நீல நிறத்தைக் குறிப்பிடுதல் (பாணிகளில் உள்ள வண்ணம், வண்ணங்களைக் குறிக்கும் பதின்ம அமைப்பிலும், சிவப்பு, நீலம், மஞ்சள் போன்ற சாதாரண பொதுவான ஆங்கிலச் சொற்களிலும் குறிப்பிடலாம்)
3. எழுத்துரு அளவு:12px; நிச்சயமாக, உங்களிடம் அதிக அளவு உள்ளடக்கம் இருந்தால், குறிச்சொல்லில் நேரடியாக பாணிகளைப் பயன்படுத்துவது வசதியானது அல்ல, ஏனெனில் அவற்றைத் திருத்துவதற்கும் சேர்ப்பதற்கும் நிறைய நேரம் எடுக்கும். மேலும், இந்த கட்டுரையில் நான் ஏற்கனவே எழுதியது போல, செயலாக்கத்தை எளிதாக்க, அனைத்து பாணிகளும் ஒரு தனி கோப்பில் css நீட்டிப்புடன் வைக்கப்படுகின்றன, இது பக்கத்தின் html குறிச்சொல்லில் சேர்க்கப்பட்டுள்ளது. ஆனால் இதை நாங்கள் கருத்தில் கொள்ள மாட்டோம், ஏனெனில் இந்த தலைப்பு வலைத்தள வடிவமைப்பு தொடர்பான முற்றிலும் மாறுபட்ட நிரலாக்க மொழியாகும். நீங்கள் css, html மற்றும் பொதுவாக வீடியோ பாடங்களைப் பயன்படுத்தி இணையதளங்களை உருவாக்குவது எப்படி என்பதை அறிய விரும்பினால், எனது இணையதளத்தைப் பார்வையிடவும். Magento இன்ஜினைப் பயன்படுத்தி தொழில்முறை ஆன்லைன் ஸ்டோர்களை எவ்வாறு உருவாக்குவது என்பதை அறிய நீங்கள் திட்டமிட்டால், எனது ஆசிரியரின் வீடியோ பாடத்தின் உதவியுடன் இதைச் செய்வது எளிதானது. உறுப்பு ஒரு தொகுதி உறுப்பு மற்றும் உள்ளடக்கத்தின் தோற்றத்தை மாற்ற ஆவணத்தின் ஒரு பகுதியை முன்னிலைப்படுத்த நோக்கம் கொண்டது. பொதுவாக, ஒரு தொகுதியின் தோற்றம் பாணிகளைப் பயன்படுத்தி கட்டுப்படுத்தப்படுகிறது. ஒவ்வொரு முறையும் குறிச்சொல்லின் உள்ளே உள்ள நடையை விவரிக்காமல் இருக்க, நீங்கள் நடையை வெளிப்புற நடை தாளாகப் பிரிக்கலாம் மற்றும் தேர்வாளரின் பெயருடன் குறிச்சொல்லில் ஒரு வகுப்பு அல்லது ஐடி அளவுருவைச் சேர்க்கலாம். மற்ற தொகுதி கூறுகளைப் போலவே, குறிச்சொல்லின் உள்ளடக்கம் எப்போதும் புதிய வரியில் தொடங்குகிறது. அதன் பிறகு ஒரு வரி இடைவெளியும் சேர்க்கப்படுகிறது.... தொடரியல்அளவுருக்கள் சீரமைத்தல் குறிச்சொல் உள்ளடக்கத்தின் சீரமைப்பைக் குறிப்பிடுகிறது. தலைப்பு உள்ளடக்கத்திற்கு ஒரு உதவிக்குறிப்பைச் சேர்க்கிறது. மூடும் குறிச்சொல்
.block2 (
XHTML 1.1 இல் அனுமதிக்கப்படவில்லை விளக்கம்... வாதங்கள் மையம் உரையை மையத்திற்கு சீரமைக்கிறது. உரைத் தொகுதி அமைந்துள்ள உலாவி சாளரத்தில் அல்லது கொள்கலனில் உரை கிடைமட்டமாக வைக்கப்படுகிறது. வலைப்பக்கத்தின் மையத்தில் இயங்கும் கண்ணுக்குத் தெரியாத அச்சில் உரையின் கோடுகள் கட்டப்பட்டிருப்பது போல் தெரிகிறது. இந்த சீரமைப்பு முறை தலைப்புகள் மற்றும் பல்வேறு கையொப்பங்களில் தீவிரமாகப் பயன்படுத்தப்படுகிறது, இது உரை வடிவமைப்பிற்கு அதிகாரப்பூர்வமான மற்றும் உறுதியான தோற்றத்தை அளிக்கிறது.மற்ற எல்லா நிகழ்வுகளிலும், மைய சீரமைப்பு அரிதாகவே பயன்படுத்தப்படுகிறது, ஏனெனில் இதுபோன்ற உரையை அதிக அளவில் படிக்க சிரமமாக உள்ளது.
#அடுக்கு1 ( விளக்கம்... பின்னணி: #fc0;திணிப்பு: 5px; #அடுக்கு2 (பின்னணி: #fff;
திணிப்பு: 10px; TITLE அளவுரு
மவுஸ் கர்சர் உள்ளடக்கத்தின் மீது வட்டமிடும்போது தோன்றும் உதவிக்குறிப்பு வடிவத்தில் விளக்க உரையை கொள்கலனில் சேர்க்கிறது.
வாதங்கள்ஏதேனும் உரைச் சரம். சரம் இரட்டை அல்லது ஒற்றை மேற்கோள்களில் இணைக்கப்பட வேண்டும்.
நீங்களும் விரும்பலாம் |
