CSS ஒரு படத்தை சுற்றி உரை மடக்கு எப்படி

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

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

CSS ஐப் பயன்படுத்துதல்

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

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

   

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

   

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

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

   . லெஃப்டி {

   மிதவை: இடது;

   திணிப்பு: 0 20px 20px 0;

   }

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

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

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

   .right {

   மிதவை: சரி;

   திணிப்பு: 0 0 20px 20px;

   }

   நாங்கள் எழுதிய முதல் CSS கிட்டத்தட்ட ஒரே மாதிரியாக இருப்பதை நீங்கள் காணலாம். ஒரே வித்தியாசம் என்னவென்றால், நாம் "float" சொத்து மற்றும் நாங்கள் பயன்படுத்துகின்ற padding மதிப்புகளுக்கு பயன்படுத்துகிறோம் (வலதுபுறத்திற்கு பதிலாக எங்கள் படத்தின் இடது பக்கத்தில் சிலவற்றை சேர்த்து).

6. இறுதியாக, உங்கள் HTML இல் "இடது" இருந்து "வலது" என்ற படத்தின் வர்க்கத்தின் மதிப்பை மாற்றுவீர்கள்:

   

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

CSS ஐ பதிலாக HTML ஐ பயன்படுத்தி (ஏன் இதை செய்யக்கூடாது)

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