Როგორ ამოიღონ ნაგულისხმები ბრაუზერი სტილის სამაგისტრო სტილისტი

მიიღეთ ფაქტები ამ რჩევები

ყველა ვებ ბრაუზერის მოიცავს რა იცის, როგორც "უხერხული სტილის." ეს არის სტილი, რომელიც უკარნახებს HTML ელემენტების სახეს და გრძნობს სხვა სტილის ინფორმაციის არარსებობისას. მაგალითად, თითქმის ყველა ბრაუზერიში ჰიპერბმულებს ახასიათებს ნათელი ლურჯი ფერი. ეს არის ის, თუ როგორ აკავშირებს ეს ბმულები, თუ მათ არ უთქვამთ სხვაგვარად ჩვენება.

ნაგულისხმები ბრაუზერის სტილები შეიძლება გამოსადეგი იყოს, მაგრამ ხშირ შემთხვევაში ვებ დიზაინერებს ამ სტილის ამოღება სურთ, რათა მათ შეძლონ ახალი სტილი, რომ ისინი 100% -ით არიან კონტროლი. ეს კეთდება იმის შესახებ, თუ რა არის ცნობილი როგორც "სამაგისტრო სტილის".

სამაგისტრო სტილისტი უნდა იყოს პირველი სტილისტი, რომელსაც ყველა დოკუმენტში მოგიწოდებთ. თქვენ იყენებთ სამაგისტრო სტილისტს, რათა გაირკვეს ნაგულისხმევი ბრაუზერი პარამეტრები, რომელიც შეიძლება გამოიწვიოს პრობლემებს ბრაუზერის ვებ-დიზაინში. ერთხელ თქვენ გაირკვეს სტილის სამაგისტრო სტილისტი, თქვენი დიზაინი იწყება იმავე ადგილას ყველა ბრაუზერში - ისევე როგორც სუფთა ტილო ფერწერა.

გლობალური დეფექტები

შენი სამაგისტრო სტილის უნდა დაიწყოს zeroing გარეთ მინდვრები, paddings და საზღვრების გვერდზე. ზოგიერთი ბრაუზერი, ჩვეულებრივ, დოკუმენტის ორგანოს 1 ან 2 პიქსელზე, რომლებიც ბრაუზერის სარკმელზე მწკრივზე გამოდიან. ეს კი დარწმუნებულია, რომ ისინი ყველაფერს აჩვენებენ:

html, სხეული {margin: 0px; padding: 0px; საზღვარი: 0px; }

თქვენ ასევე გსურთ შრიფტის შედგენა. დარწმუნდით, რომ შრიფტის ზომა 100% -მდე ან 1-ს შეადგენდა, რომ თქვენი გვერდი ხელმისაწვდომი იყოს, მაგრამ ზომა მაინც თანმიმდევრულია. და დარწმუნდით, რომ ხაზი-სიმაღლეა.

სხეული {font: 1em / 1.25 Arial, Helvetica, sans-serif; }

სათაურის ფორმატირება

სათაურის ან სათაურების tags (H1, H2, H3 და ა.შ.), როგორც წესი, ნაგულისხმევი თამამი ტექსტი დიდი მინდვრები ან padding მათ გარშემო. წონის, მინდვრებისა და პანდინგის გაწმენდისას, დარწმუნდით, რომ ეს ტეგები ჯერ კიდევ უფრო დიდია (ან უფრო მცირე), ვიდრე მათზე ტექსტური ზედმეტი სტილის გარეშე:

h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; შრიფტის წონა: ნორმალური; შრიფტის ოჯახი: Arial, Helvetica, sans-serif; }

დაგვჭირდება განიხილოს კონკრეტული ზომები, წერილების ინტერვალი და პედიკები თქვენს სათაურში, მაგრამ ეს მართლაც დამოკიდებულია საიტის დიზაინზე და უნდა დატოვონ სამაგისტრო სტილის ფურცელი. თქვენ შეგიძლიათ დაამატოთ მეტი სტილები ამ სათაურით, როგორც საჭიროა თქვენი კონკრეტული დიზაინი.

მარტივი ტექსტის ფორმატირება

