CSS සමඟ අලංකාර ශීර්ෂයන් සාදන්න

සිරස්තල සැරසීමට වර්ණ, දේශසීමා සහ රූප භාවිතා කරන්න

බොහෝ වෙබ් පිටු වල මාතෘකාවන් බහුලව ඇත. ඇත්ත වශයෙන්ම, ඔබ කියවන දෙයෙහි මාතෘකාව ඔබ දැනටමත් අවම වශයෙන් එක් සිරස්තලයක් තිබිය යුතුය. මෙම සිරස්තල ශීර්ෂයන් HTML සිරැසි මූලද්රව්ය භාවිතා කරමින් - h1, h2, h3, h4, h5, සහ h6 භාවිතා කරති.

සමහර අඩවි වල, මෙම මූලද්රව්ය භාවිතයෙන් තොරව සිරස්තල සංකේතාත්මක බවට සොයාගත හැකිය. ඒ වෙනුවට සිරස්තලවලට එකතු කළ විශේෂිත පන්ති ගුණාංග සමඟ ඡේද භාවිතා කළ හැකිය, හෝ පන්ති මූලද්රව්ය සමඟ බෙදීම් භාවිතා කළ හැකිය. මෙම වැරදිසහගත ක්රියාව ගැන මා බොහෝ විට අසන්නට හේතුව වන්නේ නිර්මාණකරු "මාතෘකා දෙස බලන ආකාරය" නොවේ. පෙරනිමියෙන්, ශීර්ෂයන් නිර්ලෝභිතව දිස්වන අතර ඒවා විශාලත්වයෙන් විශාල වන අතර, විශේෂයෙන්ම h1 සහ h2 මූලද්රව්ය අනෙකුත් පිටු වලට වඩා විශාල අකුරු ප්රමාණයෙන් පෙන්වනු ලැබේ. මතක තබාගන්න මෙම අංගය පෙරනිමි පෙනුම පමණි! සීඑස්එස් සමඟ, ඔබට අවශ්ය පරිදි ශීර්ෂය සොයා ගත හැකිය! ඔබට අකුරු ප්රමාණය වෙනස් කළ හැකිය, තද පැහැති අකුරු ඉවත් කිරීම, සහ තවත් බොහෝ දේ. සිරස්තල පිටු ශීර්ෂය සංග්රහ කිරීම සඳහා සුදුසු මාර්ගයකි. මෙන්න හේතු කිහිපයක් මෙන්න.

DIVs හා Styling වෙනුවට හිසරස් ටැග භාවිතා කරන්න

මාතෘකා සෙවීම වැනි සෙවුම් ඇන්ජින්


මාතෘකා භාවිතා කිරීමට හොඳම හේතුව මෙය වන අතර ඒවා නිවැරදි ලෙස පිළිවෙළට භාවිතා කිරීම (එනම් h1, ඊට පසුව h2, h3, ආදිය). සෙවුම් ඇන්ජින් මාතෘකාවට ඉහළම බර ලබා දෙන අතර එම පාඨයට අර්ථකථන වටිනාකමක් ඇත. වෙනත් වචනවලින් කිවහොත්, ඔබේ පිටු ශීර්ෂය H1 ලේබල් කිරීමෙන්, ඔබ සෙවුම් එන්ජිමට පවසන්නේ එම පිටුවෙහි # 1 ඉලක්කය බව ය. H2 ශීර්ෂයන් අංක 2 අවධාරණය කර ඇත.

ඔබ මාතෘකාවල මාතෘකාව නිර්වචනය කිරීමට ඔබ භාවිතා කළ කුමන පන්ති මතකද?

ඔබගේ සියලු වෙබ් පිටු සියල්ලම නිර්භීත, 2 ඊමේල් සහ කහ පැහැයෙන් යුත් H1 වර්ගයක් ඇති බව ඔබ දැනගන්නා විට, ඔබට එය එක් වරක් ඔබේ අර්ථ කථනයේ දී අර්ථ දැක්විය හැකිය. තව මාස 6 කින් පසු, ඔබ වෙනත් පිටුවක් එකතු කරන විට, ඔබ හුදෙක් ඔබගේ පිටුවේ ඉහළට H1 ටැගයක් එක් කරන්න, ඔබ විසින් ඔබ විසින් භාවිතා කරන ලද ශෛලිය හැඳුනුම්පත හෝ පන්තිය කුමක්ද යන්න සොයා ගැනීමට වෙනත් පිටු වෙත ආපසු යෑමට අවශ්ය නොවේ සිරස්තලය සහ උප ප්රධානීන්.

