CSS w Wordpress. Samodzielne zmiany w wyglądzie motywu ebook

CSS

W WoRdPRess

Samodzielne zmiany w wyglądzie motywu

Tytuł: CSS w WP Samodzielne zmiany w wyglądzie motywu

Copyright: © Ola Gościniak Jestem Interaktywna, 2019

Grafika: Ola Gościniak

Skład: Ola Gościniak

Redakcja i korekta: Ewa Popielarz

Wsparcie: Martyna Chmielewska

Fotografie: Agnieszka Werecha-Osińska

ISBN: 978-83-947640-0-5

Poznań 2019

Wydanie pierwsze

Dystrybutor: Jestem Interaktywna

1 START

Co to jest ten CSS? 9

Komu to się przyda? 10

Co zmienisz dzięki CSS? 11

2 SKŁADNIA CSS

Użycie CSS-a 13

Jak wygląda HTML? 16

Selektory 21

!Important 24

Pseudoelementy 26

Jednostki 28

3 STYLE w CSS

Jak działać? 31

Kolory 31

Fonty i tekst 38

Ramki 45

Odstępy 49

Ukrywanie 53

Rozmiary 55

Responsive 59

Problemy 61

4 SZATA GRAFICZNA w WP

CSS w WP 63

Jak znaleźć selektor? 67

Domyślne klasy w WP 71

Dodawanie klas 74

5 SZYBKIE KoDY

O co chodzi? 78

Guziki 79

Formularze 85

Menu 91

Twoje fonty 95

Co dalej? 98

hej! tu ola

gościniak!

Prowadzę bloga Jestem Interaktywna. ►www.olag.pl

Uwielbiam Internet, strony internetowe oraz WordPressa. Od podstawówki tworzę strony WWW – najpierw hobbystycznie, potem pracując dla innych i na własny rachunek.

Teraz przekazuję tę wiedzę Interaktywnym na swoim blogu, w wyzwaniach, webinarach, prelekcjach, na warsztatach, w podcaście, e-bookach oraz w książce Bądź online.

►www.badzonline.pl

Szukam różnych form, które pomogą innym sprawić, że ich strony WWW będą coraz lepsze, a Internet stanie się jeszcze ciekawszym i bardziej wartościowym miejscem.

Prowadzę grupę Jesteśmy Interaktywne, w której około 10 000 osób wspiera się wzajemnie przy tworzeniu idealnych miejsc w sieci.

►www.olag.pl/grupa-fb

Cieszę się, że dołączasz do społeczności Interaktywnych i trzymam kciuki za Twoje działania. Wierzę, że Twoja strona internetowa po lekturze tego e-booka będzie PIĘKNA!

Ola Gościniak

Zmień wygląd strony WWW Celnie, Sprawnie i Skutecznie.

Jeśli sięgasz po tego e-booka, to znaczy, że chcesz wznieść swoją stronę internetową na wyższy poziom.

Bardzo długo zwlekałam z poruszeniem tematu CSS-a. Miałam poczucie, że to wyższa półka i najpierw powinnam omówić podstawy tworzenia strony WWW. To wszystko prawda! Po CSS sięgamy wtedy, gdy chcemy dodać stylu naszej stronie internetowej poprzez dodatkowy kod, który na niej umieszczamy. Dzięki niemu możemy zmienić jej wygląd i zadbać o spójność z naszą marką.

Przez trzy lata prowadzenia bloga często myślałam o tym temacie, ale nie mogłam zdecydować, jaką formę powinny mieć materiały o CSS-ie. Dopiero jakiś czas temu olśniło mnie, że e-book z ćwiczeniami będzie idealnym rozwiązaniem.

Teraz już trudno mi uwierzyć, że mogłam tak długo z tym zwlekać! Widocznie potrzebowałam czasu, by wszystko poukładać w głowie, tak aby przekazać Ci wraz z tymi materiałami jak najbardziej wartościową, a zarazem najbardziej praktyczną wiedzę dotyczącą CSS-a.

