p
{
font-weight: bold;
font-size: 25px;
color: green;
}
kaskadowosc
kaskadowsc stylow oznacza, ze wlasciwosci sa dziedziczone i nadpisywane np. w body mozemy
zdefiniowac
czionke dla calej strony, ale chemy aby byla inna w danym akapcie, wtedy nastepuje kaskada
kolejnosa. Kaskada CSS:
Styl przegladatki
Styl zewnetrzny CSS (ostatni zaladowany CSS ma najwyszy piorytet)
Style w pliku .html
Style inline
piorytet w selektorach
Odziediczony
Selector typu nazwa tagu
Class selector
Id selector
Inline CSS
!important
jezeli waznosc/pioritet jest ROWNY to są laczone, a te ktore wystapuly pozniej w pliku nadpsuja
wczesniejsze.
rodzaje selektrow CSS
tag
np. p, h1, h2 - zastosuje styl dla wszyskich tagow na stronie
id
(jeden) id z definicji jest unikalne i powinno byc uzywane tylko raz. w html uzywamy id
do
okreslenia id a w css uzywamy hasztagu np. #mojeID
class
(wiele) klasa moza powtwarzac sie wiele razy. Do oznacznia klasy w html uzywamy class a w
css
uzywamy kropki np. .nazwaMojejKlasy
Selektory
Selektor
Wyjasnienie
p
wybierz wszystkie elementy o nazwie p
.foo
wybierz wszystkie elementy ktorych class="foo"
#myUniqueElement
wybierz wszystkie elementy ktorych id="#myUniqueElement"
div, p
wybierz wszystkie elementy o nazwie div oraz p
div p
wybierz wszystkie elemety p wewnatrz elementu div
div .foo
wybierz wszystkie elemeny o class=foo wewnatrz elemntu div
div p.foo
wybierz wssytkie elmenty p o class=foo wewnatrz elmentu div
*
wybierz wszystkie elemnety na stronie
[data-tooltip-text]
wybierz wszystkie elemnety ktore posiadaja atrybut data-tooltip-text
div vs span, elmenty blokowe i elementy
inline
div
division, podział - jest elementem blokowy, elementy blokowe zajmują domyślnie całą dostępną
przestrzeń przeglądarki i wszystkie style np. będą stosowane do całości bloku. Przykład:
Ten tekst znajduje sie w div
I styl background-color stosowany jest do calego bloku
tag div automatycznie dodaje line break
W tym przykladzie mozesz zobaczyc, ze centrowanie jest zalezne od bloku w ktorym znajduje
sie
obiekt do centrowaia.
Teskt centrowany do diva bez zmiany width
Tekst 1 zmieniona width
Tekst 2 zmieniona width
Tekst 3 zmieniona width
Tekst 4 zmieniona width
span
rozpiętość, zakres - jest elementem inline znaczy to ze element zajmuje tylko tyle miejsca co
zawrtość elmentu. Przykład:
Ten tekst znajduje sie w span
I styl jest stosowany tylko do wielkosci elemntu, i wdiac ze jest on inline gdyz zajuje
tylko taka przetrzen jak tekst
wlasciwosc display
inline
powoduje ze element blokowy zachowuje sie jak element inline
inline
inline
inline
block
kazdy blok konczy sie lamaniem lini i przez to umieszczany jest pod soba
block
block
block
inline-block
blok wyświetlane w lini co pozwalna na umieszczenie blokow obok siebie bez lamania lini ale
jednoczesnie nadawac im parmetry
Flex container to element ktory przechowuje flex
items.
Flex items to bezposrednie dzieci flex container.
Flex container posiada main axis oraz corss axis.
Przy flex-direction: row main axis to os pionowa.
Przy flex-direction: column main axis to os pozioma.
Do pozycionowania relatywnie do main axis uzywamy justify-content Do pozycionowania relatywnie do corss axis uzywamy align-items
flex-justify-content-end przy flex-direction = row
Item 1
Item 2
Item 3
flex-justify-content-end przy flex-direction = column
W przykladzie z img uzyto tagu span aby pokazac dymek, selektor
::after
, dziala tylko dla tekstu Wartosc CSS attr(data-tooltip-text) pozwa na odczyt wartosci
atrybutu HTML i uzycie go w CSS
formatowanie tekstu
text-transform
Przykladowe wartosci:
capitalize - zamienia pierwsza litere kazdego
wyrazu na
wielka
uppercase - zamienie wszystkie litery na
wielkie
lowercase - zamienie wszystkie litery na MALE
text-align
wlasciwosc uklada tekst wzgledem pojemnika w ktorm sie znajduje, a nie wzgledem calej strony
Lista
wartosci text-align
white-space
tag white-space pozwala zdefiniowac w jaki sposob interpertowane maja byc biale znaki
w
html przez CSS
normal - przyklad bez zmian
Lorem ipsum
dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
pre-line - interpertowane sa tylko entery/break line, spacje i tablatory sa ignorowane
Lorem ipsum
dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
pre-wrap - interpertowane sa wszystkie biale znaki
Lorem ipsum
dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
nowrap - zmusza aby caly tekst byl w jednej lini
Lorem ipsum dolor
sit amet consectetur adipisicing elit. .
text-decoration
pozwala tworzyc dekoracje tekstu, ktore nie trzymaja sie tekstu w przeciwieństwo do border.
Przykladowe zostowoanie text decoraction:
Ten tekst posiada
dekoracje i
dodatkowo wyswietla dymek
text-indent
pozwala na tworzenie wcecia pierwszej lini tekstu, dla przykladu zostowane to zostalo dla
wszytkich elementow p na tej stronie
::first-letter
pozwala na zasowanie stylu do pierwszej litery tekstu w elemecie, dla przykladu uzyto tego
dla
wszystkich h2
line-height, word-spacing, letter-spacing
pozwala na zasowanie stylu do pierwszej litery tekstu w elemecie, dla przykladu uzyto tego
dla
wszystkich h2
wartosci domyslne
Lorem ipsum
dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
Lorem ipsum dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
custom fonts
Sprawdz kod html aby zobaczyc jak ten font zostal zaimportowany
przyklad uzycia custom font
Lorem ipsum dolor
sit amet consectetur adipisicing elit. Tempore explicabo vero provident, quis
perspiciatis necessitatibus sapiente. Quisquam deserunt aspernatur quibusdam!
Excepturi voluptate illo eius distinctio rem odio,
officiis sapiente name.
Stosowane np. w czionkach. Oznacza reletywna wielkosc do wartosci elementu macierzystego. Np.
jesli element HTML ma font size 24px to 1em = 24px, 2em = 48px. Pozwala to urzymac wyglad
strony
przy zminach rozdzielczosci.
%
Oznacza relatywna wartosc do elmentu matki. Np. jezeli div witdh=50% to bedzie on zjamowal
50%
dostepnego miejsca. Pozowala to tworzyc responsywne strony.
px
statyczna wartosc
Zmienne w CSS
Dobra praktyka do ulatwiania sobie zycia w CSS jest stosowanie zmiennych np. do dynamicznego
liczenia
witdh:
--link-padding: 25px;
--link-margin-left: 20px;
--link-border-left: 5px;
padding: var(--link-padding);
border-left: var(--link-border-left) solid orange;
margin-left: var(--link-margin-left);
width: calc(var(--main-menu-width) / 6 - 2 * var(--link-padding) - var(--link-border-left) - var(--link-margin-left));
pozycionowanie
box-sizing: border-box;
zastosowanie tej wlasciwosci powoduje, ze przy ustawianiu width automatycznie zostna
odjete
szerokosci border i padding i element bedzie mial faktycznie zadana wielkosc.
positon: static (statyczny)
positon: relative (wzgledny)
pozwalna na uzycie top, right, left, bottom element przeusniety w ten sposob nadal
zajmuje
miejsce
positon: absolute (bezwzgledny/niezlezny)
pozycja elemntu jest relatywna do calej strony www zaraz po jej zladowaniu, czyli jesli bedziemy
przewijac strone to element zostanie w tym samym miejscu.
positon: fixed (ustalony)
pozycja elemntu jest relatywna do calej strony www, element bedzie sie jedank przesuwal razem z
scrollem. Mozna to wykorzystać np. do tworzenia stopki strony, ktora zawsze bedzie na dole
ekranu
positon: sticky
dziala podbnie jak fixed, jednak element zaczyna sie ruszac dopiero gdy przekroczna zostanie
wartosc
top uzywajac scrolla. Czyli element jest przylejony do pozycje na erkanie.
wspolne dzialanie relative i absolute
pozycionowanie elementu absloute wzglendem elemntu relative - aby pozycionowac element wzgledem
elementu w ktorym element sie znajduje, nalezy ustawic pozycje absolutna dla elemnetu ktory
chcemy
pozycionowac i pozycje relatwyna dla elemntu do ktorego chcemy pozycionowac
#main-container
{
margin: 0 auto;
background-color: gray;
position: relative;
box-sizing: border-box;
width: 300px;
padding: 10px;
}
#main-container address
{
background-color: red;
position: absolute;
right: 10px;
top: 20px;
}
umieszczanie kontenera w kolejnym kontenerze
rozszezemy tutaj strone z przykladu wyzej dodajac w optyplany sposob kolejny kontener
Zachowanie elementow
float i clear
zastosowanie wlasciwosc float i clear pozwala na zdecydowanie w jakis sposb tekst ma oplywac np
obrazek
Lorem ipsum dolor, sit amet consficia at aliquid aut consequuntur explicabo architecto nulla
tempora perferendis quasi autem exercitationem atque incidunt, facilis ea sunt quas fugiat?
Mollitia nostrum consectetur dicta te.
Lorem
ipsum dolor, sit amet consectetur adipisicing elit. Est labore officia at aliquid
aut
consequuntur explicabo architecto nulla tempora perferendis quasi autem exercitationem atque
incidunt, facilis ea sunt quas fugiat?
Mollitia nostrum consectetur dicta veniam totam, sequi ullam explicabo repellendus
necessitatibus alias illum? Possimus consectetur praesentium corrupti deserunt beatae magnam
odio incidunt perspiciatis ad ducimus, iusto, asperiores nobis! Ullam, sapiente.
overflow
wlasciwosc decyduje o tym co ma sie stac gdy tresc strony internowej przekracza wymiary bloku w
ktorym tresc sie znajduje.
overflow hidden
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim alias similique minima velit,
quaerat, quia, voluptatibus ratione earum laboriosam ipsum officia. Nemo autem architecto
quae
rem accusantium fuga id assumenda!
overflow scroll
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim alias similique minima velit,
quaerat, quia, voluptatibus ratione earum laboriosam ipsum officia. Nemo autem architecto
quae
rem accusantium fuga id assumenda!
overflow visible (domyslne)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim alias similique minima velit,
quaerat, quia, voluptatibus ratione earum laboriosam ipsum officia. Nemo autem architecto
quae
rem accusantium fuga id assumenda!
