Krótki kurs css

Paweł Mleczko

2017-11-29

Kaskadowe arkusze stylów

Co to jest CSS?

CSS – (ang. Cascading Style Sheets – kaskadowe arkusze stylów – specjalny język opracowany w celu stworzenie możliwości elastycznego zarządzania wyglądem elementów w dokumentach elektronicznych

Zalety CSS

rozdzielenie struktury i prezentacji dokumentów
bardziej przejrzyste i krótsze dokumenty
łatwiejsza modyfikacja wyglądu elementów
standardowe narzędzie używane przez większość projektantów stron www

Dlaczego ‘kaskadowe’?

elementy podrzędne (np. <span> zawarte wewnątrz <p>) dziedziczą atrybuty stylu elementu nadrzędnego, a wybrane z nich może samodzielnie nadpisywać.

Powstaje swoista kaskada definicji stylu.

Kaskadowe arkusze stylów

Budowa stylu

    selektor {
        cecha:wartość;
        cecha:wartość;
        }

Na przykład

    p {
        color:red;
        font-size:14pt;
        }

div vs span

<div class="klasa"> </div>
<span class="klasa"> </span>

Metody osadzania stylów na stronie

Style Lokalne

    <p>Treść dokumentu</p>
    <p style="color:red; font-size:30pt;">Treść dokumentu</p>

Treść dokumentu

Style zagnieżdżone

<head >
    ....
    <style>
    p {
        color:green;
        font-size:15pt;
    }
    </style>
    ...
</head >

Style zewnętrzne

<head >
    ....
    <link rel="stylesheet" href="arkusz.css" type="text/css" />
    ...
</head >

Jednostki miar

piksele

<head >
    ....
    <style>
    p {
        font-size:15pt;
    }
    </style>
    ...
</head >

em

<head >
    ....
    <style>
    p {
        font-size:1em;
    }
    </style>
    ...
</head >

Procenty

<head >
    ....
    <style>
    p {
        font-size:120%;
    }
    </style>
    ...
</head >

Kolory

Nazwy

<head >
    ....
    <style>
    p {
        color:red;
    }
    </style>
    ...
</head >

Wybór spośród: Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua

RGB

<head >
    ....
    <style>
    p {
        color:rgb(255,0,0);
    }
    </style>
    ...
</head >

RGBA

<head >
    ....
    <style>
    p {
        color:rgba(0, 255, 0, 0.3);
    }
    </style>
    ...
</head >

Zapis szesnastkowy

<head >
    ....
    <style>
    p {
        color:#FF0000;
    }
    </style>
    ...
</head >

Stosowanie styli

Znaczniki

<head>
    ....
    <style>
    p {
        color:#FF0000;
    }
    </style>
    ...
</head>

Atrybut id

<head >
    ....
    <style>
    #testId {
        background:red;
    }
    </style>
    ...

<div id="testId" >
    TEST
</div >

Atrybut class

<head >
    ....
    <style>
    .testId {
        background:red;
    }
    </style>
    ...
<div class="testId">
    TEST
</div >

Pseudoklasy

<head >
    ....
    <style>
    #testId:hover {
        background:red;
    }
    </style>
    ...

<div class="testId">
    TEST
</div >

Pseudoklasy

<head>
    ....
    <style>
    p:first-child{
        background:red;
    }
    </style>
    ...
<p>
    TEST1
</p>
<p>
    TEST2
</p>

Wybrane właściwości tekstu

text-align

Dostępne wartości: left | right | center | justify | inherit

Przykład:

p {text-align:left;}

text-indent

Dostępne wartości: wartość liczbowa | wartość procentowa | inherit

Przykład:

p {text-indent:3em;}

text-decoration

Przykład:

p {text-decoration:underline;}

Wybrane właściwości czcionki

font-family

Przykład:

p{font-family:arial, helvetica, verdana, sans-serif;}

font-size

Dostępne wartości: rozmiar

Przykład:

p{font-size:1.2em;}

font-weight

Dostępne wartości: normal | bold |100 | 200 | 300 | 400 | 500 | 600 | 700 | 800

Przykład:

p{font-weight:bold;}

font-style

Dostępne wartości: normal | italic | oblique | inherit

Przykład:

p{font-style:italic;}

Wybrane właściwości list

list-style-type

Przykład:

ul {list-style-type:circle;}

list-style-position

Dostępne wartości: inside|outside|initial|inherit

Przykład:

ul {list-style-position:outside;}

Wybrane właściwości koloru i tła

color

Dostępne wartości: nazwa lub wartość koloru | inherit

Przykład:

p {color:#FF0000;}

background-color

Dostępne wartości: nazwa lub wartość koloru | inherit

Przykład:

p {background-color:#FF0000;}

background-image

Dostępne wartości: url | none | inherit

Przykład:

body {background-image:url(tlo.jpg);}

Wybrane właściwości marginesów i dopełnienia

margin, margin-left, margin-right, margin-top, margin-bottom

Dostępne wartości: wartość liczbowa | wartość procentowa | auto | inherit

Przykład:

p {margin-left:1em;}
h1 {margin-right:1em;}
table {margin-top:1em;}
div {margin-bottom:1em;}

padding, padding-left, padding-right, padding-top, padding-bottom

Dostępne wartości: wartość liczbowa | wartość procentowa | auto | inherit

Przykład:

p {margin-padding:1em;}
h1 {padding-right:1em;}
table {padding-top:1em;}
div {padding-bottom:1em;}

Wybrane właściwości obramowania

border-style border-top-style border-right-style border-bottom-style border-left-style

Przykład:

p {border-style:dotted;}
p {border-left-style:solid;}

border-width border-top-width border-right-width border-bottom-width border-left-width

Przykład:

p {border-top-width:5px;}
div {border-width:2pt;}

border-color border-top-color border-right-color border-bottom-color border-left-color

Dostępne wartości: nazwa lub wartość koloru | transparent | inherit

Przykład:

p {border-top-color:red;}

Wymiarowanie elementów

width

Dostępne wartości: wartość liczbowa | wartość procentowa | auto | inherit

Przykład:

p {width:30%;}

height

Dostępne wartości: wartość liczbowa | wartość procentowa | auto | inherit

Przykład:

p {height:30%;}

Wybrane właściwości pozycjonowania elementów

position

Dostępne wartości: static | relative | absolute | fixed | inherit

Przykład:

p {position:absolute;}

top, right, bottom, left

Dostępne wartości: auto | wartość liczbowa | wartość procentowa | inherit

Przykład:

p {position:absolute; top:10px;}
p {position:absolute; right:10px;}
p {position:absolute; bottom:10px;}
p {position:absolute; left:10px;}

z-index

Dostępne wartości: auto | wartość liczbowa określająca pozycję w stosie | inherit

Przykład:

p {z-index:2;}

float

Dostępne wartości: left | right | none | inherit

Przykład:

img {float:right;}

clear

Dostępne wartości: left | right | none | both | inherit

Przykład:

img {clear:right;}

display

Przykład:

p{display:block;}