style html - Kurs HTML i CSS
Dobre praktyki / Przykazania webmastera...zakładaj, że wszyscy użytkownicy posiadają tak szybkie łącze jak Twoje Sprawdzaj poprawność składni HTML Dobre praktyki CSS Nie używaj atrybutu style="..." Unikaj stosowania deklaracji !important Nie wstawiaj wewnętrznego arkusza stylów, który powtarza się na kilku podstronach Minimalizuj liczbę osobnych plików arkuszy CSS Unikaj importowania arkuszy stylów Wersjonuj pliki *.css i pliki graficzne w nich zawarte Gdzie to tylko możliwe, staraj się skracać zapis w regułach stylów...
HTML dla zielonych / Kolor czcionki HTML <span "color"><span style="color: kolor">Tu wpisz tekst</span> gdzie jako "kolor" można wpisać: black (czarny) white (biały) silver (srebrny) gray (szary) maroon (kasztanowy) red (czerwony) purple (purpurowy) fuchsia (fuksja) green (zielony) lime (limonowy) olive (oliwkowy) yellow (żółty) navy (granatowy) blue (niebieski) teal (zielonomodry) aqua (akwamaryna) Jeśli za mało Ci tych szesnastu kolorów, zajrzyj na stronę pt...
- Wstawianie stylów CSS / Wewnętrzny arkusz stylów <style>
<head> (...) <style> selektor { cecha: wartość; cecha2: wartość2... } selektor2 { cecha: wartość; cecha2: wartość2... } (...) </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...
- HTML dla zielonych / Wielkość czcionki HTML <span "font-size">
<span style="font-size: rozmiar">Tu wpisz tekst</span> gdzie jako "rozmiar" należy wpisać: xx-small Czcionka najmniejsza x-small Czcionka bardzo mała small Czcionka mała medium Czcionka średnia large Czcionka duża x-large Czcionka bardzo duża xx-large Czcionka największa Przykład <span "font-size"> <span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span> Czcionka o rozmiarze xx-small <span style="font-size: x-small">Czcionka o rozmiarze x-small</span> Czcionka o...
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Menu(id, style, otworz, wysun, czasRozwin, czasZwin, czasOtworz, czasZamknij, nieInicjalizuj) { if (typeof czasRozwin == 'undefined' || czasRozwin < 0) czasRozwin = 25; if (typeof czasZwin == 'undefined' || czasZwin < 0) czasZwin = 25; if (typeof czasOtworz == 'undefined' || czasOtworz < 0) czasOtworz = 250; if (typeof czasZamknij == 'undefined...
Dla nauczycieli / Scenariusz lekcji informatyki dla branżowej szkoły I stopnia...podstawy programowej Lekcja 1 - Struktura HTML i pierwsza strona Lekcja 2 - Dodawanie obrazków i linków Lekcja 3 - Formatowanie strony i style CSS Lekcja 4 - Tworzenie strony za pomocą szablonu Lekcja 5 - Elementy programowania: proste skrypty JavaScript Zadanie końcowe / projekt Podsumowanie Wstęp Poniżej znajdziesz scenariusz cyklu lekcji oparty na podstawie programowej dla branżowej szkoły I stopnia z zakresu informatyki oraz materiałach ze strony Kurs HTML i CSS. Lekcje...
- Tekst HTML / Wykaz <ul, ol, li>
...innym kolorem Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu: <ul style="color: red"> <li><span style="color: black">Punkt pierwszy</span></li> <li><span style="color: black">Punkt drugi</span></li> <li><span style="color: black">Punkt trzeci</span></li> </ul> gdzie w miejsce wyróżnionych wyrazów należy wpisać definicje kolorów, przy czym "red" oznacza kolor, jaki mają przyjąć wyrózniki, natomiast "black...
- Skórki
...się być dość skomplikowana, tak naprawdę absolutnie nie ma potrzeby budowania drugiej wersji strony dla każdej kolejnej skórki. Z pomocą przychodzą style CSS, które wręcz idealnie do tego się nadają. Do przygotowania nowej skórki wystarczy po prostu zaprojektować osobny arkusz stylów (plik *.css) i go podmienić za pomocą specjalnego skryptu. Aby możliwa była jak najbardziej efektowna zmiana wyglądu, konieczne jest, aby serwis został zaprojektowany zgodnie z zasadą rozdzielenie struktury i...
- Wstawianie stylów CSS / Kaskadowość stylów
...Czy nie powstaną konflikty? A może komputer się "zawiesi"? Nic z tych rzeczy! A to właśnie ze względu na kaskadowość. To od niej wzięły swoją nazwę style: CSS - (ang. Cascading Style Sheets) Kaskadowe Arkusze Stylów. Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez...
- CSS dla zielonych / Wstawienie arkusza stylów CSS <link "stylesheet">
...<meta charset="utf-8"> <meta name="description" content="Tu wpisz opis zawartości strony"> <title>Tu wpisz tytuł strony</title> <link rel="stylesheet" href="style.css"> </head> <body> Tu wpisuje się treść strony </body> </html> Dzięki znacznikowi <link> do dokumentu zostanie automatycznie dołączony arkusz stylów. W nim właśnie wpisuje się wszystkie polecenia zmieniające wygląd strony. Ważne jest tylko, aby ten plik posiadał rozszerzenie *.css. W powyższym przykładzie jest to plik...