මාස්ටර් ස්ටයිල් ෂීට් සමඟ සුපුරුදු බ්රව්සර් හැඩසවීම ඉවත් කරගන්නේ කෙසේද

මෙම ඉඟි සමඟ කරුණු දැන ගන්න

සියලු වෙබ් බ්රවුසරයන් "විරූපිත ශෛලීන්" යනුවෙන් හැඳින්වේ. මේවා වෙනත් ශෛල තොරතුරු නොමැති විට HTML මූලද්රව්යවල පෙනුම සහ හැඟීම් නියම කරන විලාසයන් වේ. උදාහරණයක් ලෙස, සෑම බ්රව්සරයකම පාහේ හයිපර්ලොක් වල සුපුරුදු පෙනුම යටි තද වර්ණ සහිත වේ. ඔබ වෙනත් ආකාරයකින් පෙන්වීමට ඔවුන්ට පවසන්නේ නම් එම සබැඳි දෙස බලන්න.

සුපුරුදු බ්රවුසර් විලාසයන් ප්රයෝජනවත් විය හැකි නමුත් බොහෝ අවස්ථාවන්හිදී වෙබ් නිර්මාණකරුවන්ට මෙම විලාසයන් ඉවත් කිරීමට අවශ්ය වන අතර, ඒවා සියළුම පාලන ක්රමවලින් 100% ක්ම භාවිතා කළ හැකිය. මෙය "ප්රධාන ස්ටයිල්ස්ට්" ලෙසින් හඳුන්වනු ලැබේ.

ඔබේ ලේඛන සියල්ලම ඔබ ඇමතූ පළමු විලාසිතාවේ ප්රධාන විලාසිතා විලාසය විය යුතුය. හරස් බ්රවුසරයේ වෙබ් නිර්මාණයක ගැටළු ඇති විය හැකි පෙරනිමි බ්රවුසර් සැකසුම් ඉවත් කිරීම සඳහා ප්රධාන ස්ටයිල් ෂීට් භාවිතා කරයි. ඔබ මෝස්තරයේ මෝස්තරයක් සහිත විලාසිතාවන් ඉවත් කරගත් පසු, ඔබේ සැළසුම් සියල්ලම බ්රවුසරයේ එකම ස්ථානයෙන් පටන් ගනී - පින්තාරු කිරීම සඳහා පිරිසිදු කැන්වස් මෙන්ය.

ගෝලීය සම්මතයන්

ඔබේ ප්රධාන පෙළේ මෝස්තරය , පිටුවෙහි ආන්තිකයන්, පැඩ්ඩින් සහ දේශසීමා පරාවර්තනය කිරීමෙන් ආරම්භ විය යුතුය. සමහර වෙබ් බ්රවුසරවල ලේඛනයේ සිරුර බ්රවුසරයේ කවුළුවලින් වෙන් කර ඇති පික්සල් 1 හෝ 2 දක්වා විචල්ය. මෙය ඔවුන් සියල්ලම එකම විදහා දැක්වීම සහතික කරයි.

html, body {margin: 0px; වැටීම: 0px; දේශසීමා: 0px; }}

ඔබටත් අකුරු ස්ථාවර කිරීමට අවශ්යයි. ෆොන්ටය ප්රමාණය සියයට 100 හෝ 1 ඊටම ලබා දීමට වග බලා ගන්න, ඔබේ පිටුවට ප්රවේශ විය හැකි බැවින්, ප්රමාණය තවමත් ස්ථාවරයි. රේඛීය උස ඇතුළත් කිරීමට වග බලා ගන්න.

සිරුර {font: 1em / 1.25 Arial, Helvetica, sans-serif; }}

සිරස්තල ආකෘතිය

ශීර්ෂ පාඨ හෝ ශීර්ෂක ටැග් (H1, H2, H3, ආදිය) සාමාන්යයෙන් ඒවා වටා විශාල ආලින්දයක් හෝ වටපිටාවක තදකුරු අකුරු ලිවීමට භාවිතා කරයි. බර, පාෂාණ සහ පෑඩිං ඉවත් කිරීමෙන්, මෙම ටැග් තවදුරටත් අතිරේක විලාසනයකින් තොරව අවට පාඨ වලට වඩා විශාල (හෝ කුඩා) පවතී:

h1, h2, h3, h4, h5, h6 {මාදිලිය: 0; වැටීම: 0; ෆොන්ට-බර: සාමාන්ය; font-family: Arial, Helvetica, sans-serif; }}