Cieszę się, że wreszcie poruszyłam ten temat. Od lat tworzę strony internetowe i w całym tym procesie to właśnie CSS jest moim konikiem. Uwielbiam kreować nowe miejsca w sieci, a nadawanie im odpowiedniego wyglądu i sprawianie, by skuteczne reprezentowały działalność i biznes, sprawia mi największą frajdę. Wierzę, że tym materiałem także w Tobie zaszczepię bakcyla dbania o wygląd strony WWW.

Traktuj tego e-booka jako ściągawkę, którą wykorzystasz do wprowadzania zmian w CSS-ie. Skupiam się w nim głównie na kodach, które przydadzą Ci się przy dostosowywaniu motywu WordPressa do Twoich potrzeb, zwłaszcza jeśli jego twórcy nie zapewnili pełnych możliwości personalizacji.

Jeśli masz pytania dotyczące CSS-a, śmiało zadaj je w grupie na FB Jesteśmy Interaktywne – będzie to idealne połączenie tego poradnika z bardziej szczegółowymi radami. Aby wprowadzić konieczne usprawnienia, w niektórych przypadkach możesz potrzebować dodatkowych odpowiedzi. Oznacz takie pytania hashtagiem #CSSWP.

A jeśli będziesz umieszczać info o tym e-booku gdzieś w social mediach, dodaj hashtag #jesteminteraktywna – chętnie przybiję Ci wirtualną piątkę!

To co? Startujemy?

No jasne! Zacznijmy zatem od początku!

moduł 1staRt!

co to jest ten css?

Często przyrównuję stronę internetową do domu – widzę pomiędzy nimi bardzo dużo podobieństw. Także tłumacząc pojęcie języka CSS, posłużę się tą metaforą.

Strona internetowa składa się między innymi z kodów HTML oraz CSS. Język HTML służy do stworzenia struktury strony WWW oraz ustawienia kolejności konkretnych elementów, które się na niej znajdą, natomiast dzięki językowi CSS sprawiamy, że te elementy będą dobrze wyglądać.

W naszym domu język HTML wznosi mury oraz planuje rozkład poszczególnych pokoi i ich wyposażenie, a język CSS określa to, jak wyglądają. Jeśli więc mamy w domu kanapę, to samo jej istnienie będzie opisane językiem HTML, ale już to, jak ta kanapa wygląda – jaki jest jej rozmiar, kolor, materiał – znajdzie się w języku CSS.

Ale ponieważ nie tylko metaforami Gościniakowa żyje, napiszę to też mądrymi słowami:

Język HTML (Hypertext Markup Language) to kod wykorzystywany do tworzenia struktury strony internetowej i jej zawartości, a język CSS (Cascading Style Sheets) służy do opisu formy jej wyświetlania.

Ja tam wolę metaforę, a Ty?

komu to się PRzyda?

Masz stronę WWW na WordPressie i chcesz dostosować motyw do swoich potrzeb? A może pragniesz od zera stworzyć swoją witrynę?

Z kodu CSS można korzystać w różnych celach. Można go używać do tworzenia swojej strony internetowej od podstaw; wymaga to jednak znajomości HTML-a, aby jednocześnie skupić się na strukturze strony. W wielu przypadkach także osoby, które wykorzystują WordPressa do wyklikania swojej strony internetowej, mają potrzebę wykorzystania kodu CSS. W tym e-booku koncentruję się głównie na tym drugim przypadku.

Jeśli masz stronę internetową na WordPressie, to składa się ona między innymi z kodów HTML oraz CSS. Przy wielu motywach graficznych (skórkach decydujących o wyglądzie strony), zwłaszcza tych prostych i darmowych, trzeba czasem dostosować wygląd niektórych elementów do swoich potrzeb. Zdarza się jednak, że twórcy motywu nie przewidzą zmiany takich opcji w ustawieniach motywu.

Co wtedy zrobić? Najprostszym sposobem będzie wprowadzenie modyfikacji w kodzie CSS. Jest to bezpieczny sposób, w przypadku problemów z wyświetlaniem strony lub w razie pomyłki nasza strona internetowa wróci do początkowych ustawień w momencie, gdy usuniemy dodane przez nas modyfikacje.

