background color - Kurs HTML i CSS
CSS dla zielonych / Klasy selektorów CSS <div class>...w arkuszu stylów w miejsce selektora wstawiamy wartość atrybutu class - czyli nazwę klasy - poprzedzoną znakiem kropki: .menu-nawigacyjne { background-color: gray; color: silver; } Zwróć uwagę, że w kodzie HTML wartość atrybutu class nie zawiera znaku kropki - trzeba ją dodać tylko w arkuszu stylów. Należy jednak pamiętać, że pomiędzy znakiem kropki a nazwą klasy w selektorze nie może być żadnych białych znaków - nawet spacji. W samej nazwie klasy najlepiej używać wyłącznie małych...
- 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...
- Marginesy CSS / Model pudełkowy CSS
...stylizować przy użyciu właściwości CSS, takich jak szerokość, marginesy czy obramowanie. Przykładowy kod: <div style="width: 300px; margin: 10px; background-color: blue">Treść</div>.
- Marginesy CSS / Atrybuty mieszane marginesu {margin}
...wyśrodkować elementy w poziomie bez konieczności ręcznego określania konkretnych marginesów. Przykład: <div style="width: 300px; margin: auto; background-color: lightgray">Treść</div> wyśrodkuje poziomo element <div> o szerokości 300 pikseli w jego rodzicu.