Wprowadzenie do CSS

Bartosz Szczeciński

18.05.2018

@btmpl

medium.com/@baphemot

CSS

Kaskadowe Arkusze Stylów (cascading style sheets) to mechanizm pozwalający opisanie stylu prezentacji i na zmianę wyglądu i zachowania elementów HTML w przeglądarce.

CSS nie ma możliwości wpływania na strukturę HTML/DOM, chociaż może on dodawać tzw. "pseudoelementy".

Sposoby dodawania CSS

<div style="padding: 15px; color: pink; font-size: 32px; background: black">
    Ten tekst ma rozmiar 32px, jest różowy,
    wyświetlony jest na czarnym tle i ma 15 px "wcięcia".
</div>

<style>
    .hello {
        padding: 15px;
        color: pink;
        font-size: 32px;
        background: black
    }
</style>

<div class="hello">
    Ten tekst ma rozmiar 32px, jest różowy,
    wyświetlony jest na czarnym tle i ma 15 px "wcięcia".
</div>

<link rel="stylesheet" href="./style.css" />

<div class="hello">
    Ten tekst ma rozmiar 32px, jest różowy,
    wyświetlony jest na czarnym tle i ma 15 px "wcięcia".
</div>

Składnia CSS

.selektor { /* Selektor */
    /* Komentarz ;) */

    color: red; /* atrybut: wartość */
}

Selektory

/* Selektor Typu / Elementu */
div {}, html {}, body {}

/* Selektor klasy - atrybutu class="" */
.main {}, .active {}

/* Selektor atrybutu id */
#link {}, #main {}

/* Selektor uniwersalny */
* {}

/* Kombinatory */
/* Kolejne rodzeństwo */
h4 + p {}, li + li {}

/* "Dalsze rodzeństwo" */
h4 ~ p {}, li ~ li {}

/* Bezpośredni potomek */
body > div {}, ul > li {}

/* Ogólny potomek */
body div {}, ul li {}

Selektory

atrybuty

input[type="text"] {

}

input[attr] /* element posiada atrybut */
input[attr="val"] /* atrybut ma wartość "val" */
input[attr~="val"] /* atrybut zawiera słowo "val" w liście oddzielonej przecinkami*/
input[attr^="val"] /* atrybut zaczyna się od "val" */
input[attr|="val"] /* atrybut zaczyna się od "val-" lub jest po prostu "val" */
input[attr$="val"] /* atrybut kończy się na "val" */
input[attr*="val"] /* atrybut zawiera "val" */

Selektory

pseudo-klasy

/* Element wskazany kursorem */
.selektor:hover {}

/* Element będący pierwszym dzieckiem */
ul li:first-child {}

/* Element będący n-tym dzieckiem */
ul li:nth-child(3) {}

/* Co drugie dziecko */
ul li:nth-child(2n+1) {}

/* Pole formularza (lub inny element*), które jest aktualnie zmieniane */
input:focus {}

/* Odwiedzony wcześniej link */
a:visited {}

/* Negacja */
a:not(:visited) {}

/* Łączenie */
a.external:not(:visited):first-child
/*
    Pierwszy link 
    który nie był przez nas odwiedzany
    i mający klasę "external"
*/

Selektory

pseudo-elementy

/* Utwórz pseudo-element wewnątrz węzła, jako pierwszy / ostatni */
.selektor::before {}
.selektor::after {}

/* Pierwsza linia tekstu */
.selektor::firstLine {}

/* Pierwszy znak */
.selektor::first-letter

/* Kolor tła przy zaznaczeniu tekstu */
.selektor::selection {}

Selektory

@rules

/* Media-queries */
@media <typ mediów> [dodatkowe specyfikatory] {
    .selector {

    }
}

Przykładowe typy mediów:

all, screen, print, projection, tv

/* Dodatkowe specyfikatory */
@media screen and (max-width: 768px) {
    .hideOnMobile {
        display: hidden;
    }
}

Selektory

@keyframes

/* Animacje */
@keyframes nazwaAnimacji {
    0% {
        font-size: 10px;
    }

    100% {
        font-size: 32px;
    }
}

.selektor {
    animate: nazwaAnimacji 3s linear 1s infinite alternate;
}

/*
    Dodaj animację "nazwaAnimacji"
    Która trwa 3 sekundy
    Użyj transakcji liniowej
    Opóźnij o 1 sekundę
    Powtarzaj nieskończoną ilość razy
    Od początku do końca, od końca do początku
*/

Selektory

@font-face

