Scribd Logo
Upload

Welcome to Scribd!

  • CSS

    Uploaded by

    Anja Rotim
    4 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views5 pages

    CSS

    Uploaded by

    Anja Rotim

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    CSS

    Primjer

    - CSS stil će svim odlomcima u dokumentu postaviti crvenu boju fonta, a veličina će biti 12
    piksela

    P (selektor)

    Color:red;

    Font-size:12px;

    Svojstva fonta u CSS-u:

    - Font-family – font kojim će se prikazivati HTML dokument; ako ime fonta ima više riječi
    pišemo ga pod navodnicima: arial, verdana, „Times NewRoman“
    - Font-weight – debljina znakova – normal, bold, bolder, lighter
    - Fonr-size: veličina fonta – pt,px
    - Font-style: italic, normal
    - Font-variant – normal, small, caps

    (w3schools)

    Svojstva teksta

    - Letter-spacing
    - Line-height – razmak između 2 retka teksta
    - Text-decoration – ukrasi na tekstu – none, underline, overline, line-through
    - Text-align – poravnavanje – left, right, centar
    - Text-indent – uvlaka prvog reda teksta – pt,px
    - Color

    Svojstva boja i pozadina

    - Backgorund-color
    - Background-image
    - Backgorund-repeat
    - Backgorund-attachment
    - Backgorund-position

    Pisanje CSS stilova


    3 načina:

    1. Linijski (atribut „style“ unutar svake HTML oznake)

    <p style=“color:red;font-size:22px>

    2. Unutar <style> html oznake u zaglavlju dokumenta

    <style type=“text/css“>

    p{font-size:14px;color:#33333;}

    <style>

    3. U vanjskoj datoteci koju povezujemo s HTML dokumentom

    <link href=“still.css“ media=“all“ type=“text/css“>

    Liinjski (inline) css

    - Ovaj se stil direktno ubacuje u HTML tag, koristeći argument style

    Primjer:

    <html>

    <head>

    <title>Inline stil</title>

    </head>

    <body>

    <p> Prvi paragraf.</p>

    <p style="color: #0000FF; font-size: 24px;">

    Drugi paragraf.</p

    </body>

    </html>

    Primjer internog stila

    - Interni stil se ubacuje direktno u zaglavlje dokumenta, između očetne i završne oznake stila
    <style>…</style>

    <html>

    <head>

    <title>Interni stil</title>
    <style>

    body{background-color: gray;}

    p{color: #0000FF; font-size: 24px;}

    h1{color: #00FF00; font-family:"Arial"; font-size:34px;}

    </style>

    </head>

    <body>

    <p> Prvi paragraf.</p>

    <h1>Drugi paragraf.</h1>

    </body>

    </html>

    Vanjska datoteka

    - Da bismo u potpunosti iskoristili prednosti CSS-a, treba se koristiti eksternim stilom

    Pravila pisanja CSS-a

    - Deklaracija stila – cjelina koju čine svojstvo i vrijednost

    Color:red;

    Ili

    Font-size:24px;

    - Sve deklaracije koje pripadaju nekom selektoru grupiramo vitičastim zagradama


    - H1{color:red; font-size:1px;}

    (prepisati što fali)

    1. Zadatak

    <html>

    <head>

    <title>Interni stil</title>

    <style>
    body{background-color: gray;}

    p{color: #0000FF; font-size: 12px;}

    h1{color: #FF0000;font-size:20px;}

    </style>

    </head>

    <body>

    <h1> Naslov je crvene boje, veličine 20px</h1>

    <p> Tekst je u odlomku plave boje, veličine 12px</p>

    </body>

    </html>

    CSS – svojstva za uređivanje elementa

    Pozadinska boja elementa

    - Svojstva pozadinske boje možemo postaviti svakom HTML elementu.


    - Boju možemo izraziti imenom boje (eng. Jezik) ili heksadekadskim kodom.

    Background-color: #ff0000;

    p{color: #0000FF; font-size: 12px;Background-color: #ff0000;}

    obrub elementa

    - Svakom HTML elementu možemo postaviti obrub svojstvom border


    - Vrijednost svojstva border sastoji se od 3 dijela:
    1) debljina obruba (px)
    2) vrsta obruba (puna linija, točkasta linija,…)
    3) boja obruba

    - Primjer : deklaracija obruba punom linijom debljine 5px i crne boje:

    p{color: #0000FF; font-size: 12px; border: 5px solid #000000;}

    - Pošto je svaki element pravokutnog oblika, obrub možemo postaviti na bilo koju od stranica
    tog pravokutnika
    - Samo na donju stranu:

    p{color: #0000FF; font-size: 12px; border-bottom:solid #000000;}

    postoji i :

    (…)border-style: ridge;}

    Stranice pavokutnika:
    Border+: -top/bottom/left/right

    p{color: #0000FF; font-size: 12px; border-bottom: dotted;}

    Margina

    - Razmak između 2 HTML elementa


    - Marginu možemo postaviti na sve 4 stranice posebno kao i obrub

    Margin:10px;

    - Moguće ih je postavljati kao niz od 4 vrijednosti pri čemu se prvi broj odnosi na gornju
    marginu, zatim desna, donja i zadnji na lijevu

    Margin: 20px 30px 40px 50px;

    You might also like