Luo tekstin ympärille värillinen raja HTML ja CSS

HTML-sivujen raja voi auttaa kiinnittämään huomiota tekstiosaan tai ympäröimään mitä tahansa muuta HTML-elementtiä.

Kuten alla näkyy, raja voidaan luoda minkä tahansa tekstin ympärille käyttämällä HTML- ja CSS-sivuja verkkosivullesi. Alla olevassa esimerkissä olemme ympäröineet kappaletta (), jossa on punainen reunus.

Ensimmäinen esimerkki tekstistä, jota ympäröi punainen reunus.

Tässä esimerkissä on myös useita rivejä.

Yllä olevan esimerkin luomiseksi käytettiin alla olevaa koodia.

Ensimmäinen esimerkki tekstistä, jota ympäröi punainen reunus.

Tässä esimerkissä on myös useita rivejä.

Yllä olevassa koodissa tyyli määrittelee reunakoon (pikselin pikselin pituus), tyylityypin ja reunavärin. Rajan tyyli on, miten raja näkyy ruudulla. Muita rajatyylityyppejä ovat katkoviivat, katkoviivat, kaksoiskappaleet, urat, harjanteet, sisäkkeet ja alku. Rajaväri määrittää värin, jota haluat käyttää rajalle. Yllä olevassa esimerkissä käytettiin värikoodia # FF0000, joka on punainen värikoodi.

Tyylin määrittäminen CSS: n avulla

Web-sivun elementtien ulkoasu voidaan määrittää myös inline-CSS: llä. Sisäinen CSS määritetään HTML-asiakirjassa, elementissä. Voit myös määrittää ulkoisen tiedoston CSS: n .css- laajennuksen avulla. Tämän jälkeen voit linkittää tähän tiedostoon mistä tahansa HTML-dokumentista, ja kyseisen asiakirjan elementeillä on pääsy CSS-tyyliin. Esimerkiksi alla olevan CSS-koodin avulla luodaan uusi luokka nimeltä "borderexample", jota voidaan soveltaa mihin tahansa muuhun HTML-tunnisteeseen.

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

Jos käytät tätä koodia, jos haluat käyttää tätä rajatyylistä HTML-kohtaan, voit kirjoittaa jotain vastaavaa esimerkkiä alla olevaan esimerkkiin.

Tässä on esimerkki rajasta, joka on luotu CSS: n avulla