Wielka litera to z definicji element tekstu, który jest stosunkowo powiększony.Prawie wszystkie języki zaczynają zdanie od dużej litery. A projekt początku akapitu z wystającą wielką literą pozwala uporządkować tekst i ułatwia jego percepcję. Podczas projektowania strony internetowej tekst może być napisany zgodnie z preferencjami autora i zasadami języka rosyjskiego. Ponadto jego projekt można „zautomatyzować”, wprowadzając określone „polecenia” do pliku z rozszerzeniem css – arkusza stylów – lub uzupełnić plik HTML sekcja stylu. CSS jest zwykle studiowany dodatkowo z html, aby szybko zmienić niektóre elementy projektu na raz w całym tekście.

Jest to szczególnie prawdziwe, jeśli witryna ma setki stron, a wprowadzanie zmian na każdej z nich jest procesem bardzo czasochłonnym.

Jeśli używasz css, wielkie litery na początku każdego akapitu mogą wyglądać wyjątkowo. Na przykład poniższy kod, wpisany do html bez nawiasów, pozwala na to, aby tekst sformatowany tagiem „p” powiększył pierwszą literę – o 220% standardowego rozmiaru, żółty kolor- wartością koloru jest kolor żółty i zapisz go inną czcionką niż reszta tekstu - Georgia vs. batangche.

(<) style(>)

p: pierwsza litera (rodzina czcionek: Georgia; rozmiar czcionki: 220%; kolor: żółty;)

(<)/style(>)

Piękne wielkie litery można uzyskać, jeśli stworzysz własną czcionkę w formie obrazków - dla każdej litery osobny obrazek, na przykład w stylu staroruskim lub gotyckim. Można je narysować Następnie w wymaganych miejscach zamiast dużej litery można wstawić kod bez nawiasów (<) img src=”ссылка на место, где лежит картинка”(>). Dodatkowymi atrybutami będą wysokość i szerokość - szerokość i wysokość obrazu, które można ustawić w pikselach, aby współgrały z resztą tekstu. Przykład: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Nawiasy dookoła< и >usunąć.

Jeśli nie masz możliwości samodzielnego narysowania alfabetu, wielką literę można zaprojektować przy użyciu czcionek, które są swobodnie dostępne w Google (sekcja Czcionki) lub innych wyszukiwarkach i zasobach. W tym celu powyższy kod należy sformatować w następujący sposób:

(<) style(>)

p (rodzina czcionek: batangche; rozmiar czcionki: 93%;)

