CSS වේ: වගුව නිර්මාණය. ලියාපදිංචි උදාහරණ

CSS මුහුණත් වගු කිරීම - රසවත් හා වගකිව යුතු පාඩම. මෙම ව්යාපාරය සඳහා ප්රවේශය හැකි සියළු මෝස්තර ගැන දැනුම සමග, competently යුතුය. මීට අමතරව, එය ඔවුන්ගේ නිර්මාණශීලීත්වය අමුත්තන් ලකුණු බය නෑ පිණිස සුන්දරත්වය පිළිබඳ හැඟීමක් උරුම කිරීම සඳහා අවශ්ය වේ.

වගු සියල්ල පාහේ පරිවර්තනය විය හැකිය. ලස්සන නිර්මාණ CSS වගු නිර්මාණය හතරේ පහර භාවිතය, මේස පසුබිම, සෛල පසුබිම, ඔවුන් හා වැඩි ගණනක් අතර ඇති පරතරය කිරීමයි. වඩාත් මූලික ගැන සලකා බලන්න.

මේසය දේශ

CSS වගුව ශෛලිය නිර්මාණය හැම විටම දේශ (රාමුව) සමග සෙල්ලමක් නොවෙයි. සියලු පැහැර වගු සමෝච්ඡ රේඛා, රාමුව නැත. එනම්, එය 0 පික්සල සමාන වේ. නමුත් මෙම දේපල දේශ විසින් නිවැරදි කළ හැක.

ඔබ මුළු වගුව සඳහා පිටත රාමුව සඳහන් කළ හැකිය:

මේසය {දේශ: 3px ඝන කළු; }

මෙම වර්ගයේ භාවිතා කරන වෙබ් අඩවිය පිළිබඳ සියලුම වගු මෙම මාර්ගය ස්තුති කළු රාමුව වේ. දේශ සීමා දාර මත පමණක්, නමුත් මේසය තුල බව සටහන් කර ගන්න. ආකාරයකින් දක්වා සෛල රේඛා හා රාමු සඳහා.

වැනි දා, TD {දේශ: 3px ඝන කළු;}

ඝණකම හා වර්ණ, ඔබට ඕනෑම ලබා ගත හැකි ය. සෛල splicing විට හතරේ පහර දෙගුණ වී නොමැති බව මතක තබා ගන්න.

යන වචනය ඝන අඛණ්ඩ ලියාපදිංචි හැඳින්වේ. ඔබ අනෙක් අගයන් ලබා ගත හැකි ය.

එය වඩාත් ආකර්ෂණීය පෙනුමක් අඩවියේ ප්රධාන අන්තර්ගතයට යන්න අවධානය ඉවතට හරවා නැත ලෙස, බහුලව භාවිතා කරන ඝන රාමුව වේ.

දේශ සීමා දේපල අධ්යක්ෂක මණ්ඩලයේ ද නියම කළ හැක. මායිම් පමණක් ඉහළ, පහළ, වම් හෝ දකුණු පස සඳහා සකස් කළ හැකි ය. සමහර අවස්ථාවල දී එය එකවර සමස්ත වගුව සඳහා රාමු සමග ශක්ය විකල්පයක් නැති නිසා.

මේසය {දේශ-top: 1px ඝන රතු, }

ඒ නිසා ඔබට පමණක් මේසය උඩ සඳහා රාමුවක් නියම කළ හැක. හරි, වම් හෝ පහළ: සමානව වෙනුවට හුදෙක් ඉහළ කපා හෝ වෙනත් පක්ෂ වලට.

මේසය ශීර්ෂ

මේසය ශීර්ෂ ටැග් භාවිතා <ශීර්ෂ පාඨය> නියම කල හැක. මෙම ටැගය හොඳින් සුසර සඳහා ගුණ ගොඩක් ලියාපදිංචි කිරීම සඳහා CSS විය හැක. එය අංග ඔබට අවශ්ය ආකාරයට උපාමාරු දැමීම සඳහා හැකි නිසා තැටියක CSS වගුව නිර්මාණය හොඳයි.

මෙම මාතෘකාව පොත් (එවැනි "වගුව 1" ලෙස) දී සම්මත ආකාරයටම දර්ශනය වේ.

ඔබ මාතෘකාව සහ දේපල ශීර්ෂ පාඨය-පැත්තේ (ඉහළ හෝ පහළ) ඇති ස්ථානය ලබා ගත හැකි ය. වම් හෝ දකුණු සන්ධානගත වෙමින් දේපල පෙළ-align විසින් අර්ථ දක්වා ඇත.

පසුබිම වගු

