Plan kursów

Zaawansowane tutoriale CSS

• Dodatkowa lektura CSS
• Wprowadzenie do CSS
• Podstawowa gramatyka CSS
• Zaawansowana gramatyka CSS
• Wybieracze pochodne CSS
• Wybieracze id CSS
• Wybieracze klas CSS
• Tworzenie CSS
• Tło CSS
• Tekst CSS
• Czcionki CSS
• Listy CSS

Model okien CSS

• Przegląd modelu ramy CSS
• Wewnętrzne marginesy CSS
• Krawędzie CSS
• Zewnętrzne marginesy CSS
• Scalanie zewnętrznych marginesów CSS

Umieszczenie CSS

• Przegląd pozycjonowania CSS
• Pozycjonowanie względne CSS
• Pozycjonowanie absolutne CSS
• Pływ CSS

Selektory CSS

• Wybieracze elementów CSS
• Grupowanie wybieraczy CSS
• Szczegółowe wyjaśnienie wybieraczy klas CSS
• Szczegółowe wyjaśnienie wybieraczy id CSS
• Szczegółowe wyjaśnienie wybieraczy atrybutów CSS
• Wybieracze potomka CSS
• Wybieracze potomka CSS
• Wybieracze brata CSS

Kursy wyborowe

Polecane kursy:

• Skarbiec CodeW3C.com

Atrybuty tekstu w CSS definiują wygląd tekstu.

Poprzez atrybuty tekstu, możesz zmieniać kolor tekstu, odległość między znakami, wyśrodkowanie tekstu, dekorację tekstu, wcięcie tekstu itp.

Wcięcie tekstu

Wcięcie pierwszego wiersza akapitu na stronie internetowej, jest to jeden z najczęściej używanych efektów formatowania tekstu.

CSS oferuje Atrybut text-indentTen atrybut ułatwia realizację wcięcia tekstu.

Dzięki użyciu atrybutu text-indent, pierwsze wiersze wszystkich elementów mogą być wyodrębnione o zadaną długość, nawet jeśli jest to wartość ujemna.

Najczęstszym zastosowaniem tej właściwości jest wcięcie pierwszej linii akapitu, poniższe reguły spowodują, że wszystkie akapity będą miały wcięcie pierwszej linii o 5 em:

p {wcięcie: 5em;}

Uwaga:Ogólnie rzecz biorąc, można zastosować text-indent do wszystkich elementów blokowych, ale nie można zastosować tej właściwości do elementów wierszowych, takich jak obrazy. Jednak jeśli w pierwszej linii blokowego elementu (np. akapitu) znajduje się obraz, będzie on poruszał się razem z resztą tekstu w tej linii.

Wskazówka:Jeśli chcesz 'wcięć' pierwszą linię wewnętrznego elementu wiersza, możesz stworzyć ten efekt za pomocą lewego marginesu wewnętrznego lub zewnętrznego.

Użycie wartości ujemnych

text-indent można również ustawić na wartość ujemną. Wykorzystując tę technikę, można osiągnąć wiele interesujących efektów, takich jak 'wcięcie wiszące', gdzie pierwsza linia wiszy po lewej stronie reszty elementu:

p {wcięcie: -5em;}

Jednak ustawiając ujemną wartość dla text-indent, należy być ostrożnym, ponieważ dla akapitu z ujemną wartością, niektóre teksty pierwszej linii mogą wyjść poza lewą granicę okna przeglądarki. Aby uniknąć takich problemów wizualnych, zaleca się ustawienie zewnętrznego marginesu lub wewnętrznego marginesu dla ujemnego wcięcia:

p {wcięcie: -5em; wewnętrzny margines: 5em;}

Użycie wartości procentowych

Atrybut text-indent można ustawić na wszystkie jednostki długości, w tym wartości procentowe.

Procenty muszą być stosowane względem szerokości elementu nadrzędnego wcięcia. Inaczej mówiąc, jeśli ustawisz wartość wcięcia na 20%, pierwsza linia elementu będzie wcięta o 20% szerokości elementu nadrzędnego.

