styl tekstu - Kurs HTML i CSS
Czcionki CSS / Styl czcionki {font-style}selektor { font-style: styl } Selektorem może być dowolny znacznik, w którym można wpisywać tekst, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "styl" należy wpisać: normal - czcionka normalna (podstawowa) italic - czcionka pochylona (jeżeli niedostępna, automatycznie wybierany jest styl oblique) oblique - również czcionka pochylona (podobna jak poprzednio) Polecenie pozwala nadać czcionce określony styl. Może to być: czcionka zwyczajna...
- Dobre praktyki / Przykazania webmastera
Spis treści Wstęp Dobre praktyki HTML Dbaj o poprawność ortograficzną i stylistyczną tekstu Używaj polskich znaków diakrytycznych Rozpoczynaj pracę od stworzenia semantycznego kodu HTML bez żadnej stylizacji Nie używaj elementów ani atrybutów zdeprecjonowanych Unikaj stosowania ramek - zarówno tradycyjnych jak i lokalnych Nie stosuj tabelek do budowania układu strony Nawigacja musi być intuicyjna i wygodna Unikaj używania atrybutu target="..." dla odsyłaczy Nie używaj znaczników img...
Komendy HTML 4.01 / Wykaz atrybutów...src SCRIPT Adres zewnętrznego skryptu standby OBJECT Informacja do pokazania podczas wczytywania start OL Numer początkowy style Wszystkie elementy oprócz BASE, BASEFONT, HEAD, HTML, META, PARAM, SCRIPT, STYLE, TITLE Informacja stylów summary TABLE Streszczenie tabeli dla przeglądarek dźwiękowych tabindex A, AREA, BUTTON, INPUT, OBJECT, SELECT, TEXTAREA Pozycja w kolejności wybierania tabulatorem target (tylko Transitional DTD) A, AREA, BASE, FORM...
- 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...
- Dziedziczenie stylów CSS / Wymuszenie dziedziczenia {...: inherit}
...wybrany element, któremu chcemy zmienić sposób formatowania określony za pomocą cechy - zostaną opisane w kolejnych rozdziałach. Dziedziczenie stylów jest domyślnym zachowaniem w języku CSS. To znaczy nie trzeba nic robić, żeby z niego skorzystać - zostanie ono zastosowane automatycznie. Dopiero kiedy wybranemu elementowi przypiszemy jakiś styl, nie odziedziczy on go po swoich przodkach (czyli znacznikach, wewnątrz których się znajduje). A co jeśli się rozmyślimy i jednak będziemy...
Aktualizacja / System newsów...i już można szybko przenieść się do nowych stron, klikając odpowiednie odsyłacze. Wymagana wiedza: Odsyłacze Wstawianie obrazków Podstawy stylów CSS (m.in. arkusze stylów) Aby wprowadzić system newsów, należy skopiować poniższy kod i zapisać go w pliku z rozszerzeniem *.css - np. news.css: /* Tytuł: */ .news dt { font-size: 14px; /* rozmiar czcionki */ text-align: left; /* wyrównanie tekstu: left, right, center, justify */ padding: 5px; /* margines wewnątrz...
- Komendy CSS3 / Dekoracja tekstu CSS
Źródło: CSS Text Decoration Module Level 3 Spis treści text-decoration text-decoration-color text-decoration-line text-decoration-style text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style text-shadow text-underline-position text-decoration Dekoracja tekstu Wartość <'text-decoration-line'> || <'text-decoration-style'> || <'text-decoration-color'> Inicjalizacja zobacz cechy indywidualne Zastosowanie zobacz cechy indywidualne Dziedziczenie zobacz...
- Wstawianie stylów CSS / Styl lokalny <... style>
<element style="cecha: wartość; cecha2: wartość2...">...</element> Elementem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. To właśnie elementom znajdującym się pomiędzy tymi znacznikami, nadajemy atrybuty formatowania. Jako "cecha" czy inaczej własność bądź właściwość (ang. "property") należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (np. kolor tekstu - color). Opis wszystkich cech znajdziesz w następnych rozdziałach. Tutaj...
- Układ elastyczny CSS / Elastyczność {flex-grow, flex-shrink, flex-basis, flex}
...wypełniły całą dostępną przestrzeń kontenera. Jeżeli chcemy, aby wszystkie elementy zostały rozciągnięte równomiernie, wystarczy każdemu przypisać styl "flex-grow: 1". Możemy też zadecydować, aby np. jeden z nich rozszerzył się dwa razy bardziej niż inne - przypisujemy mu wartość "flex-grow: 2". Istnieje również możliwość ustalenia, aby tylko jeden element wypełnił całą pozostałą wolną przestrzeń w kontenerze. Wtedy tylko jemu nadajemy styl "flex-grow: 1". Ściśnięcie elastyczne...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...klas selektorów mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można...