klasy - Kurs HTML i CSS
Selektory specjalne CSS / Klasy selektorów <... class>...polskich liter. Nie może się on również rozpoczynać cyfrą ani myślnikiem. Jeśli koniecznie chcemy użyć "zakazanych" znaków, należy w deklaracji klasy poprzedzić je odwróconym ukośnikiem "\", np. reguła: selektor.B\&W\? { cecha: wartość } odpowiada klasie: class="B&W?". Zdefiniowanie klasy selektorów w części arkuszu stylów, pozwala później się do niej odnosić już we właściwej treści dokumentu. Dzięki temu możemy np. ustalić określone atrybuty dla danego elementu (selektora) na całej...
- CSS dla zielonych / Klasy selektorów CSS <div class>
...class: <div class="menu-nawigacyjne">...</div> Następnie 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...
- Dobre praktyki / CSS Zorientowane Obiektowo
...o stylizację, nie ma znaczenia, ile punktów ma wykaz, ponieważ wygląd dla nich określamy wspólnie) odnośnik a W arkuszu CSS pełna definicja tej klasy może wyglądać na przykład tak: .Menu { background-color: white; } .Menu ul, .Menu li { display: block; list-style: none; margin: 0; padding: 0; } .Menu li { float: left; margin-right: 1em; } .Menu a { color: blue; text-decoration: none; } Kompozycja Zwróćmy uwagę, że typowy artykuł może zawierać informacje o...
- CSS dla zielonych / Ramki z tekstem CSS {background-color, padding, padding-top, padding-bottom, padding-left, padding-right, border-width, border-style, border-color, border-radius}
...mogą być np. ramki wizualnie wyróżniające tekst, który się w nich znajduje. Wystarczy, że raz zdefiniujemy ich wygląd w arkuszu stylów: .nazwa-klasy { deklaracje stylów } by następnie w miarę potrzeb móc ich wielokrotnie używać w dowolnym dokumencie HTML na naszej stronie: <div class="nazwa-klasy">dowolny tekst...</div> Przypominam, że w arkuszu stylów (pierwsze polecenie powyżej) nazwa-klasy musi być poprzedzona znakiem kropki (w tym miejscu po kropce nie można postawić spacji!)...
- Dobre praktyki / Przykazania webmastera
...Minimalizuj liczbę identyfikatorów i klas CSS Pozwoli to na łatwiejsze zarządzanie arkuszem CSS (prościej jest pamiętać jedną nazwę klasy niż kilkanaście jej odmian) oraz zmniejszy prawdopodobieństwo powstania konfliktów nazw i związanej z tym konieczności wymyślania kolejnej, nowej nazwy, kiedy już skończyły nam się wszystkie pomysły. W tym celu możesz nadać jedną klasę blokowi pełniącemu rolę pojemnika na elementy innych typów, a dalej korzystać np. z selektorów potomka...
Dla nauczycieli / Scenariusz lekcji informatyki dla liceum i technikum...(np. jasną i ciemną). Lekcja 6 - Klasy CSS, ramki, marginesy, tapety, interakcje Czas trwania: 45 minut Cele szczegółowe Uczeń stosuje klasy CSS i przypisuje je do elementów HTML. Uczeń używa paddingów, ramek i marginesów. Uczeń stylizuje tło obrazkiem. Uczeń modyfikuje wygląd odsyłaczy w interakcji. Materiały Klasy selektorów CSS Ramki z tekstem CSS Marginesy strony CSS Tapeta CSS Kolor odsyłaczy CSS Przebieg 5 min - Powtórka z poprzedniej lekcji Przypomnienie...
Komendy HTML 4.01 / APPLET...po prawej top - na górze ALT="tekst" Tekst alternatywny ARCHIVE="adresy" Lista adresów archiwów rozdzielonych przecinkami, które zawierają klasy i zasoby, które zostaną przeładowane CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami CODE="adres" Lokalizacja pliku klas CODEBASE="adres" Określa adres bazowy HEIGHT="długość" Wysokość w pikselach lub w procentach HSPACE="piksele" Odstęp po lewej i prawej stronie w...
Menu drzewiaste / Skrypt menu drzewiastego...Wyrażenia regularne Wymagana wiedza Zagnieżdżanie wykazów <ul>...</ul> Podstawy odsyłaczy Podstawy stylów CSS (m.in. arkusze stylów i klasy selektorów) Skrypt menu drzewiastego Aby uzyskać menu drzewiaste, utwórz plik tree.css w tym samym katalogu co strona i zapisz w nim: ul.tree { display: block; margin-left: 0; padding-left: 0; } ul.tree ul { display: block; margin-left: 0; padding-left: 0; margin-top: 0; margin-bottom: 0; } ul.tree li { display: block...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...atrybutów formatowania dla elementu, który ma jednoznaczny identyfikator (ID), czyli występuje tylko raz w drzewie dokumentu (w odróżnieniu od klasy). Przykład <... id> Jeżeli w arkuszu stylów strony została umieszczona następująca reguła: p#przyklad_identyfikator { color: red } to akapit o podanym identyfikatorze ID: <p id="przyklad_identyfikator">To jest akapit.</p> zostanie wyświetlony w kolorze czerwonym: To jest akapit. Dla porównania, to też jest akapit, ale bez podania...
- Selektory pseudoklas CSS / Łączenie selektorów
...(bez żadnych odstępów) w następującej kolejności: selektor typu lub selektor uniwersalny selektory atrybutów, selektor identyfikatora, selektor klasy lub selektory pseudoklas (w dowolnej kolejności) selektory pseudoelementów Zespół selektorów z punktu 1 i 2 nazywamy selektorem prostym. W jednej regule może wystąpić kilka selektorów prostych - każdy rozdzielony przez tzw. kombinator, tj. znaki spacji, ">" lub "+", które są wykorzystywane przy tworzeniu selektorów: potomka, dziecka i...