li css நிறம். உரையில் பொட்டுகள் அல்லது எண்ணைச் சேர்க்கவும்
- எண்ணிடப்பட்ட பட்டியல்களுக்கான நிலையான புல்லட்டின் தோற்றத்தை மாற்றுகிறது
- புல்லட் பட்டியல்களுக்கு புல்லட் வகையை அமைத்தல்
- பட்டியல் உருப்படிகளுக்கு புல்லட்டுக்குப் பதிலாக படத்தை அமைத்தல்
HTML குறிச்சொற்களைப் பயன்படுத்தி, புல்லட்களைக் கொண்ட இரண்டு வகையான பட்டியல்களை நீங்கள் உருவாக்கலாம்: எண் மற்றும் புல்லட். இயல்பாக, பெரும்பாலான உலாவிகள் புல்லட் செய்யப்பட்ட பட்டியல் குறிப்பான்களை வட்டமாகவும், எண்ணிடப்பட்ட பட்டியல் குறிப்பான்களை எண்களாகவும் காட்டுகின்றன. நிலையான குறிப்பான்களின் தோற்றத்தை மாற்றும் திறனை CSS வழங்குகிறது. அடுத்து, வெவ்வேறு வகையான குறிப்பான்களுடன் எடுத்துக்காட்டுகளை நாங்கள் காண்பிப்போம், அதன் உதவியுடன் உங்கள் பட்டியல்களின் தோற்றத்தை மாற்றலாம்.
குறிப்பான்களைத் திருத்துதல் மற்றும் நீக்குதல்
CSS இல் மார்க்கரின் நிலையான தோற்றத்தை மாற்ற, பட்டியல்-பாணி-வகைப் பண்புகளைப் பயன்படுத்தவும்.
எண்ணிடப்பட்ட பட்டியல்களுக்கு சில வகையான தோட்டாக்களைக் காட்டும் எடுத்துக்காட்டு:
CSS சொத்து:
பட்டியல்-பாணி-வகை:
முடிவு:
- பட்டியல்-பாணி-வகை சொத்து மதிப்பைக் கிளிக் செய்யவும்
- குறிப்பான்கள் மாறுவதைப் பாருங்கள்
- உங்கள் பட்டியல்களுக்கு மிகவும் பொருத்தமான தோட்டாக்களைப் பயன்படுத்தவும்
ஓல்#மைலிஸ்ட் (
பட்டியல்-பாணி-வகை: தசம ;
}
முடிவைப் பார்க்க, ஏதேனும் சொத்து மதிப்பைக் கிளிக் செய்யவும்
புல்லட் செய்யப்பட்ட பட்டியல்களுக்கு, மூன்று வகையான குறிப்பான்கள் மட்டுமே உள்ளன, அவை வட்டம், வட்டு மற்றும் சதுர மதிப்புகளைப் பயன்படுத்தி குறிப்பிடலாம்:
- காபி
- தேநீர்
- காபி
- தேநீர்
- காபி
- தேநீர்
none மதிப்பைப் பயன்படுத்தி, பட்டியலில் உள்ள உருப்படிகளிலிருந்து குறிப்பான்களை அகற்றலாம், ஆனால் இடது உள்தள்ளல் அப்படியே இருக்கும்:
- காபி
- தேநீர்
- காபி
- தேநீர்
குறிப்பான்களை படங்களுடன் மாற்றுதல்
இயல்புநிலை குறிப்பான்கள் எதுவும் உங்களுக்குப் பொருந்தவில்லை என்றால், அவற்றை எந்தப் படத்துடனும் மாற்றும் திறனை CSS வழங்குகிறது.
பட்டியலுக்கு ஏற்றவாறு படம் தானாக அளவிடப்படாது மற்றும் அதன் சொந்த அளவில் காட்டப்படும் என்ற உண்மையை கணக்கில் எடுத்துக் கொள்ளுங்கள், எனவே நீங்கள் அளவுக்கு பொருத்தமான ஒரு படத்தைத் தேர்ந்தெடுக்க வேண்டும் அல்லது ஏற்கனவே உள்ளதைத் திருத்த வேண்டும், அதைக் குறைக்க வேண்டும் அல்லது பெரிதாக்க வேண்டும். தேவையான அளவு:
- காபி
- தேநீர்
- காபி
- தேநீர்
பட்டியல் உள்தள்ளல்
பட்டியல் உருப்படிகளிலிருந்து புல்லட்களை அகற்றும்போது, உலாவியின் இயல்புநிலை இடது திணிப்பு அளவையும் அகற்றலாம் அல்லது குறைக்கலாம். க்கு முழுமையான நீக்கம்திணிப்பு நீங்கள் திணிப்பு-இடது சொத்தை பயன்படுத்த வேண்டும், இது உங்களை சரிசெய்ய அனுமதிக்கிறது திணிப்பு:
- காபி
- தேநீர்
- காபி
- தேநீர்
எடுத்துக்காட்டில், இடது பக்கத்தில் உள்ள உள்தள்ளலை நாங்கள் முழுவதுமாக அகற்றினோம், எனவே பட்டியல் உருப்படிகள் இப்போது உலாவி சாளரத்தின் விளிம்பில் பொருந்துகின்றன. நீங்கள் எடுத்துக்காட்டில் இருந்து பார்க்க முடியும் என, புல்லட் செய்யப்பட்ட பட்டியல் சரியாகக் காட்டப்படும், ஆனால் எண்ணிடப்பட்ட பட்டியலில் குறிப்பான்கள் இல்லை. காரணம் குறிப்பான்களிலேயே உள்ளது - முன்னிருப்பாக, குறிப்பான்கள் பட்டியல் உருப்படிகளின் உள்ளடக்கத்தின் ஒரு பகுதியாக இல்லை, எனவே நீங்கள் இடது உள்தள்ளலை அகற்றினால் அவை உறுப்புகளின் உள்ளடக்கங்களுடன் நகராது.
பட்டியல்-பாணி-நிலைப் பண்பு, பட்டியலின் உருப்படிகளுக்கு உள்ளே அல்லது வெளியே புல்லட் வைக்கப்பட வேண்டுமா என்பதைக் குறிப்பிடுகிறது. இந்த சொத்து இரண்டு மதிப்புகளை எடுக்கலாம்:
- வெளியே - மார்க்கர் உள்ளடக்கத்தின் இடதுபுறத்தில் அமைந்துள்ளது (இது இயல்புநிலை)
- உள்ளே - மார்க்கர் உள்ளடக்கத்துடன் பட்டியல் உருப்படியின் உள்ளே அமைந்துள்ளது
இப்போது நீங்கள் முந்தைய உதாரணத்தை மீண்டும் எழுதலாம், இதனால் இடதுபுறத்தில் உள்ள உள்தள்ளல் அகற்றப்படும், ஆனால் குறிப்பான்கள் உலாவியின் விளிம்பிலிருந்து வெளியேறாது:
- காபி
- தேநீர்
- காபி
- தேநீர்
- காபி
- தேநீர்
எடுத்துக்காட்டில், பட்டியல் உருப்படிகளின் எல்லைகளை பார்வைக்குக் காட்ட ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு பார்டர் சேர்க்கப்பட்டது.
இந்த டுடோரியல் கட்டுரை CSS இல் பட்டியல்களுடன் பணிபுரிவதில் கவனம் செலுத்தும், புல்லட்டின் வகையை மாற்றுவது, பட்டியல் உருப்படியுடன் தொடர்புடைய புல்லட்டின் நிலை, உங்கள் சொந்த தோட்டாக்களை உருவாக்குவது மற்றும் புல்லட்டின் நிறத்தை மாற்றுவது எப்படி என்பதை நீங்கள் கற்றுக் கொள்வீர்கள்.
HTML 5 இரண்டு முக்கிய வகை பட்டியல்களை (விளக்கப் பட்டியல்கள் மற்றும் மெனு உருப்படிகளைத் தவிர்த்து) பயன்படுத்துகிறது என்பது உங்களுக்கு ஏற்கனவே தெரியும் என்று நினைக்கிறேன்.
- எண்ணிடப்பட்ட (வரிசைப்படுத்தப்பட்ட) பட்டியல் - HTML உறுப்பு
- புல்லட் செய்யப்பட்ட (வரிசைப்படுத்தப்படாத) பட்டியல் - HTML உறுப்பு
இந்த பட்டியல்களின் தோற்றத்தை வடிவமைப்பதற்கான பல விருப்பங்களை CSS வழங்குகிறது, முக்கியவற்றைப் பார்ப்போம்.
மார்க்கர் வகையை மாற்றுதல்
நான் கருத்தில் கொள்ள விரும்பும் முதல் சொத்து இந்த சொத்து list-style-type , இது பட்டியல் உருப்படியின் மார்க்கரின் வகையைக் குறிப்பிடுகிறது.
வழிசெலுத்தல் மெனுக்கள், எடுத்துக்காட்டாக, வழக்கமான புல்லட் பட்டியல்களால் (HTML உறுப்பு
- ), இயல்புநிலையாக அதன் மார்க்கர் நிரப்பப்பட்ட வட்டத்தின் வடிவத்தில் காட்டப்படும், அதை அகற்ற நீங்கள் பயன்படுத்த வேண்டும் CSS சொத்துமீ பட்டியல்-பாணி-வகை மதிப்பு எதுவும் இல்லை:
உல்( பட்டியல்-பாணி-வகை: எதுவுமில்லை ; /* பட்டியலிலிருந்து மார்க்கரை அகற்று */
}
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- ) உங்கள் மார்க்கர் வகையை அமைக்க, அல்லது பின்வரும் எடுத்துக்காட்டில் காணப்படுவது போல், ஒரு குறிப்பிட்ட மார்க்கரை சம அல்லது ஒற்றைப்படைப் பட்டியல் கூறுகளுக்குப் பயன்படுத்தும் பாணிகளை உருவாக்கவும்:
பட்டியல்-பாணி-வகை சொத்தின் மாற்று பாணிகளின் எடுத்துக்காட்டு - பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
இந்த எடுத்துக்காட்டில் நாங்கள் எல்லாவற்றையும் வடிவமைத்துள்ளோம் ஒற்றைப்படைபட்டியல் கூறுகள் - குறிப்பான் வகையைக் குறிக்கிறது சதுரம், மற்றும் உரை நிறம் குறிக்கப்பட்டது பச்சை. கூடபட்டியல் கூறுகள் பின்வரும் பாணியைப் பெற்றன: சிவப்புஉரை நிறம் மற்றும் இல்லாமைகுறிப்பான்.
எங்கள் உதாரணத்தின் முடிவு:
பட்டியல் உருப்படியுடன் தொடர்புடைய மார்க்கரின் நிலை
எங்கள் உதாரணத்தின் முடிவு:
அரிசி. 71 பட்டியல்-பாணி-நிலைப் பண்பைப் பயன்படுத்துவதற்கான உதாரணம் (பட்டியல்களில் மார்க்கர் / எண்ணின் இருப்பிடம்).
உங்கள் சொந்த குறிப்பான்களை உருவாக்கவும்
விரைவில் அல்லது பின்னர் நீங்கள் உங்கள் சொந்த வடிவமைப்புடன் பட்டியல் குறிப்பான்களை உருவாக்க வேண்டும், CSS சொத்து பட்டியல்-பாணி-படத்திற்கு நன்றி, உங்கள் திட்டத்தில் இந்த விருப்பத்தை நாங்கள் செயல்படுத்த முடியும்.
சொத்து தொடரியல் பின்வருமாறு:
ol( list-style-image : url("images/primer.png") ; /* படத்தின் தொடர்புடைய பாதையைக் குறிப்பிடவும் */ } உல்( பட்டியல்-பாணி-படம் : ; /* படத்திற்கான முழுமையான பாதையைக் குறிப்பிடவும் */ }அடைப்புக்குறிக்குள் உள்ள மதிப்பு, நீங்கள் மார்க்கராகப் பயன்படுத்தத் திட்டமிடும் படத்திற்கான பாதைக்கு ஒத்திருக்கிறது. படத்திற்கான பாதை முழுமையானதாகவோ அல்லது தொடர்புடையதாகவோ இருக்கலாம். தொடர்புடைய பாதையைக் குறிப்பிடும்போது, முக்கியமான புள்ளிஅது தான் பக்கத்திற்கு அல்ல, நடைத் தாளின் இருப்பிடத்துடன் தொடர்புடையதாகக் குறிப்பிடப்பட வேண்டும்.
உங்கள் சொந்த குறிப்பான்களை வடிவமைக்க நீங்கள் திட்டமிட்டால், நீங்கள் கிராபிக்ஸ் எடிட்டிங் நிரலைப் பயன்படுத்த வேண்டும் அல்லது ஏற்கனவே பயன்படுத்த வேண்டும் ஆயத்த செட். நீங்கள் எல்லாவற்றையும் சரியாகச் செய்திருந்தாலும், படம் பக்கத்தில் ஏற்றப்படாமல் போகலாம் என்பதை நினைவில் கொள்க, அதன் பின்னணி வெளிப்படையானதாக மாறும்.
ஒரு ஆவணத்தில் தனிப்பயன் குறிப்பான்களைப் பயன்படுத்துவதற்கான உதாரணத்தைப் பார்ப்போம்:
CSS சொத்து பட்டியல்-பாணி-படத்தைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு .சோதனை(பட்டியல்-பாணி-படம்: url ("http://site/images/mini5.png"); /* குறிப்பானாகப் பயன்படுத்தப்படும் படத்திற்கான முழுமையான பாதையைக் குறிப்பிடவும் */ } - பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- பட்டியல் உருப்படி
- ) ஒரு போலி உறுப்பு (:முன்) உருவாக்கப்பட்ட உள்ளடக்கத்தை (CSS சொத்து உள்ளடக்கம்) செருகவும், இது ஒரே மாதிரியாக இருக்கும் தோற்றம்புல்லட் பட்டியலில் உள்ள மார்க்கர் (HTML உறுப்பு
- ), எங்கள் பணிக்கு ஏற்கனவே தேவையான நிறம் மட்டுமே.
- ) உள்ளே இருந்தால் இந்த வழக்கில்இந்த சொத்தை நீங்கள் பயன்படுத்தவில்லை என்றால், மார்க்கர் உரைக்கு அருகில் வைக்கப்படும், இது பார்வைக்கு அழகற்றது. உள் மற்றும் வேலை வெளிப்புற விளிம்புகள்"" பாடப்புத்தகத்தின் அடுத்த கட்டுரையில் கூறுகள் விரிவாக விவாதிக்கப்படும்.
தலைப்பில் கேள்விகள் மற்றும் பணிகள்
அடுத்த தலைப்புக்குச் செல்வதற்கு முன், நடைமுறை பணிகளை முடிக்கவும்:
முடிப்பதில் சிரமம் இருந்தால் நடைமுறை பணிநீங்கள் எப்பொழுதும் ஒரு தனி சாளரத்தில் உதாரணத்தைத் திறந்து, CSS குறியீடு என்ன பயன்படுத்தப்பட்டது என்பதைப் புரிந்துகொள்ள பக்கத்தை ஆய்வு செய்யலாம்.
2016-2019 டெனிஸ் போல்ஷாகோவ், நீங்கள் தளத்தில் கருத்துகள் மற்றும் பரிந்துரைகளை [email protected] க்கு அனுப்பலாம்
பணி
உரை நிறத்தை மாற்றாமல் பட்டியலில் உள்ள குறிப்பான்களின் நிறத்தை அமைக்கவும்.
தீர்வு
குறிப்பான்களின் நிறத்தை மாற்ற இரண்டு வழிகள் உள்ளன, அவற்றை எளிய மற்றும் தந்திரமானவை என்று அழைக்கலாம். ஒரு எளிய முறை உள்ளே உள்ளது
- ஒரு குறிச்சொல்லைச் சேர்க்கவும் , பின்னர் உரையை அதன் உள்ளே வைக்கிறோம். வேறு வார்த்தைகளில் கூறுவதானால், பாரம்பரிய திட்டத்திற்கு பதிலாக
- உரை
ஒரு வடிவமைப்பு உருவாக்க- உரை
. இந்த வழக்கில், குறிப்பான்களின் நிறம் LI தேர்வாளருக்கான வண்ண பாணி பண்புகளால் தீர்மானிக்கப்படுகிறது, மேலும் உரை வண்ணம் SPAN தேர்வாளரால் தீர்மானிக்கப்படுகிறது (எடுத்துக்காட்டு 1).எடுத்துக்காட்டு 1: உள்ளமை குறிச்சொற்களைப் பயன்படுத்துதல்
HTML5 CSS 2.1 IE Cr Op Sa Fx
பட்டியலில் உள்ள உரை மற்றும் தோட்டாக்களின் நிறம் - வயலின்
- கிட்டார்
- பைகள்
- பீப்பாய் உறுப்பு
- செலஸ்டா
இந்த எடுத்துக்காட்டின் முடிவு கீழே காட்டப்பட்டுள்ளது (படம் 1).
அரிசி. 1. முக்கிய உரையிலிருந்து நிறத்தில் வேறுபடும் குறிப்பான்கள்
அதன் எளிமை இருந்தபோதிலும், முறை சிரமமாக உள்ளது, குறிப்பாக பெரிய பட்டியல்களுடன், ஏனெனில் நீங்கள் இப்போது ஒவ்வொரு பட்டியல் உருப்படிக்கும் ஒரு குறிச்சொல்லைச் சேர்க்க வேண்டும். . எனவே, முற்றிலும் CSS அடிப்படையிலான ஒரு புத்திசாலித்தனமான முறையைப் பார்ப்போம்.
இன்டர்நெட் எக்ஸ்புளோரர் குரோம் ஓபரா சஃபாரி பயர்பாக்ஸ் அண்ட்ராய்டு iOS 8.0+ 1.0+ 7.0+ 3.1+ 1.0+ 1.0+ 1.0+ முக்கிய விஷயம் இதுதான்: பட்டியல்-பாணி-வகை சொத்து மூலம் அசல் பட்டியல் குறிப்பான்களை அகற்றி, போலி உறுப்பு மற்றும் உள்ளடக்கப் பண்புக்கு முன் எங்கள் சொந்த குறிப்பான்களைச் சேர்க்கிறோம். இந்த இணைப்பு ஒரு உறுப்புக்கு முன் ஏதேனும் உரை அல்லது குறியீட்டைச் செருக அனுமதிக்கிறது, இந்த விஷயத்தில் LI . மேலும், உரையின் வகை (நிறம், எழுத்துரு, பின்னணி, முதலியன) பாணிகள் மூலம் கட்டுப்படுத்தப்படலாம், எடுத்துக்காட்டு 2 இல் காட்டப்பட்டுள்ளது. இங்கே பத்தி சின்னம் ¶ குறிப்பான்களாகப் பயன்படுத்தப்படுகிறது.
எடுத்துக்காட்டு 2: போலி உறுப்புக்கு முன்:
HTML5 CSS 2.1 IE Cr Op Sa Fx
பட்டியல் மார்க்கர் நிறம் - வடக்கு
- தெற்கு
- மேற்கு
- கிழக்கு
இந்த எடுத்துக்காட்டின் முடிவு படத்தில் காட்டப்பட்டுள்ளது. 2.
அரிசி. 2. பாணிகளைப் பயன்படுத்தி உருவாக்கப்பட்ட குறிப்பான்கள்
வரம்பைப் பயன்படுத்தாமல் HTML பட்டியலில் தோட்டாக்களின் நிறத்தை மாற்றவும் (6)
என்னைப் பொறுத்தவரை, CSS போலி கூறுகளைப் பயன்படுத்துவதே சிறந்த வழி, எனவே வட்டு புல்லட் வட்டுக்கு இது இப்படி இருக்கும்:
உல் ( பட்டியல்-பாணி-வகை: எதுவுமில்லை; ) li ( நிலை: உறவினர்; ) li: முன் ( உள்ளடக்கம்: ""; காட்சி: தொகுதி; நிலை: முழுமையானது; அகலம்: 5px; /* உங்கள் தேவைகளுக்கு ஏற்ப */ உயரம்: 5px;* உங்கள் தேவைகளுக்கு ஏற்ப */ எல்லை-ஆரம்: 50% */ மேல்: /* உங்கள் தேவைகளுக்கு ஏற்ப சரிசெய்யவும்;
- முதலில்
- இரண்டாவது
- மூன்றாவது
- சுட்டிகளை வட்டமாக வைத்திருக்க அகலம் மற்றும் உயரம் சம மதிப்புகளாக இருக்க வேண்டும்
- நீங்கள் சதுர தோட்டாக்களை வைத்திருக்க விரும்பினால், எல்லை-ஆரம் பூஜ்ஜியமாக அமைக்கலாம்
மேலும் புல்லட் ஸ்டைல்களுக்கு நீங்கள் பிற css வடிவங்களைப் பயன்படுத்தலாம் https://css-tricks.com/examples/ShapesOfCSS/ (முக்கோணங்கள் போன்ற போலி உறுப்புகள் தேவையில்லாத ஒன்றைத் தேர்ந்தெடுக்கவும்)
பட்டியலில் உள்ள தோட்டாக்களின் நிறத்தை மாற்ற ஏதாவது வழி இருக்கிறதா என்று நான் யோசித்துக்கொண்டிருந்தேன்.
என்னிடம் ஒரு பட்டியல் உள்ளது:
- வீடு
- தோட்டம்
"span" மற்றும் "p" போன்ற எதையும் li இல் செருக முடியாது. சில புத்திசாலித்தனமான வழியில் நான் தோட்டாக்களின் நிறத்தை மாற்ற முடியுமா?
நீங்கள் ஒரு படத்தைப் பயன்படுத்தினால், அதைச் செய்யலாம். மேலும் படம் இல்லாமல், புல்லட்டின் நிறத்தை மாற்ற முடியாது, உரையை அல்ல.
ஒரு படத்தைப் பயன்படுத்துதல்
லி (list-style-image: url(images/yourimage.jpg); )
படத்தைப் பயன்படுத்தாமல்
நீங்கள் HTML மார்க்அப்பைத் திருத்த வேண்டும் மற்றும் பட்டியலின் உள்ளே உள்ள இடைவெளியைச் சேர்க்க வேண்டும் மற்றும் இடைவெளி மற்றும் இடைவெளி இரண்டையும் வெவ்வேறு வண்ணங்களில் வண்ணமயமாக்க வேண்டும்.
மார்க்கின் பதிலையும் நான் மிகவும் விரும்பினேன் - எனக்கு வெவ்வேறு வண்ண ULகளின் தொகுப்பு தேவை, மேலும் வகுப்பைப் பயன்படுத்துவது எளிதாக இருக்கும். ஆரஞ்சுக்கு நான் பயன்படுத்தியது இங்கே, எடுத்துக்காட்டாக:
Ul.orange ( list-style: none; padding: 0px; ) ul.orange > li:before ( உள்ளடக்கம்: "\25CF "; எழுத்துரு அளவு: 15px; நிறம்: #F00; விளிம்பு-வலது: 10px; திணிப்பு: 0px வரி உயரம்: 15px;
மேலும், "உள்ளடக்கத்திற்கு" நான் பயன்படுத்திய ஹெக்ஸ் குறியீடு மார்க்ஸின் (அந்த ஹெக்ஸ் வட்டம் மிகவும் உயரமாக இருந்தது) வேறு பல வடிவங்களையும் (சதுரங்கள், முக்கோணங்கள்) கண்டேன் , வட்டங்கள், முதலியன)
பட்டியல்-பாணி-படத்தை svg s உடன் இணைக்கலாம் css இல் உட்பொதிக்கவும்! இந்த முறை "புல்லட்டுகள்" மீது நம்பமுடியாத கட்டுப்பாட்டை வழங்குகிறது, அது எதையும் ஆகலாம்.
சிவப்பு வட்டத்தைப் பெற, பின்வரும் css ஐப் பயன்படுத்தவும்:
"); }
ஆனால் இது ஆரம்பம்தான். இந்த தோட்டாக்கள் மூலம் நாம் விரும்பும் எந்த பைத்தியக்காரத்தனமான காரியத்தையும் செய்ய இது அனுமதிக்கிறது. வட்டங்கள் அல்லது செவ்வகங்கள் எளிதானது, ஆனால் svg மூலம் நீங்கள் வரையக்கூடிய எதையும், நீங்கள் அங்கு செல்லலாம்! கீழே உள்ள ஆப்பிள் ஆப்பிள் உதாரணத்தைப் பார்க்கவும்:
ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul ul ul ul ul ( list-style-image: url("data:image/svg+xml, "); ) ul.bulls-eye ( list-style-image: url("data:image/svg+xml, "); ul.multi-color (list-style-image: url("data:image/svg+xml, "); }
- பெரிய வட்டங்கள்!
- பெரிய செவ்வகங்கள்!
- பி
- சிறிய வட்டங்கள்!
- c
- சிறிய செவ்வகங்கள்!
- காளைகள்
- கண்கள்.
- பல
- நிறம்
பண்பு அகலம்/உயரம்
சில உலாவிகளுக்கு அகலம் மற்றும் உயரம் பண்புக்கூறுகள் அமைக்கப்பட வேண்டும்
குறியாக்கங்கள்
@Marc மற்றும் @jessica இன் தீர்வுகள் இரண்டையும் உருவாக்கி, நான் பயன்படுத்தும் தீர்வு இதுதான்:
லி ( நிலை: உறவினர்; ) li: முன் ( உள்ளடக்கம்: ""; காட்சி: தொகுதி; நிலை: முழுமையான; அகலம்: 6px; உயரம்: 6px; எல்லை-ஆரம்: 6px; இடது: -20px; மேல்: .5em; பின்னணி- நிறம்: #000;
எழுத்துரு அளவுகளுக்கு நான் em ஐப் பயன்படுத்துகிறேன், எனவே நீங்கள் மேலே .5em என அமைத்தால் அது எப்போதும் உங்கள் உரையின் முதல் வரியின் நடுவில் வைக்கப்படும். நான் இடது:-20px ஐப் பயன்படுத்தினேன், ஏனெனில் இது இயல்புநிலை இடது:-20px உலாவிகளில் நிலை: பெற்றோர் திணிப்பு/2
இது மிகவும் பழைய கேள்வி என்று எனக்குத் தெரியும், ஆனால் நான் இதை விளையாடிக் கொண்டிருந்தேன், நான் பார்க்காத ஒரு வழியைக் கண்டுபிடித்தேன். பட்டியலுக்கு வண்ணத்தைக் கொடுத்து, ::முதல் வரி தேர்வி::முதல் வரியைப் பயன்படுத்தி உரை நிறத்தை மேலெழுதவும். நான் நிபுணன் இல்லை, எனவே இந்த அணுகுமுறையில் ஏதோ தவறு இருக்கலாம், ஆனால் அது செயல்படுவதாகத் தெரிகிறது.
li (நிறம்: நீலம்; ) li::முதல் வரி ( நிறம்: கருப்பு; )
- வீடு
- தோட்டம்
உரையை ஒழுங்கமைக்க அல்லது தொடர்ச்சியான செயல்முறையைக் காட்ட புல்லட் அல்லது எண்ணிடப்பட்ட பட்டியல்களைப் பயன்படுத்தலாம் பவர்பாயிண்ட் விளக்கக்காட்சிகள்.
குறிப்பான்களின் நிறம் மற்றும் பாணியை மாற்றுதல் மற்றும் வரம்புகளைப் புரிந்துகொள்வது
உங்கள் PowerPoint விளக்கக்காட்சியில் தோட்டாக்கள் அல்லது எண்களின் நிறம், நடை அல்லது அளவை மாற்றலாம், மேலும் நீங்கள் தொடங்க விரும்பும் எண்ணையும் மாற்றலாம்.
பல ஸ்லைடுகளுக்கு தனிப்பயன் பாணிகளைப் பயன்படுத்துங்கள்
சிறந்த வழிவிளக்கக்காட்சியில் உள்ள அனைத்து ஸ்லைடுகளுக்கும் தனிப்பயன் பட்டியல் பாணிகளைப் பயன்படுத்தவும் - ஸ்லைடு மாஸ்டரை மாற்றவும். ஸ்லைடு மாஸ்டரில் நீங்கள் செய்யும் எந்தப் பட்டியல் அமைப்புகளும் சேமிக்கப்பட்டு அனைத்து ஸ்லைடுகளிலும் பயன்படுத்தப்படும். தனிப்பயன் பட்டியல் பாணிகளை உள்ளடக்கிய ஒன்று அல்லது அதற்கு மேற்பட்ட ஸ்லைடு தளவமைப்புகளை நீங்கள் திருத்தலாம் அல்லது உருவாக்கலாம், மேலும் உங்கள் பட்டியல் பாணிகளைப் பயன்படுத்த விரும்பும் உங்கள் விளக்கக்காட்சியில் உள்ள இடங்களில் அவற்றைச் சேர்க்கலாம்.
PowerPoint இல் வரம்புகளைப் பட்டியலிடவும்
நீங்கள் மற்றவற்றில் பயன்படுத்தக்கூடிய பவர்பாயின்ட்டில் உள்ள பட்டியல்களைக் கொண்டு விஷயங்களைச் செய்ய முடியாது அலுவலக திட்டங்கள், எடுத்துக்காட்டாக Word. எடுத்துக்காட்டாக, PowerPoint பின்வரும் அம்சங்களை ஆதரிக்காது:
கேள்விகள் மற்றும் பதில்கள்
விரிவான வழிமுறைகளுக்கு கீழே உள்ள பகுதியின் தலைப்பைக் கிளிக் செய்யவும்.
நான் எத்தனை வரிகளைச் சேர்த்தாலும் ஒரே ஒரு மார்க்கரை மட்டும் ஏன் பார்க்கிறேன்?
நீங்கள் பயன்படுத்துகிறீர்கள் என்பதை உறுதிப்படுத்திக் கொள்ளுங்கள் உரைபுலம் என்பது குறிப்பான்கள் அல்லது எண்கள், புலம் அல்ல தலைப்புகள். IN உரைஒவ்வொரு முறையும் நீங்கள் ஒரு விசையை அழுத்தும் போது, ஒரு எண் அல்லது ENTER மார்க்கர் தோன்றும். நீங்கள் CTRL+ENTER ஐ அழுத்தினால், தோட்டாக்கள் இல்லாமல் கூடுதல் வரிகளைப் பெறுவீர்கள் (புல்லட் அல்லது எண்ணிடப்பட்ட வரியில் விவரங்கள் அல்லது குறிப்புகளுக்கு).
களத்தில் தலைப்புகள்உரை ஒரு வரியாக தலைப்பு அல்லது தலைப்பாக இருக்கும் என்று எதிர்பார்க்கப்படுகிறது. நீங்கள் எண்கள் அல்லது தோட்டாக்களைப் பயன்படுத்தலாம், ஆனால் உரையின் அனைத்து வரிகளையும் ஒரே வரியாகக் கணக்கிடலாம், இதன் விளைவாக ஒரு புல்லட் அல்லது எண் கிடைக்கும்.
ஒவ்வொரு முறையும் ஒரு வரி சேர்க்கப்படும்போது குறிப்பான்களை உருவாக்குவதை எப்படி ரத்து செய்வது?
தோட்டாக்கள் மற்றும் எண்களை உருவாக்குவதை நிறுத்திவிட்டு, உரைக்குத் திரும்ப, கிளிக் செய்யவும் குறிப்பான்கள்அல்லது எண்ணிடுதல்மீண்டும் அதை முடக்க.
குறிப்பான் அல்லது எண்ணை நீக்க ENTER ஐ அழுத்தி BACKSPACE விசையை அழுத்தவும். நீங்கள் உரையைச் சேர்க்கலாம் அல்லது கூடுதல் வெற்று வரிகளைச் சேர்க்க Enter ஐ அழுத்தவும்.
பல நிலை குறிப்பான்களை எவ்வாறு பயன்படுத்துவது?
பட்டியலில் ஒரு துணைப் பட்டியலை உருவாக்க, நீங்கள் உள்தள்ள விரும்பும் வரியின் தொடக்கத்தில் உங்கள் கர்சரை வைக்கவும், பின்னர் தாவலில் வைக்கவும் வீடுகுழுவில் பத்திபொத்தானை கிளிக் செய்யவும் பட்டியல் அளவை அதிகரிக்கவும் .
1 . பட்டியல் அளவைக் குறைத்தல் (இன்டென்ட்)
2 . பட்டியல் அளவை அதிகரிக்கவும் (இன்டென்ட்)
பட்டியலில் உரையை மீண்டும் கீழ் நிலைக்கு நகர்த்த, கர்சரை வரியின் தொடக்கத்தில் வைத்து பின்னர் தாவலில் வைக்கவும் வீடுகுழுவில் பத்திபொத்தானை கிளிக் செய்யவும் பட்டியல் அளவைக் குறைக்கவும்.
புல்லட் அல்லது எண் மற்றும் ஒரு வரியில் உள்ள உரைக்கு இடையே உள்ள இடைவெளியை நான் எப்படி கூட்டலாம் அல்லது குறைக்கலாம்?
புல்லட் அல்லது எண் மற்றும் ஒரு வரியில் உள்ள உரைக்கு இடையே உள்ள இடைவெளியை அதிகரிக்க அல்லது குறைக்க, உரையின் வரியின் தொடக்கத்தில் கர்சரை வைக்கவும். ஆட்சியாளரைப் பார்க்க, தாவலில் பார்வைகுழுவில் காட்டுபெட்டியை சரிபார்க்கவும் ஆட்சியாளர். ரூலரில், தாவலைக் கிளிக் செய்யவும் (கீழே உள்ள படத்தில் காட்டப்பட்டுள்ளது) மற்றும் புல்லட் அல்லது எண் மற்றும் தொடர்புடைய உரைக்கு இடையே உள்ள தூரத்தை மாற்ற சுட்டிக்காட்டியை இழுக்கவும்.
உரை புலத்திற்கு வரையறுக்கப்பட்ட உள்தள்ளலைக் குறிக்க ஆட்சியாளர் மூன்று வெவ்வேறு குறிப்பான்களைக் காண்பிக்கிறார்.
1 . முதல் வரி உள்தள்ளல் - உண்மையான புல்லட் எழுத்து அல்லது எண்ணின் இருப்பிடத்தைக் குறிக்கிறது. ஒரு பத்தி புல்லட் இல்லை என்றால், இது உரையின் முதல் வரியின் நிலையைக் குறிக்கிறது.
2 . இடது உள்தள்ளல் - முதல் வரி மற்றும் உள்தள்ளல் குறிப்பான்கள் இரண்டின் மதிப்புகளையும் சரிசெய்து அவற்றின் தொடர்புடைய இடைவெளியை பராமரிக்கிறது.
3 . protrusion - உரையின் உண்மையான வரிகளின் இருப்பிடத்தைக் குறிக்கிறது. ஒரு பத்தி புல்லட் செய்யப்படவில்லை என்றால், அது உரையின் இரண்டாவது வரியின் (மற்றும் அடுத்தடுத்த வரிகள்) இருப்பிடத்தைக் குறிக்கிறது.
இயல்புநிலை பொட்டுகளை வேறு எழுத்துக்கு மாற்றுவது எப்படி?
Windows PC இல் PowerPoint இல் இயல்புநிலை புல்லட்களை மாற்ற, இந்தப் படிகளைப் பின்பற்றவும்:
தோட்டாக்களுக்கான ஸ்லைடு அல்லது உரைப் பெட்டியைச் செருகும்போது, புதிய இயல்புநிலை புல்லட் விருப்பங்கள் தோன்றும்.
மாஸ்டர்களுடன் பணிபுரிவது பற்றிய கூடுதல் தகவலுக்கு, ஸ்லைடு மாஸ்டரை மாற்று என்பதைப் பார்க்கவும்.
காட்ட பொட்டுக்குறிகள் அல்லது எண்களைப் பயன்படுத்தவும் பெரிய அளவுஉரை அல்லது தொடர் செயல்முறை மைக்ரோசாப்ட் பவர்பாயிண்ட் 2010 விளக்கக்காட்சி.
இந்த எடுத்துக்காட்டில் திணிப்பு-வலது சொத்து பயன்படுத்தப்பட்டது என்பதை நினைவில் கொள்ளவும், இது ஒவ்வொரு பட்டியல் உறுப்பிலும் (HTML உறுப்பு) வலதுபுறமாக உள் உள்தள்ளலை உருவாக்க அனுமதித்தது.
- ) உள்ளே இருந்தால் இந்த வழக்கில்இந்த சொத்தை நீங்கள் பயன்படுத்தவில்லை என்றால், மார்க்கர் உரைக்கு அருகில் வைக்கப்படும், இது பார்வைக்கு அழகற்றது. உள் மற்றும் வேலை வெளிப்புற விளிம்புகள்"" பாடப்புத்தகத்தின் அடுத்த கட்டுரையில் கூறுகள் விரிவாக விவாதிக்கப்படும்.
புல்லட் செய்யப்பட்ட (வரிசைப்படுத்தப்படாத) பட்டியல்களுக்கு (HTML உறுப்பு
- ) மூன்று வகையான குறிப்பான்கள் உள்ளன: நிரப்பப்பட்ட வட்டத்தின் வடிவத்தில் (வட்டு இயல்புநிலை மதிப்பு), ஒரு வெற்று வட்டம் (வட்டம்) வடிவில் ஒரு மார்க்கர் மற்றும் ஒரு சதுர வடிவில் (சதுரம்), மற்றும் எண்களுக்கு ( ஆர்டர் செய்யப்பட்ட) பட்டியல்கள் (உருப்படி
- ) மீதமுள்ள அனைத்து விருப்பங்களும். முழுமையான பட்டியல் பின்வரும் அட்டவணையில் கொடுக்கப்பட்டுள்ளது:
பொருள் விளக்கம் எதுவும் இல்லை மார்க்கர் காட்டப்படவில்லை. வட்டு நிரப்பப்பட்ட வட்டத்தின் வடிவத்தில் ஒரு குறிப்பான். இது இயல்புநிலை மதிப்பு. ஆர்மேனியன் எண் குறிப்பான் (பாரம்பரிய ஆர்மேனிய எண்முறை). வட்டம் ஒரு வட்ட வடிவில் குறிப்பான். cjk-ideographic எளிய ஐடியோகிராஃபிக் எண்கள். தசம எண் குறிப்பான் (1 உடன் தொடங்கும் தசம அரபு எண்கள்). தசம-முன்னணி-பூஜ்யம் எண் குறிப்பான் (தசம அரேபிய எண்கள் 1 இல் தொடங்கி, அதைத் தொடர்ந்து ஒரு முன்னணி பூஜ்ஜியம் - 01, 02, 03...). ஜார்ஜிய எண் குறிப்பான் (பாரம்பரிய ஜார்ஜிய எண்கள் - an, ban, gan, ..., he, tan, in, in-an...). ஹீப்ரு எண் குறிப்பான் (பாரம்பரிய ஹீப்ரு எண்முறை). ஹிரகனா எண் குறிப்பான் (ஜப்பானிய ஹிரகனா சிலபரி - a, i, u, e, o, ka, ki...). ஹிரகனா-இரோஹா எண் குறிப்பான் (ஜப்பனீஸ் சிலபரி ஹிரகனா இரோஹா - i, ro, ha, ni, ho, he, to, ...). கடகனா எண் குறிப்பான் (ஜப்பானிய கடகனா சிலபரி - A, I, U, E, O, KA, KI, ...). கடகனா-இரோஹா எண் குறிப்பான் (ஜப்பனீஸ் சிலபரி கடகனா இரோஹா - I, RO, HA, NI, HO, HE, TO, ...). குறைந்த-ஆல்ஃபா சிறிய அஸ்கி எழுத்துக்கள் (a, b, c, d...z). கீழ்-கிரீக் சிறிய கிரேக்க எழுத்துக்கள் (α, β, γ, δ, முதலியன). குறைந்த-லத்தீன் சிறிய லத்தீன் எழுத்துக்கள் (a, b, c, d,...z). கீழ்-ரோமன் ரோமானிய எண்கள் சிறிய எழுத்து(i, ii, iii, iv, v, முதலியன). சதுரம் ஒரு சதுர வடிவத்தில் குறிப்பான். மேல்-ஆல்ஃபா பெரிய எழுத்துகள் (A, B, C, D,...Z). மேல்-லத்தீன் பெரிய லத்தீன் எழுத்துக்கள் (A, B, C, D,...Z). மேல்-ரோமன் பெரிய எழுத்துக்களில் ரோமன் எண்கள் (I, II, III, IV, V, முதலியன). ஹீப்ரு, cjk-ideographic, hiragana, hiragana-iroha, katakana, katakana-iroha மதிப்புகள் உலாவியால் ஆதரிக்கப்படவில்லை என்பதை நினைவில் கொள்ளவும். இன்டர்நெட் எக்ஸ்புளோரர் .
உரையில் பட்டியல்-பாணி-வகை பண்புகளைப் பயன்படுத்துவதற்கான உதாரணத்தைப் பார்ப்போம்:
பட்டியல்-பாணி-வகைப் பண்புகளைப் பயன்படுத்துவதற்கான எடுத்துக்காட்டு - /* இயல்புநிலை மார்க்கர் வகை மதிப்பு (வட்டு) கொண்ட பட்டியல். */
- /* மார்க்கர் வகை கீழ்-ரோமன் கொண்ட எண்ணிடப்பட்ட பட்டியல் */
- /* புல்லட் வகை வட்டம் கொண்ட புல்லட் பட்டியல் */
இந்த எடுத்துக்காட்டில், நாங்கள் இரண்டு பாணிகளை உருவாக்கினோம், முதலில் மார்க்கர் வகையை அமைக்கிறது - சிற்றெழுத்து ரோமன் எண்கள் (குறைந்த-ரோமன் மதிப்பு), அதை எண்ணிடப்பட்ட பட்டியலில் (HTML உறுப்பு) பயன்படுத்தினோம்.
- ), மற்றும் புல்லட் செய்யப்பட்ட பட்டியலுக்கு (HTML உறுப்பு
- ) மார்க்கர் வகையை வெற்று வட்டமாக (மதிப்பு வட்டம்) அமைக்கும் பாணியைப் பயன்படுத்தியுள்ளோம்.
எங்கள் உதாரணத்தின் முடிவு:
பட்டியல்-பாணி-வகைப் பண்புகளை ஒரு பட்டியல் உறுப்புக்கு (HTML உறுப்பு
இந்த எடுத்துக்காட்டில் நாம் குறிப்பிடுகிறோம் முழுமையான பாதைகுறிப்பானாகப் பயன்படுத்தப்படும் படத்திற்கு.
எங்கள் உதாரணத்தின் முடிவு:
CSS இல் மார்க்கர் நிறத்தை மாற்றுகிறது
இந்த கட்டுரையை முடிக்க, உறுப்பு நிறத்தை மாற்றாமல், மார்க்கர் நிறத்தை மாற்றுவதற்கான மேம்பட்ட வழியைப் பார்ப்போம் CSS ஐப் பயன்படுத்துகிறதுஉள்ளடக்க சொத்து மற்றும் முன்னர் விவாதிக்கப்பட்ட: போலி உறுப்புக்கு முன்:
மார்க்கர் நிறத்தை மாற்றுவதற்கான எடுத்துக்காட்டு இந்த முறையின் சாராம்சம் என்னவென்றால், பட்டியலின் ஒவ்வொரு உறுப்புக்கும் முன் (HTML உறுப்பு