rozmiar - Kurs HTML i CSS
Media CSS / Zapytania mediów...wyższą rozdzielczość ekranu, możemy wyświetlić mu dodatkową kolumnę treści. Co więcej, można płynnie dopasowywać wygląd strony przy przeciąganiu rozmiaru okna przeglądarki przez użytkownika. Zapytania mediów wpisuje się dokładnie w tych samych miejscach, co przy tradycyjnym wyborze medium, np.: @import url(kolor.css) screen and (color); @media screen and (color) { /* Arkusz dla urządzeń z kolorowym ekranem */ } <link rel="stylesheet" media="screen and (color)" href="kolor.css">...
- Marginesy CSS / Górny margines {margin-top}
selektor { margin-top: rozmiar } Selektorem może być praktycznie dowolny znacznik, np. p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Wpisanie auto ustali wartość automatyczną. Polecenie wprowadza dodatkowy odstęp między danym elementem a elementem poprzedzającym. Jeśli definiowane własności mają odnosić się do całej strony (np. marginesy strony), można użyć selektora BODY (zobacz także...
- Marginesy CSS / Górny margines wewnętrzny {padding-top}
selektor { padding-top: rozmiar } Selektorem może być praktycznie dowolny znacznik, np. p - akapit, h1 - tytuł czy td - komórka tabeli [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać konkretną wartość w jednostkach długości. Polecenie to pozwala zdefiniować dodatkowy wewnętrzny odstęp pomiędzy elementami, np. tekstem i obramowaniem tabeli (co nie byłoby możliwe poprzez ustalenie marginesu - margin). Jest przydatne np. w połączeniu z tłem pod tekstem, obramowaniem, czy też...
- Obramowanie CSS / Odstęp obrysu {outline-offset}
(CSS 3 - interpretuje Firefox, Opera, Chrome) selektor { outline-offset: rozmiar } Selektorem może być dowolny znacznik, np.: p - akapit czy h1 - tytuł [zobacz: Wstawianie stylów]. Natomiast jako "rozmiar" należy podać odstęp wyrażony w jednostkach długości. Standardowo obrys jest rysowany bezpośrednio na krawędzi elementu. Możemy go jednak nieco od niego odsunąć, jeśli uważamy, że dzięki temu będzie on wyglądał bardziej estytycznie. Przy tworzeniu obrysu możesz również skorzystać ze...
HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>...i pochylenia: <b><i>...</i></b>. Trzeba przy tym pamiętać, że znaczniki zamykamy zawsze w odwrotnej kolejności, niż były otwierane! Jak zmienić rozmiar i kolor czcionki? W tym celu należy objąć tekst znacznikiem z przypisanym atrybutem o odpowiednich wartościach. Na przykład: <span style="font-size: large; color: red">...</span> ustawi bardzo dużą wielkość czcionki i czerwony kolor tekstu.
- Nagłówek i treść HTML / Skalowanie strony <meta "viewport">
...jest szczególnie przydatne na urządzeniach mobilnych takich jak smartfony czy tablety. Ponieważ ekran przeglądarek mobilnych zwykle jest dość małych rozmiarów, strona może być odpowiednio powiększana, tak aby jej zawartość była dobrze czytelna. W pewnym zakresie możemy sterować tym zachowaniem za pomocą powyższego polecenia. W szczególności możemy zaprojektować stronę z użyciem techniki Responsive Web Design (w skrócie: RWD), tak aby automatycznie dopasowywała się do dostępnej szerokości...
- Tekst HTML / Czcionka pomniejszona <small>
...autorskie). Wpisując powyższe znaczniki (tego samego rodzaju) jeden wewnątrz drugiego (np.: <small><small>...</small></small>), można zmniejszyć rozmiar tekstu o kilka wielkości. Przykład <small> To jest zwykły tekst... a ten tekst jest napisany czcionką pomniejszoną (small)
- Tekst HTML / Kod poprawny semantycznie
...nie jest pomyłka organizacji W3C, że wprowadzono znacznik <h1>...</h1> (tytuł rozdziału), skoro ten sam efekt można uzyskać dobierając odpowiedni rozmiar czcionki? Otóż na pewno nie jest to pomyłka. Z punktu widzenia użytkownika w języku HTML wyróżniamy dwa podstawowe typy elementów określających atrybuty tekstu: Znaczniki formatujące - mają za zadanie tylko i wyłącznie zmienić wygląd tekstu, który obejmują, bez żadnego odniesienia do znaczenia tego tekstu. Są to np.: B (pogrubienie), I...
- Ikony (symbole) / Społecznościowe
...dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Osoba person person Grupa group group Udostępnij share share Kciuk w górę thumb_up thumb_up Grupy groups groups Publiczne public public Dodaj osobę person_add person_add Uścisk dłoni handshake handshake Konsultant wsparcia support_agent support_agent Twarz...
- Ikony (symbole) / Typowe akcje
...dowolną ikonę używając w tym celu specjalnego generatora. Wybierz wariant ikony, a następnie kliknij przycisk "Pobierz". Możesz dopasować kolor i rozmiar przy użyciu kontrolek znajdujących się w nagłówku tabeli. Nazwa Wariant Koło konta account_circle account_circle Informacje info info Widoczność visibility visibility Miesiąc kalendarza calendar_month calendar_month Harmonogram schedule schedule Ostrzeżenie warning warning Pomoc help help Język language language Zamek lock lock...