W tym rozdziale dowiesz się...

Używanie selektorów pseudoelementów w arkuszach CSS.

• 
  Co to są pseudoelementy CSS?

  Do czego przydają się pseudoelementy CSS?

• 
  Pierwsza linia :first-line

  W jaki sposób zmienić wygląd pierwszej linii tekstu?

• 
  Pierwsza litera :first-letter

  W jaki sposób zmienić wygląd pierwszej litery tekstu?

• 
  Przed... :before

  W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

• 
  Po... :after

  W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

• 
  Cudzysłowy {quotes}

  W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

• 
  Pytania i odpowiedzi

  CSS

• 
  Powtórka

  CSS

Co to są pseudoelementy CSS?

Do czego przydają się pseudoelementy CSS?

Języki opisu struktury dokumentów - takie jak XHTML czy HTML - nie dostarczają mechanizmów dostępu do pewnych specyficznych elementów występujących na każdej stronie. Na przykład nie można wprost odnieść się do pierwszej litery ani pierwszej linii w akapicie. Tymczasem często zachodzi potrzeba ich specjalnego wystylizowania. Obejmowanie pierwszej litery w każdym akapicie znacznikiem <span>...</span> jest nieoptymalne i czasochłonne.

Z pomocą przychodzą pseudoelementy CSS, które pozwalają odnieść się do takich specjalnych elementów struktury dokumentu bez konieczności wprowadzania żadnych dodatkowych znaczników do kodu źródłowego. Pseudoelementy pozwalają również automatycznie generować pewną zawartość w określonych miejscach dokumentu, która normalnie nie znajduje się w kodzie źródłowym. Chodzi tutaj o specjalny tekst poprzedzający lub następujący np. po akapicie.

Pierwsza linia :first-line

W jaki sposób zmienić wygląd pierwszej linii tekstu?

selektor:first-line { cecha: wartość }

Polecenie raz zdefiniowane w arkuszu stylów, pozwala na nadanie określonych cech wszystkim pierwszym linijkom, znajdującym się wewnątrz znacznika, na który wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład :first-line

Jeżeli w arkuszu stylów została umieszczona następująca reguła:

p:first-line { color: red }

to wszystkie pierwsze linijki wchodzące w skład akapitów, będą miały czerwony kolor:

Jeśli używasz Internet Explorera 5, wszystkie linijki w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku.

Pierwsza litera :first-letter

W jaki sposób zmienić wygląd pierwszej litery tekstu?

selektor:first-letter { cecha: wartość }

Aby selektor zadziałał, blok musi się rozpoczynać tekstem, a nie np. obrazkiem ani tabelką.

Polecenie pozwala na nadanie określonych cech pierwszej literze treści, znajdującej się wewnątrz znacznika, na który wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 5, natomiast w MSIE 6 wszystko jest w porządku.

Przykład :first-letter

Jeżeli w arkuszu stylów została umieszczona następująca reguła:

p:first-letter { color: red }

to pierwsza litera każdego akapitu będzie mieć czerwony kolor:

Jeśli używasz Internet Explorera 5, wszystkie litery w powyższym akapicie będą tego samego koloru (nie zobaczysz efektu). Natomiast w MSIE 6 wszystko jest w porządku.

Inny ciekawy przykład:

p:first-letter { color: red; font-family: 'Times New Roman', serif; font-size: 300%; float: left }

Przed... :before

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

Przed... :before

selektor:before { content: "treść" }

Polecenie pozwala automatycznie dopisywać podaną treść przed określonymi elementami, na które wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład :before

Jeżeli w arkuszu stylów została umieszczona następująca reguła:

p:before { content: "POCZĄTEK "; color: red }

to wszystkie akapity będą rozpoczynały się od wyrazu "POCZĄTEK", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się rozpoczynał normalnie ("To jest akapit...") - nie zobaczysz efektu.

Obrazek przed... :before {content: url}

Zamiast tekstu generowanego przed wybranym elementem, w analogiczny sposób można tam dodać grafikę:

selektor:before { content: url(ścieżka dostępu do obrazka) }

Ścieżkę dostępu należy konstruować względem arkusza CSS!

Przykład :before {content: url}

To jest akapit, rozpoczynający się obrazkiem, pomimo że nie został on umieszczony w treści akapitu.

Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji:

p:before { content: url(obrazek.gif) " POCZĄTEK "; color: red }

Wartość atrybutu przed... :before {content: attr}

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie przed właściwą zawartością elementu wartości wybranego atrybutu, który został przypisany z poziomu HTML elementowi, na który wskazuje selektor prosty w regule stylu:

selektor:before { content: attr(atrybut) }

Jeżeli element nie będzie posiadał podanego atrybutu, zostanie wstawiona wartość pusta.

Przykład :before {content: attr}

