Umożliwia zmianę wielkości liter w tekście.

Wartość domyślna to none , która nie ma wpływu na tekst. Sprawa tekstu pozostaje taka sama. Wartości wielkie i małe litery konwertują znaki odpowiednio na wielkie i małe litery. Jeśli określisz wielkość liter , tylko pierwsze znaki każdego słowa będą pisane wielkimi literami. Dziedzicz dziedziczy wartość rodzica.

Przykład

h3 ( text-transform: wielkie litery; ) .lowercase ( text-transform: małe litery; ) .capitalize ( text-transform: wielkie litery; )

To jest tytuł. Ma właściwość text-transform zastosowana z wartością wielkiej litery. Wszystkie znaki będą pisane wielkimi literami.

Ten akapit ma właściwość Text-transform ustawioną na Małe litery, co oznacza, że ​​wszystkie litery będą pisane małymi literami.

A ten ostatni akapit ma właściwość text-transform zastosowaną z właściwością CAPITALIZE. Pierwsze litery każdego słowa będą pisane wielkimi literami i tylko one.

Wynik

Jednak nie wszystko jest takie proste. Jest kilka niuansów. Jeśli zwrócisz uwagę na drugi akapit powyższego przykładu, zauważysz, że słowo capitalize , pomimo właściwości text-transform zastosowanej do akapitu z wartością capitalize , jest wyświetlane w całości z wielkich liter, co odpowiada tekstowi źródłowemu. Wyjaśnia to fakt, że przy określonej wartości kapitalizacji sprawdzane są tylko pierwsze litery słów, a pozostałe pozostają niezmienione, niezależnie od ich stanu początkowego.
Mimo pozornej prostoty właściwość text-transform może być bardzo użyteczna. Na przykład, aby tekst wszystkich nagłówków H1 w Twojej witrynie był pisany wielkimi literami, wystarczy dodać jedną właściwość do arkusza stylów

H1 (przekształcenie tekstu: wielkie litery;)

i problem zostanie rozwiązany. I nie musisz ręcznie zmieniać wszystkich nagłówków, których może być bardzo, bardzo wiele.

Dzień dobry, maniacy budowlani. Dzisiejsza publikacja obejmie tematykę projektowania treści tekstowych. Dlatego dowiesz się, jak ustawia się wielkie litery w css - przy okazji zapoznaj się z kilkoma opcjami tworzenia wielkiej litery i oczywiście możesz wszystko wypróbować w praktyce. Cóż, teraz przejdźmy do najciekawszych!

Przekształćmy tekst

Dzięki kaskadowym arkuszom stylów możesz zmienić zarówno pierwszy znak bloku, jak i cały tekst. Powiem ci, jak możesz zrobić obie opcje. Ponadto wszystkie narzędzia wymienione w tym artykule są obsługiwane na trzech poziomach językowych: css1, css2, css2.1 i css3.

Zacznę od interesującej właściwości, która modyfikuje całą zawartość tekstową w wybranym . to transformacja tekstu.

Nazwany element może konwertować znaki na wielkie i małe litery, a także ustawiać każdy pierwszy znak słowa jako wielką literę. Więcej o wartościach pisałem w tabeli.

Teraz, aby skonsolidować materiał teoretyczny, rozważmy przykład.

Uwaga!

!Jutro wszystkie kosmetyki przecenione!

Promocja obowiązuje we wszystkich oddziałach znajdujących się w Twoim mieście.

Tworzenie inicjału

Jeśli nie wiesz, co oznacza termin „litera listowa”, czas się dowiedzieć, ponieważ jest to bezpośrednio związane z aktualnym tematem.

Pierwsza litera (lub czasem mówi się, że inicjał) jest pierwszą literą rozdziału, która różni się od pozostałych pod względem duży rozmiar, kolor, a w niektórych przypadkach nawet projekt czcionki. W życiu przykład takiego listu można znaleźć w starych rękopisach i książkach.

Istnieje kilka sposobów na stworzenie inicjału. Często postać jest wyróżniona znacznikiem języka znaczników a potem w stylach przepisać niektóre właściwości które go modyfikują. To dobry sposób, ale ta publikacja mówi o mechanizmach css (które moim zdaniem są w tym przypadku znacznie bardziej logiczne i wygodne w użyciu).

Aby rozwiązać ten problem, możesz użyć narzędzia takiego jak.

Tak więc w tym przypadku używana jest pierwsza litera. Jak wszystkie pseudoelementy, jest on dołączany do selektora dwukropkiem. Po wszystkich regułach arkuszy stylów określone są właściwości. Można jednak zastosować tylko te właściwości, które dotyczą edycji czcionek, wcięć, kolorów, tło, marginesy i granice.

