style html - Kurs HTML i CSS
Kaskadowe Arkusze Stylów / Cascading Style SheetsSpis treści Kaskadowe Arkusze Stylów Źródła Kaskadowe Arkusze Stylów CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak HTML. CSS daje możliwość globalnego...
HTML dla zielonych / Kolor tła oraz tekstu HTML <body "background-color, color"><body style="background-color: kolor tła; color: kolor tekstu"> Tu jest właściwa treść strony </body> Zamiast wyrazów "kolor tła" oraz "kolor tekstu" należy wpisać definicję koloru odpowiednio: tła strony oraz tekstu na całej stronie. Robi się to tak samo jak w przypadku czcionek. Jeśli chcemy ustalić kolor tła oraz tekstu na całej stronie możemy użyć dodatkowych wartości atrybutu dla znacznika <body>. Wartości te ("background-color: ...; color: ...") nie wpisujemy w miejscu właściwej treści...
- Wykazy CSS / Automatyczna numeracja wykazu {counter-reset, counter-increment}
...od razu zerując go: ol { counter-reset: nazwa_licznika } Usuwamy domyślne numerowanie wykazu, aby nie kolidowało z automatycznym: ol li { list-style-type: none } Następnie dla kolejnych punktów i podpunktów wykazu wyświetlamy aktualną wartość licznika na początku treści, a następnie zwiększamy tą wartość o jeden - dla następnego punktu lub podpunktu: ol li:before { content: counters(nazwa_licznika, ".") ". "; counter-increment: nazwa_licznika } Oto efekt: Punkt pierwszy (1.)...
- HTML dla zielonych / Odsyłacz obrazkowy HTML <a href, img src alt "border">
...w tym celu użyć następującego polecenia: <a href="adres"><img src="Tu podaj względną ścieżkę dostępu do obrazka" alt="Tu podaj tekst alternatywny" style="border: 0"></a> gdzie jako "adres" można podać: względną ścieżkę dostępu do dowolnej podstrony Twojego serwisu (np.: index.html), adres internetowy poprzedzony przez "http://" lub "https://" (np.: http://www.onet.pl), adres poczty elektronicznej poprzedzony przez "mailto:" (np.: mailto:jan_kowalski@example.com). Natomiast zamiast: "Tu...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...atrybutu id="..." nadanego selektorowi z poziomu języka HTML. Natomiast wyrazy "cecha" oraz "wartość" określają atrybuty elementu nadane poprzez style i zostaną opisane w dalszych rozdziałach. Jako identyfikator należy podać dowolny pojedynczy wyraz, który nie może zawierać znaków: spacji, kropki, przecinka, dwukropka, pytajnika, nawiasów, znaku równości, plusa itp. Może natomiast zawierać litery (A-Z, a-z), cyfry (0-9), myślniki ("-") i podkreślniki ("_"). Lepiej nie używać polskich...
- Kaskadowe Arkusze Stylów / Dlaczego warto używać CSS?
Po co w ogóle stosować style CSS? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej, a jeśli i to Cię nie przekona, radzę poszukać sobie bardziej przydatnego zajęcia (np. szydełkowanie z wykorzystaniem techniki haftu ozdobnego 😉). Style stały się już praktycznie podstawowym narzędziem formatującym. Jeśli poważnie myślisz o...
- Media CSS / Wybór medium @media
...włączenie zewnętrznego arkusza stylów): <!doctype html> <html lang="pl"> <head> <title>Odnośnik do medium docelowego</title> <link rel="stylesheet" media="print, handheld" href="arkusz.css"> </head> <body> <p>Ciało dokumentu...</p> </body> </html> Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu STYLE precyzujący włączenie wewnętrznego arkusza stylów): <!doctype html> <html lang="pl"> <head> <title>Arkusz z medium docelowym</title>...
- Menu w CSS / Menu z nagłówkami
...186px; text-decoration: none; background-color: #ccc; color: #000; padding: 5px; border: 2px outset #ccc; } dl a:hover { border-style: inset; padding: 7px 3px 3px 7px; } CSS Czcionki Tekst Tło Marginesy Obramowanie dl, dt, dd { display: block; margin: 0; padding: 0; } dl { width: 200px; padding: 1px 2px; background-color: #9ce; border: 3px double #28e; } dt { padding: 7px 15px; font-weight: bold; font-size: larger...
- HTML5 / Filmy i dźwięk <video, audio, source>
...wyśrodkować film w HTML? Aby ustawić odtwarzacz wideo na środku ekranu, należy go umieścić wewnątrz elementu blokowego z przypisanym odpowiednim stylem: <div style="text-align: center"> <video src="film.mp4"></video> </div>.
- HTML5 / Automatyczne zogniskowanie <... autofocus>
...do nawigacji za pomocą klawiatury. Na przykład: <button tabindex="-1">Przycisk</button>. Alternatywnie, można usunąć fokus CSS-owo, stosując atrybut style="outline: none" w wybranym znaczniku, albo odpowiednią deklarację w arkuszu stylów - np.: button { outline: none; }, choć to może wpłynąć na dostępność i użyteczność.