Kod CSS

Mamy nadziej臋, 偶e po lekturze ostatnich rozdzia艂贸w j臋zyk HTML sta艂 si臋 Wam bliski. Teraz pora na zaznajomienie si臋 z CSS-em, dzi臋ki kt贸remu wreszcie b臋dziecie mogli nada膰 swojej stronie wymarzony wygl膮d.

Przypomnijmy sobie, jak wygl膮da sk艂adnia j臋zyka CSS:

selektor {
w艂a艣ciwo艣膰: warto艣膰;
}

Za pomoc膮 selektor贸w wybieramy elementy strony, kt贸rym chcemy nada膰 okre艣lony wygl膮d. Na przyk艂ad:

W powy偶szy spos贸b ustawiamy niebieski kolor tekstu dla wszystkich akapit贸w na stronie. Z tego przyk艂adu 艂atwo wysnu膰 wniosek, 偶e za pomoc膮 CSS-a mo偶emy wybiera膰 elementy podaj膮c nazwy znacznik贸w. Nie jest to jednak jedyny spos贸b. Zapoznajmy si臋 z kilkoma podstawowymi rodzajami selektor贸w CSS.

Podstawowe selektory

Elementy na stronie mo偶na wybiera膰 na bardzo r贸偶ne sposoby. W tym rodziale poznamy podstawowe i najcz臋艣ciej u偶ywane selektory CSS, czyli:

  • nazw臋 tagu (tagname),

  • klas臋 (.classname),

  • ID (#idname),

  • atrybut ([attr=value]).

Selektor wybieraj膮cy element na podstawie tagu ju偶 przed chwil膮 widzieli艣my. Patrz膮c na selektory ID oraz atrybutu zapewne zaczyna ju偶 co艣 Wam 艣wita膰. Oznacza to, 偶e mo偶emy wybiera膰 elementy r贸wnie偶 bazuj膮c na warto艣ciach ich atrybut贸w id oraz obecno艣ci innych atrybut贸w. Jedyny rodzaj, kt贸ry pewnie wydaje si臋 w tej chwili tajemniczy to klasa.

Klasa

Przyjrzyjmy si臋 przyk艂adowemu elementowi strony:

<input type="email" id="myEmail" class="awwwesome-input">

Obok znanych ju偶 Wam atrybut贸w type oraz id pojawi艂 si臋 nowy: class. Jest on bardzo wa偶ny w kontek艣cie stylowania.

W zasadzie jedynym celem atrybutu class jest nadanie naszemu elementowi identyfikatora, kt贸ry b臋dzie s艂u偶y艂 jako selektor. Pewnie pomy艣licie teraz "ale przecie偶 on ma ju偶 identyfikator id!". S艂usznie, jednak warto艣膰 atrybutu class nie musi by膰 unikalna w zakresie dokumentu. T臋 sam膮 warto艣膰 mo偶emy nada膰 wi臋cej ni偶 jednemu elementowi, nie musz膮 te偶 by膰 one tego samego rodzaju.

<body>
<h1 class="awwwesome">Tytu艂 stronyh1>
<p class="awwwesome">Jestem paragrafem tekstu. Nadano mi atrybut class, aby umo偶liwi膰 stylowanie.p>
<p>Jestem paragrafem tekstu.p>
<form name="myForm">
<label for="name">Twoje imi臋:label>
<input id="name" type="text" class="awwwesome">
form>
body>

Nadajmy tekstowi ka偶dego elementu z powy偶szego przyk艂adu posiadaj膮cego klas臋 awwwesome kolor zielony:

.awwwesome {
color: green;
}

Tytu艂 strony

Jestem paragrafem tekstu. Nadano mi atrybut class, aby umo偶liwi膰 stylowanie.

Jestem paragrafem tekstu.

Twoje imi臋:

ID

Wr贸膰my jeszcze na chwil臋 do elementu z naszego poprzedniego przyk艂adu:

<input type="email" id="myEmail" class="awwwesome-input">

Nadajmy tekstowi w naszej kontrolce kolor czerwony, odnosz膮c si臋 do niego po id. Mo偶emy to zrobi膰 w ten spos贸b:

Przypomnijmy, 偶e w jednym dokumencie warto艣ci atrybutu id powinny by膰 unikalne. W zwi膮zku z tym style zawarte wewn膮trz tego selektora nie s膮 zbyt reu偶ywalne 鈥 mo偶emy je zastosowa膰 tylko dla jednego, konkretnego elementu na stronie.

Important::Wa偶ne

Cho膰 stylowanie po atrybucie id jest mo偶liwe, od dawna jest uwa偶ane za z艂膮 praktyk臋.

Atrybut

Stylowa膰 mo偶na r贸wnie偶 elementy zawieraj膮ce konkretny atrybut. Dobrym przyk艂adem jest np. tag . W tym wypadku deklaracja CSS b臋dzie dotyczy艂a kontrolek input typu text.

input[type="text"] {
border: 2px solid blue;
}

W wyniku powy偶szego kodu do kontrolki zostanie dodana ramka o grubo艣ci 2px i kolorze niebieskim.

Warto tutaj doda膰, 偶e zapis border: 2px solid blue; jest zapisem skr贸towym. W艂a艣ciwo艣ci ramki mo偶emy zdefiniowa膰 tak偶e osobno:

border-width: 2px;
border-style: solid;
border-color: blue;

Podstawowe w艂a艣ciwo艣ci CSS i ich warto艣ci

CSS umo偶liwia przypisanie do HTML-owych element贸w ca艂ej palety r贸偶nych w艂a艣ciwo艣ci: od koloru tekstu, t艂a, przez zastosowanie dowolnego kroju pisma, dodania cieniowania, gradientu, a偶 do definiowania pozycji. W tym rozdziale zajmiemy si臋 tymi najbardziej podstawowymi. Inne poznamy na kolejnych zaj臋ciach. Wszystkich ch臋tnych, kt贸rzy ju偶 teraz chc膮 zag艂臋bi膰 si臋 w temacie CSS-owych w艂a艣ciwo艣ci, zapraszamy na stron臋 QuackIt.com, cho膰 podobnych 藕r贸de艂 w tym temacie znajdziecie jeszcze wi臋cej.

Kolorowanie tekstu (color)

S艂u偶y nam do tego w艂a艣ciwo艣膰 color. Najcz臋艣ciej warto艣ci kolor贸w definiuje si臋 w kodzie heksadecymalnym (hex), czyli szestnastkowym z charakterystycznym znakiem #. Kody te pobiera si臋 z tzw. color picker贸w, np. na stronie HTMLColorCodes.com, w programach graficznych lub innych narz臋dziach. Je艣li zainteresowali艣cie si臋 kodem heksadecymalnym, wi臋cej do poczytania na Wikipedii.

W CSS istniej膮 te偶 predefiniowane kolory kt贸re mo偶emy przypisa膰 do element贸w po prostu podaj膮c ich nazw臋, np. color: blue; lub color: salmon;. Poza kodem heksadecymalnym i predefiniowanymi nazwami, mo偶emy tak偶e przypisywa膰 kolory poprzez zapis rgb (kana艂y red, green oraz blue), hsl (hue 鈥 barwa, saturation 鈥 nasycenie, lightness 鈥 jasno艣膰) czy nawet rgba i hsla (z uwzgl臋dnionym kana艂em alfa, czyli kana艂em odpowiadaj膮cym za stopie艅 przezroczysto艣ci).

p {
color: #f14b5c ; /* kolor pomara艅czowy */
color: rgb(241, 75, 92); /* ten sam kolor w zapisie rgb */
}

To jest akapit o kolorze pomara艅czowym.

Important::Wa偶ne

W CSS-owych kolorach wyst臋puje r贸wnie偶 warto艣膰 transparent, czyli przezroczysty.

Kolorowanie t艂a (background-color)

S艂u偶y do tego w艂a艣ciwo艣膰 background-color, np.:

p {
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
}

To jest paragraf o kolorze pomara艅czowym na jasnor贸偶owym tle.

Important::Wa偶ne

Zauwa偶yli艣cie ju偶 z pewno艣ci膮, 偶e wewn膮trz kodu danego selektora mo偶emy poda膰 warto艣ci wi臋cej ni偶 jednej w艂a艣ciwo艣ci. Pami臋tajcie o tym, aby ka偶d膮 linijk臋 kodu z deklaracj膮 w艂a艣ciwo艣ci ko艅czy膰 艣rednikiem 鈥 ;.

/* deklaracja poprawna */ .good { color: red; border: 1px solid blue; }

>
> ```css
/* deklaracja niepoprawna */
.bad {
color: red
border: 1px solid blue
}

Niedomkni臋cie linii 艣rednikiem spowoduje b艂膮d w interpretacji arkusza styl贸w i w takiej sytuacji przegl膮darka zignoruje 藕le zapisane deklaracje.

呕eby unikn膮膰 sytuacji, kiedy 艂amiecie sobie g艂ow臋 zastanawiaj膮c si臋 "czemu m贸j kod nie dzia艂a?", b膮d藕cie bardzo skrupulatni w domykaniu linii 艣rednikami!

Obramowanie (border)

Za obramowanie odpowiada w艂a艣ciwo艣膰 border, kt贸rej przypisa膰 mo偶emy grubo艣膰, rodzaj/styl linii (przerywana, ci膮g艂a, kropkowana鈥) i kolor. Przy nadawaniu warto艣ci powinna by膰 zachowana powy偶sza kolejno艣膰, czyli: grubo艣膰, styl, kolor:

border: 2px solid #f14b5c;

Dost臋pne style linii to m.in.: solid (ci膮g艂a), dotted (kropkowana), dashed (przerywana) czy double (podw贸jna).

p {
border: 2px solid #f14b5c;
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
}

To jest akapit o kolorze pomara艅czowym na jasnor贸偶owym tle.

Wyr贸wnanie tekstu (text-align)

Tekst mo偶e zosta膰 wyr贸wnany na trzy r贸偶ne sposoby:

  • do prawej (text-align: right;),

  • do lewej (text-align: left;),

  • do 艣rodka (text-align: center;).

Dodatkowo tekst mo偶e by膰 wyjustowany (text-align: justify;).

p {
text-align: center;
border: 2px solid #f14b5c;
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
}

To jest akapit o kolorze pomara艅czowym na jasnor贸偶owym tle.

Odmiana (grubo艣膰) pisma (font-weight)

Ta w艂a艣ciwo艣膰 oka偶e si臋 przydatna zw艂aszcza w kolejnym rozdziale, kiedy b臋dziemy wybiera膰 niestandardowe rodziny font贸w. Wtedy zauwa偶ycie, 偶e dany kr贸j mo偶e mie膰 r贸偶ne grubo艣ci. CSS umo偶liwia ostylowanie tekstu r贸偶nymi odmianami danego fonta. Warto艣ci font-weight mog膮 by膰 liczbami, np. 100, 300, 500, 700, lub okre艣lone s艂ownie, np. normal, bold, light, lighter. Pami臋tajmy tylko, 偶e nie ka偶dy wybrany przez nas kr贸j pisma posiada膰 b臋dzie r贸偶ne odmiany 鈥 w tych przypadkach w艂a艣ciwo艣膰 CSS w 偶aden spos贸b nie wp艂ynie na zmian臋 grubo艣ci.

p {
font-weight: bold;
text-align: center;
border: 2px solid #f14b5c;
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
}

To jest akapit o kolorze pomara艅czowym na jasnor贸偶owym tle.

Czy zauwa偶yli艣cie, w por贸wnaniu do akapitu z zagadanienia wy偶ej, 偶e font sta艂 si臋 grubszy?

Stopie艅 (rozmiar) pisma (font-size)

Mo偶emy przypisywa膰 tekstom r贸偶ne rozmiary pisma. Istnieje kilka jednostek: px (piksele), rem, em czy nawet % (procenty). Na razie skupmy si臋 na pikselach, a znaczenie pozosta艂ych jednostek wyja艣nimy ju偶 niebawem.

p {
font-size: 36px;
text-align: center;
border: 2px solid #f14b5c;
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
}

To jest akapit o kolorze pomara艅czowym na jasnor贸偶owym tle.

Styl fontu (font-style)

S艂u偶y do tego w艂a艣ciwo艣膰: font-style: italic;, gdzie italic to nic innego jak kursywa. Normalny tekst uzyskamy, u偶ywaj膮c font-style: normal;.

p {
font-style: italic;
font-size: 36px;
text-align: center;
color: #f14b5c; /* kolor pomara艅czowy */
background-color: #FFE7EC; /* kolor jasnor贸偶owy */
border: 2px solid #f14b5c;
}

To jest akapit o kolorze pomara艅czowym na jasnor贸偶owym tle.

Obrazek jako t艂o (background-image)

呕eby wype艂ni膰 dany element (sekcje, kontener, czy nawet ca艂膮 zawarto艣膰 strony, czyli ) obrazkowym t艂em, stosujemy w艂a艣ciwo艣膰:

background-image: url('tutaj podaj臋 艣cie偶k臋 do obrazka');

Przyk艂adowo:

section {
background-image: url('./images/background.jpg');
}

Pami臋tajcie o prawid艂owym podaniu wzgl臋dnej 艣cie偶ki do obrazka.

T艂o mo偶e przyjmowa膰 jeszcze wiele ciekawych w艂a艣ciwo艣ci, kt贸re znajdziesz na MDN.

Warto potestowa膰 r贸偶ne opcje dla rozmiaru t艂a, czyli background-size

background-size: cover;
background-size: 100%;
background-size: contain;
background-size: 50%;

Sprawd藕cie jak zmienia si臋 t艂o pod wp艂ywem zmiany szeroko艣ci okna przegl膮darki.

Stylowanie listy

Pewnie zastanawiacie si臋 jak pozby膰 si臋 kropeczek przy elementach listy (

  • ). S

  • u

  • y do tego w

  • a

  • ciwo

  • :

  • ```

  • >

  • Je

  • li w pliku `style-1.css` wyst

  • puje deklaracja:

  • >

  • ```css h1 { color: red; } ```

  • >

  • A w pliku `style-2.css`

  • >

  • ```css h1 { color: green; } ```

  • >

  • to przegl

  • darka nada naszemu nag

  • wkowi kolor zielony, gdy

  • wyst

  • puje on jako *ostatni*.

  • Tw

  • j email: Twoje imi

  • : Tw

  • j komentarz: Prze

  • lij