.©ÝobÝ™

Online Gaming Tutorial


    Stiluri pentru fonturi

    Distribuiţi
    avatar
    cyoby
    Administrator
    Administrator

    Mesaje : 113
    Data de inscriere : 25/09/2009
    Varsta : 24
    Localizare : Romania/Vaslui

    Stiluri pentru fonturi

    Mesaj  cyoby la data de Mar Sept 29, 2009 7:34 pm

    Aceste elemente specifică argumentul fontului care se asociază unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.
    În cazul de faţă se remarcă asemănarea cu eticheta font din HTML care acceptă argumentele type, style, size şi weight.

    font-family
    font-family este de fapt o listă de fonturi din care browserul va folosi în ordinea în care le recunoaşte (primul folosit va fi primul din listă, dacă nu este recunoscut îl foloseşte pe al doilea şi tot aşa mai departe). Este recomandat ca ultima poziţie din listă să fie un font generic (de exemplu serif, sans-serif sau monospace).
    În situaţia în care numele fontului este format din două cuvinte, se încadrează între ghilimele duble pentru ca browserul să le interpreteze împreună.

    Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaşte primele două fonturi din listă, folosindu-l pe al treilea:


    Cod:
    <html>
    <head>
    <title>Exemplu</title>
    <style type="text/css">
    <!-- p{font-family: font1,font2,arial;}-->
    </style>
    </head>
    <body>
    <p>Text scris cu cu fontul Arial</p>
    Text negru
    <p>Text scris cu cu fontul Arial</p>
    </body>
    </html>

    Exemplu: acelaşi exemplu dar CSS introdus în eticheta p din HTML:


    Cod:
    <html>
    <head>
    <title>Exemplu</title>
    </head>
    <body>
    <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
    Text negru
    <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p>
    </body>
    </html>

    font-size
    Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o funcţionare asemănătoare cu eticheta .

    Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimată în pixeli:


    Cod:
    <html>
    <head>
    <title>Exemplu</title>
    <style type="text/css">
    <!-- p{font-size: 20px;}-->
    </style>
    </head>
    <body>
    <p>Text scris cu font de 20px</p>
    Text negru
    </body>
    </html>

    CSS keyword numar FONT size
    CSS keyword numar FONT size
    xx-small 1
    x-small 2
    small 3
    medium 4
    large 5
    x-large 6
    xx-large 7

    Pentru verificare se poate folosi exemplul anterior în care se înlocuieşte 20px cu unul din cuvintele de mai sus.

    Procentele sunt o altă valoare pe care o poate lua font-size. Această modalitate poate fi vizualizată diferit de browsere diferite.
    Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.

    font-style
    font-style este folosit pentru a adăuga caracteristica italică fontului. Poate lua valorile normal şi italic.


    Cod:
    <style type="text/css">
    <!-- p{font-style: italic;}-->
    </style>



    font-weight
    font-weight este parametrul care stabileşte grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.



    Cod:
    <style type="text/css">
    <!-- p{font-weight: 700;}-->
    </style>


    Compunerea stilurilor
    Stilurile prezentate anterior pot fi folosite simultan în interiorul aceeaşi etichete fiind despărţite de caracterul ; (punct şi virgulă).

    Exemplu: folosirea unui stil compus aplicat etichetei p


    Cod:
    <html>
    <head>
    <title>Exemplu 3_4</title>
    <style type="text/css">
    <!--
    p{
    font-family: arial;
    font-size: 20px;
    font-style: italic;
    font-weight: 800;}
    -->
    </style>
    </head>
    <body>
    <p>Text scris cu Arial, 20px, italic, 800</p>
    Text negru
    </body>
    </html>

      Subiecte similare

      -

      Acum este: Joi Noi 15, 2018 8:43 pm