Kirjasintyypin, koon ja värin muuttaminen verkkosivulla

Alarik Toivonen
By Alarik Toivonen
Opetusohjelmia

Fonttikoko

Tämä sivu sisältää ohjeet fontin ja sen värin muuttamiseen verkkosivulla. HTML5:n käyttöönoton myötä oikea tapa määrittää verkkosivujen kirjasimia on käyttää Cascading Style Sheets -tyylisivuja. Vanha menetelmä, jossa käytetään upotettua tyyliattribuuttia tai fonttitunnistetta, on vanhentunut, eikä sitä pitäisi enää käyttää.

Huomautus

Vaikka vanhentuneet menetelmät saattavat silti näkyä oikein nykyaikaisissa Internet-selaimissa, niiden toimivuutta ei enää taata. Käytä tällä sivulla kuvattuja CSS-menetelmiä luodaksesi verkkosivuja, jotka näkyvät oikein mahdollisimman suurelle määrälle käyttäjiä.

Kärki

Tämän sivun kirjasinattribuuttien muuttamismenetelmät toimivat useimmissa HTML-tunnisteissa, mukaan lukien

,

ja , sisältyvälle tekstille. Nämä menetelmät toimivat myös taulukon tekstille käyttämällä tunnisteita

,

ja

.

CSS:n käyttö yhdelle sovellukselle

Jos aiot muuttaa web-sivun yhden sanan, lauseen tai kappaleen fontin pintaa ja sen väriä, määritä sen attribuutit elementtitunnisteessa. Tyyli-attribuutin avulla voit määrittää fontin kasvon ja värin font-family-, color- ja fonttikoon font-size-määritteellä alla olevan esimerkin mukaisesti.

Esimerkkikoodi

<p style="font-family:Courier; color:Blue; font-size: 20px;">This text has the font Courier, is Blue, and 20px.</p>

Tulos

Tässä tekstissä on Courier-fontti, se on sininen ja kooltaan 20 kuvapistettä.

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

Mukautettu fontti yhdelle sivulle

Web-sivusi otsikkoosassa voit lisätä koodin

-välilehtien väliin muuttaaksesi tekstisi ulkoasua eri elementeissä. Seuraava sininen laatikko sisältää esimerkkikoodin, joka kutsuttuaan muuttaa fontin kasvoksi Courier ja värittää sen punaiseksi. Kuten näet, olemme määrittäneet luokan nimeksi “muokattu”.

<style type="text/css">
.custom {
 font-family: Courier;
 color: red;
 font-size:20px;
}
</style>

Kun tämä tyyli on määritetty, sitä voidaan käyttää useimpiin sivusi elementteihin liittämällä niihin luokka “muokattu”. Seuraava laatikko näyttää kaksi koodiriviä ja niitä vastaavat tulokset.

Esimerkki

<p class="custom">This whole sentence is red and Courier</p>
<p>Only the word <span class="custom">test</span> is red and Courier.</p>

Tulos

Tämä koko lause on punainen ja Courier.

Vain sana testata on punainen ja Courier.

Mukautettu fontti useille sivuille

Ulkoisen CSS-tiedoston tuominen voi olla erittäin hyödyllistä, koska sen avulla käyttäjät voivat muuttaa useiden sivujen sääntöjä samanaikaisesti. Seuraavassa osiossa on esimerkki CSS-perustiedoston luomisesta, joka muuttaa useimpien elementtien fontin ja värin. Tämä tiedosto voidaan ladata useammalle kuin yhdelle verkkosivulle, jopa koko sivustolle.

Kun käytät mitä tahansa perustekstieditoria, seuraavan tekstin tallentaminen .css-tiedostona valmistelee sen tuontia varten.

@charset "utf-8";
.courier {
 font-family: Courier;
 color: #005CB9;
}

Kun edellinen teksti on sijoitettu .css-tiedostoon (nimemme omallemme basic.css), voit linkittää siihen miltä tahansa muulta sivulta seuraavan esimerkin kaltaisen rivin avulla.

