კარგი დღე, საიტის მშენებლობის გიკები. დღევანდელ პუბლიკაციაში განვიხილავთ თემას, რომელიც დაკავშირებულია ტექსტის შინაარსის დიზაინთან. ამიტომაც ისწავლით თუ როგორ უნდა დააყენოთ css დიდი ასოები - საშუალებით, გაეცანით ვარდნის ქუდის შესაქმნელად რამდენიმე ვარიანტს და, რა თქმა უნდა, შეგიძლიათ ყველაფერი პრაქტიკაში სცადოთ. ახლა მოდით გადავიდეთ მხიარულ ნაწილზე!
მოდით შევცვალოთ ტექსტი
კასკადური სტილის ფურცლებით შეგიძლიათ შეცვალოთ როგორც ბლოკის პირველი სიმბოლო, ასევე ყველა ტექსტი. მე გაჩვენებ როგორ შეგიძლია ორივე გააკეთო. უფრო მეტიც, ამ სტატიაში დასახელებული ყველა ინსტრუმენტი მხარდაჭერილია ენის სამ დონეზე: css1, css2, css2.1 და css3.
დავიწყებ საინტერესო თვისებით, რომელიც ცვლის ტექსტის ყველა შინაარსს შერჩევაში. ის ტექსტი-გარდაქმნა.
დასახელებულ ელემენტს შეუძლია სიმბოლოები გადააქციოს დიდ, მცირე ასოებად და ასევე დააწეროს სიტყვის ყველა პირველი სიმბოლო. მე დავწერე უფრო მეტი ცხრილის ღირებულებების შესახებ.
ახლა, თეორიული მასალის გასაერთიანებლად, აიღეთ მაგალითი.
ყურადღება!
ხვალ არის ფასდაკლება სილამაზის ყველა პროდუქტზე!
აქცია მოქმედებს თქვენს ქალაქში მდებარე ყველა ფილიალში.
შექმენით წვეთოვანი ქუდი
თუ არ იცით რას ნიშნავს ტერმინი "ვარდნის ქუდი", მაშინ დროა გაარკვიოთ, რადგან ის პირდაპირ კავშირშია მიმდინარე თემასთან.
ვარდნის ქუდი (ან ზოგჯერ საწყისი) არის თავის პირველი ასო, რომელიც დანარჩენისგან განსხვავდება მისი დიდი ზომით, ფერით და, ზოგიერთ შემთხვევაში, შრიფტის დიზაინითაც კი. ცხოვრებაში, ასეთი წერილის მაგალითი შეგიძლიათ ნახოთ ძველ ხელნაწერებსა და წიგნებში.
საწყისის შესაქმნელად რამდენიმე გზა არსებობს. ხშირად პერსონაჟი მონიშნულია მარკირების ენის ტეგით და ამის შემდეგ, გარკვეული თვისებები ინიშნება სტილში, რომელიც მას ცვლის. ეს კარგი გზაა, მაგრამ ეს გამოცემა საუბრობს css მექანიზმებზე (რომლის გამოყენებაც, ჩემი აზრით, ბევრად უფრო ლოგიკური და მოსახერხებელია ამ შემთხვევაში).
პრობლემის გადასაჭრელად, შეგიძლიათ გამოიყენოთ ისეთი ინსტრუმენტი, როგორიცაა.
ამრიგად, ამ შემთხვევაში: პირველი ასო გამოიყენება. ყველა ფსევდოელემენტის მსგავსად, ის ენიჭება სელექტორს, გამოყოფილია კოლონებით. მას შემდეგ, რაც სტილის ფურცლების ყველა წესის თანახმად, მითითებულია თვისებები. თუმცა, თქვენ შეგიძლიათ გამოიყენოთ მხოლოდ შრიფტების, შევსების, ფერის, ფონის, მინდვრების და საზღვრების რედაქტირების თვისებები.
მე ვთავაზობ კონკრეტული მაგალითის განხილვას. წარმოდგენილი მცირე პროგრამის განხორციელებისას, მე გადავწყვიტე არა მხოლოდ ფერადი წვეთოვანი ქუდის გაკეთება, არამედ ყვავილებით შევსება. ამისათვის თქვენ უნდა გამოიყენოთ რამდენიმე სახიფათო ხრიკი გამჭვირვალე შრიფტის ფერის დაყენებით და ასოს შევსებული არჩეული გამოსახულებით.
ეს პუნქტი შეიცავს წინადადებას ძალიან საინტერესო შინაარსით.
განვაგრძოთ საინტერესო ისტორია მომდევნო აბზაცში.
შედეგი გამოიყურება ძალიან მიმზიდველი და უჩვეულო, რაც შესანიშნავი გამოსავალია.
როგორც ხედავთ, ეს თემა ძალიან მარტივია. თქვენ შეგიძლიათ მარტივად გამოიყენოთ ჩემს მიერ მოცემული პროგრამის კოდი თქვენი ვებ რესურსებისთვის, შეცვალოთ და შეცვალოთ თქვენი სტილი.
თუ ზემოთ მოყვანილი მასალა თქვენთვის სასარგებლო იყო, მაშინ გამოიწერეთ განახლებები ჩემს ბლოგში და არ დაგავიწყდეთ მიღებული ცოდნის (და რა თქმა უნდა ჩემი ბლოგის ბმულის) გაზიარება თქვენს მეგობრებს. Წარმატებები!
Ნახვამდის!
პატივისცემით, რომან ჩუეშოვი
დიდი ასო, განმარტების თანახმად, არის ტექსტის ელემენტი, რომელიც გაზრდილია ზომაში თითქმის ყველა ენაზე, წინადადება იწყება დიდი ასოებით. აბზაცის დასაწყისის დიზაინი დიდი ასოებით გაძლევთ ტექსტის სტრუქტურას და აადვილებს კითხვას. როდესაც ვებ გვერდი იქმნება, ტექსტი შეიძლება დაიწეროს ავტორის პრეფერენციებისა და რუსული ენის წესების შესაბამისად. ასევე, მისი დიზაინი შეიძლება იყოს "ავტომატიზირებული" გარკვეული "ბრძანებების" ფაილში css გაფართოებით - სტილის ფურცლის შეყვანით, ან დაამატოთ თქვენი html ფაილი სტილის განყოფილებით. CSS ჩვეულებრივ დამატებით არის შესწავლილი html– ით, რათა სწრაფად შეიცვალოს დიზაინის ზოგიერთი ელემენტი მთელ ტექსტში ერთდროულად.
ეს განსაკუთრებით ეხება იმ შემთხვევაში, თუ საიტს აქვს ასობით გვერდი და თითოეულ მათგანში ცვლილებების შეტანა ძალიან შრომატევადი პროცესია.
თუ იყენებთ css- ს, თითოეული აბზაცის დასაწყისში დიდი ასოები შეიძლება განსაკუთრებულად გამოიყურებოდეს. მაგალითად, ქვემოთ მოყვანილი კოდი, html ფრჩხილის გარეშე, საშუალებას აძლევს ტექსტს, მორთული "p" ტეგით, გააკეთოს დიდი ასო - პირველი ასო - უფრო დიდი - სტანდარტული ზომის 220%, ყვითელი - ფერის მნიშვნელობა ყვითელი და ჩაწერეთ შრიფტით, განსხვავდება დანარჩენი ტექსტისგან - საქართველო ბათანჩეს წინააღმდეგ.
(<) style(>)
p: პირველი ასო (შრიფტი-ოჯახი: საქართველო; შრიფტის ზომა: 220%; ფერი: ყვითელი;)
(<)/style(>)
თქვენ შეგიძლიათ მიიღოთ ლამაზი დიდი ასოები საკუთარი შრიფტის შექმნით სურათების სახით - თითოეული ასოისთვის ცალკე სურათი, მაგალითად, ძველი რუსული ან გოთური სტილით. მათი დახატვა შესაძლებელია შემდეგ, დიდი ასოების ნაცვლად საჭირო ადგილებში, შეგიძლიათ ჩასვათ კოდი ფრჩხილების გარეშე (<) img src=”ссылка на место, где лежит картинка”(>). დამატებითი ატრიბუტები იქნება სიმაღლე და სიგანე - სურათის სიგანე და სიმაღლე, რომელიც შეიძლება დაყენდეს პიქსელებში, რათა ჰარმონიულად იყოს შერწყმული დანარჩენ ტექსტთან. მაგალითი: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). ირგვლივ ფრჩხილები< и >ჩვენ ამოვიღებთ.
თუ თქვენ არ გაქვთ შესაძლებლობა თავად დახატოთ ანბანი, მაშინ დიდი ასოების ფორმატირება შესაძლებელია Google- ში თავისუფლად ხელმისაწვდომი შრიფტების გამოყენებით (განყოფილება შრიფტები) ან სხვა საძიებო სისტემებსა და რესურსებში. ამისათვის ზემოთ მოყვანილი კოდი უნდა იყოს ფორმატირებული შემდეგნაირად:
(<) style(>)
p (font-family: batangche; font-size: 93%;)
p: პირველი ასო (შრიფტი-ოჯახი: კელი + ფილა; შრიფტის ზომა: 220%; ფერი: ლურჯი;)
(<)/style(>)
(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).
Google სერვისი გაძლევთ საშუალებას აირჩიოთ ერთი ან მეორე და გთავაზობთ მზა ბმულებს html ან css– ში ჩასასმელად. ჩვენ თქვენს ყურადღებას ვაქცევთ იმ ფაქტს, რომ აუცილებელია შრიფტების ჯგუფის შერჩევა - ლათინური ან კირიული, რადგან თითქმის ყველა ლათინური შრიფტი არ მუშაობს რუსულენოვან ტექსტზე. ამ დროისთვის საძიებო სისტემა გთავაზობთ დაახლოებით 40 ტიპს უფასოდ.
დიდი ასო ან მისი დიდი კოლეგა შეიძლება სტილიზდეს CSS ტექსტის გარდაქმნის თვისების გამოყენებით. თუ თქვენ დააყენებთ ტექსტის გარდაქმნას: არანაირი მნიშვნელობა სტილის ფურცელში, მაშინ ტექსტი გამოიყურება როგორც თქვენ წერთ. ყველა ასო მცირე ზომის გადასაყვანად, დააყენეთ ტექსტის გარდაქმნა: მცირე მნიშვნელობა გამოყოფილია მსხვილი ნაწლავით და დიდი ასო - დიდი. ტექსტის გარდაქმნის თვისება: კაპიტალიზაციით მოხდება ისე, რომ თითოეული სიტყვის დასაწყისში არის დიდი ასო.
საშუალებას გაძლევთ შეცვალოთ ტექსტის ასოები.
სტანდარტულად, მნიშვნელობა დაყენებულია არცერთზე, რაც გავლენას არ ახდენს ტექსტზე. ტექსტის შემთხვევა იგივე რჩება. დიდი და მცირე მნიშვნელობები გადააქცევს სიმბოლოებს, შესაბამისად, დიდ და მცირე ასოებად. თუ თქვენ მიუთითებთ კაპიტალიზირებულ მნიშვნელობას, მაშინ თითოეული სიტყვის მხოლოდ პირველი სიმბოლოები იქნება კაპიტალიზებული. მემკვიდრეობა მემკვიდრეობით იღებს მნიშვნელობას მშობლისგან.
მაგალითი
h3 (ტექსტის გარდაქმნა: დიდი;). მცირე ზომის (ტექსტის გარდაქმნა: მცირე;). კაპიტალიზაციაეს არის სათაური. მას აქვს ტექსტის გარდაქმნის თვისება დაყენებული დიდზე. ყველა სიმბოლო იქნება დიდი.
Text-transform Property გამოყენებულია ამ პარაგრაფზე მცირე მნიშვნელობით, რაც ნიშნავს რომ ყველა ასო იქნება მცირე ზომის.
ამ ბოლო აბზაცს აქვს ტექსტის გარდაქმნის თვისება, რომელსაც აქვს კაპიტალიზაციის თვისება. თითოეული სიტყვის პირველი ასოები იქნება დიდი და მხოლოდ ეს.