Dla kogo jest CSS?

Dla tych, którzy chcą od zera stworzyć swoją stronę i dostosować jej wygląd, lub dla tych, którzy chcą wprowadzić pewne modyfikacje w sposobie wyświetlania strony, nieprzewidziane na etapie jej tworzenia.

Co zmienisz dzięki CSS?

CSS śmiało możesz wykorzystywać do zmian w wyglądzie swojej strony, takich jak rozmiar, kolor, marginesy czy ukrywanie pewnych elementów.

Jeśli jednak chcesz dodać na stronie nowe elementy, np. treści lub widgety, albo przetłumaczyć napisy z angielskiego na polski – nie dasz rady zrobić tego za pomocą CSS-a.

Tego typu kwestie rozwiązuje się bezpośrednio w kodzie HTML lub – jeśli masz stronę na WordPressie – za pomocą wtyczek (pluginów).

CSS w WordPressie idealnie nadaje się do niewielkich modyfikacji wyglądu, których nie możesz wyklikać w panelu WordPressa.

PYTANIE czytelnika

Patryk: Chciałbym nauczyć się języka CSS nawet na przyszłość. Jeśli chodzi o motyw na mojej stronie, to na szczęście nie ma potrzeby w nim niczego ruszać.

Super, to też dobry plan! W tym e-booku na pewno znajdziesz coś dla siebie. Myślę, że najbardziej zainteresuje Cię kolejny moduł – poznasz w nim składnię języka CSS.

Czy wiesz, że…?

Jeśli chcesz poznać całą specyfikację HTML i CSS, zajrzyj na stronę ►w3schools.com– tam dowiesz się jeszcze więcej na ten temat. Jest to strona z tutorialami dotyczącymi tych języków; działa od 1998 roku!

moduł 2składnia css

PYTANIE

Magdalena: Taki e-book o CSS-ie to świetny pomysł! Poprosiłabym o ogólne wprowadzenie i chociaż podstawy pisania kodu. Kiedyś uczyłam się HTML-a, dziś sama nic nie napiszę, ale wiem, jak i czego szukać.

Magdo, chcesz – to masz! Lecimy z wprowadzeniem i podstawami pisania w CSS-ie! Zaczniemy od metafory, bo kto nam zabroni? W tym module opowiem, jak wygląda składnia CSS.

Dowiesz się co nieco o ogólnej idei oraz przeczytasz kilka słów o języku HTML, następnie poznasz selektory, a na zakończenie opowiem Ci więcej o jednostkach używanych w CSS-ie.

użycie css-a

Wiesz już, do czego wykorzystać CSS, ale teraz pewnie zastanawiasz się, jak zacząć go używać. CSS nie jest trudnym językiem, łatwo się go nauczyć. Jest bardzo intuicyjny.

Pamiętasz naszą metaforę z domem? Aby nadać styl mieszkaniu, najpierw musimy wybrać konkretny element. Niech to będzie znów kanapa.

Pierwsze pytanie brzmi więc: CO chcemy ostylować? Drugie pytanie to: JAK? Teraz koniecznie będą dwa pytania dodatkowe: jaką cechę chcemy ostylować oraz jaką nadać jej wartość? Czyli np. czy zajmiemy się rozmiarem, czy kolorem i jaki to będzie konkretnie rozmiar bądź kolor.

Przykład

CO? kanapa

JAK?

JAKA CECHA? kolor

JAKA WARTOŚĆ? turkus

JAKA CECHA? rozmiar

JAKA WARTOŚĆ? 3-os. 2 m

CO? guzik (przycisk)

JAK?

JAKA CECHA? kolor tła

JAKA WARTOŚĆ? różowy

JAKA CECHA? tekst

JAKA WARTOŚĆ? biały

ITD.

Liczba cech wybranych do zmiany dla danego elementu zależy od nas i od tego, jaki wygląd chcemy nadać kanapie.