W następującym przykładzie wartość wcięcia wynosi 20% wartości elementu nadrzędnego, co wynosi 100 pikseli:

div {szerokość: 500px;}
p {wcięcie: 20%;}
<div>
<p>to jest akapit</p>
</div>

dziedziczenie

Atrybut text-indent można dziedziczyć, rozważ następujące znaczniki:

div#outer {szerokość: 500px;}
div#inner {wcięcie: 10%;}
p {szerokość: 200px;}
<div id="outer">
<div id="inner">niektóry tekst. niektóry tekst. niektóry tekst.</div>
<p>to jest akapit.</p>
</div>
</div>

Wprowadzone w tym znaczniku akapity będą wcięte o 50 pikseli, ponieważ ten akapit dziedziczy wartość wcięcia z elementu div o id 'inner'.

Poziome wyważenie

text-align To jest podstawowy atrybut, który wpływa naWiersz tekstuWzajemne wyważenia. Pierwsze trzy wartości są dość proste, ale czwarta i piąta są nieco bardziej złożone.

Wartości left, right i center powodują odpowiednio lewe, prawe i centralne wyważenie tekstu w elemencie.

Zachodnie języki są czytane od lewej do prawej, więc domyślna wartość text-align jest left. Tekst jest wyjustowany w lewym brzegu, a prawy brzeg jest ząbkowany (nazywa się to tekstem "od lewej do prawej"). Dla języków takich jak hebrajski i arabski, text-align ma domyślnie wartość right, ponieważ te języki są czytane od prawej do lewej. Niezaskakująco, center centralizuje każdą linię tekstu w elemencie.

Wskazówka:Centralizacja blokowych lub tabelowych elementów jest osiągana przez odpowiednie ustawienie lewego i prawego marginesu zewnętrznego na tych elementach.

text-align:center i <CENTER>

Możesz myśleć, że text-align:center działa tak samo jak element <CENTER>, ale w rzeczywistości są one bardzo różne.

<CENTER> nie tylko wpływa na tekst, ale także centralizuje cały element. text-align nie kontroluje wyważenia elementu, ale tylko wpływa na jego zawartość. Sam element nie przenosi się z jednego odcinka na inny, tylko tekst jest wpływany.

justify

Ostatnim atrybutem poziomym wyjustowanym jest justify.

W tekście wyjustowanym, końce wierszy tekstu są umieszczane na wewnętrznych granicach elementu rodzica. Następnie, dostosowuje się odległość między słowami i literami, aby długość każdego wiersza była równa. Możesz zauważyć, że tekst wyjustowany jest bardzo popularny w dziedzinie druku.

Należy zauważyć, że sposób rozciągania tekstu wyjustowanego do wypełnienia przestrzeni między granicami lewymi i prawymi rodzica zależy od agenta użytkownika (nie CSS). Szczegóły można znaleźć w Strona odniesienia CSS text-align.

Odstęp między literami

Atrybut word-spacingMożna zmienić standardową odległość między słowami (słowami). Domyślna wartość normalna jest taka sama jak ustawienie wartości na 0.

Atrybut word-spacing akceptuje wartość długości, zarówno dodatnią, jak i ujemną. Jeśli podajemy wartość dodatnią,间隔 między słowami zwiększy się. Ustawienie ujemnej wartości word-spacing zbliży słowa:

