Jak zrobić piękną czcionkę w HTML: Rozmiary, kolory, znaczniki czcionek HTML. Jak zapisać w tekście HTML pod zdjęciami, dlaczego używane jest RGBA

Miniaturka

Miniaturka

Bardziej zwyczajny

Mniej zwykły

Kursywa

Kursywa

Z naciskiem

Zgnieciony

Cechy atrybutu stylu

Oprócz opisanych znaczników nadal istnieje kilka sposobów na zmianę czcionki w HTML. Jednym z nich jest użycie uniwersalnego atrybutu stylu. Korzystając z wartości jego właściwości, możesz ustawić styl wyświetlania czcionki:

1) Rodzina czcionek - nieruchomość ustawia rodzinę czcionki. Możesz wyliczyć kilka wartości.
Zmiana czcionki w HTML do następnej wartości nastąpi, jeśli poprzednia rodzina nie jest zainstalowana system operacyjny Użytkownik.

Składnia pisania:

czcionka: Nazwa czcionki [, Nazwa czcionki [, ...]]

2) Rozmiar czcionki - rozmiar jest ustawiony od 1 do 7. Jest to jeden z głównych sposobów, jak w HTML możesz zwiększyć czcionkę.
Składnia pisania:

rozmiar czcionki: Rozmiar absolutny | Rozmiar względny |. Wartość |. zainteresowanie |. dziedziczyć.

Rozmiar czcionki można również ustawić:

• W pikselach;
• W wartości bezwzględnej ( xx-mały, x-mały, mały, średni, duży);
• W procentach;
• Punkty (PT).

Rozmiar czcionki: 7

Rozmiar czcionki: 24px

Rozmiar czcionki: X-duży

Rozmiar czcionki: 200%

Rozmiar czcionki: 24pt

3) Styl czcionki - Ustawia styl pisania czcionki. Składnia:

styl czcionki: normalny | Kursywy |. Ukośne |. dziedziczyć.

Wartości:

• normalne -normalne pisanie;
• kursywa - kursywa;
• ukośne - czcionki z nachyleniem w prawo;
• dziedziczenie - dziedziczy pismo elementu macierzystego.

Przykład sposobu zmiany czcionki w HTML za pomocą tej właściwości:

styl czcionki: dziedziczy

styl czcionki: kursywy

styl czcionki: normalny

styl czcionki: ukośny

4) Wariant font - tłumaczy wszystkie wielkie litery do tytułu. Składnia:

wariant czcionek: normalny | Małe czapki |. dziedziczyć.

Przykład sposobu zmiany czcionki w HTML przez tę właściwość:

wariant czcionek: dziedziczyć

wariant czcionek: normalny

wariant czcionek: małe czapki

5) Waga czcionki - umożliwia ustawienie grubości pisania tekstu (nasycenie). Składnia:

font-Waga: Bold | Bolder | Lżejsza | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Wartości:

• odważny - instaluje pogrubioną czcionkę HTML;
• boldler - tłuste w stosunku do normalności;
• lżejszy jest nasycony względem normalności;
• normalne - normalne pisanie;
• 100-900 - grubość czcionki jest ustawiona w odpowiedniku numerycznym.

czcionka: pogrubienie

czcionka: Boldler

czcionka: lżejsza

czcionka: Normalna

czcionka: 900

czcionka: 100

Właściwość czcionki i kolor czcionki HTML

Czcionka to kolejna nieruchomość kontenera. Wewnątrz samego siebie łączył wartości kilku nieruchomości przeznaczonych do zmiany czcionek. Czcionka składniowa:

czcionka: Czcionka czcionka-Rodzina | dziedziczyć.

Ponadto czcionki używane przez system w inskrypcji na różnych elementach sterujących można określić jako wartość.

• podpis - dla przycisków;
• ikona - do ikon;
• menu - Menu;
• skrzynka na wiadomości - okna dialogowe;
• mały podpis - dla małych kontroli;
• status-Bar - Status String Font.

czcionka: Ikona

czcionka: podpis.

czcionka: Menu.

czcionka: Pudełko wiadomości

mały podpis.

czcionka: Status-bar

czcionka: Ialiczna 50px Bold "Times New Roman", Times, Serif

Aby ustawić kolor czcionki w HTML, możesz użyć właściwości kolorów. Pozwala ustawić kolor jako użycie słowa kluczowei format RGB. Jak również w formie kodu szesnastkowego.

Tagi HTML Definiowanie wyrównania tekstu, wcięcie

Tekst szerokości używany w drukarni

W poniższym przykładzie pokazano, jak wyrównać tekst w szerokości Strony:

Uzasadnić wartość zapewnia jednolite wyrównywanie tekstu po prawej i w lewo, tj szerokość. Ta metoda jest szeroko stosowana w druku.

Wyrównywanie tekstu w HTML w centrum i szerokości

Wyrównywanie tekstu w centrum HTML, tekst po prawej stronie:

Wynik:

Atrybuty i wartości

• wyrównać \u003d "lewy" - określa poziomowanie tekstu (domyślna).
• aglug \u003d "Center" - poziomy tekst w centrum.
• wyrównać \u003d "prawo" - linie tekst po prawej stronie.

Wyrównanie |. Tekst Peent HTML.

Tekst HTML. i jego wycofanie po lewej stronie strony

Produkować tICK TEXT. W lewo na dwa sposoby:

Wynik:

Widok w nowym oknie.

Zdarza się, że musisz wycofać obraz i przypisać nazwę (krótka fraza). W tym celu są parametry:

Wyrównaj \u003d "Top" - Linie tekstu na górze obrazu.
Wyrównaj \u003d "dolny" - linie tekst na dole.
Wyrównaj \u003d "środkowy" - wyrównuje tekst w środku.