Dokładnie tak samo dbamy o styl elementów na stronie internetowej. Najpierw musimy określić, CO chcemy ostylować (np. guzik) oraz JAK, czyli jakie nadać mu cechy i jakie ich wartości. Przykładowo możemy sprawić, że guzik będzie różowy, mały, z dużym marginesem i z tekstem w kolorze białym. To wszystko zdefiniujemy w CSS-ie.

Teraz czas na składnię języka CSS. Wiesz już, jaka jest idea jego działania, pora na notację, czyli zapis naszego przykładu w CSS-ie.

Pytanie „CO?” zastąpimy tak zwanym selektorem, który wskazuje konkretny element do ostylowania lub ich grupę.

Pytanie „JAKA CECHA?” wybieramy z listy zdefiniowanych cech w CSS-ie, natomiast „WARTOŚĆ” podajemy wedle preferencji co do tego, jak ma wyglądać strona WWW. W tym rozdziale dowiesz się, jak poprawnie budować kod CSS, a ściągę ze zdefiniowanymi cechami znajdziesz w kolejnym module.

Jak w takim razie wygląda kod CSS? Spróbujmy przełożyć kanapę na notację języka CSS. To, co opisaliśmy wcześniej, w CSS-ie przedstawilibyśmy znacznie krócej:

kanapa {

color: cyan;

width: 2m;

}

Najpierw podajemy selektor, który znajdujemy w HTML-u; jest to zazwyczaj klasa, identyfikator lub elementy z HTML-a (w kolejnym module dowiesz się, skąd brać selektory). Następnie otwieramy nawias „wąsiasty” (bo przypomina wąsy), inaczej mówiąc – klamrowy „{}”. Potem podajemy listę cech oraz ich wartości. Po każdej cesze dajemy dwukropek (dla przejrzystości można postawić po nim spację), następnie wpisujemy wartości i na zakończenie średnik. Po wymienieniu wszystkich cech dla danego selektora (czyli w naszym przypadku – kanapy) zamykamy nawias wąsiasty. W następnej linii możemy już definiować styl kolejnego elementu.

selektor {

cecha: wartość;

cecha: wartość;

}

Jak widzisz, po nawiasie otwierającym i przed zamykającym stoją entery. Bez nich kod też będzie działał poprawnie, ale wstawianie ich jest dobrą praktyką – dla wygody i przejrzystości.

► Czas na praktykę! Zajrzyj do ćwiczeń i wykonaj zadania!

Jak wygląda HTML?

By lepiej zrozumieć CSS, warto dowiedzieć się więcej o HTML-u, bo te języki są ze sobą ściśle związane. Ale spokojnie – aby dokonywać modyfikacji w CSS-ie, nie musisz znać biegle HTML-a; wystarczą ogólne zasady obowiązujące w tym języku.

HTML jest językiem tak zwanych znaczników. Struktura strony internetowej w HTML-u składa się właśnie z serii tagów (znaczników). Używa się ich do opakowywania treści, aby nadać im konkretne cechy.

Na przykład jeśli chcemy utworzyć na naszej stronie internetowej nagłówek o treści: „Dzień dobry!”, musimy dodać odpowiednie znaczniki przed tym napisem oraz po nim.

Za nagłówek pierwszego rzędu odpowiada znacznik h1. Zatem w HTML-u nasz tekst „Dzień dobry!” będzie wyglądał tak:

<h1>Dzień dobry!</h1>

Składniki takiego elementu składają się z tagu otwierającego <h1>, który pokazuje, gdzie nagłówek ma się zacząć. Następnie wpisujemy tekst nagłówka, czyli nasze „Dzień dobry!”, a na koniec wstawiamy tag zamykający – jest on niemal identyczny jak tag otwierający, ale z „/” przed nazwą tagu. Tag z ukośnikiem wskazuje, gdzie nasz element się kończy.

Lista popularnych elementów w HTML-u

Atrybuty

Dodatkowo elementy w kodzie HTML mogą mieć przypisane tak zwane atrybuty.

Zamieszcza się je w tym samym nawiasie co tag otwierający. Atrybuty zawierają dodatkowe informacje opisujące dany element, ale nie są one widoczne na stronie internetowej. Na przykład jeśli dodajesz link, to przypisując mu atrybut „href”, możesz podać hiperłącze, do którego on kieruje.

