Ostatnio edytowany:

quotes

Autor: Virtual Patriot

Opis właściwości quotes

Za pomocą właściwości quotes możemy określić typ dodatkowych cudzysłowów, jakie mogą zostać dodane do zawartości interesującego nas elementu HTML.

Dodatkowe techniczne informacje o właściwości quotes

przeznaczenie

element HTML każdego typu

pozycja

dowolna

dziedziczenie

tak

wartość initial

taka jak w ustawieniach przeglądarki internetowej

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości quotes

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 8

Edge

tak

Opis wartości właściwości quotes

none

Opis

Za pomocą wartości none właściwości quotes możemy sprawić, że do zawartości interesującego nas elementu HTML nie mogą zostać dodane żadne dodatkowe cudzysłowy.

Przykład

  quotes:none;
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Do zawartości przykładowego elementu "div" za pomocą selektora "::before" oraz wartości "open-quote" właściwości "content" lub za pomocą selektora "::after" oraz wartości "close-quote" właściwości "content" nie mogą zostać dodane żadne dodatkowe cudzysłowy, ponieważ do wspomnianego elementu "div" została dodana właściwość "quotes" wraz z wartością "none".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:none;
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>

wzorzec wartości

Opis

Za pomocą właściwości quotes oraz z góry zdefiniowanego wzorca wartości możemy określić typ dodatkowych cudzysłowów, jakie mogą zostać dodane do zawartości interesującego nas elementu HTML.

Składniki wzorca wartości właściwości quotes

Ważne

możemy podać więcej par składników open-sign close-sign, dzięki czemu możemy określić wygląd kolejnych dodatkowych cudzysłowów, jakie mogą zostać dodane do zawartości kolejnych elementów potomków interesującego nas elementu HTML (to która para dodatkowych cudzysłowów przynależy do danego elementu potomka zależy od stopnia zagnieżdżenia danego elementu potomka, ponadto w przypadku większej ilości kolejnych elementów potomków od ilości podanych przez nas par dodatkowych cudzysłowów, do kolejnego elementu potomka przynależy ostatnia para dodatkowych cudzysłowów, jaką określiliśmy)

Przykładowe zapisy

"'" "'"

'"' '"'

'"' '"' '‹' '›'

'"' '"' '‹' '›' '››' '‹‹'

open-sign

Składnik open-sign jest wymaganym składnikiem wzorca wartości właściwości quotes. Składnik open-sign określa typ cudzysłowu otwierającego, który może zostać dodany do zawartości interesującego nas elementu HTML.

Dostępne wartości

dowolny ciąg znaków

Wartość domyślna

brak

close-sign

Składnik close-sign jest wymaganym składnikiem wzorca wartości właściwości quotes. Składnik close-sign określa typ cudzysłowu zamykającego, który może zostać dodany do zawartości interesującego nas elementu HTML.

Dostępne wartości

dowolny ciąg znaków

Wartość domyślna

brak

Przykład

  quotes:'›››' '‹‹‹';
ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych

Cudzysłów otwierający, jaki może zostać dodany do początkowej zawartości przykładowego elementu "div" posiada postać "›››", natomiast cudzysłów zamykający, jaki może zostać dodany do końcowej zawartości przykładowego elementu "div" posiada postać "‹‹‹", ponieważ do wspomnianego elementu "div" została dodana właściwość "quotes" wraz z następującymi wartościami: " '›››' '‹‹‹' ".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        quotes:'›››' '‹‹‹';
        padding:1em;
        font-size:1.3em;
        background-color:#CBFFFF;
      }

      div::before {
        content:open-quote;
        color:blue;
        background-color:white;
      }

      div::after {
        content:close-quote;
        color:blue;
        background-color:white;
      }
    </style>
  </head>

  <body>

    <div>
      ten tekst wyświetlony w oknie przeglądarki internetowej został umieszczony w zawartości tego przykładowego elementu "div" wyłącznie w celach prezentacyjnych
    </div>

  </body>
</html>