style html - Kurs HTML i CSS
HTML5 / Nowe atrybuty HTML5...autofocus Wszystkie elementy Automatycznie ustawia zogniskowanie (fokus) na elemencie po załadowaniu strony blocking LINK (rel="stylesheet" lub rel="expect"), SCRIPT, STYLE Czy element może potencjalnie blokować wyświetlanie charset META Deklaracja strony kodowej contenteditable Wszystkie elementy Czy element jest edytowalny crossorigin AUDIO, IMG, LINK, SCRIPT, VIDEO Sposób, w jaki element obsługuje żądania z mechanizmem CORS (ang. Cross-Origin Resource...
- HTML5 / Przestarzałe elementy i atrybuty HTML5
...je obsługiwać. Jednak nie należy ich już używać w tworzonych nowych dokumentach. Przestarzałe elementy Znaczniki formatujące Ich funkcję przejęły style CSS. BASEFONT BIG CENTER FONT STRIKE TT Znaczniki pogarszające dostępność FRAME FRAMESET NOFRAMES Znaczniki rzadko używane Rodziły niejasności co do ich pierwotnego przeznaczenia. Ich funkcje z powodzeniem mogą przejąć inne elementy. ACRONYM - dla oznaczania wszystkich skrótów powinien być używany znacznik ABBR APPLET - w...
Selektory atrybutów CSS / Prosty selektor atrybutu...znacznikowi z poziomu języka HTML (np. atrybut title="..."). Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Polecenie to może zostać wykorzystane dla elementów, którym z poziomu HTML został nadany określony atrybut (przy czym jego wartość nie ma znaczenia). Pozwala nadać konkretne cechy elementom, które posiadają właśnie taki atrybut. Na przykład znacznik może być automatycznie napisany czcionką koloru...
- Obramowanie CSS / Obramowanie obrazkowe {border-image-source}
Spis treści {border-image-source} Ramka obrazkowa w tle Obrazek obramowania {border-image-source} Ramka obrazkowa w tle Możliwości jakie dają style, jeżeli chodzi o efekty obramowania elementów, są bardzo duże. Jednak nie zawsze jest to wystarczające. Czasami mimo wszystko chcielibyśmy urozmaicić stronę, umieszczając na niej estetycznie wyglądające ramki z graficznie wykończonymi krawędziami. W tradycyjnym podejściu zwykle przygotowuje się wtedy trzy elementy obrazkowe: górna krawędź...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...do naszego dokumentu HTML. Wszystko co znajduje się wewnątrz tak wskazanego znacznika - czyli zarówno tekst, jak i inne znaczniki - otrzyma style podane w deklaracji. Przykładowo, aby zmienić kolor tła oraz teksu na całej stronie, możemy się posłużyć selektorem body, ponieważ właśnie wewnątrz znacznika <body>...</body> znajduje się cała zawartość strony. Zatem w arkuszu stylów wystarczy umieścić następujący kod: body { background-color: black; color: white; } Zwróć uwagę, że...
- 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...