color strony - Kurs HTML i CSS
Kolory CSS / Wykaz kolorów systemowych...Active window border Obramowanie aktywnego okna ActiveCaption Active window caption Nagłówek aktywnego okna AppWorkspace Background color of multiple document interface Kolor tła wielodokumentowego interfejsu (MDI) Background Desktop background Tło pulpitu ButtonFace Face color for three-dimensional display elements Powierzchnia czołowa trójwymiarowych elementów ButtonHighlight Dark shadow for three-dimensional display elements (for edges facing away...
- CSS dla zielonych / Tapeta CSS {background-color, background-image, color}
...kafelka tapety, wstawienie go w tle strony jest bardzo proste. Wystarczy w arkuszu stylów dodać następującą regułę stylów: body { background-color: kolor tła; background-image: url(ścieżka dostępu do obrazka); color: kolor tekstu; } W wyróżnionych miejscach należy wpisać odpowiednio: kolor tła Definicja koloru który wyświetli się w tle strony w następujących przypadkach: w miejscach gdzie grafika tapety będzie miała elementy przezroczyste (jest to możliwe np. w formacie GIF) lub...
- CSS dla zielonych / Kolor tła oraz tekstu CSS {background-color, color}
...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 deklaracja stylów, którą ujmuje się w nawiasy klamrowe, składa się tutaj z dwóch linijek. Każda z nich rozpoczyna się od podania tzw. cechy (inaczej własności), po której następuje wartość. Cecha określa, co chcemy zmienić w wyglądzie wybranego elementu, natomiast wartość - w jaki sposób ma się to...
- Menu w CSS / Pionowe menu
...margin: 0; padding: 0; } ul { width: 200px; } ul a:link, ul a:visited { display: block; width: 186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } ul a:hover { border-style: inset; padding: 7px 3px 3px 7px; } I jak Ci się podoba? A to wszystko bez jakiejkolwiek zmiany wcześniej ustalonego kodu HTML! Krótkie wyjaśnienie użytych deklaracji CSS: Na początku wstawiamy znaną już regułę, która usuwa domyślne formatowanie...
- Tło CSS / Kolor tła {background-color}
selektor { background-color: kolor } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "kolor" należy podać definicję koloru. Wpisanie "transparent" ustali tło przezroczyste. Polecenie umożliwia wstawienie tła o określonym kolorze pod danym elementem (tekstem). Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tła strony), można użyć selektora BODY lub HTML. Przykład...
- Dobre praktyki / CSS Zorientowane Obiektowo
...wygląd dla nich określamy wspólnie) odnośnik a W arkuszu 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...
- Tekst CSS / Kolor tekstu {color}
selektor { color: kolor } 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 "kolor" należy podać definicję koloru. Polecenie pozwala ustalić dowolny kolor tekstu. Jeśli definiowane własności mają odnosić się do całej strony (np. kolor tekstu na całej stronie), można użyć selektora BODY lub HTML. Przykład {color} kolor red kolor #66AAFF kolor #69C kolor rgb(255,33,170)...
HTML5 / Napisy do filmów <track>...Opera, Chrome) To jeszcze nie koniec. Można nawet zmienić wygląd napisów przy pomocy stylów CSS. Obsługiwane powinny być następujące własności: color, opacity, visibility, text-decoration, text-outline, text-shadow, background, outline, font, white-space. Aby zmienić stylizację wszystkich napisów, trzeba posłużyć się specjalnym pseudoelementem: ::cue { color: white; background: black; } Aby zmienić wygląd tekstu, który w napisach został objęty znacznikami B, I, U, należy wpisać...
- Wstawianie stylów CSS / Kaskadowość stylów
...do wewnętrznego arkusza Zewnętrzny arkusz stylów Import stylów do zewnętrznego arkusza (Atrybuty prezentacyjne HTML - np. align="...", bgcolor="...", color="...", height="...", width="..." i inne) Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu. Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu. Na szczególną uwagę...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...border, margin, border-radius. Tworzenie stylowych boksów z tekstem. 10 min - Tła i stylizowanie odsyłaczy Właściwości: background-image, color. Stylizacja odsyłaczy tak, aby zmieniały się po najechaniu kursorem (:hover). 5 min - Ćwiczenie praktyczne Strona z sekcją w ramce, linkami z efektem :hover, tłem obrazkowym i klasami CSS. 5 min - Zadanie domowe Rozbudować stronę o co najmniej 3 różne klasy stylów i dodać estetyczną sekcję z tłem i linkami. Lekcja 7 - Publikacja...