მინიატურა

მინიატურა

ჩვეულებრივზე მეტი

ჩვეულებრივზე ნაკლები

დახრილები

დახრილები

ხაზგასმით

დარტყმა

სტილის ატრიბუტის შესაძლებლობები

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

1) font-family - თვისება ადგენს შრიფტების ოჯახს. შესაძლებელია რამდენიმე მნიშვნელობის ჩამოთვლა.
html-ში შრიფტის შეცვლა შემდეგ მნიშვნელობაზე მოხდება, თუ წინა ოჯახი არ არის დაყენებული მომხმარებლის ოპერაციულ სისტემაზე.

ჩაწერის სინტაქსი:

font-family: font-name [, font-name[, ...]]

2) font-size - ზომა დაყენებულია 1-დან 7-მდე. ეს არის ერთ-ერთი მთავარი გზა, რომლითაც შეგიძლიათ შრიფტის გაზრდა html-ში.
ჩაწერის სინტაქსი:

შრიფტის ზომა: აბსოლუტური ზომა | შედარებითი ზომა | ღირებულება | ინტერესი | მემკვიდრეობით

თქვენ ასევე შეგიძლიათ დააყენოთ შრიფტის ზომა:

• პიქსელებში;
• აბსოლუტური თვალსაზრისით ( xx-პატარა, x-პატარა, პატარა, საშუალო, დიდი);
• პროცენტებში;
• პუნქტებში (პტ).

შრიფტის ზომა: 7

შრიფტის ზომა: 24 პიქსელი

შრიფტის ზომა: x-large

შრიფტის ზომა: 200%

შრიფტის ზომა: 24 pt

3) font-style - ადგენს შრიფტის სტილს. Სინტაქსი:

შრიფტის სტილი: ნორმალური | დახრილი | ირიბი | მემკვიდრეობით

ღირებულებები:

• ნორმალური - ნორმალური მართლწერა;
• დახრილი - დახრილი
• oblique - შრიფტი მარჯვნივ დახრილობით;
• inherit - მემკვიდრეობით იღებს მშობელი ელემენტის მართლწერას.

მაგალითი იმისა, თუ როგორ უნდა შეცვალოთ შრიფტი html-ში ამ თვისების გამოყენებით:

შრიფტის სტილი: მემკვიდრეობა

შრიფტის სტილი: დახრილი

შრიფტის სტილი: ნორმალური

შრიფტის სტილი: oblique

4) font-variant - გარდაქმნის ყველა დიდ ასოს დიდზე. Სინტაქსი:

font-variant: ნორმალური | პატარა ქუდები | მემკვიდრეობით

მაგალითი იმისა, თუ როგორ უნდა შეცვალოთ შრიფტი html-ში ამ თვისებით:

font-variant:inherit

შრიფტი-ვარიანტი: ნორმალური

font-variant:small-caps

5) font-weight - საშუალებას გაძლევთ დააყენოთ ტექსტის ჩაწერის სისქე (გაჯერება). Სინტაქსი:

შრიფტის წონა: თამამი | უფრო თამამი | მსუბუქია | ნორმალური | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

ღირებულებები:

• bold - აყენებს html შრიფტს თამამად;
• bolder - უფრო თამამი შედარებით ნორმალური;
• მსუბუქია - ნაკლებად გაჯერებული ნორმასთან შედარებით;
• ნორმალური - ნორმალური მართლწერა;
• 100-900 - ადგენს შრიფტის სისქეს რიცხვით.

შრიფტის წონა: თამამი

შრიფტის წონა: უფრო თამამი

შრიფტის წონა: მსუბუქია

შრიფტის წონა: ნორმალური

შრიფტის წონა: 900

შრიფტის წონა: 100

შრიფტის თვისება და html შრიფტის ფერი

შრიფტი კონტეინერის კიდევ ერთი თვისებაა. შინაგანად, იგი აერთიანებდა რამდენიმე თვისების მნიშვნელობებს, რომლებიც შექმნილია შრიფტების შესაცვლელად. შრიფტის სინტაქსი:

font: font-size font-family | მემკვიდრეობით

ასევე, სისტემის მიერ გამოყენებული შრიფტები სხვადასხვა კონტროლის ეტიკეტებში შეიძლება დაყენდეს მნიშვნელობად:

• წარწერა - ღილაკებისთვის;
• ხატულა - ხატებისთვის;
• მენიუ - მენიუ;
• message-box - დიალოგური ფანჯრებისთვის;
• მცირე წარწერა - მცირე კონტროლისთვის;
• status-bar - სტატუსის ზოლის შრიფტი.