Proponuję rozważyć konkretny przykład. Wdrażanie prezentowanego mały program Postanowiłem zrobić nie tylko kolorowy kapturek, ale wypełnić go kwiatami. Aby to zrobić, musisz użyć kilku podchwytliwych sztuczek z ustawieniem koloru czcionki na przezroczysty i wypełnieniem litery wybranym obrazem.

Ten akapit zawiera bardzo ciekawe zdanie.

Kontynuujmy interesującą historię w następnym akapicie.

Uzyskany wynik wygląda bardzo atrakcyjnie i niecodziennie, co jest idealne rozwiązanie dla .

Jak widać, ten temat jest bardzo prosty. przyniesione przeze mnie kod programowania możesz z łatwością korzystać ze swoich zasobów internetowych, modyfikując i dopasowując się do swojego stylu.

Jeśli prezentowany materiał był dla Ciebie przydatny, zapisz się na aktualizacje mojego bloga i nie zapomnij podzielić się swoją wiedzą (i oczywiście linkiem do mojego bloga) ze znajomymi. Powodzenia!

PA pa!

Z poważaniem, Roman Chueshov

Wielkie litery CSS pomagają przełamać monotonię tego samego typu projektu, którego teksty od początku do końca wyglądają tak samo.

Listy wtedy i teraz

Kronikarze używali wielkich liter w rękopisach pisanych ręcznie, niektóre z nich pochodzą z V wieku. Wielkie litery były nadal używane od VIII do XV wieku, kiedy prasy drukarskie umożliwiły przeniesienie druku na poziom przemysłowy. Zarówno odręcznie, jak i drukowanymi literami umieszczono na początku tekstu. Często ozdabiano je dekoracyjnym wzorem, który znajdował się wokół litery.

Podniesione i opuszczone litery są nadal w użyciu. Można je znaleźć w gazetach, magazynach i książkach, a także w druku cyfrowym. Wypukłe litery są czasami nazywane wydłużonymi. Umieszcza się je równo z dołem następującego po nich tekstu. Upuszczone litery są umieszczane równo z górną częścią tekstu, czasami w warstwie za główną treścią tekstu, lub otacza je reszta tekstu.

Litery wypukłe są znacznie łatwiejsze do zdefiniowania, ponieważ są wyrównane z resztą tekstu i zwykle nie trzeba zmieniać zawinięcia zewnętrznych marginesów. Pominięte litery wymagają więcej strojenie. Łatwiej będzie ci się z tym uporać, jeśli najpierw zrozumiesz, jak obchodzi się z podniesionymi postaciami.

Korzystanie z zajęć

Projektanci, którzy już rozumieją CSS, wiedzą, jak stworzyć osobną klasę CSS dla pierwszej wielkiej litery.

Kod CSS elementu akapitu i klasy, która tworzy literę, wyglądałby tak:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

A kod HTML będzie wyglądał tak:

Co nam daje:

Wydaje się zbyt łatwe? W rzeczywistości będziesz musiał dokonać korekt w zależności od konkretnych liter wypukłych, ponieważ każda wielka litera wymaga specjalnego kerningu. Po wybraniu czcionki dla wypukłych liter i tekstu podstawowego, musisz utworzyć osobne klasy dla każdej wypukłej litery. Poniżej CSS class.myinitialcapsi margines po prawej jest ujemny, aby zmniejszyć odległość między I i n .

Myinitialcapsi(rozmiar czcionki:48px; rodzina czcionek: Didot; margines prawy:-1px;)

I W tym przypadku między „I” i „n” jest dodatkowa spacja.

I dodanie nowej klasy z ujemną marżą przybliża ją.

W zależności od rozdzielczości ekranu w powyższym przykładzie, I i n mogą wyglądać, jakby się połączyły. Wynika to z szeryfów na końcach liter. Dlatego przed wybraniem ostatecznych stylów CSS przetestuj witrynę na różne urządzenia aby zobaczyć, jak wygląda na nich tekst CSS.

Cytaty i inne szczególne przypadki

Możesz zwiększyć nie tylko litery na początku tekstu. Możesz zaimplementować inną klasę, aby utworzyć większą wersję cudzysłowów, które pojawią się obok litery. W naszym przypadku ani klasa liter o rozmiarze 48, ani klasa tekstu 20 pikseli nie nadaje się do cytatów. Będzie to raczej coś pomiędzy – 30 pikseli. Przesuwamy cudzysłowy w dół o 4 piksele, aby optycznie wyrównać je z I :

