Tiklīdz sākat veidot tīmekļa lapas ar HTML, jūs sāksit darbu ar izmēriem. Lai jūsu vietne izskatās tā, kā tas izskatās, iespējams, atbilstu projektam, kuru jūs vai kāds cits dizaineris ir izveidojis, jūs vēlaties mainīt vietnes teksta lielumu, kā arī citus elementus lapā. Lai to izdarītu, jūs varat sākt meklēt HTML "lieluma" tagu, bet jūs ātri atradīsiet to trūkstošu.
HTML formāta tag neeksistē HTML. Tā vietā, lai iestatītu fontu lielumu, attēlus vai izkārtojumu, jums jāizmanto kaskādes stila lapas. Patiesībā jebkura vizuālā izmaiņa, kas jums jāveic vietnes tekstā vai citā elementā, ir jāizmanto CSS! HTML ir paredzēts tikai struktūrai.
HTML tuvuma taga atzīme ir vecā fonta tags, kas patiešām ietver lieluma atribūtu. Esiet brīdināts, ka pašreizējā HTML versijās šis tags nav novecojis, un nākotnē tā vairs nevar atbalstīt pārlūkprogrammas! Jūs nevēlaties izmantot fonta tagu savā HTML formātā! Tā vietā jums vajadzētu iemācīties CSS, lai izmērītu savus HTML elementus un atbilstoši izveidotu savu tīmekļa vietni.
Fonta izmēri
Fonti ir neapšaubāmi vieglākā lieta ar izmēru ar CSS. Moreso, nevis tikai šī teksta lieluma noteikšana, izmantojot CSS, jūs varat precīzāk noteikt vietnes tipogrāfiju . Jūs varat definēt fonta izmēru, krāsu, apvalku, svaru, vadošo un daudz ko citu. Izmantojot fonta tagu, jūs varat definēt tikai izmēru un pēc tam tikai kā skaitli attiecībā pret pārlūka noklusējuma fonta lielumu, kas atšķiras katram klientam.
Lai iestatītu rindkopas fonta lielumu 12pt, izmantojiet fonta izmēra stila rekvizītu:
h3 {font-size = 24px; }Šis stils noteiks fonta izmēru headiing3 elementiem 24 pikseļi. Jūs varētu to pievienot ārējai stila lapai, un visi jūsu vietnes H3s izmantos šo stilu.
Ja vēlaties tekstu pievienot papildu tipogrāfijas stilus, varat pievienot tos šim CSS noteikumam:
h3 {font-size: 24px; krāsa: # 000; fonta svars: normāls; }Tas ne tikai noteiktu, ka fontu lielums H3s, bet arī nosaka krāsu melnā krāsā (kas ir tas, ko nozīmē # 000 hex kods), un tas iestatītu svaru uz "normālu". Pēc noklusējuma pārlūkprogrammas nodala pozīcijas 1-6 kā treknrakstu, tāpēc šis stils ignorē šo noklusējumu un pēc būtības teksta "nedalāms".
Attēla izmēri
Attēli var būt sarežģīti, lai noteiktu izmērus, jo jūs patiesībā varat izmantot pārlūku, lai mainītu attēlu. Protams, attēlu izmēru maiņa ar pārlūkprogrammu ir slikta ideja, jo tā lāpīs lappuses lēnāk un pārlūkprogrammas bieži vien nedarbojas izmēru maiņas dēļ, padarot attēlus slikti. Tā vietā jums vajadzētu izmantot grafikas programmatūru, lai mainītu attēlus, un pēc tam rakstītu to faktiskos izmērus savā tīmekļa lapas HTML formātā.
Atšķirībā no fontiem, attēli var definēt lielumu, izmantojot HTML vai CSS. Jūs definējat attēla platumu un augstumu. Izmantojot HTML, jūs varat definēt tikai attēla izmēru pikseļos. Ja izmantojat CSS, varat izmantot citus mērījumus, tostarp collas, centimetrus un procentus. Šī pēdējā vērtība, procentos, ir ļoti noderīga, ja jūsu attēliem jābūt kontrastam, kā arī atsaucīgajā tīmekļa vietnē.
Lai definētu attēla lielumu, izmantojot HTML, izmantojiet img tagu augstuma un platuma atribūtus. Piemēram, šis attēls būtu 400x400 pikseļu laukums:
augstums = "400" width = "400" alt = "image" />Lai noteiktu attēla izmēru, izmantojot CSS, izmantojiet augstuma un platuma stila rekvizītus. Šeit ir viens un tas pats attēls, izmantojot CSS, lai noteiktu izmēru:
style = "augstums: 400 pikseļi; platums: 400 pikseļi;" alt = "image" />Izkārtojuma izmēri
Izkārtojumā visbiežāk izmantotais lielums ir platums, un vispirms jums jāizlemj, vai izmantot fiksētu platuma izkārtojumu vai atsaucīgu vietni. Citiem vārdiem sakot, vai jūs plānojat definēt platumu kā precīzu pikseļu, collu vai punktu skaitu? Vai arī jūs plānojat, lai jūsu izkārtojuma platums būtu elastīgs, izmantojot ems vai procentus? Lai noteiktu izkārtojuma izmēru, izmantojiet platuma un augstuma CSS rekvizītus tāpat, kā jūs attēlā.
Fiksēts platums:
style = "width: 600px;">Šķidruma platums:
style = "platums: 80%;">Izlemjot par izkārtojuma platumiem, jums jāpatur prātā dažādie pārlūka platumi, kurus lasītāji varētu izmantot, un dažādās ierīces, kuras tie arī izmantos. Tādēļ mūsdienās ir labākās prakses standarts, tādēļ jutīgas tīmekļa vietnes , kuras var mainīt to izkārtojumu un izmērus, pamatojoties uz dažādām ierīcēm un ekrāna izmēriem.