Marcin Krzemiński
krzeminski.net
marcin@krzeminski.net
Dla osób zupełnie początkujących, który nie miały styczności z tworzeniem stron, pisaniem kodu HTML i CSS.
<style>
body {
background-color: red;
color: blue;
font-weight: bold;
}
</style>
<header style="color: red;">
<h1>
CSS Dla Blogerów
</h1>
</header>
.jpg)
Zawartość
< oraz
>.
/.
CSS dla Blogerów
class="align-left".
Istnieją atrybuty, które można zapisać bez wartości, tylko sam klucz, np. disabled.
Używany do wyświetlania akapitu, bloku treści.
Warsztaty CSS dla Blogerów na WordCamp Łódź.
Używane do separacji zwartości treści i innych elementów na stronie.
Mamy 6 poziomów, h1 najważniejszy, h6 najmniej ważny.
Nagłówek stopnia 1
Nagłówek stopnia 2
Nagłówek stopnia 3
...
wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
Używany do zdefiniowania linku do wewnętrznego lub zewnętrznego źródła (strony, dokumentu, pliku, adresu email, telefonu, itd).
wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a
Nasza oferta
Wyszukiwarka Google
Hiperłącze do sekcji na tej samej stronie
Sekcja na stronie do której odnosi powyższe hiperłącze
Używany do wyświetlenia obrazka. Atrybut alt nie jest wymagany, ale jest
wskazany, zwłaszcza jeśli obrazek niesie za sobą jakąś wartość informację, a nie tylko wizualną. <img> jest jednym z tych znaczników, które nie mają tagu zamykające
<img src="images/logo.png" alt="">
<img src="https://domena.pl/images/wykres.png" alt="Wykres przychodu firmy za 2019 rok">
Używany do otoczenia innych elementów w celu zgrupowania ich. Element ten należy stosować w momencie gdy nie może go zastąpić żaden inny, bardziej pasujący element (np. article lub section).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, explicabo?
<img src="images/soft-kitty.jpg" alt="Soft Kitty, Warm Kitty">
Używany do otoczenia treści, która jest ze sobą powiązana i może być użyty samodzielnie poza całym dokumentem nie tracąc przy tym sensu.
CSS dla Blogerów
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, explicabo?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam amet dolore ducimus fugiat
id inventore, perferendis porro provident reprehenderit sequi?
<img src="images/soft-kitty.jpg" alt="Soft Kitty"&;gt;
Używany do otoczenia zawartości, której nie można przedstawić za pomocą bardziej szczegółowego
elementu jak chociażby article
<section>
CSS dla Blogerów
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, explicabo?
</section>
Używany do wyświetlania listy elementów od najważniejszego do najmniej ważnego
-
pierwszy punkt - najważniejszy
-
drugi punkt - mniej ważny
-
trzeci punkt - najmniej ważny
Używany do wyświetlania nieuporządkowane listy elementów, których kolejność na liście nie ma znaczenia
-
Pierwszy element na liście
-
Kolejny element na liście, ten jest nieco dłuższy
-
A ten zawiera link do wpisu
Używany do wyświetlania elementu na liście
-
pierwszy punkt - najważniejszy
-
drugi punkt - mniej ważny
-
trzeci punkt - najmniej ważny
To tylko niewielka część, z tego co oferuje nam HTML. Poniżej odnośniki do pełnej listy w dwóch różnych formach.
table - definiuje tabelę → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/table
tr (table row) - definiuje rząd tabeli → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/tr
td (table cell) - definiuje komórkę tabeli → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/td
<table>
<tr>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
</tr>
<tr>
<td>Lorem ipsum.</td>
<td>Lorem ipsum.</td>
</tr>
</table>
form - definiuje formularz → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/form
input - definiuje pole do wprowadzania lub wyboru treści → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/input
select - definiuje menu do wyboru elementów → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/select
textarea - definiuje kilkuwierszowe pole do wprowadzania treści
→ wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/textarea
button - definiuje przycisk → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/button
label - definiuje opis pola formularza → wiki.developer.mozilla.org/pl/docs/Web/HTML/Element/label
CSS tak jak HTML nie jest językiem programowania.
Jest używany do definiowania wyglądu elementów a także układu na stronie.
Reguła CSS mówi przeglądarce jak dany element ma wyglądać, przykładowo: Chcę aby każdy nagłówek h1 miał kolor czerwony.
h1 {
color: red;
}
h1 {
color: red;
}
.error {
color: red;
}
#error {
color: red;
}
.box::after { /* pseudo-element */
color: red;
}
a:hover { /* pseudo-klasa */
color: red;
}
#error div .heading {
color: red;
}
Kolejność reguł w pliku / plikach CSS ma znaczenie. Ustala, który selektor jest najważniejszy.
Style zdefiniowane na rodzicu mają wpływ na to jak wyglądają dzieci.
Nie wszystkie właściwości są dziedziczone.
Pozwala przeglądarce podjąć decyzję jaki styl przypisać elementowi, jeśli kilka reguła pasuje do kilku elementów.
Specyficzność ma wyższy priorytet niż kaskada, dzięki czemu nie musimy przenosić reguł w pliku. Wystarczy, że nadamy selektorowi większą wagę.
Na podstawowym poziomie można posłużyć się systemem liczbowym.
/* 0 0 0 1 - elementy oraz pseudoelementy */
h1, ::after {}
/* 0 0 1 0 - klasy, pseudoklasy i atrybuty */
.warning, :hover, [title] {}
/* 0 1 0 0 - IDki */
#main-section {}
/* 1 0 0 0 - inline */
Przy pomocy słowa kluczowego !important możemy nadpisać właściwości bez tworzenie
mocniejszego selektora. Używanie !important to na ogół zła praktyka, jednak są sytuacje kiedy się przydaje.
Każdy element na stronie jest w jakim sensie prostokątem. Niektóre z nich przenoszą elementy poniżej do nowej lini (elementy blokowe) a inne nie (elementy liniowe)
np. div, h1, p, section, article
np. a, span, em, strong
Domyślnie takie właściwości jak wypełnienie czy czy margines oraz obramowanie wpływają na zwiększenie
rozmiaru elementu, dlatego aby ułatwić sobie życie warto korzystać z właściwości box-sizing:
border-box; na głównym elemencie.
Jednostek w CSS używany to ustawienia rozmiaru elementów, wielkości fontów, obramowania, pozycji i wielu innych właściwości.
px - oznacza rozmiar absolutny, niezależny od innych właściwości
% - rozmiar relatywny do rodzica - font-size / width / height
em - rozmiar relatywny względem wielkości fonta w bezpośrednim rodzicu rodzica
rem - rozmiar relatywny względem wielkości fonta głównego węzła
/ elementu (rem = root em)
Wiele właściwości w CSS można zapisać przy pomocy zapisu pełnego (dosłownego) lub zapisu skrócone.
.box {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
/* zgodnie z ruchem wskazówek zegara: top, right, bottom, left */
.box {
padding: 10px;
}
/* top, bottom: 10px, right,left: 20px */
.box {
padding: 10px 20px;
}
Jaki wybrać? To zależy - od konkretnej sytuacji a także preferencji kodera.
Kolory w CSS można zapisywać na wiele różnych sposobów.
red, blue
#ff0000
rgb(255, 0 , 0) lub rgb(100%,
0%, 0%)
rgba(255, 0, 0,
0.5) czerwony, 50% przezroczystości
Wybrane właściwości
color - kolor
font-family - rodzina fontów
font-size - rozmiar
font-weight - grubość
font-style - styl
line-height - wysokość lini / wiersza
font - zapis skrócony
letter spacing - odstęp między literami
text-align - wyrównanie tekstu
text-decoration - dekoracja tekstu
text-transform - transformacja tekstu
Wybrane właściwości
background-color - kolor
background-image - obrazek / gradient
background-size - rozmiar tła
background-position - pozycja
background-repeat - powielanie tła
background - zapis skrócony
box-shadow - cień
Wybrane właściwości
border-top - górne obramowanie
border-right - prawe obramowanie
border-bottom - dolne obramowanie
border-left - lewe obramowanie
border-style - styl obramowania
border-width - szerokość obramowania
border-color - kolor obramowania
border - zapis skrócony
border-radius - zaokrąglone rogi, zapis skrócony
Wybrane właściwości
margin - margines / zapis skrócony
padding - dopełnienie / zapis skrócony
Wybrane właściwości
width - szerokość
height - wysokość
min-width - minimalna szerokość
min-height - minimalna wysokość
max-width - maksymalna szerokość
max-height - maksymalna wysokość
Wybrane właściwości
display - wyświetl
visibility - widoczność
opacity - przezroczystość
Wybrane właściwości
:hover - po najechaniu kursorem na element
Z RWD ściśle związany jest takie pojęcie jak Media Queries.
Skupiamy się na małych ekranach i dostosowujemy jak rozmiar ekranu rośnie
Skupiamy się na dużych ekranach i dostosowujemy jak rozmiar ekranu maleje
Adres logowania: wordpress.seohost.com.pl/CYFRA/admin
Pierwsze 3 osoby otrzymają konto hostingowe w SeoHost.pl na rok, a także e-booka Oli Gościniak "CSS w Praktyce" aby dalej szlifować swoją wiedzę z CSSa.