Dowiedz się, jak używać CSS do tworzenia wymyślnych początkowych limitów dla akapitów. Istnieje nawet prosta technika wymiany obrazu, aby użyć graficznego obrazu do początkowej czapki.
Podstawowe style początkowych czapek
Istnieją trzy podstawowe style początkowych liter w dokumentach:
- Podniesiony - najczęściej, gdzie pierwsza litera jest większa i znajduje się w tym samym wierszu co bieżący tekst.
- porzucone - również dość powszechne, gdzie pierwsza litera jest większa i spadła poniżej pierwszego wiersza tekstu. Następnie pojawia się następujący tekst.
- Sąsiadujący - gdzie pierwsza litera znajduje się w jednej kolumnie obok reszty tekstu. Jest to bardziej powszechne w druku niż projektowanie stron internetowych.
Początkowe czapki lub kapsle są bardzo znane. Są świetnym sposobem na ubranie się w inne, długie i nudne fragmenty tekstu. A z właściwością CSS: pierwsza litera, możesz łatwo zdefiniować, jak sprawić, by twoje pierwsze listy były bardziej interesujące.
Utwórz prostą początkową czapkę
Wszystko, co musisz zrobić, aby stworzyć prosty podniesiony początkowy limit, to uczynić pierwszą literę twojego akapitu większym rozmiarem z pseudoelementem pierwszej litery:
p: pierwsza litera {font-size: 3em; }
Jednak wiele przeglądarek widzi, że pierwsza litera jest większa niż reszta tekstu na linii, więc sprawiają, że wiodąca jest równa temu, co miałoby sens w przypadku tej pierwszej litery, a nie w pozostałej części linii. Na szczęście można to łatwo naprawić za pomocą pseudoelementu pierwszego wiersza i właściwości height-height:
p: pierwsza litera {font-size: 3em; }
p: first-line {line-height: 1em; }
Graj z wysokością linii w dokumencie, aż znajdziesz właściwy rozmiar tekstu.
Graj za pomocą początkowej czapki
Kiedy już zrozumiesz, jak utworzyć początkową czapkę, możesz ubrać ją w fantazyjne ciuchy, aby ją wyróżniać. Graj kolorami, kolorami tła, ramkami lub cokolwiek, co ci się podoba. Dość prosty styl polega na odwróceniu koloru czcionki i koloru tła tylko dla pierwszej litery:
p: pierwsza litera {
rozmiar czcionki: 300%;
kolor tła: # 000;
kolor: #fff;
}
p: first-line {line-height: 100%; }
Kolejną sztuczką jest wyśrodkowanie pierwszej linii. Może to być trudne z CSS, ponieważ środek linii tekstu może być inny, jeśli układ jest elastyczny. Ale niektórzy bawią się wartościami, możesz wciskać pierwszą linię na tyle, aby pierwsza litera znajdowała się pośrodku. Po prostu baw się procentem tekstu wcięcia akapitu, dopóki nie będzie wyglądało dobrze:
p: pierwsza litera {
rozmiar czcionki: 300%;
kolor tła: # 000;
kolor: #fff;
}
p: first-line {line-height: 100%; }
Sąsiadujące początkowe czapki są trudne przy CSS
Sąsiednie początkowe czapki mogą być trudne w CSS, ponieważ różne przeglądarki wyświetlają różne czcionki. Ideą tworzenia przyległego ograniczenia w CSS jest użycie właściwości wcięcia tekstu w pierwszym wierszu, aby wypchnąć ją (w lewo) o wartość ujemną. Musisz także zmienić lewy margines tego akapitu o pewną kwotę. Graj z tymi liczbami, aż akapit wygląda dobrze.
p {
tekst-wcięcie: -2.5em;
margin-left: 3em;
}
p: pierwsza litera {font-size: 3em; }
p: first-line {line-height: 100%; }
Pierwsze naprawdę piękne początkowe czapki
Najlepszym sposobem na stworzenie fantazyjnej początkowej czapki jest zmiana czcionki na bardziej dekoracyjną rodzinę czcionek. Jeśli używasz serii czcionek, po których następuje ogólna czcionka, pomoże to zagwarantować, że początkowa czapka będzie dobrze widoczna, aby klienci mogli ją zobaczyć, bez problemów z dostępnością i użytecznością.
p: pierwsza litera {
rozmiar czcionki: 3em;
rodzina czcionek: "Edwardian Script ITC", "Brush Script MT", cursive;
}
p: first-line {line-height: 100%; }
I, jak zwykle, możesz umieścić wszystkie te sugestie razem, aby utworzyć początkowe ograniczenie reklamowe do Twojego akapitu.
Używanie graficznej nakładki początkowej
Jeśli mimo wszystko nadal nie podoba Ci się wygląd początkowych liter na stronie, możesz skorzystać z grafiki, aby uzyskać dokładnie taki efekt, jakiego szukasz. Ale zanim zdecydujesz się przejść bezpośrednio do grafiki, powinieneś zdawać sobie sprawę z wad tej metody:
- Klienci bez obrazów nie zobaczą początkowego ograniczenia i mogą nie widzieć ukrytego tekstu zastępowanego przez obraz. Może to spowodować, że akapit będzie niedostępny lub w najlepszym razie trudny do odczytania.
- Obrazy zawsze zwiększają czas pobierania strony. Jeśli masz dużo początkowych limitów, możesz znacznie wydłużyć czas pobierania czegoś, co wielu ludzi uzna za mało istotne.
- Niektóre przeglądarki wyświetlają zarówno ukrytą pierwszą literę, jak i obraz, dzięki czemu tekst akapitu może wydawać się dziwny.
- Jest bardzo trudno zautomatyzować tę opcję, ponieważ musisz dokładnie wiedzieć, jaka jest pierwsza litera, aby użyć poprawnej grafiki. Za każdym razem, gdy akapit jest edytowany, może być konieczne utworzenie nowej grafiki.
Najpierw musisz utworzyć grafikę pierwszej litery. Użyliśmy Photoshopa do stworzenia litery L z czcionką "Edwardian Script ITC". Zrobiliśmy to ogromne - 300pt. Następnie przycinaliśmy obraz do absolutnego minimum wokół litery i odnotowywaliśmy szerokość i wysokość obrazu.
Następnie stworzyliśmy klasę "capL" dla naszego akapitu. Tutaj definiujemy, jakiego obrazu użyć, wiodącego (wysokość linii) i tak dalej.
Musisz użyć szerokości i wysokości obrazu, aby ustawić wcięcie tekstowe akapitu i dopełnienie. Aby uzyskać obraz L, potrzebowaliśmy dopełnienia 95px i dopełnienia 72px.
p.capL {
wysokość linii: 1em;
background-image: url (capL.gif);
background-repeat: no-repeat;
tekst-wcięcie: 95 pikseli;
wyściółka: 72px;
}
Ale to nie wszystko. Jeśli zostawisz to tam, to pierwsza litera zostanie zduplikowana w akapicie, najpierw graficznie, potem w tekście. Więc dodaliśmy rozpiętość wokół tego pierwszego elementu z klasą "initial" i powiedzieliśmy przeglądarce, aby nie wyświetlała tej litery:
span.initial {display: none; }
Następnie grafika jest wyświetlana poprawnie. Możesz grać z wcięciem tekstu w akapicie, aby tekst został dopasowany aż do litery, ale chcesz ją wyświetlić.