<link rel="stylesheet" Type="text/css" href="http://www.example.com/basic.css">
Kärki

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

Fonttitunnisteen käyttäminen

Vaikka HTML -tunniste on vanhentunut, sitä voidaan edelleen käyttää, ja se saattaa olla tarpeen joidenkin verkkopalvelujen kanssa. Kun käytät FONT-tunnistetta, sinun on sisällytettävä face-attribuutti, joka kuvaa käytettävää fonttia. Alla olevassa esimerkissä käytämme Courier-fonttia ja heksadesimaalivärikoodia #005CB9, joka on tummansininen.

Esimerkkikoodi

<font color="#005CB9" face="courier" size="5">A special font example.</font>

Tulos

Erityinen fonttiesimerkki.

Recent Articles

spot_img

Related Stories

Stay on op - Ge the daily news in your inbox

[tdn_block_newsletter_subscribe input_placeholder="Email address" btn_text="Subscribe" tds_newsletter2-image="730" tds_newsletter2-image_bg_color="#c3ecff" tds_newsletter3-input_bar_display="" tds_newsletter4-image="731" tds_newsletter4-image_bg_color="#fffbcf" tds_newsletter4-btn_bg_color="#f3b700" tds_newsletter4-check_accent="#f3b700" tds_newsletter5-tdicon="tdc-font-fa tdc-font-fa-envelope-o" tds_newsletter5-btn_bg_color="#000000" tds_newsletter5-btn_bg_color_hover="#4db2ec" tds_newsletter5-check_accent="#000000" tds_newsletter6-input_bar_display="row" tds_newsletter6-btn_bg_color="#da1414" tds_newsletter6-check_accent="#da1414" tds_newsletter7-image="732" tds_newsletter7-btn_bg_color="#1c69ad" tds_newsletter7-check_accent="#1c69ad" tds_newsletter7-f_title_font_size="20" tds_newsletter7-f_title_font_line_height="28px" tds_newsletter8-input_bar_display="row" tds_newsletter8-btn_bg_color="#00649e" tds_newsletter8-btn_bg_color_hover="#21709e" tds_newsletter8-check_accent="#00649e" embedded_form_code="YWN0aW9uJTNEJTIybGlzdC1tYW5hZ2UuY29tJTJGc3Vic2NyaWJlJTIy" tds_newsletter="tds_newsletter1" tds_newsletter3-all_border_width="2" tds_newsletter3-all_border_color="#e6e6e6" tdc_css="eyJhbGwiOnsibWFyZ2luLWJvdHRvbSI6IjAiLCJib3JkZXItY29sb3IiOiIjZTZlNmU2IiwiZGlzcGxheSI6IiJ9fQ==" tds_newsletter1-btn_bg_color="#0d42a2" tds_newsletter1-f_btn_font_family="406" tds_newsletter1-f_btn_font_transform="uppercase" tds_newsletter1-f_btn_font_weight="800" tds_newsletter1-f_btn_font_spacing="1" tds_newsletter1-f_input_font_line_height="eyJhbGwiOiIzIiwicG9ydHJhaXQiOiIyLjYiLCJsYW5kc2NhcGUiOiIyLjgifQ==" tds_newsletter1-f_input_font_family="406" tds_newsletter1-f_input_font_size="eyJhbGwiOiIxMyIsImxhbmRzY2FwZSI6IjEyIiwicG9ydHJhaXQiOiIxMSIsInBob25lIjoiMTMifQ==" tds_newsletter1-input_bg_color="#fcfcfc" tds_newsletter1-input_border_size="0" tds_newsletter1-f_btn_font_size="eyJsYW5kc2NhcGUiOiIxMiIsInBvcnRyYWl0IjoiMTEiLCJhbGwiOiIxMyJ9" content_align_horizontal="content-horiz-center"]

Ottaa yhteyttä: khaobanmuang@gmail.com