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

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

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





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



1. எளிதான பத்தி வடிவமைப்பிற்கான அடிப்படை CSS குறியீடு

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





உங்களுக்கு ஒவ்வொரு பத்தியும் வேண்டும் என்று சொல்லலாம் (

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

தொடர்புடையது: HTML ஏமாற்று தாள்



இதற்கான CSS குறியீடு:

p { font-size: 120%; color: dimgray; }

எளிமையானது! இப்போது, ​​உலாவி ஒரு பத்தியை வழங்கும்போதெல்லாம், உரை அளவு (இயல்பான 120 சதவீதம்) மற்றும் வண்ணம் ('மங்கலானது') பெறும்.



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

2. எழுத்து வழக்கை மாற்ற CSS உதாரணம்

சிறிய தொப்பிகளில் இருக்க வேண்டிய பத்திகளுக்கு ஒரு பெயரை உருவாக்க வேண்டுமா? அதற்கான CSS மாதிரி:



p.smallcaps { font-variant: small-caps; }

முற்றிலும் சிறிய தொப்பிகளில் ஒரு பத்தியை உருவாக்க, சற்று வித்தியாசமான HTML டேக் பயன்படுத்தவும். இது எப்படி இருக்கிறது என்பது இங்கே:

Your paragraph here.

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

உரையின் தொகுப்பை ஒரு குறிப்பிட்ட வழக்கிற்கு மாற்ற விரும்பினால், இந்த CSS குறியீடு எடுத்துக்காட்டுகளைப் பயன்படுத்தவும்:

text-transform: uppercase; text-transform: lowercase; text-transform: capitalize;

கடைசியாக ஒவ்வொரு வாக்கியத்தின் முதல் எழுத்தையும் பெரிதாக்குகிறது.

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

a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

இணைப்புகளுடன், ஒவ்வொரு 'a' யையும் ஒரு பெருங்குடல் பின்பற்றுகிறது, ஒரு புள்ளி அல்ல.

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

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

a { text-decoration: none; }

இணைப்பு ('a') டேக் உள்ள எதுவும் அடிக்கோடிடாமல் இருக்கும். பயனர் அதன் மீது வட்டமிடும் போது அதை அடிக்கோடிட்டுக் காட்ட விரும்புகிறீர்களா? வெறுமனே சேர்க்கவும்:

a:hover { text-decoration: underline; }

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

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

a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

இந்த CSS மாதிரி குறியீட்டை விளக்குவோம்.

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

பின்னணி வண்ணம் பின்னணி-வண்ணம் மற்றும் உரை வண்ணம் வண்ணத்துடன் அமைக்கப்பட்டுள்ளது. திணிப்பு பெட்டியின் அளவை வரையறுக்கிறது --- உரை 10px செங்குத்தாகவும் 25px கிடைமட்டமாகவும் திணிக்கப்படுகிறது.

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

ஆண்ட்ராய்டில் ஒரே மாதிரியான இரண்டு செயலிகளை எப்படி வைத்திருப்பது

சிஎஸ்எஸ் குறியீடு 'காட்சி: இன்லைன்-பிளாக்' இன்னும் கொஞ்சம் சிக்கலானது. சுருக்கமாக, பொருளின் உயரம் மற்றும் அகலத்தை அமைக்க இது உங்களை அனுமதிக்கிறது. அது செருகப்படும்போது அது ஒரு புதிய வரியைத் தொடங்குவதை உறுதி செய்கிறது.

6. உரைப் பெட்டியை உருவாக்குவதற்கான CSS உதாரணக் குறியீடு

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

p.important { border-style: solid; border-width: 5px; border-color: purple; }

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

Your important paragraph here.

எவ்வளவு பெரிய பத்தி இருந்தாலும் இது வேலை செய்யும்.

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

border-width: 5px 8px 3px 9px;

இதன் விளைவாக ஐந்து பிக்சல்களின் மேல் எல்லை, எட்டின் வலது எல்லை, மூன்று கீழே, மற்றும் இடது எல்லை அளவு ஒன்பது பிக்சல்கள்.

7. அடிப்படை CSS குறியீட்டைக் கொண்டு மையங்களை இணைக்கவும்

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

ஒரு தொகுதி உறுப்புக்கு (வழக்கமாக ஒரு படம்), மார்ஜின் பண்புக்கூறு பயன்படுத்தவும்:

.center { display: block; margin: auto; }

இது உறுப்பு ஒரு தொகுதியாக காட்டப்படுவதையும் ஒவ்வொரு பக்கத்திலும் உள்ள விளிம்பு தானாக அமைக்கப்படுவதையும் உறுதி செய்கிறது. கொடுக்கப்பட்ட பக்கத்தில் அனைத்து படங்களையும் மையப்படுத்த விரும்பினால், img டேக்கில் 'மார்ஜின்: ஆட்டோ' ஐ கூட சேர்க்கலாம்:

img { margin: auto; }

இது ஏன் இந்த வழியில் வேலை செய்கிறது என்பதை அறிய, பார்க்கவும் W3C இல் CSS பெட்டி மாதிரி விளக்கம் .

ஆனால் நீங்கள் CSS உடன் உரையை மையப்படுத்த விரும்பினால் என்ன செய்வது? இந்த மாதிரி CSS ஐப் பயன்படுத்தவும்:

.centertext { text-align: center; }

ஒரு பத்தியில் உரையை மையப்படுத்த 'மைய உரை' வகுப்பைப் பயன்படுத்த வேண்டுமா? வெறுமனே அந்த வகுப்பை சேர்க்கவும்

குறிச்சொல்:

This text will be centered.

8. திணிப்பை சரிசெய்வதற்கான CSS உதாரணங்கள்

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

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

img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; }

