Właściwości CSS

W trakcie ostatnich lekcji dowiedzieliśmy się już naprawdę sporo na temat stylowania strony. Każde zagadnienie omawiane osobno nie pokazuje jednak pełnej możliwości CSS. Dlatego też przychodzi w końcu ten moment, gdy należy połączyć wiedzę, którą już mamy na temat HTML i CSS i zbudować naszą pierwszą stronę internetową 🙂

Jednym z ciekawszych projektów, które możemy teraz zrealizować, może być strona typu Portfolio. Z dużym prawdopodobieństwem mogę stwierdzić, że będzie to jedna z pierwszych stron, którą stworzysz dla siebie w celu zaprezentowania swoich usług oraz być może umieścisz tam linki do innych zrealizowanych projektów. Warto więc przećwiczyć tworzenie tego typu strony już teraz. Na rynku znaleźć można również całkiem sporo zapytań odnośnie do wykonania stron portfolio (nazywanych czasami również “wizytówkami”) dla takich branż jak fryzjerzy, fotografowie, cukiernie itp.

Lekcje, notatki, wideo – to wszystko pozwala nam na to, żeby przyswoić sobie teorię, ale nic nie zastąpi nam wielogodzinnej praktyki i pracy samodzielnej. To właśnie dzięki niej nauczymy się rozwiązywać problemy, wyszukiwać interesujące nas informacje i co najważniejsze – będziemy w stanie pokazać efekty swojej pracy. A jak mówi się już od dawna – jedna linia kodu HTML potrafi wyrazić więcej niż tysiąc słów 🙂

W jednym z kolejnych tematów umieściłem prostą stronę, która została zrealizowana głównie przy zastosowaniu technik zaprezentowanych do tej pory w tym kursie. Może być to dobry sposób na przetestowanie i utrwalenie zdobytej do tego momentu wiedzy. Zamieszczony link do repozytorium GitHub pozwoli również na pobranie zastosowanych tam grafik oraz na podejrzenie kodu w przypadku, gdy utkniemy na jakimś momencie tworzenia strony.

Oczywiście nie należy ograniczać się tylko do tej jednej strony i ćwiczyć, ćwiczyć i jeszcze raz ćwiczyć poprzez realizację kolejnych projektów. Jeżeli posiadasz w głowie wizję swojej idealnej strony to świetnie – w końcu masz wiedzę, aby ją stworzyć. Jeżeli jednak brak Ci inspiracji, to w jednym z tematów znajduje się lista stron, na których znajdziesz gotowe projekty graficzne stron, które będziesz mógł próbować odtworzyć za pomocą HTML i CSS. Na tym etapie nauki pewnie jeszcze wiele z tych stron będzie dla Ciebie trudna do napisania, ale pamiętaj, że wszystko, co teraz zrobisz i wszystkie błędy, które popełnisz na etapie nauki, zaowocują większym doświadczeniem i coraz większą pewnością w tworzeniu profesjonalnych projektów. Staraj się nie kopiować kodu – to zupełnie nic nie daje, a jedynie tworzy złudzenie umiejętności tworzenia stron. Taka nauka nigdzie Cię nie zaprowadzi i wpadniesz do worka “przeciętniaków”, których prace to tak naprawdę jedna strona “sklecona” z dziesiątek innych.

Nie po to kupowałeś ten kurs i teraz poświęcasz swój czas, żeby zostać “przeciętniakiem” 😉 Nauka ➡ praktyka ➡ powtórka ➡ nauka 🔄. Tego schematu powinieneś trzymać się w początkowym okresie nauki tworzenie stron internetowych.

Zanim jednak przejdziemy do projektu, to zebrałem najbardziej popularne i najczęściej używane własności CSS. Na pewno będą przydatne podczas naszego pierwszego (a pewnie i każdego kolejnego 🙂) samodzielnego projektu.

Wielu z tych właściwości używaliśmy w różnych przykład, więc prawdopodobnie znasz już większość z nich 🙂

