style html - Kurs HTML i CSS
Selektory pseudoklas CSS / Pseudoklasy cykliczne :nth-child :nth-last-child :nth-of-type :nth-last-of-type...(to samo co: 2n+1) even elementy parzyste (to samo co: 2n) Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. W celu poprawienia czytelności danych, często spotyka się obszerne tabele, w których kolejne nieparzyste wiersze są pokolorowane w odmienny sposób niż parzyste. Taki rodzaj formatowania można oczywiście uzyskać dodając co drugiemu wierszowi odpowiednią klasę. Gdy jednak wierszy jest sporo, zaczyna...
- Tabele CSS / Rozplanowanie tabeli {table-layout}
...komórka4 komórka5 komórka6 komórka7 komórka8 komórka9 table-layout: fixed; width: 100% komórka1 Sposób na Firefoxa i Operę 9: <div style="overflow: hidden"> Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce___Część_treści_tej_komórki_nie_mieści_się_w_komórce </div> komórka3 komórka4 komórka5 komórka6 komórka7...
- Dobre praktyki / CSS Zorientowane Obiektowo
...CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o: autorze - np. z jego imieniem, nazwiskiem i zdjęciem źródle - nazwa, logo i odnośnik Każdy z tych elementów można...
Tekst HTML / Pozioma linia <hr>...się z dwóch przylegających do siebie kresek o grubości jednego piksela każda. Aby tę wartość podwoić, można posłużyć się następującym kodem: <hr style="border-width: 2px">.
- Selektory atrybutów CSS / Selektor atrybutu o wartości rozpoczynającej się od...
...to określony tekst, którym rozpoczyna się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Podobnie jak w przypadku selektora z łącznikami polecenie to pozwala wybrać element z atrybutem o wartości, która ma na początku wymagany tekst, ale po niej nie musi być już żadnego łącznika. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title^="to"] { color: red...
- Selektory atrybutów CSS / Selektor atrybutu o wartości kończącej się na...
...Koniec" to określony tekst, którym kończy się wartość atrybutu. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title$="akapit"] { color: red } to każdy akapit, któremu został nadany atrybut TITLE z wartością, która kończy się na "akapit", powinien mieć kolor czerwony: To jest akapit, któremu został nadany atrybut title="to jest...
- Selektory atrybutów CSS / Selektor atrybutu zawierającego określony tekst
...się w wartości atrybutu, który może zawierać również spacje. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Działa podobnie jak selektor atrybutu z podanym wyrazem, jednak pozwala dopasować nie tylko pełne wyrazy, ale dowolną ich część (np. kilka sylab) czy nawet kilka wyrazów. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title*="jest aka"] { color: red } to każdy...
- Selektory pseudoklas CSS / Atrybut języka :lang
...należy wpisać nazwę języka, np. pl - polski, en - angielski). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie pozwala nadać określone atrybuty formatowania dla elementów, którym został nadany z poziomu HTML atrybut języka lang="..." [zobacz: Skróty nazw języków]. Różnica pomiędzy selektorem atrybutu [lang|="..."] a pseudoklasą :lang(...) polega na tym, że w pierwszym przypadku element musi mieć...
- Selektory pseudoklas CSS / Pusty element :empty
...Selektorem może być dowolny znacznik [zobacz: Wstawianie stylów]. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Zdarza się, że w dokumencie HTML znajdują się elementy, które nie zawierają żadnej treści, ani dzieci. Możemy mieć z tym do czynienia w przypadku elementów, które z definicji nie posiadają znacznika zamykającego (BR, HR, IMG, INPUT), ale również gdy po prostu nie wstawimy do znacznika żadnej treści...
- Rozmiary CSS / Szerokość {width}
...lub elementu. Jak ustawić szerokość w CSS? Aby ustawić szerokość w CSS, użyj właściwości width i przypisz jej wartość, na przykład: <div style="width: 300px">Ten DIV ma szerokość 300 pikseli.</div>. Możesz również stosować jednostki innych niż piksele, takie jak procenty lub em.