ஒரு குறுகிய CSS அறிவுறுத்தல் உள்ளது, இருப்பினும், இந்த தகவல்கள் அனைத்தையும் ஒரே வரியில் வழங்குகிறது:

img { padding: 40px 25px 40px 25px; }

இது மேல், வலது, கீழ் மற்றும் இடது திணிப்புகளை சரியான எண்ணுக்கு அமைக்கிறது. பயன்படுத்தப்பட்ட இரண்டு மதிப்புகளுக்கு நன்றி (40 மற்றும் 25) நீங்கள் அதை இன்னும் குறுகியதாக மாற்றலாம்:

img { padding: 40px 25px }

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

9. CSS குறியீட்டுடன் அட்டவணை வரிசைகளை முன்னிலைப்படுத்தவும்

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

tr:hover { background-color: #ddd; }

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

10. வெளிப்படையான மற்றும் ஒளிபுகா இடையே படங்களை மாற்றுவதற்கான எடுத்துக்காட்டு CSS

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

img { opacity: 0.5; filter: alpha(opacity=50); }

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

இப்போது படங்கள் சற்று வெளிப்படையாக இருப்பதால், அவற்றை மவுஸ்ஓவரில் முழுமையாக ஒளிபுகா செய்ய முடியும்:

img:hover { opacity: 1.0; filter: alpha(opacity=100); }

மூல குறியீடு கொண்ட 10 CSS உதாரணங்கள்

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

அந்த 10 சுலபமான CSS குறியீடு எடுத்துக்காட்டுகள் மீண்டும் பெறப்பட்டன:

  1. எளிதான பத்தி வடிவமைத்தல்
  2. கடித வழக்கை மாற்றவும்
  3. இணைப்பு வண்ணங்களை மாற்றவும்
  4. இணைப்பு அடிக்கோடுகளை அகற்று
  5. இணைப்பு பொத்தானை உருவாக்கவும்
  6. ஒரு உரை பெட்டியை உருவாக்கவும்
  7. மைய-சீரமைப்பு கூறுகள்
  8. திணிப்பை சரிசெய்யவும்
  9. அட்டவணை வரிசைகளை முன்னிலைப்படுத்தவும்
  10. படங்களை ஒளிபுகா செய்ய

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

பகிர் பகிர் ட்வீட் மின்னஞ்சல் அத்தியாவசிய CSS3 பண்புகள் ஏமாற்று தாள்

அத்தியாவசிய CSS தொடரியல் எங்கள் CSS3 பண்புகள் ஏமாற்று தாள்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்
  • நிரலாக்க
  • வலை வடிவமைப்பு
  • CSS
  • ஸ்கிரிப்டிங்
எழுத்தாளர் பற்றி கிறிஸ்டியன் காவ்லி(1510 கட்டுரைகள் வெளியிடப்பட்டன)

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

கிறிஸ்டியன் காவ்லியிடமிருந்து மேலும்

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

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

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