შრიფტი: ხატულა

შრიფტი: წარწერა

შრიფტი: მენიუ

font:message-box

მცირე წარწერა

font:status-bar

შრიფტი: italic 50px თამამი "Times New Roman", Times, serif

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

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

სხვათა შორის, WordPress-ს აქვს სპეციალური დანამატი (wordpress.org/extend/plugins/drop-caps), რომელიც საშუალებას გაძლევთ ავტომატურად შექმნათ ჩაშენებული ტექსტი (და გადატანილი) დიდი ასოები. საოცარი! თუმცა, რა მოხდება, თუ არ გსურთ მოდულის გამოყენება (დარწმუნებული ვარ, რომ არ გსურთ) და თქვენ უბრალოდ უნდა ჩამოაგდოთ რამდენიმე პოსტი და შესაძლოა კონკრეტული ადგილმდებარეობა?

კარგი ამბავი ის არის, რომ თქვენ არ გჭირდებათ დანამატი დიდი ასოების შესაქმნელად, ყველაფერი რაც თქვენ გჭირდებათ არის css და span ტეგი. გახსენით თქვენი css ფაილი და დაამატეთ შემდეგი კოდი:

Span.dropcaps ( font-family:Georgia, serif; ფერი: #cccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; პოზიცია: შედარებითი;)

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

span tag

იმისთვის, რომ სტილი ტექსტის მთავრულ ასოზე იყოს გამოყენებული, აუცილებელია მთავრული ასოს „შეფუთვა“ span ტეგში და დანიშნოს შესაბამისი კლასი.

ა

ფსევდო ელემენტი:პირველი ასო

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

P:first-letter ( font-family:Georgia, serif; ფერი: #cccc; font-size: 46px; float: left; font-weight: 400; line-leight: 1em; margin-bottom: -0.4em; margin -მარჯვნივ: 0.09em; პოზიცია: შედარებითი;)

აქ, ფაქტობრივად, რედაქტირების რამდენიმე მეთოდია დიდი ასოები CSS-ით.

CSS დიდი ასოებიდაეხმარეთ დაარღვიოს ერთი და იგივე ტიპის დიზაინის ერთფეროვნება, რომლის ტექსტები თავიდან ბოლომდე ერთნაირად გამოიყურება.

წერილები მაშინ და ახლა

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

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

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

კლასების გამოყენება

დიზაინერებმა, რომლებსაც უკვე აქვთ CSS-ის გაგება, იციან, რომ შექმნან ცალკე CSS კლასი პირველი დიდი ასოსთვის.

CSS კოდი აბზაცის ელემენტისა და კლასისთვის, რომელიც ქმნის ასოს, ასე გამოიყურება:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

და HTML კოდი ასე გამოიყურება:

რას გვაძლევს:

ძალიან ადვილი ჩანს? ფაქტობრივად, თქვენ მოგიწევთ კორექტირების გაკეთება კონკრეტული ამაღლებული ასოების მიხედვით, რადგან თითოეული დიდი ასო მოითხოვს სპეციალურ კერნინგს. აწეული ასოებისა და ძირითადი ტექსტისთვის შრიფტის არჩევის შემდეგ, თქვენ უნდა შექმნათ ცალკე კლასები თითოეული ამაღლებული ასოსთვის. ქვემოთ CSS class.myinitialcapsiზღვარი მარჯვნივ არის უარყოფითი I-სა და n-ს შორის მანძილის შესამცირებლად.

Myinitialcapsi (შრიფტის ზომა: 48 პიქსელი; შრიფტის ოჯახი: Didot; ზღვარი მარჯვნივ: -1 პიქსელი;)

მეამ შემთხვევაში, არის დამატებითი სივრცე "I" და "n" შორის.

მენეგატიური ზღვრის მქონე ახალი კლასის ჩართვა მას უფრო უახლოვდება.

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

ციტატები და სხვა განსაკუთრებული შემთხვევები

თქვენ შეგიძლიათ გაზარდოთ არა მხოლოდ ასოები ტექსტის დასაწყისში. თქვენ შეგიძლიათ განახორციელოთ სხვა კლასი, რათა შექმნათ ციტატების უფრო დიდი ვერსია, რომელიც გამოჩნდება ასოს გვერდით. ჩვენს შემთხვევაში, არც ასოების კლასი 48 ზომით და არც 20 პიქსელიანი ტექსტის კლასი არ არის შესაფერისი ციტატებისთვის. პირიქით, ეს იქნება რაღაც შუალედი - 30 პიქსელი. ბრჭყალებს 4 პიქსელით ქვემოთ გადავიტანთ, რომ ოპტიკურად გავასწოროთ ისინი I-სთან:

Myinitialcapsq (შრიფტის ზომა: 30 პიქსელი; შრიფტის ოჯახი: Didot; float: მარცხნივ; ზღვარი ზედა: 4 px;)

“მემათ შორის“ ახალი კლასის უარყოფითი ზღვარი აახლოებს მას.

თქვენ უნდა იყოთ ძალიან ფრთხილად, როდესაც მიუთითებთ თითოეული CSS დიდი ასოების ბრჭყალებთან ერთად, რათა მათი ბირთვი და გასწორება ემთხვეოდეს მიმდებარე მარკირებას. მაგალითად, ასო T უნდა გადავიდეს მარცხნივ, ოდნავ მიღმა აბზაცის კიდეზე, რათა მისი განივი ხაზი ვიზუალურად მოერგოს განლაგებას. თქვენ უნდა გააკეთოთ იგივე მრგვალი ასოებით, როგორიცაა C, G, O და Q. ეს მაგალითი იყენებს შრიფტის ზომებს 20, 30 და 48. მაგრამ თქვენ უნდა დაარეგულიროთ ზომები თქვენს მიერ არჩეული კონკრეტული შრიფტების მიხედვით. ასევე ეკრანების ზომები და რეზოლუციები, რომლებზეც საიტის ნახვა მოხდება.

ფსევდოელემენტები და ფსევდოკლასები

CSS ფსევდოელემენტის გამოყენებით, თქვენ შეგიძლიათ მარტივად შექმნათ ამაღლებული ასო აბზაცის ელემენტში ::first-ასოს დამატებით. გამოიყენეთ :პირველი ასო ( ერთი ნაწლავით) ძველი ბრაუზერებისთვის:

p ( შრიფტის ზომა: 1.2em; შრიფტი-ოჯახი: Georgia, "Times New Roman", Times, სერია; ხაზის სიმაღლე:2em; padding-ქვემო:1.2em;) p::პირველი ასო (შრიფტის ზომა: 3.6em; ტექსტის ტრანსფორმაცია: დიდი; შრიფტი-ოჯახი: "Monotype Bernard Condensed", სერია; მარგი-მარჯვნივ:0.03em;) .initialb (ზღვარი-მარჯვნივ:-0.1em;) .საწყისი (ზღვარი-მარჯვნივ:-0.15 em ;)

HTML კოდი, რომელიც შეიცავს CSS კლასებს, რომლებიც ითვალისწინებენ ასოების N და B კერნინგს, ასე გამოიყურება…

საწყისი ასო, პირველი ასო დიდი ასოა.
ხაზის წყვეტისას, შემდეგ ხაზს საწყისი ქუდი არ აქვს.

ნმიუთითეთ HTML წყაროში, თუ როგორ ხდება პირველი ასო და არა დიდი ასო HTML-ში, ზომავს თავდაპირველ ქუდის ზომამდე 3.6 ემ. მოწესრიგებული, ჰა?

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

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

შესახებგაითვალისწინეთ, რომ HTML წყაროში პირველი ასო არ არის მთავრული, მაგრამ ის გარდაიქმნება 3.6em სიმბოლოდ.

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

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

ფსევდო-კლასებისა და ფსევდო-ელემენტების გაერთიანება ჭკვიანი განლაგების შესაქმნელად

:first-child ფსევდოკლასის დამატება დაგეხმარებათ პირველი ასოების არასაჭირო გადაქცევის პრობლემის გადაჭრაში:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( შრიფტის ზომა: 3.6em; ტექსტის ტრანსფორმაცია: დიდი; შრიფტი-ოჯახი: "Monotype Bernard Condensed", სერია; ზღვარი-მარჯვნივ: 0.03em;)

ამ კოდის გაერთიანება HTML-თან:

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

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

ფსევდო-კლასების გამოყენების უპირატესობა არის სხვადასხვა სპეციალური შემთხვევების დამუშავების შესაძლებლობა. რაც შეეხება მინუსებს? ბევრი სხვადასხვა ფსევდოკლასი არსებობს და მათი გაერთიანება შეიძლება იმდენი ხერხით, რომ თქვენი თავი დაგიბრუნოთ. მაგალითად, ფსევდო-კლასებს :first-child და :first-of-type შეუძლიათ იგივე შედეგების მიღება. თქვენ ასევე შეგიძლიათ გამოიყენოთ ფსევდოკლასი არა მხოლოდ აბზაცზე, არამედ ელემენტებზეც