span - Kurs HTML i CSS
HTML dla zielonych / Kolor czcionki HTML <span "color"><span style="color: kolor">Tu wpisz tekst</span> gdzie jako "kolor" można wpisać: black (czarny) white (biały) silver (srebrny) gray (szary) maroon (kasztanowy) red (czerwony) purple (purpurowy) fuchsia (fuksja) green (zielony) lime (limonowy) olive (oliwkowy) yellow (żółty) navy (granatowy) blue (niebieski) teal (zielonomodry) aqua (akwamaryna) Jeśli za mało Ci tych szesnastu kolorów, zajrzyj na stronę pt...
- HTML dla zielonych / Wielkość czcionki HTML <span "font-size">
<span style="font-size: rozmiar">Tu wpisz tekst</span> gdzie jako "rozmiar" należy wpisać: xx-small Czcionka najmniejsza x-small Czcionka bardzo mała small Czcionka mała medium Czcionka średnia large Czcionka duża x-large Czcionka bardzo duża xx-large Czcionka największa Przykład <span "font-size"> <span style="font-size: xx-small">Czcionka o rozmiarze xx-small</span> Czcionka o rozmiarze xx-small <span style="font-size: x-small">Czcionka o rozmiarze x-small</span> Czcionka o...
- HTML dla zielonych / Rodzaj czcionki HTML <span "font-family">
<span style="font-family: rodzaj">Tu wpisz tekst</span> lub <span style="font-family: rodzaj1, rodzaj2, rodzaj3...">Tu wpisz tekst</span> gdzie zamiast rodzaj, rodzaj1, rodzaj2, rodzaj3... należy wpisać rodzaje czcionek (np.: Arial, 'Courier New', 'Times New Roman', Verdana i inne). Jeżeli nazwa czcionki składa się z kilku wyrazów, to trzeba ją objąć w znaki apostrofu (np.: <span style="font-family: Verdana, 'Times New Roman', Arial">Tekst</span>). W miejsce kropek można wpisać dalsze rodzaje...
Wstawianie stylów CSS / Rozciąganie stylu <span style><span style="cecha: wartość; cecha2: wartość2...">...</span> Jako "cecha" należy wpisać o jakie konkretnie atrybuty formatowania nam chodzi (opisane w kolejnych rozdziałach). Natomiast jako wyraz "wartość" wpisujemy dokładną wartość atrybutu. Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany), np...
- HTML dla zielonych / Łączenie znaczników i atrybutów HTML <p "text-align", span "font-size, color", b, i, u>
...kolor czcionki, pogrubienie, pochylenie, przekreślenie) dotyczące tekstu można łączyć, np. po wpisaniu w edytorze: <p style="text-align: center"><span style="font-size: large; color: red"><b><i><u> To jest jakiś tekst </u></i></b></span></p> otrzymamy: To jest jakiś tekst Zauważ, że znaczniki zamykamy w kolejności odwrotnej jak je otwieraliśmy. Czyli najpierw zamykamy znacznik, który został otwarty jako ostatni (w naszym przykładzie jest to: <u>), a na końcu zamykamy ten znacznik, który...
- Układ wielokolumnowy CSS / Łączenie kolumn {column-span}
(CSS 3 - interpretuje Internet Explorer 10, Firefox 71, Opera 11-12 i 37, Chrome 50) selektor { column-span: all } Selektorem może być dowolny element blokowy, bez ustawionego oblewania ani pozycjonowania absolutnego. Aby odwołać łączenie kolumn, należy podać wartość none. Zdarzają się sytuacje, kiedy chcemy wyskoczyć z ustalonego podziału tekstu na kolumny. Może to mieć miejsce np. w przypadku tytułów, które rozpoczynają kolejny artykuł albo nową sekcję w artykule. Mamy możliwość...
- Komendy HTML 4.01 / SPAN
Rozciąganie stylu. Zobacz więcej... Atrybuty: CLASS="klasa" Przypisuje nazwę klasy (CSS) lub nazwy klas do elementu, które muszą być rozdzielone białymi znakami DIR="kierunek" Kierunek tekstu: ltr - od lewej do prawej rtl - od prawej do lewej ID="nazwa" Przypisuje nazwę elementowi (identyfikator), która nie może się powtarzać w całym dokumencie LANG="język" Informacja o języku bazowym (np.: LANG="en" oznacza angielski, LANG="pl" - polski itd.) STYLE="styl" Informacje stylów (CSS)...
- Oprawa graficzna / Zamiennik obrazkowy
...ideę zamiennika obrazkowego. Todd Fahrner jako jeden z pierwszych wpadł na ten pomysł i stąd wzięła się nazwa metody, którą zaproponował. <div><span>Zamiennik obrazkowy</span></div> div { background-image: url(obrazek.gif); width: 200px; height: 50px; } div span { display: none; } Wyjaśnienie: Najpierw pod zewnętrzny element podstawiamy obrazek tła Musimy ustalić rozmiary bloku na identycznie jak wymiary grafiki - inaczej otrzymalibyśmy element w szerokości całej strony i...
- Tekst HTML / Wykaz <ul, ol, li>
...Stosując pewną "sztuczkę", można uzyskać wykaz, którego wyróżniki (markery) będą miały inny kolor niż reszta tekstu: <ul style="color: red"> <li><span style="color: black">Punkt pierwszy</span></li> <li><span style="color: black">Punkt drugi</span></li> <li><span style="color: black">Punkt trzeci</span></li> </ul> gdzie w miejsce wyróżnionych wyrazów należy wpisać definicje kolorów, przy czym "red" oznacza kolor, jaki mają przyjąć wyrózniki, natomiast "black" - kolor tekstu. Przykład <ul...
- Wstawianie stylów CSS / Wydzielone bloki <div style>
...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 ramach DIV.</p> </div> Otrzymamy...