Dostępna droga
Najlepszym rozwiązaniem jest obejrzenie 5-minutowego wideo Ethana, a następnie odniesienie do tego:
Sposób między przeglądarkami (dodatkowe znaczniki)
Po prostu zawiń pierwszy znak akapitu w zakres, a następnie wyceluj go w CSS i usuń styl.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Sposób CSS3 (bez dodatkowych znaczników)
Skieruj na pierwszy znak pierwszego akapitu za pomocą pseudoklasowych selektorów. Żadne dodatkowe znaczniki nie są potrzebne, ale brak obsługi IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )initial-lettersposób
Obsługa przeglądarki initial-letterjest dość skromna w chwili pisania tego tekstu, ale można ją wykorzystać do obliczenia liczby wierszy, które powinna zajmować litera z inicjałami, oraz rozmiaru czcionki, zamiast robić to samodzielnie.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Wsparcie przeglądarki
Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.
Pulpit
| Chrom | Firefox | TO ZNACZY | Brzeg | Safari |
|---|---|---|---|---|
| Nie | Nie | Nie | Nie | TP * |
Telefon komórkowy / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nie | Nie | Nie | 14, 0-14, 4 * |