wstawianie stylu - Kurs HTML i CSS
Wykazy CSS / Niestandardowy typ stylu wykazu @counter-styleSpis treści @counter-style Niestandardowy typ stylu wykazu @counter-style System cykliczny @counter-style {system: cyclic} System ustalony @counter-style {system: fixed} System symboliczny @counter-style {system: symbolic} System alfabetyczny @counter-style {system: alphabetic} System numeryczny @counter-style {system: numeric} System addytywny @counter-style {system: additive} Ujemne numery wykazu @counter-style {negative} Przedrostek i przyrostek wykazu @counter-style {prefix...
- Wykazy CSS / Typ stylu wykazu {list-style-type}
Spis treści {list-style-type} Typ stylu wykazu {list-style-type} Znakowy typ stylu wykazu Alfabetyczny typ stylu wykazu Numeryczny typ stylu wykazu Typ stylu wykazu {list-style-type} selektor { list-style-type: typ } Selektorem mogą być znaczniki dotyczące wykazów: ul - wypunktowanie, ol - wykaz numerowany oraz li - pojedynczy punkt wykazu [zobacz: Wstawianie stylów]. Natomiast "typ" odpowiada za wygląd wyróżnika (markera) wykazu. Należy zamiast niego wpisać dowolny z poniżej...
- Selektory specjalne CSS / Klasy selektorów <... class>
...elementów - umieścisz w zewnętrznym arkuszu stylów, tym szybciej przebiegnie późniejsza ewentualna modyfikacja stron! Dobrym pomysłem jest również wstawianie komentarza przed każdą deklaracją klasy w arkuszu (znaki: /* ... */), w którym opisuje się jej przeznaczenie. Po jakimś czasie w Twoim arkuszu stylów może znaleźć się tyle klas, że zapomnisz, do jakich elementów się one odnosiły. Wtedy właśnie bardzo przydatny może się okazać wpisany wcześniej komentarz. Przykład <... class> Jeżeli w...
- Obramowanie CSS / Atrybuty mieszane stylu obramowania {border-style}
...być dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "wartości atrybutów" należy wpisać kolejne wartości stylu obramowania (rozdzielone spacjami), analogicznie jak w przypadku stylu pojedynczego obramowania. Polecenie pozwala ustalić kilka wartości stylu obramowania jednocześnie. Możliwe jest przy tym podanie: jednej wartości - dla wszystkich krawędzi naraz dwóch wartości - osobno dla krawędzi poziomych i pionowych trzech wartości - pierwsza...
- Selektory atrybutów CSS / Selektor atrybutu o określonej wartości
...przykład znacznik może być automatycznie napisany czcionką koloru czerwonego, jeśli ma nadany atrybut title="...", o wartości podanej w deklaracji stylu. Znaczniki z atrybutem title="..." o innej wartości nie będą już czerwone. UWAGA! Polecenie nie interpretuje MSIE 6 (od wersji 7 wszystko jest już w porządku). W języku XHTML wszystkie nazwy atrybutów w selektorach muszą być pisane małymi literami. Przykład Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p[title="To...
- Dobre praktyki / Przykazania webmastera
...pojemnik p em { /* ... */ } Jeśli to ma sens, korzystaj z kontekstu selektorów. Klasa CSS o nazwie informacja może zawierać inne deklaracje stylu, gdy zostanie przypisana do div, a inne gdy do span, ale znaczeniowo przecież oba elementy będą jakimś rodzajem informacji, więc nie ma sensu tworzyć osobnych klas informacja_blok i informacja_tekst: div.informacja { /* informacja_blok */ } span.informacja { /* informacja_tekst */ } Jednak nie używaj tej techniki dla klas, które mają...
- Obramowanie CSS / Atrybuty mieszane obramowania {border}
...mieszane całego obramowania: selektor { border: wartości atrybutów } Jako "wartości atrybutów" należy wpisać kolejne wartości szerokości, stylu (obowiązkowo!) i koloru obramowania (rozddzielone spacjami). [Zobacz także: Wstawianie stylów] Polecenie pozwala podać w jednej komendzie kilka atrybutów obramowania 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...
- Rozmiary CSS / Przepełnienie tekstu {text-overflow}
...w języku CSS nawet jeśli ustalimy szerokość elementu, ale następnie umieścimy w nim szerszy tekst - np. blokując jego zawijanie przy pomocy stylu "white-space: nowrap" albo znajdzie się w nim jakiś wyjątkowo długi wyraz - to taki tekst i tak wyjdzie poza obręb elementu. Oczywiście nie będzie to wyglądało zbyt estetycznie, a czasem może nawet zupełnie popsuć układ całej strony. Ponieważ często nie wiadomo z góry, jak długi może być tekst na stronie - bo powstanie on dopiero później...
- Oprawa graficzna / Zamiennik obrazkowy
...połączeń np. w przypadku telefonii komórkowej, może być sporym obciążeniem finansowym, a już na pewno znacząco wydłuży ładowanie strony. Statyczne wstawianie obrazków, tworzących oprawę graficzną, jest niepoprawne semantycznie. Każdy znacznik IMG obowiązkowo musi posiadać atrybut alt="...", który jest przydatny np. dla osób niewidomych. Jednak w takim przypadku będzie on kompletnie pozbawiony sensu, ponieważ nie ułatwia, tylko utrudnia odbiór treści. Syntezator mowy, używany przez osobę...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...o tej dodatkowej modyfikacji, co sprawi, że strona taka będzie różniła się wyglądem od innych. W wewnętrznym arkuszu wybranej strony lub w stylu inline można umieścić przedstawione powyżej polecenie. Możemy wtedy bez przeszkód dołączyć zewnętrzny arkusz i nie musimy za każdym razem oddzielnie modyfikować takiej strony. Jak widać drugi sposób jest znacznie korzystniejszy. Dodatkowo istnieją sytuacje, gdy pierwsza metoda jest wręcz niemożliwa do zastosowania, np. w przeglądarkach...