Najbardziej popularnym atrybutem jest klasa, która będzie dla nas kluczowa w budowaniu kodu CSS. Dzięki klasie konkretnemu elementowi przypisujemy wyróżnik, który możemy wykorzystać do nadania temu elementowi stylu w CSS-ie.

Omówię działanie klas na przykładzie kanap. Załóżmy, że prowadzę sklep meblowy i jest w nim 20 kanap. Część z nich chciałabym obić tapicerką w kolorze różowym, jedną chcę mieć żółtą, a pozostałe… Jak myślisz? Oczywiście, że będą turkusowe! Dzięki klasom mogę zidentyfikować, które kanapy będą miały jaki kolor. Różowym nadam klasę „piekne”, a turkusowym „ulubione”. Dzięki temu będę je mogła później znacznie łatwiej zidentyfikować. A co z żółtą? O tym za chwilę.

Klasa

Przypuśćmy, że nasz nagłówek ma mieć klasę „header” (czyli: nagłówek).

<h1 class=”header”>Hej!</h1>

Klasa znajduje się wewnątrz tagu otwierającego, zaraz po spacji – bezpośrednio po jego nazwie lub po innym atrybucie, jeśli element jakieś ma.

W przypadku klasy nazwa atrybutu to „class”, po niej następuje znak równości i wartość atrybutu podana w cudzysłowie.

Identyfikator

W HTML-u jest też drugi rodzaj atrybutów, które nadajemy elementom, aby je zidentyfikować – są to identyfikatory. Różnią się od klas tym, że identyfikator o konkretnej nazwie może być tylko jeden w ramach całej podstrony. Przykładem jest poniższy identyfikator o nazwie „title”:

<h1 id=”title” class=”header”>Dzień dobry!</h1>

Pamiętasz jeszcze żółtą kanapę? W naszym sklepie meblowym identyfikator nadałabym kanapie, która ma być żółta; mógłby on mieć nazwę np. „unikalna”. Pamiętaj, że identyfikator może być tylko jeden na całej stronie, a wprowadzamy go nazwą „id”.

W HTML-u można zagnieżdżać elementy. Należy wtedy jednak pamiętać, aby odpowiednio otwierać i zamykać tagi. Wewnętrzny element musi być zamknięty, żeby móc zamknąć zewnętrzny. Jeśli chciałabym, aby nasz nagłówek był linkiem, zrobiłabym to w ten sposób:

<h1><a href=”http://link.pl”>Dzień dobry!</a></h1>

Najpierw otwieram tag nagłówka, następnie otwieram tag linku, podaję treść nagłówka, który pojawi się na stronie jako link, następnie zamykam link, a na koniec zamykam tag nagłówka.

Może kolejna metafora dla wyjaśnienia? Przypuśćmy, że na naszej kanapie leży wielka poduszka. Jeśli chcielibyśmy zapisać kanapę z poduszką w HTML-u, to patrząc od lewej: najpierw zobaczyliśmy początek kanapy, czyli tag otwierający kanapy, potem poduszkę (z tagiem otwierającym poduszki i tagiem zamykającym poduszki), a na koniec tag zamykający kanapy. Czyli:

<kanapa><poduszka></poduszka></kanapa>

Czy wiesz, że…?

Istnieje możliwość dodania stylu CSS bezpośrednio w kodzie HTML – właśnie w formie atrybutu. Jak to zrobić? Jeśli chcemy nadać np. kolor niebieski tekstowi w paragrafie, to dodajemy w tagu otwierającym atrybut „style” i jako wartość w cudzysłowie wpisujemy „color: blue;”.

Nie poleca się jednak nadużywania tej opcji, lepszą praktyką jest odseparowanie kodu CSS od kodu HTML, np. w osobnym pliku. W module dotyczącym WordPressa dowiesz się, gdzie najlepiej umieszczać CSS.

<p style=”color: blue;“>To jest paragraf</p>