Myinitialcapsq (rozmiar czcionki:30px; rodzina czcionek: Didot; float:left; margines górny:4px;)

“I włączenie” nowej klasy z ujemną marżą przybliża ją.

Należy być bardzo ostrożnym przy określaniu każdej z wielkich liter CSS wraz z cudzysłowami, aby ich kerning i wyrównanie pasowały do ​​otaczającego znacznika. Na przykład litera T będzie musiała zostać przesunięta w lewo, nieco poza krawędź akapitu, aby jej poprzeczna linia wizualnie pasowała do układu. To samo będziesz musiał zrobić z okrągłymi literami, takimi jak C, G, O i Q. W tym przykładzie użyto czcionek o rozmiarach 20, 30 i 48. Musisz jednak dostosować rozmiary w oparciu o wybrane czcionki. A także rozmiary i rozdzielczości ekranów, na których będzie przeglądana strona.

Pseudoelementy i pseudoklasy

Używając pseudoelementu CSS, możesz łatwo utworzyć wypukłą literę, dodając ::first-letter do elementu akapitu. Użyj :pierwsza litera ( z jednym dwukropkiem) dla starszych przeglądarek:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:1.2em;) p::first-letter ( font-size: 3,6em; przekształcenie tekstu: wielkie litery; rodzina czcionek: "Monotype Bernard Condensed", szeryf; prawy margines: 0,03 em;) .initialb (prawy margines: -0,1 em;) .initialn (prawy margines: -0,15 im ;)

Kod HTML zawierający klasy CSS uwzględniające kerning liter N i B będzie wyglądał tak…

Pierwsza litera, przy czym pierwsza litera jest wielką literą.
Z przerwanie linii, następny wiersz nie ma początkowego limitu.

n zauważ w źródle HTML, jak pierwsza litera, a nie wielka litera w kodzie HTML, jest dopasowywana do początkowego rozmiaru nasadki wynoszącego 3,6 em. Schludny, co?

B ale z twardym powrotem i początkiem nowego akapitu, zawsze tworzony jest inny początkowy limit. Możesz zadać sobie pytanie Jak mam to rozliczyć? Czy powinienem mieć inicjałową czapkę na początku bardzo nowego akapitu? Cóż, mógłbyś. Ale czy chcesz, żeby tak wyglądało i czy to koniecznie musi tak wyglądać?

Pierwsza wielka litera akapitu jest konwertowana na literę.
Pierwsza litera po łamaniu wiersza nie będzie pisana wielkimi literami.

o Należy pamiętać, że w kod źródłowy W HTML pierwsza litera nie jest pisana wielką literą, ale jest konwertowana na znak 3,6 em.

O Jednak nawet po wymuszonym złamaniu wiersza na początku każdego nowego akapitu zawsze tworzona jest litera. Możesz zadać sobie pytanie: Jak mogę to wziąć pod uwagę? Czy muszę dodawać litery we wszystkich tych przypadkach? Cóż, możesz. Ale czy to konieczne?

Mimo korzyści, jakie zapewniają pseudoelementy, musieliśmy dodać dużo kodu, aby zdefiniować oddzielne klasy do obsługi problemów z kerningiem i dopełnieniem. Ale ta metoda przekonwertuje pierwszą literę każdego nowego akapitu na wielkość CSS. Dla niektórych może to nie być odpowiednie, ponieważ nie trzeba konwertować pierwszej litery każdego akapitu.

Łączenie pseudoklas i pseudoelementów w celu stworzenia inteligentnego układu

Dodanie pseudoklasy :first-child pomaga rozwiązać problem niepotrzebnej konwersji pierwszych liter:

p ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em; padding-bottom:0.5em;) p:first-child::first-letter ( rozmiar czcionki: 3,6 em; transformacja tekstu: wielkie litery; rodzina czcionek: „Monotype Bernard Condensed”, szeryf; margines prawy: 0,03 em;)

Łącząc ten kod z HTML :

Pierwsza litera zdefiniowana jako pierwsza podrzędna jest jedyną literą, która w tej metodzie jest konwertowana na podniesiony inicjał wpuszczany.

Ponieważ konwertowana jest tylko litera zdefiniowana jako pierwsze dziecko, zauważ, że ten przykład różni się od poprzedniego bez pierwszego dziecka. Ponadto nie konwertujemy pierwszych liter po początku akapitu i po wymuszonym łamaniu wiersza. Wygląda to bardziej elegancko niż wygląd układu po przekonwertowaniu wszystkich pierwszych liter akapitów.

