Ამჯამად HTML ზომა Tag არსებობს?

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

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

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

ფონტის ზომები

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

თქვენი პარაგრაფის დასაყენებლად 12pt- ის შრიფტის ზომა უნდა გამოიყენოთ შრიფტის ზომის სტილის გამოყენებაზე:

h3 {font-size = 24px; }

ეს სტილი მითითებული იქნება headiing3 ელემენტების შრიფტის ზომა 24 პიქსელი. თქვენ შეგიძლიათ დაამატოთ ეს გარე სტილის ფურცელი და ყველა თქვენი საიტის H3s გამოიყენებს ამ სტილს.

თუ გსურთ ტექსტის დამატებით ტიპოგრაფიული სტილის დამატება, შეგიძლიათ დაამატოთ ეს CSS წესი:

h3 {შრიფტის ზომა: 24px; ფერი: # 000; შრიფტის წონა: ნორმალური; }

ეს არა მხოლოდ H3- ს შრიფტის ზომაზე დააყენებდა, ასევე შავ-შავ ფერს (რაც შეეხება # 000 ტიპის ჰექს კოდს) და მას "ნორმალურ" წონა დაუყენებს. ჩვეულებრივ, ბრაუზერები 1-6 სასაქონლო პოზიციებს უწოდებენ თამამად ტექსტს, ამიტომ ეს სტილი გადალახავს ამ სტანდარტულ და არსებითად "გაბედული" ტექსტს.

სურათის ზომები

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

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

თქვენი სურათის ზოლის განსაზღვრისათვის HTML- ის გამოყენება, img tag- ის სიმაღლისა და სიგანე ატრიბუტების გამოყენება. მაგალითად, ეს სურათი იქნება 400x400 pixels square:

სიმაღლე = "400" სიგანე = "400" alt = "სურათი" />

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

სტილი = "სიმაღლე: 400px; სიგანე: 400px;" alt = "სურათი" />

განლაგება ზომები

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

ფიქსირებული სიგანე:

სტილი = "სიგანე: 600px;">

თხევადი სიგანე:

სტილი = "სიგანე: 80%;">

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