Sels jo begjinne mei websteeën mei HTML te begjinnen, sille jo begjinne mei it oanmeitsjen fan wurkjen. Om jo side te sykjen op 'e wize wêrop jo wolle dat it sykje, wierskynlik oerienkomme mei in ûntwerp dy't jo of in oar ûntwerp makke hawwe, sille jo de grutte fan' e tekst op 'e side wizigje, lykas oare eleminten op' e side. Om dit te dwaan kinne jo begjinne om in HTML-grutte te sykjen, mar jo sille it fluch net fine.
It HTML-grutte-tag bestiet net yn HTML. Om't de grutte fan jo lettertypen, ôfbyldings of layout ynstelle moast, moatte jo Cascading Style Sheets brûke. In feite, elke fisuele feroaring dy't jo meitsje moatte oan in tekst fan in side of in oare elemint moat behannele wurde troch CSS! HTML is allinnich foar struktuer.
It tichtste tag om in HTML-grutte te markearje is it âlde lettertype, wêrby't yndie in grutte attribút is. Wês geweldich dat dit tag in aktuele ferzjes fan HTML ferwurde is en kin net troch browsers stipe wurde yn 'e takomst! Jo wolle de lettertype net yn jo HTML brûke! Ynstee dêrfan moatte jo CSS learje om jo HTML-eleminten te fergrutsjen en jo webstee dus op te nimmen.
Lettertypegrutte
Lettertypen binne wierskynlik it maklikste ding om te begjinnen mei CSS. Moreso dan allinich dizze tekst te sizzen, mei CSS kinne jo spesifyk wêze oer jo websideografy . Jo kinne de lettertypegrutte, de kleur, de hals, it gewicht, de lieding, en mear definiearje. Mei it lettertype, kinne jo allinich de grutte bepale, en dan allinich as nûmer foar de standert lettertypegrutte fan 'e browser dy't foar elke klant ferskilt.
Om jo lid te meitsjen om in lettertypegrutte fan 12pt te hawwen, brûke jo de lettertype-grutte eigendom:
h3 {font-size = 24px; }Dizze styl set de lettertypegrutte fan headiing3-eleminten 24 piksels yn. Jo kinne dit tafoegje oan in ekstern stylblêd en alle H3's fan jo side brûke dizze styl.
As jo ekstra typyske stilen taheakje wolle oan jo tekst, jo kinne se op dizze CSS-regel taheakje:
h3 {font-size: 24px; kleur: # 000; font-weight: normal; }Dit soe net allinich de lettertypegrutte foar H3s sette, it soe ek de kleur op swart sette (wat is de hex koade fan # 000 betsjuttend) en it soe it gewicht "normaal" sette. Standert brûke browsers haadlinen 1-6 as fette tekst, sadat dizze styl dizze standertwearden en wêzentlik "net-fette" de tekst oerskriuwe.
Imagegrutte
Ofbyldings kinne dreech wêze om groes te definiearjen, om't jo de browser eins brûke kinne om de ôfbylding te feroarjen. Fansels is it feroare fan bylden mei de browser in minne idee omdat it siden makket mear stadiger te learen en blêders faak dogge in minne taak foar resizing, sadat de bylden minne sjogge. Yn stee dêrfan moatte jo grafyske software brûke om ôfbyldingen te feroarje, en skiede har echte grutte yn jo Webside HTML.
Oars as lettertypen kinne bylden HTML of CSS brûke om de grutte te definiearjen. Jo definiearje de breedte fan it byld en de hichte. As jo HTML brûke, dan kinne jo allinich de byldgrutte yn piksels definiearje. As jo CSS brûke, kinne jo oare mjittingen brûke, ynklusyf inch, sintimeter, en persintaazjes. Dizze lêste wearde, persintaazjes, is tige brûkber as jo ôfbyldings nedich wêze moatte, lykas op in opfrege webside.
Om jo ôfbyldingsgrutte te brûken mei HTML, brûk de hichte- en breedteigenskippen fan 'e img-tag. Bygelyks dit ôfbylding soe 400x400 piksels fjild wêze:
height = "400" width = "400" alt = "image" />Om jo ôfbyldingsgrutte te brûken mei CSS, brûke de eigenskippen foar hichte- en breedte styl. Hjir is itselde byld, brûk CSS om de grutte te definiearjen:
style = "height: 400px; width: 400px;" alt = "image" />Layoutgrutte
De meast foarkommende grutte dy 't jo yn in layout definiearje is de breed, en it earste ding dat jo beslute moatte is is om in fêste breedtekening of in opfreegjende webside te brûken. Mei oare wurden binne jo de breedte as in krekte oantal piksels, inch of punten te definiearjen? Of wolle jo jo layoutbreedte yntekenje om fleksibel te brûken mei ems of persintaazje? Om de grutte fan jo ynrjochting te definiearjen brûke jo breedte- en hichte CSS-eigenskippen lykas jo wolle yn in ôfbylding.
Fêste breedte:
style = "width: 600px;">Liquid width:
style = "width: 80%;">As jo beslute oer de breedten foar jo ynrjochting, moatte jo hâlde op 'e ferskillende browserbreeds dy't jo lêzers brûke kinne en de ferskillende apparaten dy't se ek brûke. Dêrom binne de opmerkende websiden , dy't har yndieling en skaaimerk basearje kinne op basis fan ferskate apparaten en skermgrutte, is hjoed de bêste praktyk.