ඔවුන් සවිස්තරාත්මක පිටු රචනයක් සපයයි

පාඨය කියවීමට පහසු කරවයි. බොහෝමයක් එක්සත් ජනපද පාසැල් සිසුන්ට ලිපියක් ලිවීමට පෙර සටහනක් ලිවීමට සිසුන්ට උගන්වන ලදී. ආකෘතියේ ආකෘතියේ ඔබ භාවිතා කරන ටැග භාවිතා කරන විට, ඔබේ පාඨය ඉතා ඉක්මණින් පැහැදිලිව පෙනෙන පැහැදිලි ව්යුහයක් ඇත. ප්ලස්, සාරාංශයක් සැපයීම සඳහා පිටු සැළැස්ම සමාලෝචනය කළ හැකි මෙවලම් දළුව ව්යුහය සඳහා ශීර්ෂයන් ටැග් මත රඳා පවතී.

ඔබේ පිටුව හැඟීම් ඇති වුවද, ඔබේ සිත් හරියි

සෑම කෙනෙකුටම ශෛල පත්රයන් බැලීම හෝ භාවිතා කිරීම කළ නොහැක (මෙය නැවත # 1 වෙත පැමිණෙයි. - සෙවුම් යන්ත්ර ඔබේ පිටුවෙහි අන්තර්ගතය (පෙළ) බලන්න, ශෛලිය පත්ර නොමැතිව). ඔබ මාතෘකා ටැග භාවිතා කරන්නේ නම්, ඔබ පිටු වඩා පහසුවෙන් ප්රවේශ විය හැකි අතර මාතෘකාව DIV ටැග් නොකරන තොරතුරු සපයයි.

Screen Readers සහ වෙබ් අඩවි ප්රවේශය සඳහා එය ප්රයෝජනවත් වේ

ශීර්ෂයන් නිසි ලෙස භාවිතා කිරීම ලේඛනයක් සඳහා තර්කානුකූල ව්යුහයක් නිර්මාණය කරයි. දෘශ්ය ආබාධ සහිත පරිශීලකයෙකුට වෙබ් අඩවියට කියවීමට "Screen readers" භාවිතා කරනු ලබන්නේ, ඔබේ වෙබ් අඩවියට ආබාධ සහිත පුද්ගලයන්ට ප්රවේශ වීමයි.

ඔබගේ ශීර්ෂ සිරස්තලයෙහි පෙළ සහ සිරස්තල ය

මාතෘකා මාතෘකාව පිළිබඳ "විශාල, නිර්භීත සහ අප්රසන්න" වලින් ඉවත් වීමට පහසුම ක්රමය වනුයේ ඔබට පෙනෙන විදිහට පාඨය හැඩ ගැසීමයි. ඇත්ත වශයෙන්ම, මම නව වෙබ් අඩවියක වැඩ කරන විට, මම සාමාන්යයෙන් පළමු ඡේදය, h1, h2, සහ h3 ලෙස ලිවිය හැකිය. සාමාන්යයෙන් මම සාමාන්යයෙන් ෆොන්ට ෆේස්බුක් සහ ප්රමාණය / බර භාවිතා කරමි. උදාහරණයක් ලෙස, මෙය නව වෙබ් අඩවියකට මුලික ශිලා පත්රය විය හැකිය (මේවා පමණක් භාවිතා කළ හැකි නිදසුන් වේ):

ශරීරය, html {මාදින්: 0; වැටීම: 0; } p {font: 1em Arial, ජිනීවා, හෙල්විටිකා, sans-serif; } h1 {අකුරු: bold 2em "Times New Roman", ටයිම්ස්, සේරිෆ්; } h2 {අක්ෂර: තද වර්ණ 1.5 ට "ටයිම්ස් නව රෝමන්", ටයිම්ස්, සේරිෆ්; } h3 {font: bold 1.2em Arial, ජිනීවා, හෙල්විටිකා, sans-serif; }}

ඔබට ඔබගේ සිරස්තලයෙහි අකුරු වෙනස් කළ හැකිය හෝ පෙළ ස්තරය හෝ පෙළ වර්ණය වෙනස් කළ හැකිය. මෙම සියල්ලම ඔබගේ "අප්රසන්න" ශීර්ෂය වඩා බලවත් යමක් බවට පත් කර ඔබේ නිර්මාණය අනුව ය.

