W html rozmiar czcionki odgrywa ważną rolę. Zwraca uwagę użytkownika na ważna informacja zamieszczone na stronie internetowej. Chociaż ważna jest nie tylko wielkość liter, ale także ich kolor, grubość, a nawet rodzina.
Tagi i atrybuty podczas pracy z czcionkami html
Język hipertekstowy ma duży zestaw narzędzi do pracy z czcionkami. W końcu formatowanie tekstu jest głównym zadaniem html .
Przyczyna stworzenia język HTML wystąpił problem z wyświetlaniem reguł formatowania tekstu przez przeglądarki.
Rozważ tagi używane do pracy z czcionkami w html i ich atrybutami. Głównym jest tag . Korzystając z wartości jego atrybutów, możesz ustawić kilka cech czcionki:
- kolor - ustawia kolor tekstu;
- size – rozmiar czcionki w dowolnych jednostkach.
Obsługiwana jest dodatnia wartość atrybutu od 1 do 7.
- face - służy do ustawienia rodziny czcionek tekstu, który ma być używany wewnątrz tagu . Obsługiwanych jest wiele wartości oddzielonych przecinkami.
Formatowany jest tylko tekst znajdujący się między częściami sparowany tag czcionka. Pozostała część tekstu jest wyświetlana w domyślnej czcionce.
Również w html istnieje wiele sparowanych tagów, które definiują tylko jedną regułę formatowania. Obejmują one:
- - zestawy w html pogrubiona czcionka. Etykietka podobny w działaniu do poprzedniego;
- - rozmiar jest większy niż domyślny;
- - mniejszy rozmiar czcionki;
- - tekst kursywą (kursywą). Podobny tag ;
- — tekst z podkreśleniem;
- przekreślone;- — wyświetlanie tekstu tylko małymi literami;
- - wielkimi literami.
zwykły tekst
Miniaturka
Miniaturka
Więcej niż zwykle
Mniej niż zwykle
Kursywa
Kursywa
Z podkreśleniem
Przekreślenie
Możliwości atrybutów stylu
Oprócz opisanych tagów istnieje kilka innych sposobów na zmianę czcionki w html . Jednym z nich jest użycie ogólnego atrybutu stylu. Korzystając z wartości jego właściwości, możesz ustawić styl wyświetlania czcionki:
1) font-family - właściwość ustawia rodzinę fontów. Możliwe jest wyliczenie wielu wartości.
Zmiana czcionki w html na następną wartość nastąpi, jeśli poprzednia rodzina nie jest ustawiona na system operacyjny użytkownik.
Składnia pisania:
rodzina-czcionek: nazwa-czcionki [, nazwa-czcionki[, ...]]
2) rozmiar czcionki - rozmiar ustawiany od 1 do 7. Jest to jeden z głównych sposobów na zwiększenie czcionki w html.
Składnia pisania:
rozmiar-czcionki: rozmiar bezwzględny | względny rozmiar | wartość | zainteresowanie | dziedziczyć
Możesz także ustawić rozmiar czcionki:
- W pikselach;
- W wartościach bezwzględnych ( xx-mały, x-mały, mały, średni, duży);
- w procentach;
- W punktach (pkt).
rozmiar czcionki: 7
rozmiar czcionki: 24px
Rozmiar czcionki: x-duży
rozmiar czcionki: 200%
rozmiar czcionki: 24pt
3) styl czcionki - ustawia styl czcionki. Składnia:
styl czcionki: normalny | kursywa | ukośny | dziedziczyć
Wartości:
- normalny - normalna pisownia;
- kursywa - kursywa
- skośny - czcionka z nachyleniem w prawo;
- dziedzicz - dziedziczy pisownię elementu rodzica.
Przykład zmiany czcionki w html za pomocą tej właściwości:
styl czcionki: dziedzicz
styl czcionki: kursywa
styl czcionki: normalny
styl czcionki: ukośny
4) wariant-czcionki - konwertuje wszystkie wielkie litery na wielkie. Składnia:
wariant czcionki: normalny | kapitaliki | dziedziczyć
Przykład jak zmienić czcionkę w html za pomocą tej właściwości:
wariant czcionki:dziedzicz
wariant czcionki:normalny
wariant czcionki: kapitaliki
5) grubość czcionki - pozwala ustawić grubość pisania tekstu (nasycenie). Składnia:
grubość czcionki: pogrubiona|pogrubiona|jaśniejsza|normalna|100|200|300|400|500|600|700|800|900
Wartości:
- pogrubienie - ustawia czcionkę html na pogrubioną;
- bolder - grubszy w stosunku do normalnego;
- lżejszy - mniej nasycony w stosunku do normy;
- normalny - normalna pisownia;
- 100-900 - ustawia grubość czcionki w kategoriach liczbowych.
grubość czcionki: pogrubienie
grubość czcionki: pogrubiona
grubość czcionki: lżejsza
grubość czcionki: normalna
grubość czcionki: 900
grubość czcionki: 100
Właściwość czcionki i kolor czcionki html
Czcionka to kolejna właściwość kontenera. Wewnętrznie połączył wartości kilku właściwości zaprojektowanych do zmiany czcionek. Składnia czcionki:
font: font-size font-family | dziedziczyć
Ponadto czcionki używane przez system w etykietach różnych kontrolek można ustawić jako wartość:
- podpis - dla przycisków;
- ikona - dla ikon;
- menu - menu;
- komunikat-box - dla okien dialogowych;
- small-caption - dla małych kontrolek;
- status-bar - czcionka paska statusu.
czcionka: ikona
czcionka:podpis
czcionka:menu
czcionka:pole wiadomości
mały podpis
czcionka:pasek stanu
czcionka: kursywa 50px pogrubiona „Times New Roman”, Times, szeryf
Wszyscy jesteśmy przyzwyczajeni do wyróżniania części tekstu lub poszczególnych słów w witrynie pogrubieniem, podkreśleniem lub kursywą. Jednak przy nadmiernym nadużywaniu tych rzeczy, Wyszukiwarki może filtrować Twoją stronę lub witrynę.
Dziś zaproponuję rozwiązanie dla tych, którzy chcą jeszcze podkreślić słowa i tekst, ale nie bać się sankcji ze strony wyszukiwarek. Ta metoda Używam osobiście na kilku stronach.
Za formatowanie tekstu odpowiadają standardowe tagi HTML:
Uwaga! Udostępniłem nowy motyw Romb dla twoich artykułów i blogów. Najszybszy na Google PageSpeed i maksymalna optymalizacja pod SEO.
Proponuję użyć CSS do wyróżnienia tekstu, który będzie dość dobrze postrzegany przez wyszukiwarki.
Krok 1: Napisz opcje CSS
Otwórz plik stylu (style.css, css.css, screen.css itp.) i dodaj to na sam koniec:
Silne (grubość czcionki: pogrubienie;) .italic (styl czcionki: kursywa;) .underline(text-decoration:underline;)
Silne (grubość czcionki: pogrubienie;) Kursywa ( styl czcionki : kursywa ; ) Podkreślenie (dekoracja tekstu : podkreślenie ; ) |
Tutaj podaliśmy odpowiednie klasy własne wygląd zewnętrzny. Teraz, w trybie HTML, możesz umieścić żądany fragment tekstu lub słowo w znaczniku span z żądanymi parametrami, w wyniku czego tekst przyjmie żądaną formę: pogrubienie, kursywę lub podkreślenie. Widzieć:
Jednak za każdym razem ręczne napisanie nowego tagu span z klasą jest czasochłonne. Dlatego proponuję opcję zautomatyzowania tego.
Krok 2. Dodawanie przycisków do paska formatowania tekstu
Dodamy teraz nowe przyciski do paska formatowania tekstu w obszarze administracyjnym Twojej witryny WordPress. Będzie to wyglądać tak:
Jak widać na obrazku, dodałem 3 nowe przyciski w trybie HTML. To na nich „zawiesiłem” utworzony przęsł wraz z niezbędnymi klasami (mocna, kursywa i podkreślenie).
Otwórz swój plik functions.php i na samym końcu, przed zamykającym ?> , dodaj następujący kod (pożyczony, ale zmodyfikowany przeze mnie):
/*niestandardowe przyciski formatowania tekstu*/ add_action("admin_footer", "eg_quicktags"); funkcja np_quicktags() ( ?>
/*niestandardowe przyciski formatowania tekstu*/ add_action ("admin_footer" , "eg_quicktags" ); funkcja np_quicktags()(
 |