Znasz już podstawy CSS-a i HTML-a. Wiesz, co to jest klasa i identyfikator. To dobry moment, aby przetestować zdobytą wiedzę w praktyce i wykorzystać identyfikatory oraz klasy do uzupełniania kodu CSS i nadawania stylu tym elementom. No to co? Zaczynamy!

► Czas na praktykę! Zajrzyj do ćwiczeń i wykonaj zadania!

selektory

Najważniejsze założenia notacji CSS już znasz, teraz nasuwa się pytanie, w jaki sposób na stronie internetowej poprawnie znaleźć nazwę elementu, który chcemy zmienić w CSS-ie.

Robimy to dokładnie tak, jak przed chwilą wybieraliśmy styl dla kanapy.

Z pomocą przychodzą nam selektory. W poprzednim rozdziale naszymi selektorami były kanapa oraz guzik. Ale jak taki selektor wybrać w CSS-ie?

Mamy kilka rodzajów selektorów.Najważniejsze z nich to:

Elementy z kodu HTML i klasy mogą pojawić się wielokrotnie na danej podstronie, więc jeśli wybierzesz taki selektor i nadasz mu styl, zmienisz od razu wszystkie pasujące do wzorca fragmenty strony.

Jeśli np. stworzysz styl dla elementu „button” (guzika), to wszystkie guziki na Twojej stronie internetowej będą miały taki styl.

Możesz zawęzić wybór i nadać styl tylko jednemu konkretnemu elementowi na stronie.

Przykład. W kodzie HTML mamy element „paragraf” i chcemy zwiększyć jego rozmiar.

<p class=”paragraf” id=”lead”>Tekst</p>

W kodzie CSS możemy wykorzystać dany selektor:

p {

font-size: 20px;

}

W takiej notacji najpierw podajemy nazwę elementu w HTML-u, a następnie klasę lub identyfikator. Pamiętajmy, że przed klasą zawsze stawiamy kropkę, a przed identyfikatorem wpisujemy #.

Można też podać samą klasę lub identyfikator bez nazwy elementu. Wtedy selektor będzie wyglądał tak: .paragraf lub #lead.

Jeśli ten zapis byłby za mało szczegółowy, możesz podać i klasę, i identyfikator, czyli p.paragraf#lead.

Co więcej, istnieje możliwość wypisania selektorów z zachowaniem hierarchii elementów w kodzie HTML.

p.paragraf {

font-size: 20px;

}

p#lead {

font-size: 20px;

}

p.paragraf#lead {

font-size: 20px;

}

Wtedy klasy lub nazwy elementów rozdzielamy spacją.

W kodzie HTML element <a> oznacza klikalny link.

Załóżmy, że chcemy dodać styl do takiego linku, aby był on niebieski. Jeśli chcielibyśmy sprawić, że wszystkie linki na stronie będą miały kolor niebieski, to kody HTML i CSS wyglądałyby tak:

HTML

<p class=”paragraf” id=”lead”> Tekst<a href=”http://link.pl” class=”link”> Link</a></p>

CSS

a {

color: blue;

}

Jeśli natomiast chcielibyśmy, aby tylko linki, które będą w paragrafach tak wyglądały, to kod byłby taki:

p a {

color: blue;

}

Jeśli kolor niebieski miałyby mieć tylko linki w paragrafach o klasie .paragraf, wtedy zapiszemy:

p.paragraf a {

color: blue;

}

Natomiast w przypadku linków, które miałyby mieć kolor niebieski w elementach o klasie .paragraf, ale niekoniecznie typu paragraf:

.paragraf a {

color: blue;

}

A jeśli linki miałyby być niebieskie tylko w jednym konkretnym paragrafie o identyfikatorze #lead, wtedy:

p#lead a {

color: blue;

}

Jeśli chcesz, aby niebieskie były tylko linki o klasie .link, które są wewnątrz paragrafów o klasie .paragraf:

.paragraf .link {

color: blue;

}

Jak za pomocą jednego stylu nadać wartości wielu elementom? Podaj selektory po przecinku, a następnie podaj wartości i cechy.

h1, button {

color: white;

}

