Teksta izskats

Šis apraksts ir paredzēts tikai kā vispārīgs apskats. Tas neaptver visu HTML un CSS iespēju uzskaitījumu. Šeit var būt iekļauti arī novecojoši piemēri.

Īpašības
Izmēri
Krāsas
Fonti
Vārdu stili
Rindkopas stili

Krāsas HTML lapās

Stili, stilu lapas

Īpašības

Īpašība	HTML kods un rezultāts	CSS kods
Indekss:	<SUB>_Paraudziņš</SUB>	<span style="vertical-align: sub;font-size: smaller;">Paraudziņš</span>
Pakāpe:	<SUP>^Paraudziņš</SUP>	<span style="vertical-align: super;font-size: smaller;">Paraudziņš</span>
Resns:	<B>Paraudziņš</B>	<span style="font-weight: bold;">Paraudziņš</span> <span style="font-weight: 100;">Paraudziņš</span> <span style="font-weight: 800;">Paraudziņš</span>
Slīps:	<I>Paraudziņš</I>	<span style="font-style: italic;">Paraudziņš</span> <span style="font-style: oblique;">Paraudziņš</span> <span style="font-style: oblique -40deg;">Paraudziņš</span>
Resns un slīps:	<I><B>Paraudziņš</B></I>	<span style="font-weight: bold; font-style: italic">Paraudziņš</span>
Pasvītrots:	<U>Paraudziņš</U>	<span style="text-decoration: underline;">Paraudziņš</span> <span style="text-decoration: underline dotted red 3px;">Paraudziņš</span>
Virssvītra:		<span style="text-decoration: overline;">Paraudziņš</span>
Pārsvītrots teksts:	<S>~~Paraudziņš~~</S>	<span style="text-decoration: line-through;">Paraudziņš</span>
Mirgojošs teksts:	<BLINK>Paraudziņš</BLINK> Mūsdienu pārlūki šo neatbalsta.	<span class="blink">Paraudziņš</span>
Noteikta platuma burti:	<TT>`Paraudziņš`</TT>	<span style="font-family: monospace;">Paraudziņš</span>

Izmēri

Īpašība	HTML kods un rezultāts	CSS kods
Noteikta izmēra burti:	<FONT size=1>Paraudziņš</FONT>	<SPAN style="font-size:8">Paraudziņš</SPAN>
Lielāki burti:	<BIG><BIG>Paraudziņš </BIG></BIG> <FONT SIZE=+2>Paraudziņš</FONT>	<SPAN style="font-size:150%">Paraudziņš</SPAN> <SPAN style="font-size:x-large">Paraudziņš</SPAN>
Mazāki burti:	<SMALL><SMALL>Paraudziņš</SMALL></SMALL> <FONT SIZE=-2>Paraudziņš</FONT>	<SPAN style="font-size:70%">Paraudziņš</SPAN> <SPAN style="font-size:x-small">Paraudziņš</SPAN>

Krāsas

Burtu un pamatnes krāsa var nodefinēt izmantojot RGB (Red–Green–Blue, Sarkans–Zaļš–Zils) pierakstu, piemēram, baltu krāsu dos #FFFFFF, bet melnu – #000000. Pirmais simbols '#' norāda, ka tiks uzdods krāsas numurs. Tālāk pirmie divi simboli nosaka sarkano, otrie – zaļo, bet trešie – zilo krāsu heksadecimālajā skaitīšanas sistēmā. Tāpat iespējams izmantot decimālos skaitļus, procentus vai arī krāsu nosaukumus angļu valodā. CSS krāsu aprakstam ļauj lietot ne tikai RGB (Red-Green-Blue, Sarkans-Zaļš-Zils), bet arī HSL (Hue-Saturation-Lightness, Nokrāsa-Piesātinājums-Gaišums) vai HWB (Hue-Whiteness-Blackness, Nokrāsa-Baltā-Melnā) krāsu modeli. Ceturtā vērtība norāda krāsas necaurredzamību.