Właściwość CSS	Wartość właściwości	Opis
background-image	url (np./img/foto1.jpg)	Tło elementu w postaci grafiki.
background-position	top left |top center | top right |center left | center center | center right |bottom left | bottom center | bottom right Wartość liczbowa – np. 30% 50% | 20px 30px	Umiejscowienie grafiki tła w odniesieniu do rozmiaru elementu, np top left oznacza, iż lewy górny róg grafiki trafi do lewego górnego rogu elementu.
background-size	auto | cover | contain	Rozmiar grafiki tła.
background-repeat	repeat | repeat-x | repeat-y | no-repeat	W sytuacji gdy grafika jest kilkukrotnie mniejsza niż rozmiar elementu, to grafika może być dublowana tak, że kilka małych grafik obok siebie utworzy tło dla elementu.
background-color	transparent kolor – np. red	Tło elementu w postaci koloru.
border-width	thin |medium |thick |10px	Szerokość obramowania elementu.
border-style	none |hidden |dotted | dashed |solid |double | groove |ridge |inset |outset	Rodzaj obramowania.
border-color	kolor – np. red	Kolor obramowania.
box-shadow	Wartość “offset-x offset-y rozmycie wielkość kolor” – np. 3px 3px 5px 7px lightgray	Cień rzucany przez element na stronę.
border-radius	Promień – np. 5px	Zaokrąglenie rogów obramowania.
height /width	auto Wartość – np. 20px |50%	Ustawienie wysokości / szerokości elementu.
max-height /min-height max-width /min-width	none Wartość – np. 20px |50%	Ustawienie maksymalnej i minimalnej wysokości / szerokości elementu.
margin	auto Wartość – np. 20px |50%	Odstęp pomiędzy obramowaniem elementu a jego sąsiadami.
padding	auto Wartość – np. 20px |50%	Wewnętrzny odstęp pomiędzy obramowaniem a zawartością elementu.
display	none |inline |block |inline-block |flex |inline-flex |grid |inline-grid |table	Sposób wyświetlania elementu na stronie.
overflow	visible |hidden |scroll |auto |no-display |no-content	Sposób wyświetlania zawartości elementu, gdy ta jest większa niż sam element.
visibility	visible |hidden |collapse	Widoczność elementu.
font-weight	normal |bold |bolder |lighter |100 |200 |300 |400 |500 |600 |700 |800 |900	Szerokość (grubość) czcionki.
font-size	Wartość – np. 20px |50%	Rozmiar czcionki.
font-family	serif |sans-serif Nazwa fontu – np.Arial	Rodzaj czcionki.
letter-spacing	normal Wartość – np. 1px |5%	Odległość między pojedynczymi znakami w tekście.
text-align	start |end |left |right |center |justify	Wyrównanie czcionki.
text-decoration	none |underline |overline |line-thorugh |blink	Możliwość dodania podkreślenia, przekreślenia i linii nad tekstem
text-shadow	none Wartość “offset-x offset-y rozmycie kolor” – np. 3px 3px 5px red	Cień rzucany przez tekst.
text-transform	none |capitalize |uppercase |lowercase	Zamiana małych liter na wielkie i vice versa.
color	inherit Kolor – np. red	Ustawienie koloru (najczęściej) czcionki.
opacity	inherit wartość od 0 do 1 (np. 0.45)	Poziom przezroczystości elementu ( 0 = całkowicie przezroczysty).
list-style-type	none | asterisks |box |check |circle |diamond |disc |hyphen |square |decimal (+ jeszcze sporo więcej)	Sposób wyświetlenia punktora w liście nienumerowanej <ul>
cursor	auto |crosshair |default |pointer |move |text |wait |help	Rodzaj wyświetlanego kursora.
top / left / right / bottom	auto Wartość – np. 20px |50%	Przesunięcie elementu w dowolną stronę. Element ten musi posiadać również właściwość position o wartości relative.
z-index	auto Wartość liczbowa – np. 3 |9999	Umiejscowienie elementu nad innym elementem. Element z wyższym indexem zakrywa ten z niższym.
position	static |relative |absolute |fixed	Pozycja elementu na stronie.

🔗 Dodatkowe materiały:

• 24+ ESSENTIAL CSS Properties Every Web Developer Should Know