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 wielkie litery Z za pomocą CSS.
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 in wielkie litery w PHPW PHP istnieje funkcja o nazwie „ucfirst”, która po prostu konwertuje pierwszy znak linii na wielkie litery, ale jej 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.
Witam czytelników tego bloga. Dzisiaj opowiem o tym, jak za pomocą CSS można utworzyć wszystkie wielkie litery. Oczywiście możesz to włączyć Caps Lockiem i napisz wymagany tekst, ale jest to dość prymitywna metoda. Ale co, jeśli chcesz wyróżnić osobny akapit w gotowym artykule?
Zmiana wszystkich liter na duże w CSSIstnieje do tego właściwość text-transform, która, jak można się domyślić, przekształca tekst. Ma następujące wartości:
To w zasadzie wszystko, co musisz wiedzieć. Pozostaje tylko dowiedzieć się, jak uzyskać dostęp do żądanego elementu. Wyobraźmy sobie ten przykład: musisz napisać piąty akapit artykułu wielkimi literami. Jak można to wdrożyć?
Jak dotrzeć do pożądanego elementu?Jak wiadomo, akapit tworzy się za pomocą sparowanego znacznika HTML, którego cała treść staje się akapitem. Pozostaje tylko zdefiniować dla niego nową klasę stylu:
Teraz mamy możliwość dostępu do tego konkretnego akapitu za pośrednictwem języka CSS bez wpływu na resztę. Możesz to zrobić w ten sposób:
Wielka litera (
Transformacja tekstu: wielkie litery;
}
Ta metoda jest odpowiednia, gdy chcesz wyróżnić fragment w konkretnym artykule. A co jeśli wszystkie strony powinny mieć konkretny tekst wielkimi literami. W takim przypadku lepiej umieścić blok w pliku szablonu, aby nie zapisywać go za każdym razem.
A może musisz wyróżnić drugi akapit w każdym artykule, używając CSS pisanymi wielkimi literami. Wtedy będzie Ci odpowiadać inna opcja. Znajdź blok, w którym pojawia się artykuł i uzyskaj dostęp do drugiego akapitu, używając pseudoklasy n-tego dziecka. W w tym przykładzie Nasz blok artykuł ma klasę artykuł.
Artykuł p:n-te-dziecko(2)(
Transformacja tekstu: wielkie litery
}
Jak widać, dla każdego konkretnego przypadku istnieje inne rozwiązanie. Najważniejszą rzeczą jest to, aby pamiętać o właściwości text-transform, która zmienia wielkość liter.
Generalnie nie zaleca się wyświetlania tekstu w ten sposób, gdyż znacznie pogarsza to jego percepcję, jednak niektóre szczególnie istotne fragmenty można wyróżnić.
Dzisiaj przyjrzeliśmy się właściwości tekstu-transformacji. Zapisz się do bloga, aby otrzymywać nowe artykuły.
Umożliwia zmianę wielkości liter w tekście.
Wartość domyślna jest ustawiona na none, co nie ma wpływu na tekst. Sprawa tekstu pozostaje taka sama. Wartości wielkich i małych liter konwertują odpowiednio znaki na wielkie i małe litery. Jeśli określisz capitalize , tylko pierwsze znaki każdego słowa będą pisane wielką literą. Dziedzicz dziedziczy wartość elementu nadrzędnego.
Przykład h3 (przekształcenie tekstu: wielkie litery; ) .lowercase ( przekształcenie tekstu: małe litery; ) .capitalize ( przekształcenie tekstu: wielkie litery; ) przekształcenie tekstu To jest nagłówek. Zastosowano do niego właściwość transformacji tekstu z wartością wielką literą. Wszystkie znaki będą wielkie.Do tego akapitu zastosowano właściwość Text-transform z wartością Smallcase, co oznacza, że wszystkie litery będą pisane małymi literami.
Do tego ostatniego akapitu zastosowano właściwość transformacji tekstu z właściwością CAPITALIZE. Pierwsze litery każdego słowa będą pisane wielkimi literami i tylko te.
WynikJednak nie wszystko jest takie proste. Jest kilka niuansów. Jeśli spojrzysz na drugi akapit powyższego przykładu, zauważysz, że słowo kapitalizacja , pomimo zastosowania właściwości transformacji tekstu do akapitu o wartości wielka litera , jest wyświetlane w całości wielkimi literami, co odpowiada tekstowi źródłowemu. Wyjaśnia to fakt, że przy określonej wartości wielkich liter sprawdzane są tylko pierwsze litery słów, a pozostałe pozostają niezmienione, niezależnie od ich stanu początkowego.
Pomimo pozornej prostoty, właściwość transformacji tekstu może być bardzo użyteczna. Na przykład, aby tekst wszystkich nagłówków H1 Twojej witryny 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 będziesz musiał ręcznie zmieniać wszystkich nagłówków, których może być bardzo, bardzo wiele.