p:before { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

Pytania i odpowiedzi :before

Co robi :BEFORE?

Pseudoelement :before w CSS służy do wstawiania treści przed zawartością wybranego elementu. Jest to technika wykorzystywana do dodawania dekoracji, ikon lub innych elementów graficznych przed treścią elementu.

Co to jest "before" po polsku?

Słowo "before" po polsku oznacza "przed".

Po... :after

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

Po... :after

selektor:after { content: "treść" }

Polecenie pozwala automatycznie dopisywać podaną treść po określonych elementach, na które wskazuje selektor.

UWAGA! Polecenie nie interpretuje MSIE 7.0. W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład :after

Jeżeli w arkuszu stylów została umieszczona następująca reguła:

p:after { content: " KONIEC"; color: red }

to wszystkie akapity będą kończyły się wyrazem "KONIEC", mimo że nie wpiszemy tego wyrazu bezpośrednio w treści akapitu:

Jeśli używasz Internet Explorera 7.0 lub starszego, powyższy akapit będzie się kończył normalnie ("...w treści akapitu.") - nie zobaczysz efektu.

Obrazek po... :after {content: url}

Zamiast tekstu generowanego po wybranym elemencie, w analogiczny sposób można tam dodać grafikę:

selektor:after { content: url(ścieżka dostępu do obrazka) }

Ścieżkę dostępu należy konstruować względem arkusza CSS!

Przykład :after {content: url}

To jest akapit, kończący się obrazkiem, pomimo że nie został on umieszczony w treści akapitu.

Można nawet połączyć generowanie tekstu i grafiki w jednej deklaracji:

p:after { content: " KONIEC " url(obrazek.gif); color: red }

Wartość atrybutu po... :after {content: attr}

Oprócz powyższych, CSS 2 umożliwia automatycznie wygenerowanie po właściej zawartości elementu wartości wybranego atrybutu, który został przypisany z poziomu HTML elementowi, na który wskazuje selektor prosty w regule stylu:

selektor:after { content: attr(atrybut) }

Jeżeli element nie będzie posiadał podanego atrybutu, zostanie wstawiona wartość pusta.

Przykład :after {content: attr}

p:after { content: "Ten element posiada atrybut title o wartości: " attr(title) ". "; color: red }

Cudzysłowy {quotes}

W jaki sposób kontrolować wygląd cudzysłowów? Jak powinno się wpisywać cytaty zagnieżdżone w języku polskim?

Cudzysłowy {quotes}

(interpretuje Internet Explorer 8.0, Firefox, Opera)

W języku HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany). Jak mówi specyfikacja HTML 4.01, cytatów wstawianych w elementach q nie należy obejmować cudzysłowami, gdyż powinna zrobić to przeglądarka. Ponadto, ponieważ w różnych językach (mówionych) używa się różnych znaków cudzysłowu, przeglądarki powinny wygenerować takie, które odpowiadają aktualnemu językowi treści. Od języka zależą również znaki cudzysłowów w cytatach zagnieżdżonych, czyli gdy jeden cytat znajduje się wewnątrz innego. Niestety problem w tym, że przeglądarki zwykle sobie z tym nie radzą :-(

Między innymi z tego powodu specyfikacja CSS 2 umożliwia jawne określenie znaków cudzysłowu i to dla wielu języków jednocześnie. Robi się to dwustopniowo:

1. Najpierw ustalamy jakie znaki mają być wyświetlone w miejscu automatycznie generowanych cudzysłowów:

   q { quotes: '"' '"' "'" "'" }

   Pierwsza para odpowiada normalnym cytatom, a druga - cytatom zagnieżdżonym. Można tutaj podać więcej takich par - dla głębszych poziomów zagnieżdżenia. Jeżeli w kodzie HTML wystąpi cytat zagnieżdżony o większą liczbę poziomów niż podano, to zostanie dla niego użyta ostatnia z wymienionych par znaków cudzysłowu.

2. Następnie za pomocą pseudoelementów przed... oraz po... wstawiamy wcześniej zadeklarowane znaki cudzysłowu w odpowiednich miejscach cytatu:

   q:before { content: open-quote }
   q:after { content: close-quote }

UWAGA! Nie obsługuje Chrome 4 ani MSIE 7.0! W MSIE 8.0 wszystko jest w porządku, ale tylko w trybie Standards Compliance.

Przykład {quotes}

Znaki cudzysłowów {content: open-quote close-quote}

Wybrane znaki cudzysłowów używane w różnych językach

Znak	Kod	Nazwa
"	"\0022"	Cudzysłów (podwójny znak cudzysłowu ASCII)
'	"\0027"	Apostrof (pojedynczy znak cudzysłowu ASCII)
‹	"\2039"	Pojedynczy lewy cudzysłów ostrokątny
›	"\203A"	Pojedynczy prawy cudzysłów ostrokątny
«	"\00AB"	Podwójny lewy cudzysłów ostrokątny
»	"\00BB"	Podwójny prawy cudzysłów ostrokątny
‘	"\2018"	Lewy pojedynczy cudzysłów (górne "6")
’	"\2019"	Prawy pojedynczy cudzysłów (górne "9")
“	"\201C"	Lewy podwójny cudzysłów (górne "66")
”	"\201D"	Prawy podwójny cudzysłów (górne "99")
„	"\201E"	Podwójny dolny cudzysłów (dolne "99")
‚	"\201A"	Pojedynczy dolny cudzysłów (dolne "9")

Źródło: Cascading Style Sheets, Level 2

Przykład {quotes, content: open-quote close-quote}

Cytaty w języku polskim można oznaczać następująco:

q:lang(pl) { quotes: "\201E" "\201D" "\00BB" "\00AB" }
q:before { content: open-quote }
q:after { content: close-quote }

albo (rzadziej spotykane):

q:lang(pl) { quotes: "\201E" "\201D" "\201A" "\2019" }
q:before { content: open-quote }
q:after { content: close-quote }

Wyłączenie znaków cudzysłowu {content: no-open-quote no-close-quote}

Istnieją dwie dodatkowe wartości, które można przypisać do własności content zamiast open-quote i close-quote. Są to: no-open-quote i no-close-quote. Różnią się one w działaniu tym, że normalnie zwiekszają/zmniejszają poziom zagnieżdżenia cytatów, jednak nic nie wyświetlają. Czasami może to być przydatne w przypadku bloków cytowanych, gdzie zdarza się konieczność postawienia na początku każdego akapitu w takim bloku znaku otwarcia cudzysłowu, ale zamknięcie tylko po ostatnim z nich

Przykład {quotes, content: open-quote no-close-quote close-quote}

blockquote p { quotes: "\201E" "\201D" }
blockquote p:before  { content: open-quote }
blockquote p:after { content: no-close-quote }
blockquote p.last:after { content: close-quote }

Pytania i odpowiedzi

Jak zrobić cudzysłów HTML?

Prosty cudzysłów w kodzie HTML można zrobić za pomocą encji znakowej &quot; lub poprzez wpisanie znaku cudzysłowu bezpośrednio w kodzie: ".

Jak zrobić cudzysłów w cudzysłowie?

Aby umieścić cudzysłów wewnątrz innego cudzysłowu, można użyć różnych kombinacji cudzysłowów. Na przykład: „To jest »cytat« w cudzysłowie” albo "To jest 'cytat' w cudzysłowie".

Jak wygląda polski cudzysłów?

Polski cudzysłów ma postać dwóch przeciwnie skierowanych podwójnych apostrofów: „...”. W kodzie HTML możesz użyć następujących znaków specjalnych: „...”.

Czy na końcu cytatu stawiamy kropkę?

Kropka kończąca cytat stawiana jest po zamknięciu cudzysłowu, na przykład: „To jest przykład cytatu”.

Jak zaznaczyć przerwę w cytacie?

Przerwę w cytacie zaznacza się przy użyciu znaku wielokropka (w kodzie HTML można użyć: &hellip;) albo po prostu trzech kropek wstawionych w nawiasie kwadratowym bądź okrągłym: „To jest przykład […] przerwy”.

Jak nazywa się pojedynczy cudzysłów?

Pojedynczy cudzysłów nazywa się apostrof.

Czy tytuły rozdziałów piszemy w cudzysłowie?

Tytuły rozdziałów, książek lub publikacji zazwyczaj piszemy kursywą (tekstem pochylonym) albo w cudzysłowie, aby wizulanie je wyróżnić. Wybór zależy od konwencji stylistycznej i preferencji.

Jak zrobić cudzysłów ostrokątny?

Pojedynczy cudzysłów ostrokątny można uzyskać w kodzie HTML za pomocą encji znakowej &lsaquo; (‹) i &rsaquo; (›). Natomiast aby uzyskać podwójny cudzysłów ostrokątny, wystarczy wpisać: &laquo; («) i &raquo; (»). W języku polskim kombinacji znaków »...« używa się, gdy występuje cudzysłów w cudzysłowie. Natomiast zapis «...» stosuje się do wskazania znaczeń w słownikach i opracowaniach naukowych.

Pytania i odpowiedzi

Poniżej znajdziesz wykaz najczęściej zadawanych pytań z tego rozdziału wraz ze zwięzłymi odpowiedziami i gotowymi do użycia przykładami kodu CSS. Aby sprawdzić bardziej szczegółowy opis, kliknij odnośnik "Zobacz więcej..." pod wybraną odpowiedzią.

Powtórka

W jaki sposób zmienić wygląd pierwszej linii tekstu?

selektor:first-line { cecha: wartość }

Zobacz więcej...

W jaki sposób zmienić wygląd pierwszej litery tekstu?

selektor:first-letter { cecha: wartość }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst przed określonym elementem?

selektor:before { content: "treść" }

selektor:before { content: url(ścieżka dostępu do obrazka) }

selektor:before { content: attr(atrybut) }

Zobacz więcej...

W jaki sposób wygenerować dynamicznie tekst po określonym elemencie?

selektor:after { content: "treść" }

selektor:after { content: url(ścieżka dostępu do obrazka) }

selektor:after { content: attr(atrybut) }

Zobacz więcej...