weight - Kurs HTML i CSS
Ikony (symbole) / Społecznościowe...bloodtype Jajko egg egg Usuń grupę group_remove group_remove Leki płynne medication_liquid medication_liquid Dwutlenek węgla co2 co2 Waga weight weight Podążaj za znakami follow_the_signs follow_the_signs Beczka ropy oil_barrel oil_barrel Starsza kobieta elderly_woman elderly_woman Transpłciowy transgender transgender Środek do dezynfekcji sanitizer sanitizer Czyste ręce clean_hands clean_hands Wymiana partnerów partner_exchange partner_exchange Osoba 2 person_2 person_2...
Oprawa graficzna / "Duszki" CSS...dfe #365 #365 #dfe; } ul a:link, ul a:visited { display: block; width: 169px; text-decoration: none; padding: 5px 10px 5px 20px; font-weight: bold; background: #bfb url(obrazek.gif) no-repeat -16px -25px; color: #365; border-left: 1px solid #797;} ul a:hover { background-color: #797; background-position: -16px -49px; color: #eff; } Rezultat: Czcionki Tekst Tło Marginesy Obramowanie Na komentarz zasługują ujemne wartości położenia tła obrazkowego...
- Menu w CSS / Pionowe menu
...ul li { border-bottom: 1px solid #9ce; } ul a:link, ul a:visited { display: block; width: 176px; text-decoration: none; padding: 7px; font-weight: bold; background-color: #27c; color: #def; border-left: 10px solid #25b; } ul a:hover { width: 166px; background-color: #28e; color: #fff; border-left: 20px solid #26d; } Usuwamy domyślne formatowanie listy. Ustalamy szerokość menu, dodajemy tło i podwójne obramowanie oraz niewielki odstęp pomiędzy obramowaniem a krawędziami...
- XHTML / Różnice między HTML 4 a XHTML 1.0
...<title>Przykład wewnętrznego arkusza CSS</title> <style type="text/css" id="internalStyle"> code { color: green; font-family: monospace; font-weight: bold; } </style> </head> <body> <p> To jest tekst, który używa naszego <code>wewnętrznego arkusza stylów</code>. </p> </body> </html> Wyświetlenie dokumentu XHTML jako czystego XML wywoła tak duże błędy w prezentacji strony, że właściwie będzie ona zupełnie nieczytelna: większość elementów błędnie wystylizowanych, a cały tekst...
- Tryb Quirks / Co zmienia przejście z trybu Quirks do trybu zgodności ze standardami?
...Firefox i Opera). Przejście na tryb zgodności pozwala tabelom dziedziczyć od dowolnego rodzica wartości własności takich jak: color, font-size, font-weight, font-style, font-variant, text-decoration, text-transform, letter-spacing i line-height. Tryb Quirks pozwala określić rozmiary elementów wyświetlanych w linii (inline). W trybie zgodności znak odwróconego ukośnika "\" pozwala usunąć z następnego znaku jego specjalne znaczenie (tzw. "escape character"). W trybie Quirks przeglądarka...
- Selektory specjalne CSS / Selektor identyfikatora <... id>
...o identyfikatorze id="demo"? Aby wybrać element o identyfikatorze id="demo" w CSS, używa się selektora identyfikatora. Na przykład: #demo { font-weight: bold; }. Kiedy CLASS a kiedy ID? Klasy (class="...") stosuje się, gdy chcemy zastosować te same style do wielu elementów o podobnych właściwościach. Natomiast identyfikatory (id="...") stosuje się, gdy chcemy zastosować unikalne style lub manipulacje do jednego konkretnego elementu na stronie.
- Komendy CSS 2 / font
WARTOŚĆ [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit OPIS Atrybuty mieszane czcionki INICJALIZACJA zobacz cechy indywidualne ZASTOSOWANIE wszystkie elementy DZIEDZICZENIE tak PROCENTY dla cechy 'font-size' i 'line-height' MEDIA visual
Menu rozwijane, otwierane, wysuwane / Skrypt menu rozwijanego, otwieranego, wysuwanego...dzięki której można dodatkowo wyróżnić aktualną pozycję menu, dodając odpowiednie deklaracje CSS w arkuszu stylów, np.: #menu0 dd.active { font-weight: bold; }
- Menu drzewiaste / Skrypt menu drzewiastego
...ul.tree li a { font-size: 13px; text-decoration: none; cursor: pointer; } ul.tree li a.folder { cursor: pointer; } ul.tree li a.active { font-weight: bold; } ul.tree li a:hover { text-decoration: underline; } Dodatkowo w tym samym katalogu utwórz plik tree.js i zapisz w nim: /** * @author Sławomir Kokłowski {@link https://www.kurshtml.edu.pl} * @copyright NIE usuwaj tego komentarza! (Do NOT remove this comment!) */ function Tree(id) { this.id = id; var url...
- Selektory pseudoklas CSS / Etykieta :target
...gdy ewentualne pozostałe etykiety na tej samej podstronie pozostaną bez zmian. Przykład :target Po wpisaniu w arkuszu stylów: :target { font-weight: bold } a w dowolnym miejscu strony: <span id="przyklad_etykieta1">etykieta "przyklad_etykieta1"</span>, <span id="przyklad_etykieta2">etykieta "przyklad_etykieta2"</span> <p><a href="#przyklad_etykieta1">odsyłacz "#przyklad_etykieta1"</a>, <a href="#przyklad_etykieta2">odsyłacz "#przyklad_etykieta2"</a></p> po kliknięciu linku do danej...