ඔබේ සිරස් ටැග්වලට විශේෂිත ප්රමාණ, ලිපි-පරතරය සහ පෑඩ්ං සැකසීම සලකා බැලීමට ඔබට අවශ්ය විය හැකිය, නමුත් ඔබ සැබැවින්ම නිර්මාණය කරන වෙබ් අඩවියේ විලාසිතාව මත රඳා පවතින අතර ප්රධාන ස්ලයිඩ පත්රයෙන් ඉවත්විය යුතුය. ඔබේ නිශ්චිත මෝස්තරයට අවශ්ය පරිදි ඔබට මෙම ශීර්ෂයන් සඳහා තවත් ශෛලයන් එකතු කළ හැකිය.

සරල පෙළ හැඩතලගැන්වීම

සිරස්තල ඉක්මවා, ඔබ ඉවත් කිරීමට වග බලා ගත යුතු වෙනත් පෙළ ටැග් ඇත. මිනිස්සු බොහෝ විට අමතක කරන එක් කට්ටලයක් මේසයේ තීරු ලේබල (TH සහ TD) සහ ආකෘති ටැග් (SELECT, TEXTAREA සහ INPUT) වේ. ඔබේ ශරීරය හා ඡේද පෙළ ලෙස එම ප්රමාණයට සමාන නොකරනවා නම්, බ්රවුසරයන් ඒවා ඉටුකරන ආකාරය ගැන ඔබ පුදුමයට පත්වනු ඇත.

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {මාදිලිය: 0; වැටීම: 0; අකුරු: සාමාන්ය සාමාන්ය සාමාන්ය 1em / 1.25 Arial, Helvetica, sans-serif; }}

ඔබේ මිල ගණන් (BLOCKQUOTE සහ Q), කෙටි යෙදුම් සහ කෙටි යෙදුම් ටිකක් අතිරේක ශෛලියක් ලබා දීමත් සතුටට කරුණකි.

blockquote {margin: 1.25em; padding: 1.25em} q {අකුරු-විලාසය: ඇලකුරු; } සංකේතය, abbr {කර්සරය: උදව්; මායිම්-පහළ: 1px ඉරිතලා; }}

සබැඳි සහ පින්තූර

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

a, a: link, a: visited, a: active, a: hover {text-decoration: යටින්; }}

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

img {border: none; }}

මේස

වගු පිරිසැලසුම් කිරීමේ අරමුණු සඳහා තවදුරටත් භාවිතා නොකරන අතරතුර, ඔබට මෙම වෙබ් අඩවියේ තථ්ය පත්රික දත්ත සඳහා ඒවා භාවිත කළ හැකිය. මෙය HTML වගු භාවිතා කිරීම ඉතා හොඳයි. ඔබගේ වගු සෛල සඳහා පෙරනිමි අකුරු ප්රමාණය සමාන බව අපි දැනටමත් සහතික කර ඇත, නමුත් ඔබගේ වගු එක සමාන වනු ඇත:

table {margin: 0; වැටීම: 0; දේශසීමා: කිසිවක් නැත; }}

ආකෘති පත්ර

අනෙකුත් මූලද්රව්ය හා සමාන වන පරිදි, ඔබේ ආකෘති වටා ඇති පරාස සහ පයින්ඩින් ඉවත් කළ යුතුය. මා කැමති තවත් දෙයක් එය " ආවරණ " ලෙස පෝරම ටැගය නැවත ලියන්න, එමඟින් ඔබ සංකේතය තුළ ටැග් කළ ස්ථානයේ අමතර ඉඩක් එකතු නොකරයි. අනෙකුත් පෙළ කොටස් සමඟ මෙන්ම, ඉහත දැක්වෙන ආකාරයට, මාදිලියේ තේරීම, පාඨමය තොරතුරු සහ ආදානය කිරීම සඳහා මා විසින් අර්ථ දක්වනු ලැබේ.

ආකෘතිය {margin: 0; වැටීම: 0; දර්ශණය: පේළි; }}

ඔබගේ ලේබල සඳහා කර්සරය වෙනස් කිරීම සඳහාද හොඳ අදහසකි. එය ක්ලික් කිරීම මඟින් ලේබලය යම් දෙයක් සිදු කරන බව දැක ගැනීමට මෙය ජනතාවට උපකාර කරයි.

ලේබලය {කර්සරය: සූචකය; }}

පොදු පන්ති