h1 {අකුරු: තද ඇලකුරු 2em / 1em "Times New Roman", "MS Serif", "නිව් යෝර්ක්", serif; ආන්තික: 0; වැටීම: 0; වර්ණය: # e7ce00; }}

සීමා මායිම් සිරස්තල පැළඳිය හැකිය

දේශසීමා ඔබේ සිරස්තල ඉහළ නැංවීමට විශිෂ්ට ක්රමයකි. සීමා මායිම් එකතු කිරීම පහසුය. නමුත් දේශසීමා අත්හදා බැලීමට අමතක නොකරන්න - ඔබගේ සිරස්තලය එක් එක් පැත්තට සීමාවක් අවශ්ය නොවේ. ඒ වගේම ඔබ ඉතා සරල වෙහෙසකින් යුක්තයි.

h1 {අකුරු: තද ඇලකුරු 2em / 1em "Times New Roman", "MS Serif", "නිව් යෝර්ක්", serif; ආන්තික: 0; වැටීම: 0; වර්ණය: # e7ce00; මායිම්-ඉහළ: ඝන # e7ce00 මධ්ය; මායිම්-පහළ: තිත් # e7ce00 සිහින්; පළල: 600px; }}

සමහර රසවත් දෘශ්ය විලාසිතා හඳුන්වා දීම සඳහා මගේ සිරස්තලයේ සිරස්තලය වෙත ඉහළ සහ පහළ මායිමක් එකතු කළා. ඔබට අවශ්ය පරිදි නිර්මාණය කරන ලද විලාසිතා අත්පත් කර ගැනීමට ඔබට අවශ්ය පරිදි ඕනෑම දේශයකින් එක් කළ හැකිය.

ඔබගේ සිරස්තල වලට පසුබිම් රූප එක් කිරීමට තවත් Pizzz සඳහා එකතු කරන්න

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

h1 {අකුරු: තද ඇලකුරු 3em / 1em "Times New Roman", "MS Serif", "නිව් යෝර්ක්", serif; පසුබිම: #fff url ("fancyheadline.jpg") repeat-x bottom; padding: 0.5em 0 90px 0; පෙළ-align: මධ්ය; ආන්තික: 0; මායිම්-පහළ: ඝන # e7ce00 0.25em; වර්ණය: # e7ce00; }}

මෙම සිරස්තලය සඳහා උපාය වන්නේ මගේ පික්සල 90 පික්සල් උසයි. ඒ නිසා 90px හි සිරස්තලයෙහි පතුළට වැටීම (padding: 0.5 0 90px 0p;). ඔබට අවශ්ය වන්නේ කොතැනදැයි පෙන්වීම සඳහා සිරස්තලයෙහි පෙළ ආවරණය කිරීමට ඔබට ආන්තික, රේඛා-උස සහ වැල්ඩින් සෙල්ලම් කළ හැකිය.

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

සිරස්තලවල පින්තූර මාරු කිරීම

මෙය වෙබ් නිර්මාණකරුවන් සඳහා තවත් ජනප්රිය ක්රමයකි. එමඟින් ඔබට චිත්රක ශීර්ෂයක් නිර්මාණය කර එම රූපය සමඟ මාතෘකයේ ටැගයේ පිටපත ආදේශ කරන්න. මෙය සැබැවින්ම වෙබ් නිර්මාණකරුවන්ගේ පුරාවෘත භාවිතය නිසා අකුරු කිහිපයක් ස්වල්පයක් වෙත ප්රවේශ වීමෙන් හා ඔවුන්ගේ වැඩ වලදී වඩාත් සුවිශේෂී අකුරු භාවිතා කිරීමට අවශ්ය විය. වෙබ් අකුරු වල නැගීම සැබැවින්ම නිර්මාණකරුවන් වෙබ් අඩවි වෙත පිවිසෙන්නේ කෙසේද යන්න වෙනස් කර ඇත. ශීර්ෂ පාඨ ශීර්ෂ පාඨ විශාල ප්රමාණයක් ෆොන්ට් වල සිට සකස් කර ඇති අතර ඒවා ඇතුළත් කර ඇති අක්ෂර සහිත පින්තූර තවදුරටත් අවශ්ය නොවේ. ඒ අනුව, ඔබට නවීන පිළිවෙත්වලට තවමත් යාවත්කාලීන කර නැති පැරණි අඩවි මත ශීර්ෂ පාඨ සඳහා ආදේශ කර ඇත.

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