මේසය පසුබිම ඕනෑම වර්ණයක් හෝ රටාවක් විය හැක. වර්ණ දේපල පසුබිම වර්ණ කරයි. කතාවේ දී භාවිතා සමග පූර්ණ ස්ථාවර ගුණ නම්. එය බොහෝ වතාවක් ගබඩා පහසුකම් සලසයි.

වර්ණ නම ලෙස සඳහන් කළ හැක, සහ වෙනස් කේතන ක්රම. මීට අමතරව, ඔබ පහත සඳහන් සඳහන් කළ හැකිය:

• විනිවිද පෙනෙන - විනිවිද පෙනෙන.
• උරුම - වර්ණ මව් අංගයක් හා සමාන වේ.
• මූලික - පෙරනිමි.

විනිවිද සමඟ විකල්පය CSS ගොනු, පෙළ සියලු වගු එක් වර්ණ සිදු වූ එම අවස්ථාවල දී භාවිතා කළ හැක, නමුත් මේ අවස්ථාවේ දී අවශ්ය නැහැ.

මීට අමතරව, පසුබිම රූපයක් විය හැක. විලාසය නියම පසුබිම-රූපය දේපල, මෙය කිරීමට. මාර්ගය මේ වගේ වේ:

url එක ( 'URL එක')

ගොනුව සඳහා වන මාර්ගය ඥාතියකු හෝ නිරපේක්ෂ හෝ විය හැක.

වඩාත් සංකීර්ණ තෘප්තියට බෑවුම් සමග සිදු කළ හැක:

• රේඛීය-ඵලය අනුක්රමික ();
• රේඩියල්-ඵලය අනුක්රමික ();
• නැවත නැවත රේඛීය-ඵලය අනුක්රමික () සහ විනීත-රේඩියල්-ඵලය අනුක්රමික () - ඵලය අනුක්රමික නැවත නැවතත්.

පසුබිම සෛල

පොදු පසුබිමක් කිරීමට අමතරව, ඔබ සඳහා තීරු සහ පේළි ඉරි සහිත පසුබිම ඔස්සේ ලබා ගත හැකි ය. රේඛා දෘශ්ය වෙන් පහසු තොරතුරු කියවීමට නිසා දේපල ලියාපදිංචි කිරීම සඳහා, ඉතා බොහෝ විට භාවිතා කරනු ලැබේ.

මෙම මලනවහ අමතරව, ඔබ යම් තීරුවක් හෝ පේළියක් සංඛ්යාව සඳහන් කළ හැක. මේ වගේ උදාහරණයක් ලෙස:

• tr: අර්ථදැක්වීම-ළමා (පවා) {...} - interlaced නියම;
• tr: අර්ථදැක්වීම-ළමා (1) {...} - යම් පේළිය ගුණ ඇඟවුම්;
• TD: අර්ථදැක්වීම-ළමා (පවා) {...} - ක තීරු ප්රත්යාවර්ත ඇඟවුම්;
• TD: අර්ථදැක්වීම-ළමා (1) {...} - යම් තීරුව ගුණ පිළිබඳව දර්ශකයක්.

අනුක්රමය සහ අංක අමතරව නියම කල හැක - පළමු (TD: පළමු දරුවා) හෝ පසුගිය (TD: පසුගිය ළමා).

සෛල අතර ඇති පරතරය

CSS තුළ, ඇඳ, නිර්මාණ ඔබ සෛල අතර අවකාශය ඉවත් කිරීමට ඉඩ දෙයි. පෙරනිමියෙන් ඔවුන් ය. උදාහරණයක් ලෙස, ඔබ සීමා මායිම් අතර දුර ගොනු නොකර වගුවේ රාමු සකස් නම්, එය මෙහි ප්රතිඵලයක් වනු ඇත.

එය ඉතා හොඳ නෑ වගේ එය කියවීමට පහසු නොවේ, ඔබ එකඟ වේ. පරිශීලකයන් මේ නිසා ඇස් අයුතු ඇත. මෙම හිඩැස් ඉවත් කරන්න වගුව ශෛලිය තුල පමණක් එවැනි රේඛාවක් ලිවීමෙන් විය හැක:

දේශසීමා බිඳ වැටීම: බිඳ වැටීම

නමුත් එය ද ඇති දුර, ඒ වෙනුවට, වැඩි කළ යුතු බව පෙනෙන්නේ. තව ද, හිඩැස් ප්රමාණය තීරු අතර පේලි අතර ලෙස සඳහන් කළ හැක. අගය (ඒ වෙනුවට බිඳ) ඇති බව සඳහන් කිරීම:

දේශසීමා බිඳ වැටීම: වෙන වෙනම

එහෙත් එවැනි ක්රියාවක්, එය සෛල වෙන් කිරීමට අවශ්ය වන බව යි. එය ඔවුන්ගේ උරුමය වූ කල, අමතර දේපල පෙන්නුම්:

