Co oznacza * w CSS? - Kurs HTML i CSS
Dziedziczenie stylów / Przywrócenie wartości pierwotnej {...: revert}(CSS 3 - interpretuje Firefox 67, Opera 73, Chrome 84) selektor { cecha: revert } Selektor oznacza wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Każda przeglądarka ma wbudowany domyślny arkusz stylów. Dzięki niemu nawet jeśli nie dołączymy żadnych własnych stylów do dokumentu, to np. tekst zawarty w znaczniku B i tak będzie pogrubiony. To bardzo przydatna funkcja, bo przeglądarka w ten sposób załatwia za nas...
- Układ wielokolumnowy / Wstęp
...z jedną kolumną. Jednak w odróżnieniu od układu standardowego, zawartość szersza od kolumny (np. długi, niełamliwy wyraz) zostanie przycięta. Nie oznacza to raczej jednak, że od dzisiaj wszystkie serwisy internetowe powinny zacząć wszędzie stosować nowy sposób rozplanowanie tekstu. Zwróćmy uwagę, że w papierowych gazetach zwykle nie występują wspomniane już wcześniej elementy kontekstowe, menu, obiekty multimedialne, a reklamy najczęściej są umieszczane na osobnych stronach. Układ...
- Układ wielokolumnowy / Wypełnienie kolumn {column-fill}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 52, Opera 11-12 i 37, Chrome 50) selektor { column-fill: wypełnienie } Jako "wypełnienie" należy podać: balance Kolumny wypełnią całą możliwą szerokość elementu (domyślnie) auto Kolumny wypełnią całą możliwą wysokość elementu (ma sens tylko, jeśli jednocześnie określimy wysokość elementu, który zawiera kolumny) Przeglądarka stara się zawsze zrównoważyć kolumny tekstu w taki sposób, aby możliwie wszystkie (oprócz ostatniej) miały taką...
- Układ elastyczny / Marginesy automatyczne
...a niektóre przy prawej. Przykład {display: flex, margin-left: auto} blok 1 blok 2 blok 3 margin-left: auto Pytania i odpowiedzi Co oznacza "margin: auto"? W kontekście flexbox, "margin: auto" oznacza, że element zostanie wyśrodkowany wzdłuż osi głównej (głównego kierunku) kontenera. Działa to poprzez równomierne rozłożenie dostępnego miejsca po obu stronach elementu, co skutkuje wyśrodkowaniem. Jak ustawić elementy obok siebie CSS? Aby ustawić elementy obok siebie w...
- Układ elastyczny / Wyrównanie wiersza {align-items, align-self}
...należy podać jedną z wartości - analogicznie jak w przypadku wspólnego wyrównania. Oprócz tego można ustawić wartość "auto" (domyślnie), która oznacza przejęcie sposobu wyrównania z kontenera. Wyrównanie indywidualne pozwala ustawić w różny sposób każdy z elementów kontenera elastycznego. Jeżeli jednak wszystkie mają być wyrównane tak samo, korzystniej będzie zrobić to dla nich wspólnie. Pytania i odpowiedzi {align-items} Co robi "align-items"? W kontekście flexbox CSS, właściwość...
- Układ elastyczny / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...flexbox, która określa, jak elementy mają się zmniejszać, gdy brakuje dostępnej przestrzeni w kontenerze. Domyślnie flex-shrink ma wartość 1, co oznacza, że elementy zmniejszą się równomiernie. Jeśli element ma wartość 0 (zero), nie będzie się zmniejszać w przypadku braku miejsca. Co robi "flex-grow"? flex-grow to właściwość CSS używana w kontekście flexbox, która określa, jak elementy mają się rozszerzać, gdy istnieje dodatkowa dostępna przestrzeń w kontenerze. Domyślnie flex-grow...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...zadbać o odpowiedni kontrast pomiędzy tłem a kolorem tekstu, ponieważ w przeciwnym razie treść strony może się stać zupełnie nieczytelna. W praktyce oznacza to, że tapeta nie powinna być zbyt pstrokata ani zbyt jaskrawa, aby nie rozpraszała czytelnika. Warto zauważyć, że można zaprojektować wzór tapety w taki sposób, żeby granice pomiędzy sąsiednimi kafelkami nie były widoczne, tzn. płynnie przechodziły jeden w drugi na kształt fantazyjnego dywanu lub wzorzystej tkaniny. W tym celu wystarczy...
- CSS dla zielonych / Zaczynamy kurs CSS!
Zapewne znasz już podstawy języka HTML - jeśli nie, zapraszam najpierw do lektury rozdziału: HTML dla zielonych. Skoro nadal czytasz, zapewne oznacza to, że potrafisz stworzyć przynajmniej prostą stronę internetową zawierającą tekst, obrazki i odsyłacze. Chociaż treść jest najważniejszym elementem każdej strony WWW, to przecież wygląd też się liczy. I właśnie do tego służy język CSS (Kaskadowe Arkusze Stylów). Zapamiętaj prostą zasadę: treść wraz ze znacznikami wprowadza się na stronę...
- CSS dla zielonych / Kolor odsyłaczy CSS {color} :hover
a { color: kolor; } a:hover { color: podświetlenie; } gdzie "kolor" oznacza definicję koloru, jaką mają przyjąć wszystkie odsyłacze na stronie. Natomiast "podświetlenie" określa definicję koloru, jaką przyjmie odsyłacz po wskazaniu go myszką. Zwróć uwagę, że koloru podświetlenia nie da się podać w inny sposób, niż przy pomocy języka CSS. A jest to bardzo przydatna możliwość. W ten sposób po wskazaniu elementu myszą użytkownik od razu widzi, że jest to element interaktywny, który można...
Wykaz skryptów / Prawa autorskieMożesz Wykorzystywać wszystkie skrypty do budowy serwisu WWW - w tym witryny komercyjnej. Wyrażenie "budowa serwisu WWW" oznacza np. wykorzystanie jednego ze skryptów menu do ulepszenia nawigacji na stronie WWW. Dopasowywać wygląd elementów generowanych przez skrypt, modyfikując kod HTML i CSS. Kod JavaScript można modyfikować tylko w ramach podanych w opisie instalacji. Publikować na stronie WWW kod udostępnionych tutaj skryptów wraz z opisem działania i instalacji - np. jeśli prowadzisz...