Często w pośpiechu dodając materiały do serwisu lub np. tworząc nowy temat na forum, użytkownik może zacząć pisać zdanie (tytuł) małą (małą) literą. Jest to w pewnym stopniu błąd.
Pokażę kilka opcji rozwiązania tego problemu: PHP i CSS są bardziej odpowiednie dla już opublikowanych materiałów, gdy jQuery może poprawić sytuację przed publikacją.
Pierwsza litera ciągu pisana wielką literą w PHPW PHP istnieje funkcja o nazwie „ucfirst”, która po prostu konwertuje pierwszy znak ciągu znaków na wielkie litery, ale jego wadą jest to, że nie działa poprawnie z cyrylicą.
Aby to zrobić, napiszemy własną małą funkcję. Implementacja wyglądałaby następująco:
W tej wersji otrzymamy zdanie rozpoczynające się z dużej litery, a właśnie tego nam potrzeba.
Wielka pierwsza litera ciągu w CSSTa metoda jest wizualna (to znaczy w kod źródłowy propozycje witryn pojawią się bez zmian) również konwertuje pierwszy znak na wielką literę.
Sposób użycia jest następujący:
pierwsze zdanie
drugie zdanie
trzecie zdanie
czwarte zdanie
#content p:first-letter ( przekształcenie tekstu: wielkie litery; )Używając pseudoelementu „pierwsza litera” i właściwości „przekształcanie tekstu”, ustalamy wygląd każdej pierwszej litery akapitu.
Pierwsza litera ciągu pisana wielką literą w jQueryJak wspomniałem wcześniej, ta metoda konwersji najlepiej sprawdza się w przypadku materiałów, które nie zostały jeszcze opublikowane.
Przykładowo weźmiemy pole tekstowe (będzie pełnić rolę pola do wpisania tytułu) i napiszemy do niego mały skrypt, który wpisując zdanie małą literą sprawi, że będzie ono pisane wielką literą:
$(dokument).ready(function() ( $(.content").on("keyup", funkcja() ( var tekst = $(this).val(); var nowy_tekst = tekst.charAt(0) .toUpperCase() + tekst.substr(1); $(this).val(nowy_tekst ));
Skrypt działa zarówno podczas pisania tekstu, jak i po prostu podczas jego wstawiania. Nie zapominaj, że aby skrypty działały na Twojej stronie, musisz mieć włączoną bibliotekę jQuery.
W HTML rozmiar czcionki odgrywa ważną rolę. Pozwala zwrócić uwagę użytkownika ważne informacje, zamieszczone na stronie serwisu. Chociaż nie tylko wielkość liter jest ważna, ale także ich kolor, grubość, a nawet rodzina.
Tagi i atrybuty podczas pracy z czcionkami HTMLJęzyk hipertekstowy posiada szeroką gamę narzędzi do pracy z czcionkami. W końcu formatowanie tekstu jest głównym zadaniem HTML.
Powód powstania Język HTML Wystąpił problem z przeglądarkami wyświetlającymi reguły formatowania tekstu.
Przyjrzyjmy się tagom używanym do pracy z czcionkami w HTML i ich atrybutom. Najważniejszym z nich jest tag. Korzystając z wartości jej atrybutów, możesz ustawić kilka cech czcionki:
Obsługiwane są dodatnie wartości atrybutów od 1 do 7.
Formatowany jest tylko tekst znajdujący się pomiędzy częściami sparowanego znacznika czcionki. Pozostała część tekstu jest wyświetlana standardową czcionką domyślną.
Również w HTML istnieje wiele sparowanych tagów, które określają tylko jedną regułę formatowania. Należą do nich:
Zwykły tekst
Pogrubiony tekst
Pogrubiony tekst
Więcej niż zwykle
Mniej niż zwykle
Kursywa
Kursywa
Z podkreśleniem
Przekreślone
Możliwości atrybutów styluOprócz opisanych tagów istnieje jeszcze kilka sposobów zmiany czcionki w HTML. Jednym z nich jest użycie atrybutu stylu ogólnego. 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ę czcionek. Możliwe jest wyświetlenie wielu wartości.
Zmiana czcionki w HTML na następną wartość nastąpi, jeśli poprzednia rodzina nie jest ustawiona system operacyjny użytkownik .
Składnia pisania:
rodzina czcionek: nazwa-czcionki [, nazwa-czcionki[, ...]]
2) rozmiar czcionki – rozmiar ustawia się 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 | rozmiar względny | znaczenie | zainteresowanie | dziedziczyć
Możesz także ustawić rozmiar czcionki:
Rozmiar czcionki: 7
Rozmiar czcionki: 24 piksele
Rozmiar czcionki: x-duży
Rozmiar czcionki: 200%
Rozmiar czcionki: 24 pkt
3) styl czcionki – ustawia styl pisania czcionki. Składnia:
styl czcionki: normalny | kursywa | ukośny | dziedziczyć
Wartości:
Przykład zmiany czcionki w HTML przy użyciu tej właściwości:
styl czcionki:inherit
styl czcionki: kursywa
styl czcionki: normalny
styl czcionki: ukośny
4) wariant czcionki – konwertuje wszystkie wielkie litery na wielkie litery. Składnia:
wariant czcionki: normal | małe spółki | dziedziczyć
Przykład zmiany czcionki w HTML za pomocą tej właściwości:
wariant czcionki:inherit
wariant czcionki:normalny
wariant czcionki: małe kapitaliki
5) waga czcionki – pozwala ustawić grubość tekstu (nasycenie). Składnia:
grubość czcionki: pogrubiona|odważniejsza|jaśniejsza|normalna|100|200|300|400|500|600|700|800|900
Wartości:
grubość czcionki: pogrubiona
waga czcionki: pogrubiona
waga czcionki: jaśniejsza
waga czcionki: normalna
waga czcionki: 900
waga czcionki: 100
właściwość czcionki HTML i kolor czcionkiCzcionka to kolejna właściwość kontenera. Wewnątrz siebie łączył wartości kilku właściwości przeznaczonych do zmiany czcionek. składnia czcionki:
czcionka: rozmiar czcionki rodzina czcionek | dziedziczyć
Można także ustawić wartość czcionek używanych przez system w napisach różne elementy sterownica:
czcionka:ikona
czcionka: podpis
czcionka:menu
czcionka: Message-Box
mały podpis
czcionka:pasek stanu
czcionka: kursywa 50 pikseli pogrubiona „Times New Roman”, Times, szeryfowa
Aby ustawić kolor czcionki w HTML, możesz użyć właściwości color. Umożliwia ustawienie koloru za pomocą słowo kluczowe oraz w formacie rgb. A także w kodzie szesnastkowym.
Czapki CSS pomagają przełamać monotonię ogólnego projektu, w którym tekst wygląda tak samo od początku do końca.
Pierwsze litery kiedyś i dziśKronikarze używali wielkich liter w rękopisach pisanych odręcznie, niektóre z nich pochodzą z V wieku. Wielkie litery nadal był używany od VIII do XV wieku, kiedy prasy drukarskie umożliwiły przeniesienie druku na poziom przemysłowy. Na początku tekstu umieszczono zarówno pisane odręcznie, jak i drukowane litery początkowe. Często dekorowano je dekoracyjnym wzorem, który znajdował się wokół litery.
Podniesione i upuszczone litery są nadal używane. Można je spotkać w gazetach, czasopismach i książkach, a także w druku cyfrowym. Typ podwyższony jest czasami nazywany typem wydłużonym. Są one umieszczone równo z dołem tekstu, który za nimi podąża. Pominięte litery są umieszczone równo z górna część tekst, czasami w warstwie za główną treścią tekstową lub reszta tekstu otacza je.
Podniesione litery są znacznie łatwiejsze do zdefiniowania, ponieważ są zrównane z resztą tekstu i zwykle nie wymagają zmiany zawijania zewnętrznych marginesów. Pominięte litery wymagają więcej dokładne strojenie. Łatwiej będzie ci to zrozumieć, jeśli najpierw zrozumiesz, jak obsługiwane są podniesione znaki.
Korzystanie z klasProjektanci, którzy już rozumieją CSS, wiedzą, że muszą stworzyć osobną klasę CSS dla pierwszej dużej litery.
Kod CSS elementu akapitu i klasy tworzącej literę wyglądałby następująco:
p (rozmiar czcionki: 20 pikseli; rodzina czcionek: Georgia, „Times New Roman”, Times, serif;).myinitialcaps (rozmiar czcionki: 48 pikseli; rodzina czcionek: Didot;)
A kod HTML będzie wyglądał następująco:
Co nam daje:
Wydaje się zbyt łatwe? Właściwie będziesz musiał dokonać zmian w zależności od konkretnych podniesionych liter, ponieważ każda wielka litera wymaga specjalnego kerningu. Po wybraniu czcionki dla wypukłych liter i tekstu podstawowego należy utworzyć osobne klasy dla każdej wypukłej litery. W poniższym pliku CSS class.myinitialcapsi margines po prawej stronie jest ustawiony na wartość ujemną, aby zmniejszyć odległość między I i n .
Myinitialcapsi (rozmiar czcionki: 48px; rodzina czcionek: Didot; prawy margines: -1px;)
W tym przypadku pomiędzy „I” i „n” jest dodatkowa spacja.
Włączenie nowej klasy z ujemnym marginesem przybliża sprawę.
W zależności od rozdzielczości ekranu w powyższym przykładzie, I i n mogą wyglądać, jakby były rozmazane. Dzieje się tak za sprawą szeryfów na końcach liter. Dlatego przed wyborem ostatecznej opcji Style CSS, przetestuj witrynę na różne urządzenia, aby zobaczyć, jak tekst będzie wyglądał pisany wielkimi literami litery CSS.
Cytaty i inne szczególne przypadkiMożesz powiększyć nie tylko litery na początku tekstu. Możesz zaimplementować inną klasę, aby utworzyć większą wersję cudzysłowów, która pojawi się obok litery. W naszym przypadku ani klasa liter o rozmiarze 48, ani klasa tekstu o rozmiarze 20 pikseli nie nadaje się do cudzysłowu. Będzie to raczej coś pośredniego – 30 pikseli. Przesuniemy cudzysłowy o 4 piksele w dół, aby optycznie wyrównać je z I:
Myinitialcapsq (rozmiar czcionki: 30 pikseli; rodzina czcionek: Didot; float: lewy; margines górny: 4 piksele;)
„Włączenie” nowej klasy z ujemnym marginesem przybliża ją do siebie.
Należy bardzo uważać przy ustawianiu wielkich liter CSS wraz z cudzysłowami, tak aby ich kerning i wyrównanie odpowiadały otaczającym znacznikom. 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 musisz zrobić z okrągłymi literami, takimi jak C, G, O i Q. W tym przykładzie zastosowano rozmiary czcionek 20, 30 i 48. Rozmiary należy jednak wybrać w oparciu o wybrane czcionki. A także rozmiary i rozdzielczości ekranów, na których będzie przeglądana witryna.
Pseudoelementy i pseudoklasyKorzystając z pseudoelementu CSS, możesz łatwo utworzyć podwyższoną literę, dodając ::first-letter do elementu akapitu. Użyj :first-letter (z jednym dwukropkiem) w starszych przeglądarkach:
p (rozmiar czcionki: 1,2 em; rodzina czcionek: Georgia, „Times New Roman”, Times, serif; wysokość linii: 2 em; dopełnienie-dolne: 1,2 em;) p:: pierwsza litera ( rozmiar czcionki: 3.6em; transformacja tekstu: wielkie litery; rodzina czcionek: „Monotype Bernard Condensed”, szeryf; prawy margines: 0.03em;).initialb (prawy margines: -0.1em;).initialn (prawy margines: -0.15 oni;)
Kod HTML zawierający klasy CSS uwzględniające kerning liter N i B wyglądałby tak...
Pierwsza litera, przy czym pierwsza litera jest wielką literą.
W przypadku podziału wiersza następny wiersz nie ma początkowego limitu.
Zwróć uwagę w źródle HTML, jak pierwsza litera, a nie wielka litera w kodzie HTML, zostaje powiększona do początkowego rozmiaru czapki wynoszącego 3,6 em. Niezły, co?
Ale po twardym powrocie i rozpoczęciu nowego akapitu zawsze tworzony jest kolejny początkowy limit. Być może zadajesz sobie pytanie: Jak mam to rozliczyć? Czy powinienem mieć początkowy limit na początku bardzo nowego akapitu? Cóż, mógłbyś. Ale czy chcesz, żeby tak to wyglądało i czy absolutnie musi tak wyglądać?
Pierwsza wielka litera akapitu jest konwertowana na literę.
Pierwsza litera po podziale wiersza nie zostanie zamieniona na wielką literę.
oZauważ, że w kodzie źródłowym HTML pierwsza litera nie jest wielka, ale jest konwertowana na znak 3,6em.
Jednak nawet po wymuszona przerwa wierszy, a na początku każdego nowego akapitu zawsze tworzona jest litera. Być może zadajesz sobie pytanie: Jak mam to uwzględnić? Czy we wszystkich tych przypadkach muszę dodawać litery? Cóż, możesz. Ale czy to konieczne?
Nawet biorąc pod uwagę 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 konwertuje pierwszą literę każdego nowego akapitu na wielką literę CSS. Może nie być odpowiedni dla niektórych, ponieważ nie trzeba konwertować pierwszej litery każdego akapitu.
Łączenie pseudoklas i pseudoelementów w celu stworzenia inteligentnego układuDodanie pseudoklasy :first-child pomaga rozwiązać problem niepotrzebnej konwersji pierwszych liter:
p (rozmiar czcionki: 1,2 em; rodzina czcionek: Georgia, „Times New Roman”, Times, serif; wysokość linii: 2 em; dopełnienie-dół: 0,5 em;) p:pierwsze dziecko:: pierwsza litera ( rozmiar czcionki: 3,6 em; transformacja tekstu: wielkie litery; rodzina czcionek: „Monotype Bernard Condensed”, prawy margines: 0,03 em;)
Łącząc ten kod z HTML:
Pierwsza litera zdefiniowana jako pierwsze dziecko jest jedyną literą, która przy użyciu tej metody jest konwertowana na podwyższony inicjał.
Ponieważ konwertowana jest tylko litera zdefiniowana jako pierwsze dziecko, należy zauważyć, że ten przykład różni się od poprzedniego, bez pierwszego dziecka. Ponadto nie konwertujemy pierwszych liter po początku akapitu i po wymuszonym podziale wiersza. Wygląda to bardziej elegancko niż układ po konwersji wszystkich pierwszych liter akapitów.
Zaletą stosowania 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 tyle sposobów, że aż kręci się w głowie. 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 na poniższym przykładzie wypukłych liter, czcionką Didot. Zwróć uwagę, jak atrybut marginesu został dodany po prawej stronie litery A. W przeciwnym razie „skleił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, szeryf; prawy margines: 5px;)
I wraz z HTML:
Na początku sekcji dla pierwszej litery określono podwyższony inicjał.
I nowy akapit...
Jeśli masz ochotę na eksperymenty, możesz wypróbować inne metody oprócz :first-child i :first-of-type . Na przykład taki jak :nth-of-type lub :nth-of-child, aby zobaczyć, jak te lub inne typy pseudoklas mogą zostać użyte do tekstu pisanego wielkimi literami w CSS. Niezależnie od tego, czy zastosujesz się do zasad opisanych w tym artykule, czy zaczniesz głębiej kopać, gdy nauczysz się pracować z pseudoklasami CSS First-child , :first-of-type i :first-letter , będziesz mógł zastosować je poprawnie do elementów HTML.
Inicjał (drop inicjał osadzony w tekście) to pierwsza litera akapitu, większa od pozostałych i umieszczona tak, że jej górna część znajduje się na poziomie pierwszego wiersza akapitu. Na obrazku widać przykład inicjału osadzonego w tekście.
Swoją drogą, WordPress ma specjalną wtyczkę (wordpress.org/extend/plugins/drop-caps), która pozwala na automatyczne tworzenie tekstu osadzonego (i przesuniętego w dół) wielkie litery. Niesamowity! Co jednak zrobić, jeśli nie chcesz używać wtyczki (jestem pewien, że nie chcesz) i po prostu musisz utworzyć inicjał dla wielu postów i być może w określonej lokalizacji?
Dobra wiadomość: Nie potrzebujesz wtyczki, aby tworzyć wielkie litery, wystarczy trochę css i tag span. Otwórz plik css i dodaj następujący kod:
Span.dropcaps ( rodzina czcionek: Gruzja, serif; kolor: #ccc; rozmiar czcionki: 46px; float: lewy; waga czcionki: 400; wysokość linii: 1em; margines-dolny: -0,4em; margines-prawy : 0,09em; pozycja: względna;
Coś takiego. Oczywiście będziesz potrzebować stylu pasującego do Twojego projektu i tekstu. Na przykład wartości właściwości: rozmiar czcionki, marginesy i wysokość linii będą musiały zostać wybrane w oparciu o projekt i tekst.
Zakres taguAby styl został zastosowany do dużej litery tekstu, należy „owinąć” dużą literę znacznikiem span i określić odpowiednią klasę.
A
Pseudoelement:pierwsza literaMożesz także nadać styl pierwszemu znakowi w tekście za pomocą pseudoelementu: First-letter . Jednakże do pseudoelementu:first-letter można zastosować ograniczoną liczbę właściwości: są to właściwości związane z czcionką, kolorem, tłem, obramowaniem, marginesami i dopełnieniem. Kolejną rzeczą wartą odnotowania jest to, że pseudoelement:pierwsza litera nie będzie działać w starszych przeglądarkach.
P:pierwsza litera (rodzina czcionek: Georgia, serif; kolor: #ccc; rozmiar czcionki: 46px; float: lewy; grubość czcionki: 400; wysokość linii: 1em; margines dolny: -0,4em; margines -po prawej: 0,09em; pozycja: względna;
Oto kilka metod edycji wielkich liter za pomocą CSS.
Określa, czy tekst elementu jest konwertowany na wielkie, czy wielkie litery. Gdy wartość jest inna niż none , wielkość liter w tekście źródłowym zostanie zmieniona.
Krótka informacjaNotatki| Wskazuje typ wartości. | ||
| A i B | Wartości muszą być wyprowadzane w określonej kolejności. | && |
| | B | Wskazuje, że należy wybrać tylko jedną wartość z proponowanych (A lub B). | normalne | kapitaliki |
| || B | Każda wartość może być używana niezależnie lub razem z innymi w dowolnej kolejności. | szerokość || liczyć |
| Grupuje wartości. | [przytnij || 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 jeden lub więcej razy, oddzielając je przecinkami. | # |
kapitalizacja Pierwszy znak każdego słowa w zdaniu będzie pisany wielką literą. Pozostałe symbole nie zmieniają swojego wyglądu. małe litery Wszystkie znaki tekstowe stają się małymi literami (małe litery). wielkie litery Wszystkie znaki tekstowe stają się wielkimi (wielkimi literami). none Nie zmienia wielkości liter.
PiaskownicaKubuś Puchatek nie miał nigdy nic przeciwko odrobinie poczęstunku, zwłaszcza o jedenastej rano, bo o tej porze śniadanie już dawno się kończyło, a obiad jeszcze się nie zaczął. I oczywiście był strasznie szczęśliwy, widząc, że Królik wyjmuje kubki i talerze.
div (przekształcenie tekstu: wielka litera; )
Przykładtransformacja tekstu h1 ( transformacja tekstu: wielkie litery; /* Wielkie litery */ ) p ( transformacja tekstu: wielka litera; /* Każde słowo zaczyna się od dużej litery */ ) Zabytek kultury średniowiecza
Nizina Amazonii jest nieumiarkowana w przypadku małego transportu kotów i psów, a Hajos Bahia słynie z czerwonych win.
Wynik ten przykład pokazany na ryc. 1.
Ryż. 1. Zastosowanie właściwości transformacji tekstu
Model obiektowyObiekt.style.textTransform
SpecyfikacjaKażda specyfikacja przechodzi kilka etapów zatwierdzania.
