#43. Komponent – tabela
Tworzenie tabeli Przedstawienie niektórych danych wymaga użycia tabeli. Z pozoru łatwy komponent, ale potrafią niektórym narobić problemów z racji specyficznych zasad obsługi w CSS. Nie bez powodu omawiam tabele w tym rozdziale. Bootstrap jest w stanie nam pomóc ze swoimi rozwiązaniami dotyczącymi tabel. W materiale wcześniejszym, dotyczącym podstaw html, omawiałem strukturę oraz budowę tabel. W
Czytaj więcej
#42. Bootstrap – krótkie wyjaśnienie
Bootstrap – framework Bootstrap to popularny framework w internecie. Posiada on zestaw przydatnych narzędzi wspomagających tworzenie stron internetowych. Bazuje głównie na gotowych rozwiązaniach HTML i CSS. Może być stosowany między innymi do stylizacji takich elementów jak teksty, formularze, przyciski , nawigacje, wykresy i wiele innych elementów które są niezbędne na naszych stronach. Do tej pory
Czytaj więcej
#41. Budowa strony internetowej
Struktura strony HTML Nadszedł czas na ćwiczenie, podsumowujące kilka poprzednich materiałów. Będzie to prosta strona internetowa. Zaczynajmy‼😉 Uruchom nowy projekt w codesandbox. Stwórz podstawowy szkielet strony www (deklarację). Nie zapomnij dodać linka do pliku style.css. W ciele dokumentu dodaj nawigacje z trzema odnośnikami – O mnie (#about), Oferta (#offer) i Kontakt (#contact). W nawiasie podaje
Czytaj więcej
#40. Selektory atrybutu
Selektor atrybutu [attribute] Selektory atrybutu dają nam bardzo szerokie możliwości. Selektor [attribute], który aplikuje regułę CSS dla elementów posiadających dany atrybut. Selektor ten może współpracować zarówno na obecność konkretnej klasy, id, bądź href, jak i innych atrybutów. Przykładowo, [class=”shoes”] wybierze elementy z klasą shoes. Jednak [class] wybierze wszystkie elementy, które w ogóle mają wyznaczoną klasę. Spójrz
Czytaj więcej
#39. Pseudoselektory
Pseudoselektor ::first-letter Pseudoselektor ::first-letter daje możliwość ostylowania pierwszej litery w wybranym elemencie. Dotychczas do takich zadań potrzebowaliśmy tagów span wokół wybranej litery do której nadawano klasę i style. Powyższy pseudoselektor można stosować w przypadku, gdy prowadzimy stronę z tekstami i np. chcemy wyróżnić pierwszą literę artykułu. Spójrz na poniższy przykład w którym zastosowałem pseudoselektor powiększający
Czytaj więcej
#38. Pseudoklasy
Selektor :first-child oraz :last-child Selektor :first-child pozwala wybrać pierwszego potomka danego elementu. Natomiast selektor :last-child wybiera ostatnie dziecko elementu. Przykładowo, chcemy wybrać pierwszy element p zawarty w div. Możemy specjalnie nadać mu klasę i do niej dodawać właściwości, lub zrobić to bez ingerencji w plik HTM używając selektora :first:child. Potrzebna reguła wyglądałaby następująco: div >
Czytaj więcej
#37. Stany elementów
Stan :hover O tym stanie wspominałem już w materiałach pod kategorią “Zabawa z CSS”. Element HTML może przyjąć pewien stan, dla którego możemy za pomocą odpowiednich pseudoklas, określić jak w danym stanie ma wyglądać. Podczas najeżdżania na dany element HTML kursorem, jest on w stanie :hover. Gdy klikniemy na link, jest on w stanie :active.
Czytaj więcej
#36. Złożone kombinatory
Zagnieżdzony bezpośrednio We wcześniejszych postach przedstawiałem Wam podstawy CSS. Zapoznaliście się z podstawowymi selektorami, bez których praca w CSS byłaby niemożliwa. Teraz w najbliższych materiałach dowiecie się o nich znacznie więcej. Selektor CSS to rodzaj drogowskazu określający, którym elementom chcemy nadać lub zmieniać właściwości. CSS ciągle się rozwija, więc możemy tworzyć coraz bardziej złożone konstrukcje
Czytaj więcej
#35. Galeria z flexboxa
Szkielet HTML W tym materiale stworzymy własną galerię zdjęć opartą na flexboxie, który poznaliśmy wcześniej. Podstawową zaletą będzie dynamiczne dostosowywanie się do rozmiaru okna przeglądarki. Poniższe punkty dotyczą szkieletu strony www więc zaczynamy jak zwykle na spokojnie 😉 Uruchom codesandbox i stwórz nowy projekt. Dodaj następujący tytuł strony “Galeria Flexi”. W ciele dokumentu dodaj nagłówek
Czytaj więcej
#34. Grid na flexie
Słowem wprowadzenia W jednym z wcześniejszych ▶ materiałów pokazywałem jak tworzyć grid – metoda tworzenia układu strony w podziale na kolumny. Trzeba było używać znanych Ci właściwości CSS: width i float. Niestety jest obarczony błędami treści wystających poza kontener. Poniżej zobaczysz przykładowy grid, który stworzyłem. Wspomaga on na zarządzaniu ułożeniem elementów na stronie. Książkowy grid
Czytaj więcej