Home-theater-designers
CSS காட்சி பண்பு வலை வடிவமைப்பாளர்களுக்கு ஒரு சக்திவாய்ந்த கருவியாகும். நினைவில் கொள்ள எளிதான எளிய மதிப்புகளுடன், குறைந்தபட்ச ஸ்டைலிங் மூலம் இணையதள உறுப்பு தளவமைப்புகளைக் கட்டுப்படுத்த இது உங்களை அனுமதிக்கிறது.
ஆனால் இந்த மதிப்புகள் ஒவ்வொன்றும் என்ன செய்கின்றன, அவை எவ்வாறு செயல்படுகின்றன? நாம் கண்டுபிடிக்கலாம்.
அன்றைய வீடியோவை உருவாக்கவும்
CSS காட்சி சொத்து என்றால் என்ன?
ஒரு வலைப்பக்கத்தில் HTML உறுப்புகளுக்குப் பயன்படுத்தப்படும் பெட்டி ரெண்டரிங் வகையை காட்சிப் பண்பு குறிப்பிடுகிறது. இது வெளிப்படாமல் இருப்பது உட்பட பல்வேறு நடத்தைகளில் விளைகிறது. ஸ்டைல் ஷீட் அல்லது பொருத்தமான CSS தனிப்பயனாக்குதல் பிரிவுகள் மூலம் இந்த மதிப்புகளை உங்கள் இணையதளத்தில் திருத்தலாம் வேர்ட்பிரஸ் போன்ற CMS கருவிகள் .
கூறுகளை CSS டிஸ்ப்ளே மூலம் வரிசையில் வைத்திருங்கள்: இன்லைன்
இன்லைன் டிஸ்ப்ளே கொண்ட உறுப்புக்கு அகலம் மற்றும் உயர மதிப்புகள் பொருந்தாது; உள்ளே உள்ள உள்ளடக்கம் அதன் பரிமாணங்களை அமைக்கிறது. இன்லைன் HTML உறுப்புகள் மற்ற உறுப்புகளுடன் அருகருகே அமர்ந்து, ஒரு போல் செயல்படும் . டிஸ்ப்ளே இன்லைன் பொதுவாக உரைக்கு பயன்படுத்தப்படுகிறது.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline {
display: inline;
font-size: 3rem;
}
#inline-1 {
background-color: yellow;
padding: 10px 0px 10px 10px;
}
#inline-2 {
background-color: lightgreen;
padding: 10px 10px 10px 0px;
}
</style>
</head>
<body>
<h1>CSS Display Inline</h1>
<div class="inline" id="inline-1">This is text</div>
<div class="inline" id="inline-2">with the inline property value.</div>
</body>
</html>
இந்த HTML மார்க்அப் மற்றும் மேலே உள்ள CSS காட்சி இன்லைன் மதிப்புக்கு ஒரு சிறந்த எடுத்துக்காட்டு. ஒன்றாகப் பயன்படுத்தும்போது, இது இரண்டு வெவ்வேறு HTML உறுப்புகளுடன் செய்யப்பட்ட உரையின் ஒற்றை வரியைக் காண்பிக்கும்.
CSS காட்சியுடன் இணையதள தளவமைப்புகளை கட்டுப்படுத்தவும்: பிளாக்
சில வழிகளில், காட்சித் தொகுதி மதிப்பு இன்லைன் மதிப்பிற்கு நேர்மாறானது. உயரம் மற்றும் அகல பரிமாணங்களை அமைக்கலாம், மேலும் இந்த மதிப்பைக் கொண்ட உறுப்புகள் ஒன்றன் பின் ஒன்றாக உட்கார முடியாது. மேலே உள்ள எடுத்துக்காட்டு தொகுதி மதிப்புடன் இரண்டு கூறுகளைக் காட்டுகிறது. பிளாக் டிஸ்பிளே மதிப்புடன் கூடிய உறுப்புகள், அவற்றின் மூல உறுப்பின் அதிகபட்ச அகலத்தில் இயல்புநிலையாக இருக்கும்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.block {
display: block;
font-size: 3rem;
width: fit-content;
}
#block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Block</h1>
<div class="block" id="block-1">This is text</div>
<div class="block" id="block-2">with the block property value.</div>
</body>
</html>இன்லைன் ஸ்டைல் உதாரணத்தைப் போலன்றி, இந்த டிஸ்ப்ளே பிளாக் மதிப்பு உதாரணம் உரையின் வரிகளை இரண்டு வெவ்வேறு வரிகளாகப் பிரிக்கிறது. பொருத்தம்-உள்ளடக்க அகல மதிப்பு உரையின் நீளத்துடன் பொருந்துமாறு உறுப்புகளின் அகலத்தை அமைக்கிறது.
விண்டோஸ் 10 இன்ஸ்டால் எவ்வளவு பெரியது
CSS காட்சியுடன் பக்கவாட்டு HTML கூறுகள்: இன்லைன்-பிளாக்
CSS டிஸ்ப்ளே இன்லைன்-பிளாக் மதிப்பு வழக்கமான இன்லைன் மதிப்பைப் போலவே செயல்படுகிறது, குறிப்பிட்ட பரிமாணங்களைச் சேர்க்கும் திறனுடன் மட்டுமே. இது பெற்றோர் கூறுகள் இல்லாமல் கட்டம் போன்ற தளவமைப்புகளை உருவாக்குவதை சாத்தியமாக்குகிறது. முந்தைய உதாரணத்திற்குச் சென்று, இன்லைன்-பிளாக் மதிப்பைச் சேர்ப்பதன் மூலம் உறுப்புகள் ஒன்றன் பின் ஒன்றாக உட்கார முடியும்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-block {
display: inline-block;
font-size: 3rem;
width: fit-content;
}
#inline-block-1 {
background-color: yellow;
padding: 10px 10px 10px 10px;
}
#inline-block-2 {
background-color: lightgreen;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Block (width set)</h1>
<div class="inline-block" id="inline-block-1">This is text</div>
<div class="inline-block" id="inline-block-2">with the inline-block property
value.</div>
</body>
</html>
இன்லைன்-பிளாக் மதிப்பு இன்லைன் மதிப்பில் இருந்து வேறுபட்டதாகத் தெரியவில்லை. இந்த மதிப்பைக் கொண்டு தனிமங்களின் பரிமாணங்களை நீங்கள் அமைக்கலாம் என்பது குறிப்பிடத்தக்கது, இருப்பினும், சில சந்தர்ப்பங்களில் வேலை செய்வதை எளிதாக்குகிறது.
CSS காட்சியுடன் இணையதள கூறுகளை மறை: எதுவுமில்லை
எளிமையான காட்சி மதிப்பு 'இல்லை'. இந்த மதிப்பு உறுப்பு மற்றும் எந்த குழந்தை உறுப்புகளையும், விளிம்புகள் மற்றும் பிற இடைவெளி பண்புகளுடன் மறைக்கிறது. CSS டிஸ்ப்ளே எந்த மதிப்பையும் கொண்ட உறுப்புகள் உலாவி இன்ஸ்பெக்டர்களுக்குள் இன்னும் தெரியவில்லை.
CSS காட்சியுடன் நெகிழ்வான மற்றும் பதிலளிக்கக்கூடிய கூறுகளை உருவாக்கவும்: நெகிழ்வு
டிஸ்ப்ளே ஃப்ளெக்ஸ் என்பது புதிய CSS தளவமைப்பு முறைகளில் ஒன்றாகும். டிஸ்ப்ளே ஃப்ளெக்ஸ் ஒரு பெற்றோர் உறுப்பில் இருக்கும்போது, அதன் உள்ளே இருக்கும் அனைத்து உறுப்புகளும் நெகிழ்வான CSS உறுப்புகளாக மாறும். இந்த கட்டமைப்பில் உள்ள மூல உறுப்பு ஒரு flexbox ஆகும்.
ஃப்ளெக்ஸ்பாக்ஸ்கள் அகலம் மற்றும் உயரம் போன்ற முன் வரையறுக்கப்பட்ட மாறிகள் மூலம் பதிலளிக்கக்கூடிய வடிவமைப்புகளை உருவாக்குகின்றன. இது மதிப்புள்ளது HTML/CSS flexboxes பற்றி கற்றல் நீங்கள் தொடங்குவதற்கு முன்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.flex {
display: flex;
font-size: 3rem;
}
#flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Flex</h1>
<div class="flex">
<div id="flex-1"></div>
<div id="flex-2"></div>
<div id="flex-3"></div>
</div>
</body>
</html> ஃபிளெக்ஸ்பாக்ஸ்கள் பக்கவாட்டில் காட்சியுடன்: இன்லைன்-ஃப்ளெக்ஸ்
இன்லைன்-ஃப்ளெக்ஸ் ஒரு வழக்கமான ஃப்ளெக்ஸ்பாக்ஸைப் போலவே செயல்படுகிறது, உறுப்பு மற்ற உறுப்புகளுக்கு அடுத்ததாக உட்கார முடியும்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.inline-flex {
display: inline-flex;
font-size: 3rem;
width: 49.8%;
}
#inline-flex-1 {
background-color: yellow;
width: 40%;
height: 100px;
}
#inline-flex-2 {
background-color: lightgreen;
width: 25%;
height: 100px;
}
#inline-flex-3 {
background-color: lightblue;
width: 35%;
height: 100px;
}
</style>
</head>
<body>
<h1>CSS Display Inline-Flex</h1>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
<div class="inline-flex">
<div id="inline-flex-1"></div>
<div id="inline-flex-2"></div>
<div id="inline-flex-3"></div>
</div>
</body>
</html>CSS காட்சியுடன் சிக்கலான அட்டவணைகளை உருவாக்கவும்: அட்டவணை
காட்சி அட்டவணை மதிப்பு இணையதள வடிவமைப்பின் பழைய நாட்களை நினைவூட்டுகிறது. பெரும்பாலான இணையதளங்கள் இன்று தங்கள் தளவமைப்புகளுக்கு அட்டவணைகளைப் பயன்படுத்துவதில்லை என்றாலும், தரவு மற்றும் உள்ளடக்கத்தை படிக்கக்கூடிய வடிவத்தில் காட்டுவதற்கு அவை இன்னும் செல்லுபடியாகும்.
ஒரு HTML உறுப்புடன் அட்டவணை மதிப்பைச் சேர்ப்பதால், அது ஒரு அட்டவணை உறுப்பாகச் செயல்படும், ஆனால் உங்கள் அட்டவணையை சரியாகச் செய்ய கூடுதல் மதிப்புகள் தேவை.
CSS காட்சி: அட்டவணை-செல்
டேபிள்-செல் மதிப்பைக் கொண்ட தனிமங்கள் பிரதான அட்டவணையில் உள்ள தனிப்பட்ட கலங்களாக செயல்படுகின்றன. அட்டவணை-நெடுவரிசை மற்றும் அட்டவணை-வரிசை மதிப்புகள் இந்த தனிப்பட்ட செல்களை ஒன்றாக இணைக்கின்றன.
CSS காட்சி: அட்டவணை-வரிசை
அட்டவணை-வரிசை மதிப்பு ஒரு
CSS காட்சி: அட்டவணை-நெடுவரிசை
அட்டவணை-நெடுவரிசை மதிப்பு அட்டவணை-வரிசை மதிப்பைப் போலவே செயல்படுகிறது, அது உங்கள் அட்டவணையைப் பிரிக்காது. அதற்கு பதிலாக, ஏற்கனவே இருக்கும் வெவ்வேறு நெடுவரிசைகளில் குறிப்பிட்ட CSS விதிகளைச் சேர்க்க இந்த மதிப்பைப் பயன்படுத்தலாம்.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.table {
display: table;
font-size: 3rem;
}
.header {
display: table-header-group;
font-size: 3rem;
}
#column-1 {
display: table-column-group;
background-color: yellow;
}
#column-2 {
display: table-column-group;
background-color: lightgreen;
}
#column-3 {
display: table-column-group;
background-color: lightblue;
}
#row-1 {
display: table-row;
}
#row-2 {
display: table-row;
}
#row-3 {
display: table-row;
}
#cell {
display: table-cell;
padding: 10px;
width: 20%;
}
</style>
</head>
<body>
<h1>CSS Display Table</h1>
<div class="table">
<div id="column-1"></div>
<div id="column-2"></div>
<div id="column-3"></div>
<div class="header">
<div id="cell">Name</div>
<div id="cell">Age</div>
<div id="cell">Country</div>
</div>
<div id="row-1">
<div id="cell">Jeff</div>
<div id="cell">21</div>
<div id="cell">USA</div>
</div>
<div id="row-2">
<div id="cell">Sue</div>
<div id="cell">34</div>
<div id="cell">Spain</div>
</div>
<div id="row-3">
<div id="cell">Boris</div>
<div id="cell">57</div>
<div id="cell">Singapore</div>
</div>
</div>
</body>
</html>CSS காட்சியுடன் பக்கவாட்டு அட்டவணைகளை உருவாக்கவும்: இன்லைன்-டேபிள்
நாம் ஏற்கனவே பார்த்த மற்ற இன்லைன் வகைகளைப் போலவே, இன்லைன்-டேபிள் மற்ற உறுப்புகளுக்கு அடுத்ததாக அட்டவணை உறுப்புகளை வைப்பதை சாத்தியமாக்குகிறது.
CSS காட்சியுடன் பதிலளிக்கக்கூடிய இணையதள தளவமைப்புகளை உருவாக்கவும்: கட்டம்
CSS டிஸ்ப்ளே கிரிட் மதிப்பு அட்டவணை மதிப்பைப் போன்றது, ஒரு கட்டத்தின் நெடுவரிசைகள் மற்றும் வரிசைகள் மட்டுமே நெகிழ்வான அளவைக் கொண்டிருக்கும். இது வலைப்பக்கங்களுக்கான முக்கிய தளவமைப்பை உருவாக்குவதற்கு கட்டங்களை சிறந்ததாக ஆக்குகிறது. அவை முழு அகல தலைப்புகள் மற்றும் அடிக்குறிப்புகளுக்கான இடத்தை விட்டுச்செல்கின்றன, அதே நேரத்தில் வெவ்வேறு அளவுகளின் உள்ளடக்கப் பகுதிகளை சாத்தியமாக்குகின்றன.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Display Values</title>
<style>
.grid {
display: grid;
font-size: 3rem;
grid-template-areas:
'header header header header'
'left-sidebar content content right-sidebar'
'footer footer footer footer';
gap: 10px;
}
#grid-1 {
grid-area: header;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
#grid-2 {
grid-area: left-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-3 {
grid-area: content;
background-color: lightblue;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-4 {
grid-area: right-sidebar;
background-color: lightgreen;
height: 200px;
padding: 20px;
text-align: center;
}
#grid-5 {
grid-area: footer;
background-color: yellow;
height: 100px;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>CSS Display Grid</h1>
<div class="grid">
<div id="grid-1">Header</div>
<div id="grid-2">Left Sidebar</div>
<div id="grid-3">Content</div>
<div id="grid-4">Right Sidebar</div>
<div id="grid-5">Footer</div>
</div>
</body>
</html>
கட்டங்கள் ஃப்ளெக்ஸ்பாக்ஸைப் போலவே இருக்கும், அவை மட்டுமே கூறுகளை கீழே மற்றும் ஒன்றன் பின் ஒன்றாக வைக்க முடியும். கட்டம்-வார்ப்புரு-பகுதி சொத்து இதற்கு முக்கியமானது. குறியீட்டிலிருந்து நீங்கள் பார்க்க முடியும் என, எங்கள் தலைப்பு மற்றும் அடிக்குறிப்பு முழு அகலமாக இருப்பதால், வரிசையில் நான்கு இடைவெளிகளை எடுத்துக் கொள்கிறது. பக்கப்பட்டிகள் ஒவ்வொன்றும் ஒரு ஸ்லாட்டை எடுத்துக்கொள்கின்றன, அதே நேரத்தில் உள்ளடக்கம் இரண்டை எடுக்கும், கட்டத்தின் நடுத்தர வரிசையை மூன்று நெடுவரிசைகளாகப் பிரிக்கிறது.
CSS காட்சி: இன்லைன்-கிரிட்
இன்லைன்-கிரிட் மதிப்பைப் பயன்படுத்தினால், இந்த வழிகாட்டியில் உள்ள மற்ற இன்லைன் மதிப்புகளைப் போலவே, மற்ற உறுப்புகளுக்கு அடுத்ததாக உங்கள் கட்டம் அமர உதவும்.
கணினியை எப்படி தூங்க வைப்பது
வலை வடிவமைப்பிற்கு CSS காட்சியைப் பயன்படுத்துதல்
HTML மார்க்அப்பை மாற்றாமல் இணையதள உறுப்பு கட்டமைப்புகளை சரிசெய்வதற்கு CSS டிஸ்ப்ளே சொத்து ஒரு எளிய வழியை வழங்குகிறது. Shopify அல்லது WordPress போன்ற உள்ளடக்க விநியோக தளங்களைப் பயன்படுத்துபவர்களுக்கு இது மிகவும் பொருத்தமானது, ஆனால் இது பொதுவான வலை வடிவமைப்பிற்கும் எளிதாக இருக்கும்.