ქვემოთ მოყვანილი სათაურები, არსებობს სხვა ტექსტური ტეგები, რომ დარწმუნებული უნდა იყოთ გასაგები. ერთი კომპლექტი, რომ ხალხი ხშირად დაივიწყოს არის მაგიდის უჯრედების tags (თ და TD) და ფორმის tags (SELECT, TEXTAREA და INPUT). თუ თქვენი სხეულისა და პარაგრაფის ტექსტის იგივე ზომა არ არის დაყენებული, შეიძლება გაუგებრად გაკვირვებული იყოთ ბრაუზერები.

p, th, td, li, dd, dt, ul, ოკ, blockquote, q, აკრონიმი, abbr, a, შეყვანა, შერჩევა, ტექსვერა {margin: 0; padding: 0; შრიფტი: ნორმალური ნორმალური ნორმალური 1M / 1.25 Arial, Helvetica, sans-serif; }

ეს ასევე სასიამოვნოა თქვენი ციტატების (ბლოკნოტი და Q), აკრონიმები და აბრევიატურები პატარა დამატებითი სტილი, რათა მათ უფრო მეტი გამოდგეს:

ბლოკნოტი {margin: 1.25; padding: 1.25em} q {font-style: italic; } აკრონიმი, abbr {cursor: help; საზღვრის ქვედა: 1px დატეხილი; }

ბმულები და სურათები

ბმულები ადვილად მართავენ და შეცვლით ზემოთ მოყვანილი ნათელი ლურჯი ხაზით. მე ყოველთვის ვურჩევ ყოველთვის, რომ ჩემი ბმულები ხაზგასმით აღინიშნა, მაგრამ თუ ის სხვაგვარად მირჩევს, შეგიძლიათ ამ პარამეტრების ცალკე. მე ასევე არ შედის სამაგისტრო სტილის ფერები, რადგან ეს დიზაინი დამოკიდებულია დიზაინზე.

a, ბმული: a: ეწვია, აქტიური, a: hover {ტექსტი გაფორმება: ხაზგასმული; }

სურათებით, მნიშვნელოვანია გამორთოთ საზღვრები. მიუხედავად იმისა, რომ ყველაზე ბრაუზერები არ არიან საზღვრის გარშემო უბრალო გამოსახულება, როდესაც გამოსახულება უკავშირდება, ბრაუზერები ჩართოთ საზღვარზე. ამის დაფიქსირება:

img {border: none; }

მაგიდები

მიუხედავად იმისა, რომ მაგიდები აღარ გამოიყენება განლაგების მიზნებისათვის, თქვენ შეგიძლიათ გამოიყენოთ ისინი ფაქტობრივი ჩამწერი მონაცემებისთვის. ეს არის HTML ცხრილების შესანიშნავი გამოყენება. ჩვენ უკვე დარწმუნებული ვიყავით, რომ ნაგულისხმევი ტექსტი ზომა არის თქვენს მაგიდის უჯრედებისთვის, მაგრამ არსებობს რამდენიმე სხვა სტილის შექმნა, რომ თქვენი მაგიდები იგივე დარჩეს:

მაგიდა {margin: 0; padding: 0; საზღვარი: არა; }

ფორმები

ისევე როგორც სხვა ელემენტებთან ერთად, უნდა გამოიკვეთოთ მინდვრები და paddings თქვენს გარშემო. კიდევ ერთი რამ მე მინდა გავაკეთო არის გადაწერა ფორმა tag როგორც " inline " ისე, რომ იგი არ დაამატოთ დამატებითი სივრცე, სადაც თქვენ დაამატე tag in კოდი. როგორც სხვა ტექსტური ელემენტებით, მე განსაზღვრავს შრიფტის ინფორმაციას შერჩევა, ტექსტური და შეყვანის ზემოთ, ისე, რომ ეს იგივეა, რაც დანარჩენი ჩემი ტექსტი.

ფორმა {margin: 0; padding: 0; ჩვენება: inline; }

ეს არის კარგი იდეა, რომ შეცვალოთ კურსორი თქვენი ეტიკეტებისათვის. ეს ხელს უწყობს ხალხს იმის დანახვაში, რომ ეტიკეტი გააკეთებს რაღაცას, როდესაც ისინი დაწკაპუნებით.

