Lag en farget ramme rundt tekst med HTML og CSS

En kantlinje på HTML-sidene dine kan bidra til å gi oppmerksomhet til en del av tekst eller omgir ethvert annet HTML-element.

Som det kan sees nedenfor, kan det opprettes en grense rundt hvilken som helst tekst ved hjelp av HTML og CSS på websiden din. I eksemplet nedenfor har vi omgitt et avsnitt () med en rød ramme.

Første eksempel med tekst omgitt av en rød kant.

Dette eksemplet har også flere linjer.

For å opprette eksemplet ovenfor ble underkoden brukt.

Første eksempel med tekst omgitt av en rød kant.

Dette eksemplet har også flere linjer.

I koden ovenfor definerer stilen grenseverdien (px kort for piksel), stiltype og grensefarge. Stilen på grensen er hvordan grensen vises på skjermen. Andre typer kantlinjestiler er prikkede, stiplede, doble, rille, ås, innsats og begynnelse. Grensefargen definerer fargen du vil bruke til grensen. I eksemplet ovenfor ble fargekoden # FF0000 brukt, som er fargekoden for rød.

Definere stil ved hjelp av CSS

Utseendet til elementer på en nettside kan også defineres med inline CSS. Inline CSS er definert i HTML-dokumentet ditt, i elementet. Du kan også definere CSS i en ekstern fil, med .css- utvidelsen. Deretter kan du koble til denne filen fra et hvilket som helst HTML-dokument, og elementer i det dokumentet vil ha tilgang til CSS-stilene. For eksempel, med den nedenfor CSS-koden, blir en ny klasse kalt "borderexample" opprettet som kan brukes til andre HTML-tagger.

.bordereeksempel {border-style: solid; border-color: # 287EC7; }

Ved å bruke koden ovenfor, hvis du vil bruke denne grenseformen til et HTML-avsnitt, kan du skrive noe som ligner på eksemplet nedenfor.

Her er et eksempel på en grense opprettet ved hjelp av CSS