polecenia - Kurs HTML i CSS
Czcionki CSS / Proporcje czcionki {font-size-adjust}...Powodem są właśnie znacznie różniące się proporcje. Aby zabezpieczyć się na taki wypadek, należy określić proporcje czcionki, za pomocą powyższego polecenia. Dzięki temu, niezależnie od rodzaju czcionki, tekst będzie tak samo czytelny, ponieważ przeglądarka automatycznie dobierze odpowiednią jej wielkość - zgodnie ze wzorem: w' = w * (p / p') gdzie: w - wysokość czcionki określona w poleceniu p - proporcje określone w poleceniu w' - obliczona wysokość p' - proporcje dostępnej czcionki...
- Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>
...</head> gdzie w sposób wyróżniony zaznaczono elementy składowe wewnętrznego arkusza stylów. Natomiast w miejsce kropek (...) można wpisać dalsze polecenia. Selektorem może być praktycznie dowolny znacznik, np. p (akapit), h1 (tytuł), td (komórka tabeli) i inne. To właśnie elementom, które znajdują się w kodzie źródłowym, pomiędzy tymi znacznikami, nadajemy atrybuty formatowania opisane w arkuszu. Jako "cecha" (w deklaracji stylu - powyżej) należy wpisać o jakie konkretnie atrybuty...
- Czcionki CSS / Wariant wielkości liter czcionki {font-variant-caps}
...pochylenie czy pogrubienie z jakichś względów nie jest odpowiednie. Jeśli zależy Ci na obsłudze również starszych przeglądarek, zamiast tego polecenia użyj: "font-variant: small-caps". Niestety tylko ten jeden wariant (zwykłe kapitaliki) ma szerokie wsparcie i tylko przy użyciu własności font-wariant, a nie font-variant-caps. Przykład {font-variant-caps} Wariant wielkości liter normal Wariant wielkości liter small-caps Wariant wielkości liter all-small-caps Wariant wielkości...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...<link rel="stylesheet" href="style.css"> (...) </head> gdzie "style.css" jest zewnętrznym arkuszem stylów. Natomiast znaki (...) oznaczają inne polecenia, które zwykle pojawiają się w nagłówku dokumentu, np. deklaracja strony kodowej. Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie. Dzięki temu, za pomocą tego jednego arkusza...
- Czcionki CSS / Rodzaj czcionki {font-family}
...apostrofu (np. 'Times New Roman', 'Courier New'). Polecenie pozwala wybrać konkretny krój czcionki. UWAGA! Należy być ostrożnym z używaniem tego polecenia, ponieważ jeśli użytkownik oglądający Twoją stronę, nie będzie posiadał podanej czcionki w swoim systemie operacyjnym, tekst zostanie napisany czcionką domyślną (może to być 'Times New Roman', chociaż to też nie jest pewne). Poza tym nie każda czcionka potrafi zapisać poprawnie polskie znaki (w standardzie UTF). Koniecznie sprawdź...
- Tło CSS / Zaczepienie tła obrazkowego {background-attachment}
...że tło będzie przez cały czas nieruchome, nawet jeśli będziemy przewijali zawartość strony. Wtedy w wewnętrznym arkuszu stylów strony należy użyć polecenia: body { background-image: url(obrazek.jpg); background-attachment: fixed } Polecenie to ma sens, tylko jeśli określimy równocześnie tło obrazkowe. Różnica pomiędzy wartościami "fixed" a "local" jest taka, że w przypadku drugiej z ich tło pozostaje nieruchome tylko jeśli do przewijania używamy suwaków elementu. Natomiast w przypadku...
- Tło CSS / Usunięcie tła {background: none, background-color: transparent}
...auto, transparent itp. Polecenie background: none usuwa wszystkie własności dotyczące tła. Można również usunąć tylko wybrane, stosując odpowiednie polecenia dla każdej własności, którą chcemy usunąć (np. background-color: transparent; background-image: none itd.). Pozwala to np. usunąć tło obrazkowe, lecz pozostawić kolor tła. Działają one oczywiście nie tylko z zewnętrznym arkuszem, ale również z wewnętrznym - zgodnie z zasadami kaskadowości. Przykład {background-color: transparent} Gdyby...
- Tło CSS / Gradient promienisty {background: radial-gradient repeating-radial-gradient}
...linia gradientu biegnie ze środka na zewnątrz: Większość zmiennych w deklaracji gradientu promienistego jest opcjonalna. Prawdę mówiąc składnia polecenia jest dość złożona: radial-gradient( [ [ circle || <length> ] [ at <position> ]? , | [ ellipse || [ <length> | <percentage> ]{2} ] [ at <position> ]? , | [ [ circle | ellipse ] || [ closest-corner...
- Pozycjonowanie CSS / Przyleganie {clear}
selektor { clear: sposób } Polecenie można zastosować tylko do elementów wyświetlanych w bloku (block). Jako "sposób" należy podać: left - lewy bok elementu nie przylega do poprzedzającego elementu pływającego right - prawy bok nie przylega both - żaden bok nie przylega none - brak ograniczeń Polecenie pozwala ustalić pozycję elementów sąsiadujących względem elementu pływającego (np. obrazka). Określa które krawędzie elementu następującego po elemencie pływającym nie będą do niego...
- Pozycjonowanie CSS / Nakładanie {z-index}
...1" src="punkt.gif" alt="..."> Otrzymamy: Jak widać w drugim przypadku kolejność nakładania zmieniła się (teraz obrazek zakrywa punkt), mimo że polecenia zostały wpisane w takiej samej kolejności. Kontekst stosu Porządek nakładania elementów nazywamy stosem. Porządek ten nie jest taki sam dla całego dokumentu, lecz może istnieć kilka odrębnych kontekstów stosu (ang. stacking context). Każdy element pozycjonowany (również relatywnie), posiadający wartość z-index inną niż auto, tworzy...