style html - Kurs HTML i CSS
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...
- 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.)...
- 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...
- 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...
- Wstawianie stylów CSS / Rozciąganie stylu <span style>
<span style="cecha: wartość; cecha2: wartość2...">...</span> Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany), np...
Ochrona strony...ich zapisania na dysku. <body ondragstart="return false" ondrag="return false"> ... </body> Blokada drukowania <body onbeforeprint="document.body.style.visibility = 'hidden'; alert('Wydruk jest niedostępny!')" onafterprint="document.body.style.visibility = 'visible'"> ... </body> Blokada zapisu wybranych zdjęć <img src="zdjecie.jpg" alt="Tekst alternatywny" onmousedown="return false" oncontextmenu="return false" onselectstart="return false" onselect="return false" oncopy="return false...
Odsyłacze HTML / Do etykiety <a id>...etykiety... ... ... ... ... ... ... ... ... ... ... ...testowa etykieta Odsyłacz drugiego rodzaju (do etykiety "#wstep" na stronie "przegladarki.html" - spójrz na pasek stanu przeglądarki po wskazaniu odsyłacza myszką): Przeglądarki - wstęp... Pytania i odpowiedzi <a id> W jaki sposób przejść do etykiety w innym dokumencie? Wystarczy w odnośniku po adresie strony wstawić znak krzyżyka (skrót klawiaturowy Shift+3), a po nim nazwę etykiety, która znajduje się na stronie docelowej. Ten...
- Selektory pseudoelementów CSS / Cudzysłowy {quotes}
Spis treści {quotes} Cudzysłowy {quotes} Znaki cudzysłowów {content: open-quote close-quote} Wyłączenie znaków cudzysłowu {content: no-open-quote no-close-quote} Cudzysłowy {quotes} (interpretuje Internet Explorer 8.0, Firefox, Opera) W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami...
- Formularze HTML / Wysłanie formularza bez programu pocztowego
...head) ? $message : $error; } } else { ?> <form action="?" method="post"> Tutaj umieść wszystkie pola formularza <input name="captcha" style="display: none"> </form> <?php } ?> Na początku kodu należy ustawić własne wartości: adres e-mail gdzie wysłać formularz Twój adres poczty elektronicznej e-mail. temat Tytuł, jaki będzie nosił formularz, tzn. temat listu, który otrzymasz, kiedy formularz zostanie wysłany. Dziękujemy za wysłanie formularza Komunikat, który zostanie...