Takoj, ko začnete graditi spletne strani z HTML-jem, boste začeli delati z velikostjo. Če želite, da bi bilo vaše spletno mesto videti tako, kot bi želeli videti, boste verjetno ujemali z oblikovanjem, ki ste jo ustvarili vi ali drug oblikovalec, želeli spremeniti velikost besedila na tem spletnem mestu in druge elemente na strani. Če želite to narediti, lahko začnete iskati oznako velikosti HTML, vendar boste hitro našli manjkajo.
Oznaka velikosti HTML ne obstaja v HTML-ju. Namesto tega, če želite nastaviti velikost pisav, slik ali postavitve, uporabite Cascading Style Sheets. Pravzaprav vsaka vizualna sprememba, ki jo morate storiti v besedilu spletnega mesta ali drugem elementu, mora CSS ravnati! HTML je samo za strukturo.
Najbližja oznaka oznake velikosti HTML je stara oznaka pisave, ki je dejansko vsebovala atribut velikosti. Upoštevajte, da je ta oznaka v trenutnih različicah HTML zastarela in v prihodnosti morda ne podpirajo brskalniki! Ne želite uporabiti oznake pisave v vašem HTML-ju! Namesto tega se morate naučiti CSS, da velikosti HTML elementov in ustrezno prilagodi svojo spletno stran.
Velikosti pisave
Pisave so verjetno najlažja stvar za velikost s CSS. Več kot le določitev velikosti tega besedila, s CSS-jem, lahko natančneje določite tipografijo vašega spletnega mesta . Določite lahko velikost pisave, barvo, ohišje, težo, vodilno in drugo. Z oznako pisave lahko samo določite velikost in nato le kot številko, ki se nanaša na privzeto velikost pisave brskalnika, ki se razlikuje za vsako stranko.
Če želite, da vaš odstavek vsebuje velikost pisave 12pt, uporabite lastnost sloga velikosti pisave:
h3 {font-size = 24px; }Ta slog bi določil velikost pisave elementov headiing3 24 slikovnih pik. To lahko dodate v zunanji slogovni list in vsi slogi H3 bodo uporabljali ta slog.
Če želite svojemu besedilu dodati dodatne tipografske sloge, jih lahko dodate na to pravilo CSS:
h3 {font-size: 24px; barva: # 000; font-weight: normal; }To ne bi samo nastavilo velikost pisave za H3, temveč bi tudi nastavilo barvo na črno (kar pomeni, da je šifra šestnajstiške oznake) in da bi težo nastavili na "normalno". Brskalniki privzeto pregledajo naslove 1-6 kot krepko besedilo, zato bi ta slog premostil to privzeto in v bistvu "ne-krepko" besedilo.
Velikosti slik
Slike so lahko težavno, če želite določiti velikosti, saj lahko dejansko uporabljate brskalnik, da spremenite velikost slike. Seveda je sprememba velikosti slik z brskalnikom slaba ideja, ker strani nalagajo počasneje in brskalniki pogosto slabo spreminjajo velikost slike, zaradi česar so slike slabe. Namesto tega bi morali uporabiti grafično programsko opremo za spreminjanje velikosti slik in nato napišite svoje dejanske velikosti v HTML-ju spletne strani.
Za razliko od pisav, lahko slike določijo velikost ali HTML ali CSS. Določite širino slike in višino. Ko uporabljate HTML, lahko določite le velikost slike v slikovnih pikah. Če uporabljate CSS, lahko uporabite druge meritve, vključno s palcem, centimetri in odstotki. Ta zadnja vrednost, odstotki, je zelo uporabna, ko morajo biti slike tekoče, kot na odzivnem spletnem mestu.
Če želite določiti svojo velikost slike z uporabo HTML, uporabite atribute višine in širine oznake img. Na primer, ta slika bi bila 400 x 400 slikovnih pik kvadratnih:
višina = "400" širina = "400" alt = "slika" />Če želite določiti svojo velikost slike s pomočjo CSS, uporabite lastnosti sloga višine in širine. Tukaj je ista slika, s pomočjo CSS-ja določite velikost:
style = "višina: 400px; širina: 400px;" alt = "slika" />Velikosti postavitve
Najpogostejša velikost, ki jo določite v postavitvi, je širina, prva stvar, ki jo boste morali izbrati, je, ali želite uporabiti postavitev fiksne širine ali odzivno spletno mesto. Z drugimi besedami, ali boste določili širino kot točno število točk, palcev ali točk? Ali boste nastavili, da bo vaša širina postavitve prilagodljiva z uporabo ems ali odstotkov? Če želite določiti velikost vaše postavitve, uporabite CSS lastnosti širine in višine, podobno kot vi na sliki.
Fiksna širina:
style = "širina: 600px;">Širina tekočine:
style = "širina: 80%;">Ko se odločate za širino vaše postavitve, upoštevajte različne širine brskalnika, ki jih morda uporabljajo vaši bralci, in različne naprave, ki jih bodo uporabljale tudi. Zato so odzivne spletne strani , ki lahko spremenijo njihovo postavitev in velikost glede na različne naprave in velikosti zaslona, danes standard najboljše prakse.