HTML kods un rezultāts	CSS kods
<FONT COLOR=#FF0000>Paraudziņš</FONT> <FONT COLOR=red>Paraudziņš</FONT>	<SPAN style="color: #FF0000;">Paraudziņš</SPAN> <SPAN style="color: red;">Paraudziņš</SPAN>
<FONT COLOR=#888>Paraudziņš</FONT> <FONT COLOR=gray>Paraudziņš</FONT>	<SPAN style="color: rgb(127 127 127);">Paraudziņš</SPAN> <SPAN style="color: hsl(360, 0%, 50%);">Paraudziņš</SPAN> <SPAN style="color: hsl(360, 100%, 50%); font-weight: 800;">Paraudziņš</SPAN> <SPAN style="color: hsla(360, 100%, 50%, 0.4); font-weight: 800;">Paraudziņš</SPAN>

Krāsas HTML lapās.

Fonti

Agrāk fontus varēja mainīt ar komandu <FONT FACE="fonta nosaukums">. Mūsdienu pārlūki šo komandu neatbalsta.

Fontu nomaiņai ir jaizmanto CSS īpašība „font”. Fonta īpašībai ir vairākas vērtības, kuras var norādīt arī atsevišķi:
font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family];

Izmantojot „family”, iepējams norādīt vairākus fonta vārdus. Tādejādi teksts tiks attēlots ar pirmo atbilstošo fontu lietotāja datorā. Ja neatrodas neviens, tad tekstu attēlos ar pārlūka piedāvāto fontu.
Piemēri.

šī teksta attēlošanai burti ir ar „ķepiņām” (style='font-family: Alegreya, Vollkorn, "Times New Roman", serif;').
Savukārt šī teksta attēlošanai burti ir bez „ķepiņām” (style='font-family: "Exo 2", Titillium, Arial, san-serif;').

Ja nepieciešams, lai lapa tiktu attēlota ar noteiktu fontu, izpējams izmantot @font-face noteikumu. Ar to var noteikt no kurienes un kādus fontus jāatvelk, lai varētu attēlot doto tīmekļa lapu. Šādam nolūkam vispiemērotakie ir fonti WOFF/WOFF2 (Web Open Font Format) formātā. Tie var atrasties jebkurā publiski pieejamā serverī. Jāņem vērā, ka, ja lietotājs ir bloķējis JavaScript, tad arī fontu ielasīšana un nomaiņa nenotiks.

Neskatoties uz to, vai fonts „Ribeye Marrow” ir vai nav lietotāja datorā, šai rindkopai jābūt redzamai ar šo fontu, ja vien lietotājs to nav aizliedzis.

CSS lapa fonta nomaiņai:

/* https://fonts.google.com/specimen/Ribeye+Marrow?query=ribeye&preview.script=Latn */ /* latin-ext */ @font-face { font-family: 'Ribeye Marrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(Ribeye_Marrow-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Ribeye Marrow'; font-style: normal; font-weight: 400; font-display: swap; src: url(Ribeye_Marrow.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } .ribeye-marrow-regular { font-family: "Ribeye Marrow", serif; font-weight: 400; font-style: normal; }

Vārdu stili

Saīsinājums: <ACRONYM>Paraudziņš</ACRONYM>

Citāts: <CITE>Paraudziņš</CITE>

Kodi: <CODE>Paraudziņš</CODE>

Definīcija: <DFN>Paraudziņš</DFN>

Izcelts: <EM>Paraudziņš</EM>

Iestarpināts tekss: <INS>Paraudziņš</INS>

Klaviatūra: <KBD>Paraudziņš</KBD>

Piemērs: <SAMP>Paraudziņš</SAMP>

Pārsvītrots teksts: <STRIKE>~~Paraudziņš~~</STRIKE>

Pastiprināts: <STRONG>Paraudziņš<STRONG>

Mainīgais: <VAR>Paraudziņš<VAR>

Izmantojot dažādus vārdu stilus, tiem kā papildus parametru var norādīt 'title'. Parametra 'title' vērtība parādas pie peles kursora, kad to patur virs dotā vārda: <ACRONYM TITLE="Parametra 'title' ..">Paraudziņš</ACRONYM>.