ლეიბლი {კურსორი: მაჩვენებელი; }

საერთო კლასები

სამაგისტრო სტილის ამ ნაწილში, თქვენ უნდა განისაზღვროს ისეთი კლასები, რომლებსაც გაგაცნობთ. ეს არის რამდენიმე კლასი მე ყველაზე ხშირად ვიყენებ. გაითვალისწინეთ, რომ ისინი არ არის მითითებული რომელიმე კონკრეტულ ელემენტად, ასე რომ თქვენ შეგიძლიათ მიანიჭოთ მათ რაც გჭირდებათ:

.წმინარი {ნათელი: ორივე; } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; }. textJustify {text-align: justify; }. ბლოკენტორი {ჩვენება: ბლოკი; ზღვარი მარცხნივ: ავტო; ზღვარი მარჯვნივ: ავტო; } / * გახსოვდეთ მითითებული სიგანე * / .old {font- წონა: თამამი; } .ტრადიციული {font-style: italic; }. სასაუბრო {ტექსტური გაფორმება: ხაზგასმული; }. ნიშნები {margin-left: 0; padding-left: 0; }. nomargin {margin: 0; }. ნოუთბირება {padding: 0; } .Nobullet {list-style: none; სიის სტილის სურათი: არა; }

გახსოვდეთ, რომ ეს კლასები იბეჭდება ნებისმიერ სხვა სტილის წინაშე და ისინი უბრალოდ კლასები არიან, უფრო ადვილად გამოდიან კონკრეტული სტილის თვისებები, რომლებიც მოგვიანებით კასკადში მოხდება . თუ აღმოაჩენთ, რომ ელემენტზე საერთო კლასს დაყენებთ და არ მოქმედებს, თქვენ უნდა შეამოწმოთ, რომ არ არსებობს სხვა სტილის ერთ-ერთი მოგვიანებით სტილის გამოყენება იმავე ელემენტზე.

მთელი სამაგისტრო სტილისტი

/ * გლობალური დეფოლტები * / html, სხეული {margin: 0px; padding: 0px; საზღვარი: 0px; } სხეული {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * სათაურები * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; შრიფტის წონა: ნორმალური; შრიფტის ოჯახი: Arial, Helvetica, sans-serif; } / * ტექსტის სტილები * / p, th, td, li, dd, dt, ul, ოკ, ბლოკნოტი, რ, აკრონიმი, abbr, a, შეყვანა, შერჩევა, ტექსვერა {margin: 0; padding: 0; შრიფტი: ნორმალური ნორმალური ნორმალური 1M / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } აკრონიმი, abbr {cursor: help; საზღვრის ქვედა: 1px დატეხილი; } პატარა {font-size: .85em; } დიდი {font-size: 1.2em; } / * ბმულები და სურათები * / a, ბმული:: ეწვია, აქტიური, a: hover {text-decoration: underline; } img {border: none; } / * მაგიდები * / მაგიდა {margin: 0; padding: 0; საზღვარი: არა; } / * ფორმები * / ფორმა {margin: 0; padding: 0; ჩვენება: inline; } ლეიბლი {კურსორი: მაჩვენებელი; } / * საერთო კლასები * /. } .floatLeft {float: left; } .floatRight {float: right; } .textLeft {text-align: left; } .textRight {text-align: right; } .textCenter {text-align: center; }. textJustify {text-align: justify; }. ბლოკენტორი {ჩვენება: ბლოკი; ზღვარი მარცხნივ: ავტო; ზღვარი მარჯვნივ: ავტო; } / * გახსოვდეთ მითითებული სიგანე * / .old {font- წონა: თამამი; } .ტრადიციული {font-style: italic; }. სასაუბრო {ტექსტური გაფორმება: ხაზგასმული; }. ნიშნები {margin-left: 0; padding-left: 0; }. nomargin {margin: 0; }. ნოუთბირება {padding: 0; } .Nobullet {list-style: none; სიის სტილის სურათი: არა; }

ჯენიფერ კრიინინის ორიგინალური სტატია. რედაქტირებულია Jeremy Girard on 10/6/17