/* Deklaracja własnej czcionki */
@font-face {
    font-family: 'Moja Super Czcionka',
    src:    url('/fonts/mojaCzcionka.woff') format('woff2'),
            url('/fonts/mojaCzcionka.ttf') format('ttf')
}

.selektor {
    font-family: 'Moja Super Czcionka';
}

Deklaracje

.class {
    color: red;
    color: blue;

    font-size: 12px;
    font-size: 12rem;

    background-image: url('http://example.com/test/background.png');
    background-repeat: no-repeat;
    background-position: center center;
}

Każda deklaracja musi zaczynać się od atrybutu i zawierać jego wartość (oddzielone :).

Wszystkie deklaracje (poza ostatnią) musza być zakończone średnikiem.

Deklaracje

shorthand

.class {
    background-image: url('http://example.com/test/background.png');
    background-repeat: no-repeat;
    background-position: center center;

    background: url('http://example.com/test/background.png') no-repeat center center;
}

Niektóre deklaracje posiadają zapis skrócony. Dotyczy to deklaracji, które należą do grupy (font-size, background-color, animation-function). Składnia wersji skróconej jest zdefiniowana, ale CSS pozwala na pomijanie elementów.

Deklaracje

Jednostki

px - pixele

mm, cm, in - milimetry, centymetry, cale

pt, pc - punkty (1/72 cala) lub pice (12pt)

em - szerokość litery M w danej czcionce, relatywne wzg. rodzica

ex - wysokość litery x

ch - szerokość cyfry 0

rem - szerokość litery M, relatywne wg. elementu <html> lub <body>

vw, vh - 1% szerokość i wysokość viewportu

vmin, vmax - 1% mniejszego / większego z boków viewportu

Ćwiczenie

Zmień rozmiar tekstu na stronie na 16px

Zmień pogrubienie (font-weight: 'bold') pierwszego <li>

Style dołącz do strony jako oddzielny plik, lub osadź w kodzie HTML

Specificity

.class1 {
    color: red;
}

.class2 {
    color: yellow;
    color: orange;
}

<div class="class1 class2">
    Witaj świecie!
</div>

CSS używa kilku mechanizmów na określenie wynikowego stylu elementu:

Klasy zadeklarowane "później" i atrybuty zadeklarowane "później" mają pierwszeństwo.

Specificity

#id {
    /* 0100 */
}

.class, [type="test"], :hover {
    /* 0010 */
}

element, ::before {
    /* 0001 */
}

style="" // 1000

Każdy rodzaj selektora ma swój własny "specificity"

Specificity

ul li:first-child {
    /* 0012 */
}

p#link > a {
    /* 0102 */
}

p#link > a:hover {
    /* 0112 */
}

li.main {
    /* 0011 */
}

li.main.main.main.main {
    /* 0041 */
}

Selektory można łączyć, łącząc ich specificity:

Specificity

<div style="color: red">
    Ten tekst ma być czerwony! (ale będzie różowy)
</div>

div {
    color: pink !important
}

Istnieje możliwość wymuszenia, aby to nasza konkretna reguła była zastosowana, lecz nie jest to rekomendowane:

<div style="color: red !red">
    Ten tekst ma być czerwony! (i nic tego nie zmieni)
</div>

Praca z CSS w JS

document.querySelector('h4').style.color = 'red';

Styl obiektu (atrybut style) można odczytać i modyfikować jako string.

Ponieważ jest to mało wygodne, można również skorzystać z obiektu .style dla danego elementu
i odczytywać, dodawać lub modyfikować jego wartości.

Praca z CSS w JS

W ten sposób możemy uzyskać jedynie dostęp do stylów nałożonych w HTML (<div style="">) lub dodanych przez JS. Nie mamy dostępu do deklaracji nałożonych przez CSS, ani nie mamy informacji czy deklaracja jest respektowana, czy też została nadpisana przez !important

Praca z CSS w JS

W odróżnieniu od normalnej notacji CSS (kebab case), praca ze stylami w JS używa notacji camelCase:

document.querySelector('h4').style.fontSize = '14px';
document.querySelector('h4').style.textAlign = 'center';

CSS

Sposoby dodawania CSS

Składnia CSS

Selektory

Selektory

Selektory

Selektory

Selektory

Selektory

Selektory

Deklaracje

Deklaracje

Deklaracje

Ćwiczenie

Specificity

Specificity

Specificity

Specificity

Praca z CSS w JS

Praca z CSS w JS

Praca z CSS w JS

Ćwiczenie

Wprowadzenie do CSS

More from btmpl