p.rozproszony {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="rozproszony">
To jest akapit. Przestrzenie między słowami będą zwiększone.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

Przykład TIY: zwiększenie lub zmniejszenie odległości między słowami (odległość między słowami)

Uwaga:Aby lepiej zrozumieć definicję CSS dla 'słowa' (word), odwiedź Strona odniesienia CSS word-spacing.

odległość między literami

letter-spacing właściwośćRóżnica między word-spacing a letter-spacing polega na tym, że letter-spacing modyfikuje odległość między znakami lub literami.

Jak i właściwość word-spacing, wartości do wyboru dla właściwości letter-spacing obejmują wszystkie długości. Domyślnym kluczem jest normal (co jest to samo, co letter-spacing:0). Wprowadzone wartości długości zwiększają lub zmniejszają odległość między literami o określoną ilość:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

Przykład TIY: określenie odległości między literami (odległość między literami)

Konwersja znaków

text-transform właściwośćPrzetwarzanie wielkości liter tekstu. Ta właściwość ma 4 wartości:

• none
• uppercase
• lowercase
• capitalize

Domyślna wartość none nie wprowadza żadnych zmian w tekście, używając oryginalnych wielkości liter z dokumentu źródłowego. Jak nazwa wskazuje, uppercase i lowercase przekształcają tekst na pełne wielkie i pełne małe litery. Ostatnio, capitalize pisze pierwszą literę każdej wyrazy.

Jako właściwość, text-transform może nie być zbyt ważna, ale jeśli nagle zdecydujesz się zmienić wszystkie elementy h1 na wielkie litery, ta właściwość może być bardzo przydatna. Nie musisz单独地修改所有 h1 elementów zawartości, wystarczy użyć text-transform, aby dokonać tej modyfikacji:

h1 {text-transform: uppercase}

Użycie text-transform ma dwa korzyści. Po pierwsze, wystarczy napisać prostą zasadę, aby dokonać tej modyfikacji, bez konieczności modyfikacji samego elementu h1. Po drugie, jeśli w przyszłości zdecydujesz się przełączyć wszystkie wielkości liter z powrotem na oryginalne, będzie to łatwiejsze do zrobienia.

Przykład TIY: kontrola wielkości liter w tekście

dekoracja tekstu

Następnie, omówimy text-decoration właściwośćTo jest bardzo interesująca właściwość, która oferuje wiele bardzo interesujących zachowań.

Właściwość text-decoration ma 5 wartości:

• none
• underline
• overline
• line-through
• blink

Nieoczekiwanie underline dodaje podkreślenie do elementu, podobnie jak element U w HTML. Overline działa przeciwnie, rysuje podkreślenie na górze tekstu. Wartość line-through rysuje przebijającą linię pośrodku tekstu, co jest równe elementom S i strike w HTML. Blink sprawia, że tekst migocze, podobnie jak kontrowersyjny znacznik blink wspierany przez Netscape.

Wartość none wyłącza wszystkie dekoracje zastosowane do elementu. Zwykle tekst bez dekoracji ma domyślny wygląd, ale nie zawsze tak jest. Na przykład, linki mają domyślnie podkreślenie. Jeśli chcesz usunąć podkreślenie linku, możesz to zrobić za pomocą poniższego CSS:

a {text-decoration: none;}

Uwaga:Jeśli wyraźnie użyć tej zasady do usunięcia podkreślenia linku, jedyną różnicą wizualną między kotwicą a normalnym tekstem będzie kolor (co najmniej domyślnie tak jest, ale nie można całkowicie zapewnić, że kolor na pewno się różni).

Można również połączyć różne dekoracje w jednej zasadzie. Jeśli chcemy, aby wszystkie linki miały zarówno podkreślenie, jak i podkreślenie, zasada powinna wyglądać tak:

a:link a:visited {text-decoration: underline overline;}

Należy jednak zauważyć, że jeśli dwa różne dekoracje pasują do tego samego elementu, wartość zwycięskiej zasady całkowicie zastępuje inną wartość. Weź pod uwagę poniższe zasady:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Dla określonych zasad, wszystkie elementy h2 o klasie stricken mają tylko jedną dekorację przebijającą, bez podkreślenia i podkreślenia, ponieważ Wartość text-decoration zastępuje, a nie sumuje się.

Przetwarzanie białych znaków

Właściwość white-spaceWpływa na sposób, w jaki użytkownik agent przetwarza białe znaki, wiersze i znaki tabulatora w źródłowym dokumencie.

Używając tej właściwości, można wpłynąć na sposób, w jaki przeglądarka obsługuje białe znaki między znakami i między wierszami tekstu. W pewnym stopniu, domyślne przetwarzanie XHTML już kończy przetwarzanie białych znaków: łączy wszystkie białe znaki w jeden spację. Dlatego podany poniżej znacznik, gdy jest wyświetlany w przeglądarce internetowej, między znakami będzie wyświetlana tylko jedna spacja, a wiersze będą ignorowane:

<p>This     paragraph has    many
    spaces           in it.</p>

Można wyraźnie ustawić to zachowanie za pomocą poniższego deklarowania:

p {white-space: normal;}

Powyższe zasady informują przeglądarkę, aby traktować tekst jak zwykle: wyrzucać dodatkowe białe znaki. Jeśli podana jest ta wartość, znaki nowej linii (enter) będą konwertowane na spacje, a sekwencje wielu spacji w wierszu będą konwertowane na jedną spację.

Przykład TIY: white-space: normal

Wartość pre

Jednak jeśli white-space jest ustawione na pre, przetwarzanie białych znaków w elementach objętych tą atrybutem jest inne, zachowując się jak element pre w XHTML; białe znaki nie są ignorowane.

Jeśli wartością atrybutu white-space jest pre, przeglądarka zwróci uwagę na dodatkowe spacje, nawet enter. W tym względzie, i tylko w tym względzie, każdy element może działać jak element pre.

Przykład TIY: white-space: pre

Uwaga:Testy pokazują, że przeglądarki IE 7 i wcześniejsze nie obsługuje tej wartości, więc warto używać przeglądarek innych niż IE, aby zobaczyć powyższy przykład.

Wartość nowrap

Przeciwną wartością jest nowrap, która zapobiega ładowaniu tekstu wewnątrz elementu, chyba że użyto elementu br. Użycie nowrap w CSS jest bardzo podobne do użycia <td nowrap> w HTML 4, aby ustawić komórkę tabeli tak, aby nie mogła się ładować, chociaż wartość white-space może być zastosowana do każdego elementu.

Przykład TIY: white-space: nowrap

Wartości pre-wrap i pre-line

CSS2.1 wprowadził wartości pre-wrap i pre-line, które nie były obecne w wcześniejszych wersjach CSS. Te wartości pozwalają twórcom lepiej kontrolować przetwarzanie białych znaków.

Jeśli wartość white-space ustawiona jest na pre-wrap, tekst wewnątrz tego elementu zachowa sekwencje białych znaków, ale wiersze będą normalnie ładowane. Jeśli ustawiona jest na tę wartość, separatorów wierszy w tekście źródłowym oraz generowanych separatorów wierszy również będą zachowywane. Wartość pre-line jest przeciwna do pre-wrap, łączy sekwencje białych znaków, jak w normalnym tekście, ale zachowuje znaki nowej linii.

Przykład TIY: white-space: pre-wrap

Przykład TIY: white-space: pre-line

Uwaga:Testowaliśmy powyższe dwa przykłady w przeglądarkach IE7 i FireFox2.0, ale wyniki są takie, że wartości pre-wrap i pre-line nie są dobrze wspierane.

Podsumowanie

Poniższa tabela podsumowuje zachowanie atrybutu white-space:

Kierunek tekstu

Jeśli czytasz książkę w języku angielskim, czytasz od lewej do prawej, od góry do dołu, to jest kierunek przepływu angielskiego. Jednak nie wszystkie języki są takie same. Wiemy, że starożytny język chiński był czytany od prawej do lewej, naturalnie, jak i hebrajski i arabski itp. CSS2 wprowadził atrybut opisujący jego kierunek.

Atrybut directionWpływa na kierunek pisania tekstu w elementach blokowych, kierunek układu kolumn w tabeli, kierunek poziomy wypełnienia ramki elementu oraz pozycję ostatniego wiersza w elementach wyrównanych po obu stronach.

Uwaga:Dla elementów wewnętrznych, tylko gdy Atrybut unicode-bidiAtrybut direction zostanie zastosowany, gdy ustawiony jest na embed lub bidi-override.

Atrybut direction ma dwie wartości: ltr i rtl. W większości przypadków wartością domyślną jest ltr, który wyświetla tekst od lewej do prawej. Jeśli chcemy wyświetlić tekst od prawej do lewej, należy użyć wartości rtl.

tekstowe atrybuty CSS

Narzędzia

Podręcznik referencyjny CSS

Przykłady CSS

Testy CSS

Podręcznik CSS

Linki sponsorowane