!imPoRtant

Co zrobić, jeśli dodany styl nie działa i nie wyświetla się na stronie? Jest duża szansa, że dzieje się tak, ponieważ selektory są za mało szczegółowe – należy je więc w miarę możliwości uszczegółowić.

Jak to zrobić? Kod CSS jest interpretowany w kolejności od początku do końca. Dlatego jeśli najpierw zdefiniujemy styl guzików na stronie jako różowy, a poniżej jako niebieski, zostanie zastosowana ta druga reguła o takim samym selektorze i guziki będą niebieskie.

Co zrobić w sytuacji, jeśli chcemy zdefiniować styl, który nie będzie nadpisywany przez inne reguły, a np. nie możemy go wyedytować (jest zaszyty w kodzie naszego motywu, a my robimy modyfikacje w panelu WP)? Są na to dwa sposoby. Możemy zdefiniować bardziej szczegółową regułę niżej lub dodać deklarację „!important”. Już tłumaczę, o co chodzi. Zacznijmy od reguły szczegółowej.

Poniżej widzisz kod do guzika o klasie .button, który znajduje się wewnątrz kontenera o klasie .kontener typu div.

<div class=”kontener”><a class=”button” href=”http://link.pl”>Kliknij tutaj</a><div>

Teraz zobacz dwa style CSS, dodane jeden po drugim.

.button {

background-color: pink;

}

.button {

background-color: blue;

}

Efekt: guzik jest niebieski.

Chcesz mieć różowy guzik? Wpisz:

div.kontener .button {

background-color: pink;

}

.button {

background-color: blue;

}

Guzik jest różowy, bo pierwsza reguła jest bardziej szczegółowa. To trochę tak, jakbyśmy mieli w mieszkaniu dwie niebieskie kanapy i chcieli, aby jedna z nich była różowa.

Dzięki uszczegółowieniu jest tak, jakbyśmy mówili, że wszystkie kanapy mają być niebieskie (.kanapa), ale ta, która jest w salonie, ma być różowa (.salon .kanapa) – dzięki bardziej szczegółowemu selektorowi osiągniemy zamierzony efekt.

A co, jeśli nie możesz już bardziej uszczegółowić reguły lub styl nadal nie jest zastosowany? Wtedy z pomocą przychodzi deklaracja „!important”.

div.kontener .button {

background-color: yellow !important;

}

div.kontener .button {

background-color: blue;

}

Obydwa selektory są tak samo szczegółowe, a my chcemy mieć żółty guzik. Dodajemy wtedy do koloru żółtego deklarację „!important”.

Jak to zrobić?

Po wartości naszej cechy, czyli „yellow”, stawiamy spację, następnie wykrzyknik i słowo „important”, dopiero po nim dajemy średnik. Ta deklaracja sprawia, że oznaczona tak reguła będzie wykonana priorytetowo i nadpisze pozostałe, mimo że kolejność sugerowałaby co innego.

Jeśli element ma dodany kod CSS wewnątrz tagu otwierającego w atrybucie CSS, co pokazywałam na końcu poprzedniego rozdziału – będzie on miał pierwszeństwo. Dlatego właśnie nie poleca się tego rozwiązania, bo potem trudno jest nadpisać własne modyfikacje. Tylko deklaracja „!important” może nadpisać CSS dodany wewnątrz tagu.

► Czas na praktykę! Zajrzyj do ćwiczeń i wykonaj zadania!

mogą Cię zainteResować!

książka Bądź online

Stwórz stronę WWW lub bloga, aby wyrazić siebie, zbudować pozycję eksperta oraz pozyskać klientów. Zaistniej w sieci! Bądź online!

e-book seo

Daj się znaleźć w sieci! Wypozycjonuj się i zyskaj nowych odbiorców! Spraw, aby Twoja strona była widoczna w wyszukiwarkach!

e-book google analytics

Poznaj lepiej swoich odbiorców oraz dopasuj do nich swoją stronę internetową! Spraw, by Twoja strona była skuteczna!

Wszystkie produkty znajdziesz tutaj►olagosciniak.pl/sklep