width - Kurs HTML i CSS
Selektory pseudoklas CSS / Łączenie selektorów...a.przyklad_selektory4:hover:after { content: "Rollover"; position: absolute; color: #000; background-color: #eee; font-size: 10px; border-width: 1px 2px 2px 1px; border-style: solid; border-color: #888; padding: 1px 5px } Jeśli wskażesz ten odsyłacz myszką, powinien pojawić się zaraz za nim nowy element z napisem "Rollover". A oto bardziej zaawansowany przykład: div.przyklad_selektory5 > ul:first-child[dir="ltr"]:lang(pl) + p[title]:first-letter { color: red; font-weight: bold...
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...szczególnie użyteczne, gdy chcesz wyśrodkować elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto; background-color: lightgray">Treść</div> wyśrodkuje poziomo element <div> o szerokości 300 pikseli w jego rodzicu.
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...jednocześnie, które mogą dotyczyć różnych własności. Dzięki temu możemy uniknąć pisania długich deklaracji, np. zamiast wpisywać: border-width: medium; border-style: solid; border-color: blue wystarczy podać: border: medium solid blue a otrzymamy ten sam efekt. Przy tworzeniu obramowania możesz również skorzystać ze specjalnego generatora zamieszczonego tutaj. ✅ Rozpocznij konfigurację obramowania Przykład {border} border-top: thick double green border: medium solid blue...
- Jednostki CSS / Wyrażenia matematyczne
...i czasu: calc(10px + 1s). Procenty są traktowane jako wartości typu określonego w opisie danej cechy CSS. Dlatego poprawny będzie np. taki styl: "width: calc(50% + 10px)". Mnożenie odbywa się zawsze z udziałem liczby - np.: calc(5 * 10px) albo calc(10px * 5) Dzielimy zawsze przez liczbę - np.: calc(100vw / 40) Oczywiście w pojedynczym wyrażeniu matematycznym można wstawić więcej niż tylko dwie wartości. Po obu stronach operatorów działań dodawania i odejmowania obowiązkowo muszą...
- Tryb Quirks / X-UA-Compatible
...border-spacing, caption-side, content, counter-increment, counter-reset, empty-cells, orphans, outline, outline-color, outline-style, outline-width, page-break-inside, quotes, widows Źródło: CSS Improvements in Internet Explorer 8 Inne przydatne artykuły: CSS Compatibility and Internet Explorer
- Komendy CSS3 / Układ elastyczny CSS
...dzieci kontenera elastycznego Dziedziczenie nie Procenty zobacz cechy indywidualne flex-basis Baza układu elastycznego Wartość content | <'width'> Inicjalizacja auto Zastosowanie dzieci kontenera elastycznego Dziedziczenie nie Procenty odnosi się do wewnętrznego rozmiaru kontenera elastycznego flex-direction Kierunek przepływu układu elastycznego Wartość row | row-reverse | column | column-reverse Inicjalizacja row Zastosowanie kontener elastyczny Dziedziczenie nie...
- Komendy CSS3 / Tekst CSS
...tekst Dziedziczenie tak Procenty nie text-transform Transformacja tekstu Wartość none | [capitalize | uppercase | lowercase ] || full-width || full-size-kana Inicjalizacja none Zastosowanie tekst Dziedziczenie tak Procenty nie white-space Białe znaki Wartość normal | pre | nowrap | pre-wrap | break-spaces | pre-line Inicjalizacja normal Zastosowanie tekst Dziedziczenie tak Procenty nie word-break Reguły przełamywania dla liter Wartość normal | keep-all...
Galeria zdjęć HTML / Klasyczna galeria zdjęć...grafik muszą być pomniejszone fizycznie, tzn. nie mogą to być oryginalne duże obrazki ze zmniejszonymi rozmiarami wyświetlania za pomocą atrybutów width="..." oraz height="...". Tylko wstawienie naprawdę pomniejszonych obrazków uchroni od niepotrzebnego wczytywania dużych plików. Zmniejszenia wymiarów obrazka można dokonać praktycznie w każdym programie graficznym. Najczęściej ustala się takie same rozmiary dla wszystkich miniatur, ponieważ ułatwia to utrzymanie estetyki strony. Obrazki w...