Web-sivulla näkyvän fontin ja värin muuttaminen

Huomautus: Tämä sivu liittyy fontin tyypin, koon ja värin muuttamiseen verkkosivulla. Microsoft Wordissa katso sivu, jolla voit muuttaa fontin väriä, kokoa tai kirjoita Wordissa.

Tässä asiakirjassa on ohjeita fontin ja sen värin muuttamisesta verkkosivulla. Oikea syntaksi, joka siirtyy eteenpäin, on käyttää Cascading Style Sheetsia luokkien tai ID-valitsimien kanssa pikemminkin kuin inline style attribuutti tai fontti, joka on poistettu käytöstä. Vaikka on syytä huomata, että nämä kaksi menetelmää toimivat edelleen useimpien Internet-selaimien kanssa.

Jatka valitsemalla menetelmä, jonka haluat oppia tai lue jokainen osa.

Jos aiot muuttaa kirjasintyyppiä ja sen väriä vain kerran verkkosivulla, sinun täytyy muuttaa sen määritteitä elementtimerkissä. Tyyli- määritteen avulla voit määrittää fontin ja värin fonttiperheen, värin ja kirjasinkoon fonttikoon mukaan, kuten alla olevassa esimerkissä on esitetty.

Esimerkkikoodi

Tällä tekstillä on fontti Courier, on sininen ja 20px.

Tulos

Tässä tekstissä on Courier-fontti, sininen ja 20px.

CSS: n käyttäminen yhdelle tai useammalle sivulle

Mukautettu fontti yhdelle sivulle

Web-sivun pääosassa voit lisätä koodin välilehtien väliin, jos haluat muuttaa tekstin ulkoasua eri elementeissä. Seuraava sininen laatikko sisältää esimerkkikoodin, joka kutsuttiin muuttamaan fontin kasvot Courieriksi ja värit sen punaiseksi. Kuten näette, olemme määrittäneet luokan nimen "mukautetuksi".

 .custom {font-family: Courier; väri punainen; fontti-koko: 20 kuvapistettä; } 

Kun tämä muotoilu on määritetty, sitä voidaan soveltaa useimpiin sivun elementteihin liittämällä heille luokka "mukautettu". Seuraavassa ruudussa on kaksi koodiriviä ja niiden tulokset.

esimerkki

Tämä koko lause on punainen ja Courier

Vain sana TEST on punainen ja Courier.

Tulos

Tämä koko lause on punainen ja Courier.

Vain sana TEST on punainen ja Courier.

Mukautettu fontti monille sivuille

Ulkoisen CSS-tiedoston tuominen voi olla erittäin hyödyllistä, koska sen avulla käyttäjät voivat muuttaa sääntöjä useille sivuille samanaikaisesti. Seuraavassa osassa on esimerkki CSS-perustiedoston luomisesta, joka muuttaa useimpien elementtien fonttia ja sen väriä. Tämä tiedosto voidaan ladata useampaan kuin yhteen verkkosivuun, jopa koko sivustoon.

Voit tallentaa seuraavan tekstin .css-tiedostona minkä tahansa perustekstieditorin avulla.

 @charset "utf-8";

.courier {font-family: Courier; väri: # 005CB9; }

Kun edellinen teksti on asetettu .css-tiedostoon (olemme nimenneet meidän perusasioiksi ), voit linkittää siihen mistä tahansa muusta sivusta käyttämällä seuraavaa esimerkkiä vastaavaa riviä.

Vihje: Käyttäjät voivat muuttaa sivun elementtien ominaisuuksia muuttamalla tuodun .css-tiedoston koodia.

Kirjasimen tunniste

Vaikka HTML-tunniste on vanhentunut, sitä voidaan silti käyttää ja se voi olla tarpeen käyttää joissakin online-palveluissa. Kun käytät FONT-tunnistetta, sinun on sisällytettävä kasvotunniste, joka kuvaa käytettävää fonttia. Alla olevassa esimerkissä käytämme Courier-fonttia ja heksadesimaalista värikoodia # 005CB9, joka on tummansininen.

Esimerkkikoodi

 Erityinen fontti. 

Tulos