මාස්ටර් ස්ටයිල්ස්ෙට්ට් හි මෙම කොටස සඳහා ඔබට අර්ථවත් වන පංති අර්ථ දැක්විය යුතුය. මම බොහෝ විට භාවිතා කරන පංති කිහිපයකි. ඒවා විශේෂිත මූලද්රව්යයකට නොතිබූ බව සලකන්න. එබැවින් ඔබට අවශ්ය ඕනෑම දෙයක් ඔවුන්ට පැවරිය හැකිය:

පැහැදිලිය: දෙකම; }. ෆ්ලූට්ලфт {float: වම්; } .බොලෝට් රයිට් {float: හරි; } .textLeft {පෙළ-align: වම; } .textRight {පෙළ-align: right; } .textCenter {පෙළ-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; ආන්තික වම: ස්වයං; ආන්තික-දකුණ: ඔටෝ; } / * පළල දිගට * මතක තබාගන්න. * /. බල්බ {font-weight: bold; } .ital {{අකුරු-විලාසය: ඇලකුරු; } .underline {පෙළ-සැරසිලි: යටි ඉරි; } .noindent {margin-left: 0; වැටීම-වමේ: 0; } .nomargin {මාදිලිය: 0; } .nopadding {padding: 0; } .nobullet {ලැයිස්තුගත-විලාසය: කිසිවක් නැත; list-style-image: none; }}

මෙම පංති වෙනත් ඕනෑම ආකාරයකට පෙර ලිඛිතව ලියා ඇති නිසා ඒවා පමණක් පන්ති ලෙස බැවින්, ඒවා කැස්සේඩයේ පසුව ඇති විශේෂිත ශෛලමය ලක්ෂණ සමඟ ඒවා අභිබවා යෑමට පහසුය. ඔබ මූලද්රව්යයක් මත පොදු පන්තියක් ස්ථාපනය කර ඇති අතර එය ක්රියාත්මක නොවන බව ඔබ සොයා ගන්නේ නම්, එම මූලද්රව්යයට බලපාන ඔබගේ පසුගෙවුම් ආකාරයේ වෙනත් විලාසයක් නොමැති බවට වග බලා ගන්න.

සම්පූර්ණ මාස්ටර් ස්ටයිල්ස්

/ * ගෝලීය පෙරනිමි * / html, body {margin: 0px; වැටීම: 0px; දේශසීමා: 0px; } සිරුර {font: 1em / 1.25 Arial, හෙල්විටිකා, sans-serif; } / * ශීර්ෂ ශීර්ෂයන් * / h1, h2, h3, h4, h5, h6 {මාදිලිය: 0; වැටීම: 0; ෆොන්ට-බර: සාමාන්ය; font-family: Arial, Helvetica, sans-serif; } / * පෙළ ස්මාර්ට් * / p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {margin: 0; වැටීම: 0; අකුරු: සාමාන්ය සාමාන්ය සාමාන්ය 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {අකුරු-විලාසය: ඇලකුරු; } සංකේතය, abbr {කර්සරය: උදව්; මායිම්-පහළ: 1px ඉරිතලා; } කුඩා {font-size: .85em; } විශාල {font-size: 1.2em; } / * සබැඳි සහ පින්තූර * / a, a: link, a: visited, a: active, a: hover {text-decoration: underline; } img {border: none; } / * වගුව * / වගුව {ආකෘතිය: 0; වැටීම: 0; දේශසීමා: කිසිවක් නැත; } / * ආකෘති * / ආකෘතිය {margin: 0; වැටීම: 0; දර්ශණය: පේළි; } ලේබලය {කර්සරය: සූචකය; } / * පොදු පන්ති * /. පැහැදිලිව: පැහැදිලි දෙකම; }. ෆ්ලූට්ලфт {float: වම්; } .බොලෝට් රයිට් {float: හරි; } .textLeft {පෙළ-align: වම; } .textRight {පෙළ-align: right; } .textCenter {පෙළ-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; ආන්තික වම: ස්වයං; ආන්තික-දකුණ: ඔටෝ; } / * පළල දිගට * මතක තබාගන්න. * /. බල්බ {font-weight: bold; } .ital {{අකුරු-විලාසය: ඇලකුරු; } .underline {පෙළ-සැරසිලි: යටි ඉරි; } .noindent {margin-left: 0; වැටීම-වමේ: 0; } .nomargin {මාදිලිය: 0; } .nopadding {padding: 0; } .nobullet {ලැයිස්තුගත-විලාසය: කිසිවක් නැත; list-style-image: none; }}

ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. 10/6/17 දිනැති ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි