பிளாகர்: உங்கள் வலைப்பதிவில் குறியீட்டிற்கான CSS ஸ்டைல்
பிளாகர் உள்ளீட்டில் குறியீடு பகுதிகளை எப்படி உருவாக்கினேன் என்று ஒரு நண்பர் என்னிடம் கேட்டார். எனது பிளாகர் டெம்ப்ளேட்டில் CSSக்கான ஸ்டைல் டேக்கைப் பயன்படுத்தி இதைச் செய்தேன். நான் சேர்த்தது இதோ:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: இது HTML ஐ குறிவைக்கும் CSS விதி<p>
"குறியீடு" என்ற வர்க்கப் பெயரைக் கொண்ட கூறுகள் இந்த வகுப்பின் எந்தப் பத்தியும் பின்வரும் பண்புகளின்படி வடிவமைக்கப்படும்.font-family: Courier New;
: இந்த சொத்து எழுத்துரு குடும்பத்தை "கூரியர் நியூ" ஆக அமைக்கிறது. இலக்கிடப்பட்ட உறுப்புகளுக்குள் உரைக்கு பயன்படுத்தப்படும் எழுத்துருவை இது குறிப்பிடுகிறது.font-size: 8pt;
: இந்த பண்பு எழுத்துரு அளவை 8 புள்ளிகளாக அமைக்கிறது. இலக்கிடப்பட்ட உறுப்புகளில் உள்ள உரை இந்த எழுத்துரு அளவில் காட்டப்படும்.border-style: inset;
: இந்த சொத்து எல்லை பாணியை "உள்செட்" என அமைக்கிறது. இது இலக்கு உறுப்புகளைச் சுற்றியுள்ள எல்லைக்கு மூழ்கிய அல்லது அழுத்தப்பட்ட தோற்றத்தை உருவாக்குகிறது.border-width: 3px;
: இந்த பண்பு பார்டர் அகலத்தை 3 பிக்சல்களாக அமைக்கிறது. உறுப்புகளைச் சுற்றியுள்ள பார்டர் 3 பிக்சல்கள் தடிமனாக இருக்கும்.padding: 5px;
: இந்த பண்பு இலக்கு உறுப்புகளுக்குள் உள்ள உள்ளடக்கத்தைச் சுற்றி 5 பிக்சல்கள் திணிப்பைச் சேர்க்கிறது. இது உரைக்கும் எல்லைக்கும் இடையே இடைவெளியை வழங்குகிறது.background-color: #FFFFFF;
: இந்த பண்பு பின்னணி நிறத்தை வெள்ளை நிறமாக அமைக்கிறது (#FFFFFF). இலக்கு உறுப்புகளுக்குள் உள்ள உள்ளடக்கம் வெள்ளை பின்னணியைக் கொண்டிருக்கும்.line-height: 100%;
: இந்த பண்பு வரியின் உயரத்தை எழுத்துரு அளவின் 100% ஆக அமைக்கிறது. எழுத்துரு அளவுக்கேற்ப உரை வரிகள் இடைவெளியில் இருப்பதை இது உறுதி செய்கிறது.margin: 10px;
: இந்த பண்பு முழு உறுப்பையும் சுற்றி 10 பிக்சல்களின் விளிம்பைச் சேர்க்கிறது. இது இந்த உறுப்புக்கும் பக்கத்தில் உள்ள பிற உறுப்புகளுக்கும் இடையே இடைவெளியை வழங்குகிறது.
வழங்கப்பட்ட CSS குறியீடு HTML பத்திகளுக்கான பாணியை "குறியீடு" வகுப்பைக் கொண்டு வரையறுக்கிறது. இந்த பத்திகளுக்கான எழுத்துரு, எழுத்துரு அளவு, பார்டர் ஸ்டைல், பார்டர் அகலம், திணிப்பு, பின்னணி நிறம், கோட்டின் உயரம் மற்றும் விளிம்பு ஆகியவற்றை இது அமைக்கிறது. பிளாகர் இடுகையில் உள்ள குறியீடு துணுக்குகள் அல்லது முன் வடிவமைத்த உரைக்கு குறிப்பிட்ட தோற்றத்தை அளிக்க இந்த பாணியைப் பயன்படுத்தலாம்.
இது எப்படி இருக்கும் என்பது இங்கே:
p.code {
எழுத்துரு குடும்பம்: கூரியர் புதியது;
எழுத்துரு அளவு: 8pt;
எல்லை-பாணி: உள்ளீடு;
எல்லை அகலம்: 3px;
திணிப்பு: 5px;
பின்னணி நிறம்: #FFFFFF;
வரி உயரம்: 100%;
விளிம்பு: 10px;
}
இனிய குறியீட்டு முறை!