p: pierwsza litera (rodzina czcionek: Kelly+Slab; rozmiar czcionki: 220%; kolor: niebieski;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

Usługa Google umożliwia wybór jednego lub drugiego i zapewnia gotowe linki do wstawienia do html lub css. Zwracamy uwagę na fakt, że konieczne jest wybranie grupy czcionek - łacińskiej lub cyrylicy, ponieważ. prawie wszystkie czcionki łacińskie nie działają podczas formatowania tekstu w języku rosyjskim. NA ten moment Wyszukiwarka udostępnia bezpłatnie około 40 typów.

Wielką literę lub jej odpowiednik z małej litery można stylizować za pomocą właściwości transformacji tekstu CSS. Jeśli ustawisz wartość text transform: none w arkuszu stylów, tekst będzie wyglądał tak, jak go napisałeś. Aby przekonwertować wszystkie litery na małe, musisz ustawić wartość przekształcania tekstu: małe litery przez dwukropek i wielkie litery na duże. Ustawienie właściwości na przekształcanie tekstu: wielkie litery spowoduje, że każde słowo będzie zaczynać się wielką literą.

Określa, czy tekst elementu jest konwertowany na wielkie czy małe litery. Gdy wartość jest inna niż none , wielkość liter oryginalnego tekstu zostanie zmieniona.

krótka informacja

Notacja

	Opis	Przykład
<тип>	Określa typ wartości.	<размер>
A&&B	Wartości muszą być wyprowadzane w określonej kolejności.	<размер> && <цвет>
\| B	Wskazuje, że należy wybrać tylko jedną z sugerowanych wartości (A lub B).	normalny \| kapitalikami
\|\| B	Każda wartość może być używana samodzielnie lub w połączeniu z innymi w dowolnej kolejności.	szerokość \|\| liczyć
	Wartości grup.	[ przyciąć \|\| przechodzić]
*	Powtórz zero lub więcej razy.	[,<время>]*
+	Powtórz jeden lub więcej razy.	<число>+
?	Określony typ, słowo lub grupa jest opcjonalna.	wstawka?
(A, B)	Powtórz co najmniej A, ale nie więcej niż B razy.	<радиус>{1,4}
#	Powtórz raz lub więcej razy, oddzielając je przecinkami.	<время>#

Wartości

wielkie litery Pierwszy znak każdego słowa w zdaniu będzie pisany wielką literą. Pozostałe postacie nie zmieniają swojego wyglądu. małe litery Wszystkie znaki tekstu stają się małymi literami (małe litery). wielkie litery Wszystkie znaki tekstu są zamieniane na wielkie litery ( duże litery). none Nie zmienia wielkości liter.

Piaskownica

Kubuś Puchatek zawsze nie miał nic przeciwko odrobinie orzeźwienia, zwłaszcza o jedenastej rano, bo wtedy śniadanie już dawno się skończyło, a obiad nawet nie myślał o rozpoczęciu. I oczywiście był strasznie zadowolony, widząc, że Królik wyjął kubki i talerze.

div (transformacja tekstu: wielkie litery;)

Przykład

przekształcanie tekstu

Zabytek kultury średniowiecza

Nizina amazońska to niesłychana ilość kotów i psów, a Hajos Baia słynie z czerwonych win.

Wynik ten przykład pokazany na ryc. 1.

Ryż. 1. Stosowanie właściwości przekształcania tekstu

Model obiektowy

Obiekt.style.textPrzekształć

Specyfikacja

Każda specyfikacja przechodzi przez kilka etapów zatwierdzania.

Recommendation (Recommendation) - specyfikacja jest zatwierdzona przez W3C i rekomendowana jako standard.
Rekomendacja kandydata ( Możliwa rekomendacja) - grupa odpowiedzialna za standard jest usatysfakcjonowana, że spełnia on swoje cele, ale do wdrożenia standardu wymagane jest wsparcie społeczności deweloperskiej.
Proponowane zalecenie ( Sugerowane zalecenie) - na tym etapie dokument jest przekazywany Radzie Doradczej W3C do ostatecznego zatwierdzenia.
Robocza wersja robocza — Bardziej dojrzała wersja robocza po dyskusji i poprawkach do przeglądu społeczności.
szkic redaktora ( Projekt redakcyjny) jest wersją roboczą normy po wprowadzeniu zmian przez redaktorów projektu.
projekt ( Szkic specyfikacji) jest pierwszą wersją roboczą normy.

Dzień dobry, maniacy tworzenia witryn. Dzisiejsza publikacja poruszy temat projektowania treści tekstowych. Dlatego dowiesz się, jak ustawiane są wielkie litery css - przy okazji zapoznasz się z kilkoma opcjami tworzenia dużej litery i oczywiście możesz wypróbować wszystko w praktyce. Cóż, przejdźmy teraz 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. Co więcej, wszystkie wymienione w tym artykule narzędzia są obsługiwane w trzech wersjach językowych: css1, css2, css2.1 i css3.

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

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

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

Transformacja tekstu

Uwaga!

!Jutro wszystkie kosmetyki przecenione!

Promocja obowiązuje we wszystkich oddziałach zlokalizowanych w Twoim mieście.

Tworzenie inicjału

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

Początkowa litera (lub czasami mówią, że inicjał) to pierwsza litera rozdziału, która różni się od reszty dużym rozmiarem, kolorem, aw niektórych przypadkach nawet projektem czcionki. W życiu przykład takiego listu można znaleźć w starych rękopisach i książkach.

Istnieje kilka sposobów na utworzenie inicjału. Często znak jest wyróżniony znacznikiem języka znaczników a następnie pewne właściwości są określone w stylach, które je modyfikują. To dobry sposób, ale ta publikacja mówi o mechanizmach css (które moim zdaniem w ta sprawa o wiele 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. Podobnie jak wszystkie pseudoelementy, jest on dołączany do selektora za pomocą dwukropka. Po wszystkich regułach arkuszy stylów określane są właściwości. Można jednak zastosować tylko właściwości związane z edycją czcionek, dopełnieniem, kolorem, tłem, marginesami i obramowaniami.

Proponuję rozważyć konkretny przykład. Realizując przedstawiony mały program, postanowiłam zrobić nie tylko kolorową czapkę, ale wypełnić ją kolorami. Aby to zrobić, musisz użyć kilku podstępnych sztuczek z ustawieniem koloru czcionki na przezroczysty i wypełnieniem litery wybranym obrazem.

Wystający inicjał

Ten akapit zawiera bardzo ciekawe zdanie.

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

Uzyskany efekt wygląda bardzo atrakcyjnie i nietuzinkowo, co jest idealnym rozwiązaniem dla.

Jak widać, ten temat jest bardzo prosty. Możesz łatwo użyć kodu, który udostępniłem dla twoich zasobów sieciowych, modyfikując go i dopasowując do swojego stylu.

Jeśli przedstawiony materiał był dla Ciebie przydatny, zasubskrybuj 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 Czueszow

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

Listy kiedyś i teraz

Kronikarze używali wielkich liter w odręcznych rękopisach, z których niektóre pochodzą z V wieku. Wielkie litery były nadal używane od VIII do XV wieku, kiedy to prasy drukarskie umożliwiły przeniesienie druku na poziom przemysłowy. Zarówno odręczne, jak i drukowane duże litery zostały umieszczone na początku tekstu. Często zdobiono je ozdobnym wzorem, który znajdował się wokół litery.

Podniesione i opuszczone litery są nadal w użyciu. Można je znaleźć w gazetach, czasopismach i książkach, a także w druku cyfrowym. Wypukłe litery są czasami nazywane wydłużonymi. Są one umieszczane równo z dolną krawędzią następującego po nich tekstu. Pominięte litery są umieszczane na tym samym poziomie co szczyt tekst, czasami w warstwie za główną treścią tekstu lub reszta tekstu zawija się wokół nich.

Wypukłe litery są znacznie łatwiejsze do zdefiniowania, ponieważ leżą równo z resztą tekstu i zwykle nie wymagają zmiany zawijania zewnętrznych marginesów. Pominięte litery wymagają więcej strojenie. Łatwiej będzie ci sobie z tym poradzić, jeśli najpierw zrozumiesz, jak obsługiwane są podniesione postacie.

Korzystanie z klas

Projektanci, którzy już rozumieją CSS, wiedzą, jak utworzyć oddzielną klasę CSS dla pierwszej dużej litery.

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

p (rozmiar czcionki: 20px; rodzina czcionek: Georgia, „Times New Roman”, Times, szeryf;) .myinitialcaps (rozmiar czcionki: 48px; rodzina czcionek: Didot;)

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

Co daje nam:

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

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

I w tym przypadku między „I” a „n” jest trochę dodatkowej spacji.

I włączenie nowej klasy z ujemnym marginesem zbliża ją.

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

Cytaty i inne specjalne 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 letter o rozmiarze 48, ani klasa text o rozmiarze 20 pikseli nie nadają się do cudzysłowó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; margin-top:4px;)

“I włączając” nową klasę z ujemnym marginesem, zbliża ją.

Musisz być bardzo ostrożny podczas określania każdej z wielkich liter CSS wraz ze znakami cudzysłowu, aby ich kerning i wyrównanie pasowały do otaczających znaczników. Na przykład literę T trzeba będzie przesunąć w lewo, nieco poza krawędź akapitu, aby jej poprzeczna linia wizualnie pasowała do układu. Będziesz musiał zrobić to samo z okrągłymi literami, takimi jak C , G , O i Q . W tym przykładzie zastosowano rozmiary czcionek 20, 30 i 48. Będziesz jednak musiał dostosować rozmiary na podstawie wybranych czcionek. A także rozmiary i rozdzielczości ekranów, na których będzie przeglądana strona.

Pseudoelementy i pseudoklasy

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

p ( rozmiar czcionki: 1,2 em; rodzina czcionek: Georgia, „Times New Roman”, Times, szeryf; wysokość linii: 2 em; dopełnienie dołu: 1,2 em;) p:: pierwsza litera ( rozmiar czcionki: 3.6em; transformacja 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 ja ;)

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ą.
W przypadku podziału wiersza następny wiersz nie ma początkowego limitu.

N zauważ w źródle HTML, w jaki sposób pierwsza litera, a nie wielka litera w kodzie HTML, zostaje dostosowana do początkowego rozmiaru 3,6 em. Czysto, co?

B ut z twardym powrotem i rozpoczętym nowym akapitem, zawsze tworzony jest kolejny początkowy limit. Być może zadajesz sobie pytanie Jak mam to rozliczyć? Czy powinienem mieć początkową czapkę na początku bardzo nowego akapitu? Cóż, mógłbyś. Ale czy chcesz, żeby to tak wyglądało i czy to absolutnie musi tak wyglądać?

Pierwsza wielka litera akapitu jest konwertowana na literę.
Pierwsza litera po zakończeniu linii nie będzie pisana wielką literą.

O Proszę zauważyć, że w kod źródłowy W HTML pierwsza litera nie jest pisana wielką literą, ale jest konwertowana na znak 3.6em.

O Jednak nawet po wymuszonym podziale wiersza na początku każdego nowego akapitu zawsze tworzona jest litera. Możesz zadać sobie pytanie: Jak mogę to uwzględnić? Czy muszę dodawać litery dla wszystkich tych przypadków? Cóż, możesz. Ale czy to konieczne?

Pomimo korzyści, jakie zapewniają pseudoelementy, musieliśmy dodać dużo kodu, aby zdefiniować osobne klasy do obsługi problemów z kerningiem i dopełnieniem. Ale ta metoda konwertuje pierwszą literę każdego nowego akapitu na wielką literę 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 ( rozmiar czcionki: 1,2 em; rodzina czcionek: Georgia, „Times New Roman”, Times, szeryf; wysokość linii: 2 em; dopełnienie dołu: 0,5 em;) p: pierwsze dziecko:: pierwsza litera ( rozmiar czcionki: 3,6 em; transformacja tekstu: wielkie litery; rodzina czcionek: „Monotype Bernard Condensed”, szeryf; prawy margines: 0,03 em;)

Łącząc ten kod z HTML:

Pierwsza litera, która jest zdefiniowana jako pierwszy element podrzędny, jest jedyną literą, która w tej metodzie jest konwertowana na wypukły inicjał.

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 rozpoczęciu akapitu i po wymuszonym złamaniu linii. Wygląda to bardziej elegancko niż układ wyglądał po przekonwertowaniu wszystkich pierwszych liter akapitów.

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

Lub

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

sekcja (rozmiar czcionki: 1.2em; rodzina czcionek: Georgia, „Times New Roman”, Times, serif; wysokość linii: 3em;) sekcja>p:pierwsze dziecko:pierwsza-litera (rozmiar czcionki: 4em; transformacja tekstu: wielkie litery; rodzina czcionek: Didot, serif; prawy margines: 5px;)

I razem z HTMLem:

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

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 :nth-of-type lub :nth-of-child , aby zobaczyć, jak niektóre typy pseudoklas mogą być używane do tekstu CSS pisanego wielkimi literami. Niezależnie od tego, czy zastosujesz się do zasad przedstawionych w tym artykule, czy zaczniesz kopać głębiej, 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.

lub szczegółowo o literach i HTML formatowanie CSSa

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

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

Pozwolą Ci stworzyć witrynę od podstaw patrząc trochę niżej.

To może być interesujące.

Epoka społeczeństwo informacyjne

Ludzkość wkroczyła w nowy okres swojego rozwoju, w którym informacje i technologie sieciowe odgrywają niezwykle ważną rolę. Żyjemy w dobie społeczeństwa informacyjnego, które charakteryzuje szybki rozwój technologii informacyjnych i telekomunikacyjnych. Wraz z pojawieniem się komputera i Internetu zaczęły się ogromne zmiany. Komputer i Internet popychają społeczeństwo do formułowania nowych norm zachowania, zasad i ideałów. Internet jest dla nowego pokolenia tym, czym telewizja była dla poprzedniego pokolenia. Ale Sieć globalna o wiele bardziej funkcjonalna niż telewizja, ponieważ daje możliwość dokonywania zakupów, sprzedaży, oferuje komunikację i różne sposoby wyrażania siebie, takie jak tworzenie osobiste strony internetowe i witryny.