Zaletą używania pseudoklas jest możliwość obsługi różnych specjalnych przypadków. A co z wadami? Istnieje wiele różnych pseudoklas i można je łączyć na tak wiele sposobów, że przyprawia o zawrót głowy. Na przykład pseudoklasy :first-child i :first-of-type mogą dać te same wyniki. Możesz również zastosować pseudoklasę nie tylko do akapitu, ale także do elementów

lub

. Na przykład, jak pokazano w poniższym przykładzie z podniesionymi literami czcionką Didot. Zwróć uwagę, jak atrybut margin został dodany po prawej stronie A . W przeciwnym razie „skleiłby się” z literą s na początku sekcji:

section ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; transformacja tekstu: wielkie litery; rodzina czcionek:Didot, szeryf; margines prawy:5px;)

A wraz z HTML :

Na początku sekcji pierwsza litera jest ustawiona na dużą literę wypukłą.

I nowy akapit...

Jeśli masz ochotę poeksperymentować, możesz wypróbować różne metody oprócz :first-child i :first-of-type . Na przykład, takie jak :nth-of-type lub :nth-of-child , aby zobaczyć, jak niektóre typy pseudoklas mogą być używane w tekście CSS pisanym wielkimi literami. Niezależnie od tego, czy zastosujesz się do zasad przedstawionych w tym artykule, czy zaczniesz zagłębiać się w szczegóły, gdy nauczysz się pracować z pseudoklasami CSS first child , :first-of-type i :first-letter , będziesz w stanie prawidłowo zastosować je do elementów HTML.

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ędzia czcionek. 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ż znaczniki 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:

• - ustawia pogrubioną czcionkę w html. Etykietka podobny w działaniu do poprzedniego;
• - rozmiar jest większy niż domyślny;
• — mniejszy rozmiar czcionka;
• - 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 zwiększania 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 jak zmienić czcionkę 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 | małe czapki | dziedziczyć

Przykład jak zmienić czcionkę w html za pomocą tej właściwości:

wariant czcionki:dziedzicz

wariant czcionki:normalny

wariant czcionki:małe litery

5) grubość czcionki - pozwala ustawić grubość 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ć

Wartość można również ustawić na czcionki używane przez system w napisach na różne elementy sterownica:

• 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

Aby ustawić kolor czcionki w html, możesz użyć właściwości color. Pozwala ustawić kolor, tak jak w przypadku słowo kluczowe, a także in format rgb. A także w postaci kodu szesnastkowego.

lub więcej o literach i formatowaniu HTML CSS

Rozdział zawiera przykłady formatowanie liter z obszaru znaczników hipertekstowych.

W menu po lewej stronie znajdziesz nowoczesne i bardzo szczegółowe samouczki HTML.

Pozwolą Ci stworzyć swoją stronę internetową za pomocą czysta karta patrząc nieco niżej.

To może być interesujące.

Epoka społeczeństwo informacyjne

Ludzkość wkroczyła w nowy okres swojego rozwoju, w którym niezwykle ważną rolę odgrywają technologie informacyjne i sieciowe. Żyjemy w epoce społeczeństwa informacyjnego, która charakteryzuje się szybkim rozwojem technologii informacyjnych i telekomunikacyjnych. Wraz z pojawieniem się komputera i Internetu rozpoczęły się ogromne zmiany. Komputer i Internet zmuszają społeczeństwo do formułowania nowych norm zachowania, zasad i ideałów. Internet jest dla nowej generacji tym, czym telewizja była dla poprzedniej generacji. Ale Global Network jest znacznie bardziej funkcjonalna niż telewizja, ponieważ daje możliwość dokonywania zakupów, sprzedaży, komunikacji ofertowej i różne drogi wyrażanie siebie, takie jak tworzenie osobiste strony i witryny internetowe.

Litery HTML: duże i małe litery

Przykład formatowania listu:

Wynik formatu:

Przykład dowolnego tekstu pisanego wielkimi literami

Przykład dowolnego tekstu pisanego wielkimi literami

tagi - określać wielkie litery(Te tagi nie są obsługiwane w HTML 5).

css code style="text-transform:wielkie litery" - definiuje wielkie litery.

Innymi słowy, wielkie litery są zdefiniowane za pomocą za pomocą CSS atrybuty.

Litery HTML i odstępy CSS między nimi

Przykład formatowania listu:

Wynik formatu:

Arbitralny tekst HTML oraz odstępy CSS między literami w 2 pikselach

Opis atrybutów i wartości:

css styl kodu = "odstępy między literami: 2px" - definiuje Odstępy między literami CSS.

Poszukaj podobnych przykładów formatowania w menu po lewej stronie. Dziękuję za uwagę.