සාම්ප්රදායික මෝස්තරයෙන් කැස්කෑඩින් ස්ටයිල් ෂීට් පිළිබඳ දළ විශ්ලේෂණයක්
ඔබ වෙබ් අඩවියක් ගොඩනඟා ගත් විට, එය අර්ථ දක්වා ඇති මූලික ශෛලීන්ගෙන් ආරම්භ කිරීම සිහියේ. එය පිරිසිදු කැන්වස් හා නැවුම් බුරුසු සමඟ ආරම්භ කිරීම වැනි ය. වෙබ් නිර්මාණකරුවන් මුහුණ දෙන පළමු ගැටළුව නම් වෙබ් බ්රවුසර සියල්ල වෙනස් වේ. පෙරනිමි ෆොන්ට විශාලත්වය වේදිකාවේ සිට වේදිකාව දක්වා වෙනස් වේ, පෙරනිමි ෆොන්ටන් පවුල වෙනස් වේ, සමහර බ්රව්සරයන් ශරීරයේ ටැග් මත ආන්තික සහ පැකැට්ටු නිර්ණය කරන අතර අනිත් ඒවා නොකෙරේ. ඔබගේ වෙබ් පිටු සඳහා පෙරනිමි විලාසයන් නිර්වචනය කිරීමෙන් මෙම අනනුකූලතා වටා ගන්න.
CSS සහ අක්ෂර කට්ටලය
පළමුවෙන්ම ඔබේ CSS ලේඛන UTF-8 හි අක්ෂර මාලාව සකසන්න. ඔබ නිර්මාණය කළ පිටු බොහොමයක් ඉංග්රීසියෙන් ලියා ඇති බව පෙනෙන්නට තිබුණත්, සමහර භාෂාවන්ගෙන් හා සංස්කෘතික සන්දර්භය සඳහා අනුවර්තනය කරන ලද සමහර ඒවා දේශීයකරණය කළ හැකිය. ඒවා ක්රියාත්මක වන විට, utf-8 ක්රියාවලිය සරල කරයි. බාහිර ශිලා පත්රයෙහි අක්ෂර කට්ටලය සවි කිරීම HTTP ශීර්ෂය මත ප්රමුඛතාවයක් ලැබෙන්නේ නැත, නමුත් අනෙක් සියලු අවස්ථාවන්හිදී එය සිදු කරනු ඇත.
අක්ෂර කට්ටලය සැකසීමට පහසුය. CSS ලේඛනයේ පළමු පෙළ සඳහා ලියන්න:
@charset "utf-8";මේ ආකාරයට, ඔබ අන්තර්ජාතික අක්ෂර භාවිතා කරන්නේ නම් හෝ පන්ති සහ හැඳුනුම් නාම ලෙස නම්, ශෛලිය පත්රිකාව තවමත් නිවැරදිව වැඩ කරයි.
පිටුව ශරීරය හැඩගැන්වීම
ඊළඟට ප්රකෘති ශෛල පත්රයක් අවශ්ය වන්නේ ආන්තිකයන්, වැල්ඩින් සහ දේශ සීමා ශුන්ය කිරීමටයි. මෙම වෙබ් බ්රවුසරය එකම තැනක අන්තර්ගතය බවට වග බලා ගන්න. බ්රවුසරය සහ අන්තර්ගතය අතර සැඟවුණු අවකාශයක් නොමැත. බොහෝ වෙබ් පිටු සඳහා, මෙය පාඨ සඳහා සීමාවට සමීප වන නමුත්, පසුබිම් ඡායාරූප සහ පිරිසැලසුම් බෙදීම් නිවැරදිව අනුකලනය කිරීම සඳහා එය ආරම්භ කිරීම වැදගත් වේ.
html, body {margin: 0px; වැටීම: 0px; දේශසීමා: 0px; }}පෙරනිමි පෙර සැකසුමක් හෝ අකුරු වර්ණය කලු පැහැය සහ පෙරනිමි පසුබිම් වර්ණය සුදු පැහැය ලෙස සකසන්න. බොහෝ වෙබ් අඩවි නිර්මාණයන් සඳහා බොහෝ විට මෙය බොහෝ විට වෙනස් විය හැකි නමුත්, මෙම වර්ණය මත මෙම සම්මත වර්ණය හා HTML ටැගය මුලින්ම පිටුවට කියවීමට සහ වැඩ කිරීමට පහසු වේ.
html, body {වර්ණය: # 000; පසුබිම: #fff; }}පෙරනිමි අකුරු වර්ග
අකුරු ප්රමාණය සහ ෆොන්ටම් පවුල සැලසුම් කිරීම සිදුකිරීමෙන් පසු අනිවාර්යයෙන් වෙනස් වනු ඇත නමුත් Arial, Geneva හෝ වෙනත් sans-serif අකුරු 1 පෙරනිමි අකුරුවලින් ඇරඹෙන අතර ආරම්භක අකුරු වර්ගය. එම්ස් භාවිතා කිරීම හැකි තරම් ප්රවේශය ලෙස වෙබ් පිටුව තබා ගන්න, සහ sans-serif අකුරු තිරය මත වඩාත් කියවිය හැකි වේ.
html, body, p, th, td, li, dd, dt {font: 1em Arial, Helvetica, sans-serif; }}අක්ෂර මාලාවක් සොයාගත හැකි වෙනත් ස්ථාන තිබිය හැක. නමුත් p , th , td , li , dd , and dt මූලික අකුරු නිර්ණය කිරීම සඳහා හොඳ ආරම්භයක් වේ. HTML සහ සිරුරේ අන්තර්ගතය ඇතුළත් කරන්න, නමුත් බොහෝ බ්රවුසරයන් ඔබට HTML හෝ සිරුරේ ඇති අකුරු පමණක් ඔබේ අකුරු අර්ථ දක්වන්න, ෆොන්ට් තේරීම් අභිබවා යනවා.
සිරස්තල
ඔබේ වෙබ් අඩවියේ විස්තර කිරීමට උපයෝගී කර ගැනීමට HTML සිරස්තල වැදගත් වේ. විලාසිතාවන් නොමැතිව ඒවා සියල්ලම කැතයි. එබැවින් ඔවුන් සියල්ලන්ටම පෙරනිමි අකුරු සකසා, එක් එක් සඳහා ෆොන්ට් පවුල සහ ෆොන්ට් ප්රමාණයන් නිර්වචනය කරති.
h1, h2, h3, h4, h5, h6 {අකුරු-පවුල: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {ෆොන්ට-ප්රමාණය: 0.9em; } h6 {ෆොන්ට-ප්රමාණය: 0.8em; }}ඩොන් ට්රම්ස් අමතන්න
ලින්ක් වර්ණ හැඩ ගැසීම සෑම විටම නිර්මාණයේ විවේචනාත්මක කොටසකි. නමුත් ඔබ ඒවා සුපුරුදු ආකාරයෙන් අර්ථ දැක්වීම නොකරන්නේ නම්, ඔබ අවම වශයෙන් එක් ව්යාජ පංතියකින් එකක්වත් අමතක වනු ඇත. නිල් මත සමහර කුඩා වෙනස්කම් සමඟ ඒවා නිර්වචනය කරන්න. ඉන්පසු ඔබ විසින් වෙබ් අඩවියේ පාට පාට තීරුවක් ඇති විට ඒවා වෙනස් කරන්න.
නිල් වර්ණයන්හි සම්බන්ධතා සකස් කිරීම සඳහා:
- සබැඳි නිල්
- සබැඳි අඳුරු නිල් පැහැති ලෙස
- සබැඳි සැහැල්ලු නිල් පාටින්
- තව දුරටත් නිල් පැහැති නිල් පැහැයක් ගනී
මෙම උදාහරණයේ පෙන්වා ඇති පරිදි:
: link {color: # 00f; } a: visited {color: # 009; } a: hover {වර්ණය: # 06f; } a: ක්රියාකාරී {වර්ණ: # 0cf; } තරමක් අනාරක්ෂිත වර්ණ පටියක් සමඟ සම්බන්ධතා සාදා ගනිමින් එම පන්ති කිසිවක් අමතක නොකරන බවටත්, පැහැය නිල්, රතු සහ දම් යන වර්ණවලට වඩා ටිකක් අඩු ශබ්දයක් බවට පත් කරනු ඇත.සම්පුර්ණ ස්ටයිල් පත්රය
මෙන්න සම්පූර්ණ ශෛලිය පත්රිකාව:
@charset "utf-8"; html, body {margin: 0px; වැටීම: 0px; දේශසීමා: 0px; වර්ණය: # 000; පසුබිම: #fff; } html, body, p, th, td, li, dd, dt {font: 1em Arial, හෙල්විටිකා, sans-serif; } h1, h2, h3, h4, h5, h6 {අකුරු-පවුල: Arial, Helvetica, sans-serif; } h1 {font-size: 2em; } h2 {font-size: 1.5em; } h3 {font-size: 1.2em; } h4 {font-size: 1.0em; } h5 {ෆොන්ට-ප්රමාණය: 0.9em; } h6 {ෆොන්ට-ප්රමාණය: 0.8em; } a: link {වර්ණය: # 00f; } a: visited {color: # 009; } a: hover {වර්ණය: # 06f; } a: ක්රියාකාරී {වර්ණ: # 0cf; }}