გამოყენება ტექსტი Indent ქონების და მიმდებარე ძმა სელექციონერები
კარგი ვებ დიზაინი ხშირად კარგი ტიპოგრაფიაა. მას შემდეგ, რაც იმდენად, რამდენადაც ვებ გვერდის შინაარსი წარმოდგენილია ტექსტის სახით, სტილის რომ ტექსტი, როგორც მიმზიდველი და ეფექტური, არის მნიშვნელოვანი უნარი, რომ ფლობდეს როგორც ვებ დიზაინერი. სამწუხაროდ, ჩვენ არ გვაქვს იმავე დონის ტიპოგრაფიული კონტროლი, რომელიც ჩვენ ვაკეთებთ ბეჭდვით. ეს იმას ნიშნავს, რომ ჩვენ ყოველთვის არ შეგვიძლია საიდუმლო ტექსტის ნახვა ვებსაიტზე ისე, რომ ჩვენ შეგვიძლია ამის გაკეთება დაბეჭდილი ნაჭერით.
ერთი საერთო პუნქტის სტილი, რომელიც ხშირად ვხედავთ ბეჭდვას (და რომელიც შეგვიძლია ონლაინში ხელახლა) არის, სადაც ამ პუნქტის პირველი ხაზი ინერტული ერთი tab სივრცე . ეს საშუალებას აძლევს მკითხველს დაინახოს, სადაც ერთი პუნქტი იწყება და მეორე მთავრდება.
თქვენ ვერ ვხედავ ამ ვიზუალური სტილი იმდენად ვებ გვერდებზე, რადგან ბრაუზერები, ჩვეულებრივ, ქვეპუნქტებს აჩვენებენ სივრცეში, როგორც ჩანს, როგორ გამოიკვეთება ერთი მთავრდება და მეორე იწყება, მაგრამ თუ გსურთ სტილის გვერდი, შთაგონებული აბზაცის შრიფტები, შეგიძლიათ ამის გაკეთება ტექსტის ინდივიდუალური სტილით.
სინტაქსი ამ ქონების მარტივია. აქ არის თუ როგორ დაამატოთ ტექსტის ველში ყველა პუნქტში დოკუმენტი.
p {text-indent: 2em; }ინდიკატორების შეცვლა
ერთი გზა თქვენ შეგიძლიათ მიუთითოთ ზუსტად აბზაცი აბზაცი, შეგიძლიათ დაამატოთ კლასი პუნქტებს, რომელთათვისაც გსურთ ინტენსიური, მაგრამ ეს მოითხოვს ყველა პუნქტს, რომ დაამატოთ კლასი მას. ეს არაეფექტურია და არ შეესაბამება HTML კოდის საუკეთესო პრაქტიკას.
ნაცვლად ამისა, თქვენ უნდა განიხილონ, როდესაც თქვენ აბზაცი აბზაცებს. თქვენ აბზაცებს აბზაცებს, რომლებიც პირდაპირ ეთმობენ სხვა პარაგრაფს. ამისათვის შეგიძლიათ გამოიყენოთ მიმდებარე ძმათა შერჩევა. ამ სელექტორის საშუალებით, თქვენ ირჩევთ ყველა პუნქტს, რომელიც უშუალოდ წინ უსწრებს სხვა პარაგრაფს.
p + p {text-indent: 2em; }მას შემდეგ, რაც თქვენ შედიხართ პირველ ხაზს, ასევე უნდა დარწმუნდეთ იმაში, რომ თქვენს პუნქტებს არ გააჩნიათ დამატებითი სივრცე მათ შორის (რაც ბრაუზერის ნაგულისხმევია). სტილისტურად, თქვენ უნდა ჰქონდეს სივრცე პუნქტებს შორის ან შეავსოთ პირველი ხაზი, მაგრამ არა ორივე.
p {margin-bottom: 0; padding-bottom: 0; } p + p {margin-top: 0; padding-top: 0; }უარყოფითი ინდიენტები
თქვენ ასევე შეგიძლიათ გამოიყენოთ ტექსტი-განზომილებიანი ქონება უარყოფითი ღირებულებით, რათა გამოიწვიოს ხაზის დაწყება მარცხნივ მარცხნივ, როგორც ნორმალური განზომილების მსგავსად. ამის გაკეთება შეგიძლიათ, თუ ხაზი იწყება ციტატა ნიშნით, ასე რომ ციტატის ხასიათი გამოჩნდება პარაგრაფის მარცხენა მხარეს მცირე ზღვარზე და ასოები კვლავ ქმნის კარგ მარცხენა განლაგებას.
მაგალითად, ამბობთ, რომ თქვენ გაქვთ პარაგრაფი, რომელიც ბლოკნოტის შთამომავალია და გინდა რომ უარყოფითი იყოს. თქვენ შეგიძლიათ დაწეროთ ეს CSS:
blockquote p {text-indent: -5em; }ეს მისცემს პარაგრაფის დაწყებას, რომელიც, სავარაუდოდ, მოიცავს საკვანძო სიტყვის სიმბოლოს, უნდა დატოვონ მარცხნივ, ჩამოკიდებული პუნქტუაციის შესაქმნელად.
დაკავშირებით ზღვარი და Padding
Oftentimes ვებ დიზაინი, თქვენ იყენებთ ზღვარი ან padding ღირებულებების გადატანა ელემენტები და შექმნას თეთრი სივრცე. თუმცა ეს თვისებები არ იმუშავებს, რათა მიღწეული იქნას აბზაციანი პუნქტის ეფექტი. თუ ამ მნიშვნელობებს პარაგრაფში მიმართავთ, ამ პუნქტის მთელი ტექსტი, მათ შორის ყველა ხაზი, იქნება მხოლოდ პირველი ხაზის ნაცვლად.