background color - Kurs HTML i CSS
Pozycjonowanie CSS / Przezroczystość {opacity}...górna, półprzezroczysta warstwa ("opacity: 0.5")... To jest górna, półprzezroczysta warstwa ("opacity: 0.5")... Pytania i odpowiedzi {opacity, background-color: transparent} Jak ustawić przezroczystość w CSS? Aby ustawić przezroczystość w CSS, używa się właściwości opacity. Można ustawić wartość od 0 (element całkowicie przezroczysty) do 1 (element całkowicie widoczny). Jak dodać przezroczystość? Aby dodać przezroczystość do elementu w CSS, używa się właściwości opacity. Na...
- Pozycjonowanie CSS / Wyświetlanie {display}
...</tr> </table> komórka1 komórka2 komórka3 komórka4 To jest zwykły tekst display: inline-block; width: 150px; height: 100px; background-color: silver To jest zwykły tekst Dla porównania zwykły blok: To jest zwykły tekst width: 150px; height: 100px; background-color: silver To jest zwykły tekst Pytania i odpowiedzi {display} Do czego służy "display" w CSS? W CSS, właściwość display kontroluje sposób, w jaki element jest renderowany w przeglądarce. Określa, czy...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
...selektorowi możemy nadać kilka atrybutów (cech). Są one wtedy rozdzielone średnikami. Przykład <div style> Po wpisaniu w edytorze: <div style="background-color: yellow"> <span style="color: red"> <b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>, a to jest zwykły tekst - również wewnątrz DIV i SPAN. </span> To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło. <p>A to jest akapit (element blokowy) w...
- Wstawianie stylów CSS / Zewnętrzny arkusz stylów <link "stylesheet"> @charset
...zewnętrzny arkusz stylów: /* SELEKTORY: */ body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10pt; color: #003868; background-color: #80B8E8; margin: 6mm; } p { text-align: justify; } pre, code { font-size: 8pt; } Strona kodowa @charset Jeżeli arkusz stylów zawiera narodowe znaki diakrytyczne, konieczne może być określenie strony kodowej. Można to zrobić umieszczając na samym początku arkusza stylów deklarację: @charset "strona kodowa"; Przed...
- Selektory pseudoklas CSS / Zogniskowanie :focus
...wybranego za pomocą klawisza tabulatora czy pola formularza, w którym znalazł się kursor. Przykład :focus textarea:focus { color: white; background-color: black } Kliknij tutaj lub przenieś kursor za pomocą klawisza tabulatora, a tło w tym polu stanie się czarne natomiast tekst biały.
Tabele HTML / Łączenie wierszy tabeli w grupy <thead, tbody, tfoot>...komórek należy utworzyć dodatkowy znacznik TBODY, który nie musi posiadać żadnych atrybutów. Przykład <tbody> Po wpisaniu: <table> <tbody style="background-color: red"> <tr> <td>komórka1</td> <td>komórka2</td> <td>komórka3</td> </tr> <tr> <td>komórka4</td> <td>komórka5</td> <td>komórka6</td> </tr> </tbody> <tbody> <tr> <td>komórka7</td> <td>komórka8</td> <td>komórka9</td> </tr> </tbody> </table> otrzymamy: komórka1 komórka2 komórka3 komórka4 komórka5...
- Komendy HTML 4.01 / Wykaz atrybutów
...przecinkami archive OBJECT Lista adresów rozdzielonych odstępami axis TD, TH Lista powiązanych nagłówków rozdzielonych przecinkami background BODY Obrazek w tle dokumentu bgcolor BODY Kolor tła dokumentu bgcolor TABLE Kolor tła komórek tabeli bgcolor TD, TH Kolor tła komórek tabeli bgcolor TR Kolor tła wierszy tabeli border IMG, OBJECT Szerokość obramowania odnośnika border TABLE Szerokość obramowania tabeli cellpadding TABLE Odstępy...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...Właściwości: padding, 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...
- Formularze HTML / Przykład formularza HTML
...z powodu różnej długości opisów. Na przykład po wpisaniu: <form action="mailto:e-mail" method="post" enctype="text/plain"><div> <table style="background-color: silver"> <tr> <td>Imię:</td><td><input type="text" name="imie"></td> </tr> <tr> <td>Nazwisko:</td><td><input type="text" name="nazwisko"></td> </tr> <tr> <td colspan="2" style="text-align: center"><br> <input type="submit" value="Wyślij"> <input type="reset" value="Wyczyść"> </td> </tr> </table> </div></form> otrzymamy...
- Selektory pseudoklas CSS / Pusty element :empty
...nie ma wielkiego sensu semantycznego, ponieważ ich przeznaczeniem jest oznaczanie treści. Przykład :empty Po wpisaniu w arkuszu stylów: p:empty { background-color: red; width: 100%; height: 1em } a w dowolnym miejscu strony: <p></p> <p> </p> <p><b></b></p> <p>To jest akapit</p> otrzymamy cztery akapity, z których tylko pierwszy element (pusty) powinien mieć ustawione tło koloru czerwonego: To jest akapit Zwróć uwagę, że drugi akapit (zawierający tylko spację) ani trzeci akapit...