Poniżej znajduje się kod, który pokazuje działanie powyżej opisanych parametrów.

Piękna pszczoła

Bardzo ładna pszczoła

Też nic.

Teraz zobaczmy, jak musisz wyświetlić zdjęcie z dużą liczbą tekstu.
Istnieją dwa parametry:

Wyrównaj \u003d "Left" - obraz "strumienie tekstu" po lewej stronie.
Wyrównaj \u003d "Right" - obraz "strumienie tekstu" w prawo.

Dla jasności, napisz ten kod:

Forma słońca jest blisko doskonałej kuli o średnicy 1392000 km. Mieści orbitę księżyca i nadal jest dużo miejsca. W rzeczywistości ponad milion takich planet, jak ziemia pasowałaby swobodnie wewnątrz słońca. Ponadto, jeśli byłeś w stanie prowadzić samochód na powierzchni z prędkością 88 km / h, zostawiłbyś 5 i pół roku, aby jeździć po słońcu raz (bez zatrzymywania się). Ale wielkość słońca nie jest stała. Współczesne badania pokazują, że średnica słońca zmniejsza około 1 metra na godzinę. Jeśli to zjawisko odbyło się w minionym stuleciu, to słońce, które widzimy teraz 800 km, mniej niż nasze przodkowie widzieli. Być może ta kompresja słoneczna jest częścią długoterminowej oscylacji, która pomaga ustabilizować ogromną emisję energii.

Księżyc

Jest to jedyny naturalny satelita Ziemi. Masa Księżyca wynosi 0,0123 mas ziemi (około 1/81) lub 7,6.1022 kg. Średnica Księżyca jest nieco więcej niż jedną czwartą Ziemi (0,273) lub 3 476 km. Księżyc oświetla ziemię 500 000 razy słabszy niż słońce). Nie ma żadnej atmosfery znanej nam na Księżycu, nie ma rzek i jezior, roślinności i żywych organizmów. Siła grawitacji na Księżycu jest sześć razy mniej niż na ziemi. Dzień i noc z temperaturą spadnie do 300 stopni na dwa tygodnie.

Ale Jak widzisz, może być tak, że tekst, a obraz są zbyt blisko siebie. Aby go poprawić, wystarczy ustawić część pożądanego rozmiaru grubości ramki i koloru, podobnie jak tylne tło.

Zjawisko astronomiczne polega na tym, że Księżyc zamyka się całkowicie (zaćmienie) całkowicie lub częściowo słońce z obserwatora na Ziemi. Eclipse Solar jest możliwe tylko w nowym księżycu, gdy strona księżyca skierowana do ziemi nie jest objęta, a sam księżyc nie jest widoczny. ECLIPS są możliwe tylko wtedy, gdy nowy księżyc występuje w pobliżu jednego z dwóch węzłów księżycowych (punkty przecięcia widocznych orbitów księżyca i słońca), nie więcej niż około 12 stopni od jednego z nich.

Ogólnie rzecz biorąc, sama pytanie jest łatwe. Nie ma nic sprytnego zorganizować jeden blok, na drugim. Ale nadal istnieje kilka chwil godnych dyskusji w tej sprawie. Myślę, że będą ludzie, którzy będą zainteresowani.

Chodzi o to, aby po prostu zastosować tekst do obrazu. Tekst jest przedstawiony w postaci bloków o zmiennej długości, zakłada się, że będzie umieszczony po lewej stronie, z płynnym wypełnieniem wokół tekstu. Na przykład, jak na tym obrazie:

Schemat dokumentu

Markup HTML.

Film w parku:
Panda Kung Fu.

Oczywiście łatwiej byłoby korzystać z elementu DIV do wyjścia obrazu jako wzorzec tła, ale w tym przypadku zakładam, że obraz jest zawartością dokumentu, a zatem należy do HTML. Element DIV zostanie użyty jako kontener do absolutnego pozycjonowania tekstu w nim.

CSS.

W ten sposób umieściliśmy tekst bezpośrednio nad obrazem. Dalej nasza zadanie zrobić tło na tekst. Od elementu

Jest to element bloku, nie możemy go używać do tych celów. Używamy elementu inline . Owiń w nim tekst wewnątrz tytułu.

Film w parku:
Panda Kung Fu.

Wykorzystamy ten zakres projektowania tekstu i tła:

H2 Span (Kolor: White; Czcionka: Bold 24px / 45px Helvetica, Sans-Serif; Spakacja litera: -1px; Tło: RGB (0, 0, 0); / * W przypadku następnej linii nie działa * / Backgroundground : RGBA (0, 0, 0, 0,7); Wypełnienie: 10px;)

Problemy

Jak widać z figury, na końcu linii, blok tekstu kończy się natychmiast po ostatnim symbolu w ciągu i rozpocznie się natychmiast na lewej krawędzi następny linia. Wyściółka nieruchomościowa dla Span-A, w tym przypadku, nie pomoże nam.

Aby rozwiązać problem, musisz użyć dodatkowych przęseł po obu stronach tagu
W tym przypadku możemy łatwo użyć wyściółki.

Film w parku:
Panda Kung Fu.

Ten nowy span-am zadanie przycisku:

H2 Span.Spacer (wyściółka: 0 5px;)

Jaka jest semantyka?

Na ten etap Projekt jest zakończony, ale jeden problem pozostał. Mianowicie, wielka kwota Dodatkowe elementy HTML dodane tylko do projektowania. Mam na myśli span-s. Aby rozwiązać ten problem, używamy jQuery. Aby to zrobić, usuń wszystkie rozpiętość w znaczniku i dynamicznie je dodają:

Film w parku:
Panda Kung Fu.

$ (Funkcja () ($ ("H2"). Wrapinner (" "); $ (" H2 BR "). Przed (" ") .Po (" "); });