දේශසීමා අතර පරතරය: 20px.

ඔබ පේළිවලින් සහ තීරුවලින් අතර විවිධ දුර නියම කිරීමට අවශ්ය නම්, එය කරුණු දෙකක් පෙන්වා:

දේශසීමා පරතරය: 10px20px.

වෙබ් බ්රව්සර් වල වෙනස්කම්

තැටියක CSS නිර්මාණය වගු බ්රවුසරය මත පදනම්ව, වෙනස් ලෙස දැකිය හැකි බව මතක තබා ගන්න. විශේෂයෙන් නරක CSS නව්යතා සහාය නැති බව පැරණි අනුවාද සමග නඩුව වේ.

ඉහත ඩිජිටල් වටිනාකම් රාමුව thicknesses උදාහරණයකි.

මෙම උදාහරණයක් ලෙස, නියත සඳහා රාමු ඝණකම.

දේශ සීමා මෝස්තරවලට ද බොහෝ සෙයින් වෙනස්.

ඒ නිසා, සංවර්ධනය සෑම විටම වෙනස් බ්රවුසර ප්රතිඵලයක් බලන්න.

වගු CSS නිර්මාණය බ්රවුසරයේ වර්ගය පරීක්ෂා කිරීමට නිර්දේශ කර ඇත. විශේෂයෙන් ලොකු ප්රශ්නයක් Internet Explorer හි පැරණි අනුවාද සහිත පරිශීලකයන්ට විය කිරීම සඳහා භාවිතා.

ඉතා උසස් මෘදුකාංග නිර්මාණකරුවන්, සම්පූර්ණයෙන්ම වෙනස් CSS ගොනු සම්බන්ධ කිරීමට බ්රවුසරය මත පදනම්ව කළ හැකිය. කෙනෙක් එක් එක් චෙක් පතක් හෝ විශේෂිත විලාසය (පන්ති) කරයි.

සෙවණැලි වඩාත්ම ගැටලු මතු වෙනවා.

CSS වේ: වගුව ආකෘතිය උදාහරණ

ලියාපදිංචි තරමක් විවිධ විය හැක. ඒ සියල්ල මුළු අඩවිය සහ එහි නිර්මාණ මත රඳා පවතී. සියලු ඒකාබද්ධ හා විචිත්ර වර්ණ කළ යුතුය. එසේම එය විශාල කාර්ය භාරයක් ඉටු රසය හා සංවර්ධක කරයි. අලංකාර අර්ථයෙන් සියලු වෙනස්.

අපි විවිධ වගු උදාහරණ කිහිපයක් දෙන්න. ඉහත සංඛ්යා පසුබිම් වර්ණය සහ දේශ සීමා සමග ඇලවීම සහ ක්රීඩා භාවිතය පෙන්නුම් කරයි.

බොහෝ ඇස් පරිශීලකයන් කපා නොවන බව ලස්සන පැළඳ නිර්මාණය රසවත් උදාහරණයක් වනු ඇත. මෙම ලිපිය දිගු තත්ත්වය ඕනෑම සුදුසු වන්නේ.

දාර වටකුරු සිදු කළ හැක. එය ලස්සන ලස්සන බලයි.

නිගමනය

ඔබ දැක ගැනීමට හැකි වන පරිදි, CSS දී වගු පෙනුම බොහෝ මෙවලම් වේ. එක් එක් පරාමිතිය ද අගය විකල්ප විශාල මුදලක් වේ. ඔබ එකවර ඒ සියල්ල භාවිතා කරන්නේ නම්, ඔබ කලාකෘති නිර්මාණය කළ හැකිය. ඔබ, විශේෂයෙන්ම නම් අනුවර්තී නිර්මාණය සියලු බ්රව්සර් සඳහා.

නිර්මාණය ප්රධාන දෙයක් - බලපෑම් සමග තවම හිතලා නැහැ. සියල්ල අනුමත කරමින් සිදු කළ යුතු වෙනවා. මුලින්ම, සැකැස්ම වහාම ඔවුන්ගේ සියලු දැනුම අත්හදා බැලීම් හා භාවිතා කිරීමට කැමති. මේසය ප්රතිඵලයක් ලෙස මේ අකාරයටම ගුණ වේ. මෙම දෝෂ මඟහරවා ගැනීමට උත්සාහ කරන්න.

එපමනක් නොව, සමහර පරාමිතීන් එකිනෙකා සමග මැදිහත් විය හැක. උදාහරණයක් ලෙස, නියම කිරීමට අවශ්යතාවයක් නැත පසුබිම වර්ණ තවමත් නිශ්චිත වර්ණ පැටලෙන්නේ සිදුවනු ඇති පසුබිම් රූපය, තිබේ නම් අතර, මේසය.