Ako vytvoriť farebný okraj okolo textu pomocou HTML a CSS



Hranica

Okraj na vašich stránkach HTML pomáha upriamiť pozornosť na časť textu alebo obklopiť akýkoľvek iný prvok HTML.



Ako je zobrazené nižšie, okolo každého textu je možné vytvoriť orámovanie HTML a CSS na svojej webovej stránke. V príklade nižšie sme obklopili odsek ( ) s červeným okrajom.

Prvý príklad s textom ohraničeným červeným okrajom.
Tento príklad má tiež viac riadkov.

Na vytvorenie vyššie uvedeného príkladu bol použitý nasledujúci kód.



Prvý príklad s textom ohraničeným červeným okrajom.
Tento príklad má tiež viac riadkov.

ako prinútiť otvoriť program Windows 10

Vo vyššie uvedenom kóde štýl definuje veľkosť orámovania (v pixeloch skratka pre pixel ), typ štýlu a farba orámovania. Štýl ohraničenia je v tom, ako sa ohraničenie zobrazuje na obrazovke. Medzi ďalšie typy štýlov ohraničenia patria bodkované, prerušované, dvojité, drážkové, hrebeňové, vložené a začiatočné. Farba orámovania definuje farbu, ktorú chcete pre orámovanie použiť. Vo vyššie uvedenom príklade farebný kód Použil sa # FF0000, čo je farebný kód pre červenú farbu.

Tip



Orámovanie je možné aplikovať iba na jednu stranu. Napríklad s nadpisom tejto stránky máme sivé podčiarknutie. Tento riadok je v skutočnosti ohraničením, ktoré je dosiahnuté pomocou kódu CSS: border-bottom: 1px solid # 93B0D2 ;.

Definovanie štýlu pomocou CSS

Vzhľad prvkov na webovej stránke možno tiež definovať pomocou v rade CSS. Vložený CSS je definovaný vo vašom dokumente HTML v element. Alebo môžete definovať CSS v externom prostredí spis , s .css predĺženie . Potom môžete na tento súbor vytvoriť odkaz z ľubovoľného dokumentu HTML a prvky v tomto dokumente majú prístup k štýlom CSS. Napríklad s nižšie uvedeným kódom CSS sa vytvára nová trieda s názvom „borderexample“, ktorú je možné použiť na akúkoľvek inú značku HTML.

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

Pomocou vyššie uvedeného kódu, ak chcete použiť tento štýl ohraničenia na odsek HTML, môžete napísať niečo podobné ako v príklade nižšie.

Tu je príklad hranice vytvorenej pomocou CSS