From de5c456ebded0e038adbf23db34cc290c8829180 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:49:24 +0100 Subject: unslug pl: move --- .../learn/css/styling_text/fundamentals/index.html | 116 +++++++++ .../css/styling_text/styling_lists/index.html | 269 +++++++++++++++++++++ 2 files changed, 385 insertions(+) create mode 100644 files/pl/learn/css/styling_text/fundamentals/index.html create mode 100644 files/pl/learn/css/styling_text/styling_lists/index.html (limited to 'files/pl/learn/css/styling_text') diff --git a/files/pl/learn/css/styling_text/fundamentals/index.html b/files/pl/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..69dfd39735 --- /dev/null +++ b/files/pl/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,116 @@ +--- +title: Style tekstowe +slug: Web/CSS/Na_początek/Style_tekstowe +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +

+

Na tej stronie znajdziesz więcej przykładów stylów tekstowych. +

Zmodyfikujesz przykładowy arkusz stylów, aby używał różnych krojów pisma. +

+

Informacja: Style tekstowe

+

CSS posiada kilka własności do określania stylu tekstu. +

Istnieje wygodna, krótka własność font, której można użyć do określenia kilku cech na raz — na przykład: +

+ + + +
Przykład +
+

p {font: italic 75%/125% "Comic Sans MS", cursive;} +

+
+

Ta reguła określa kilka własności fontu, sprawiając, że wszystkie akapity będą pisane kursywą. +

Rozmiar fontu jest określony jako trzy czwarte rozmiaru każdego nadrzędnego akapitu, a wysokość linii jest określona na 125% (co da trochę więcej przestrzeni). +

Typ fontu jest określony jako Comic Sans MS, lecz jeśli ten font nie jest dostępny, wówczas przeglądarka użyje domyślnego fontu kursywy (a'la ręczne pismo). +

Ta reguła dodatkowo wyłącza pogrubienie i małe litery (ustawiając je na normal): +

+
+

Typy fontów

+

Nie da się przewidzieć, jakie fonty będzie posiadał czytelnik dokumentu. +Zatem kiedy określasz typy fontów, dobrym pomysłem jest podanie listy alternatywnych. +

Listę należy zakończyć jednym z domyślnych, wbudowanych fontów: serif, sans-serif, cursive, fantasy lub monospace, (niektóre z nich pasują do ustawień w opcjach Twojej przeglądarki). +

Jeżeli dany typ fontu nie wspiera jakiejś funkcji w dokumencie, wówczas przeglądarka może zmienić go na inny. Na przykład, dokument może posiadać specjalne znaki, których font podstawowy nie obsługuje. Jeżeli przeglądarka znajdzie inny font, który obsługuje te znaki, wówczas zostanie on użyty. +

Aby określić wyłącznie typ fontu, użyj własności font-family. +

+

Rozmiary fontów

+

Czytelnik używający przeglądarki Mozilla może w opcjach ustawić domyślne rozmiary fontów i zmienić rozmiar tekstu podczas czytania stron, zatem dobrym pomysłem jest używanie relatywnych rozmiarów tam, gdzie tylko się da. +

Możesz wykorzystać różne wbudowane wartości dla rozmiarów fontów, jak small, medium czy large. Możesz też użyć wartości relatywnych względem rozmiaru fontu nadrzędnego elementu, na przykład: smaller, larger, 150% lub 1.5. +

Jeżeli trzeba, możesz określić bezpośredni rozmiar: 12px (12 pikseli) dla urządzenia wyświetlającego, lub 12pt (12 punktów) dla drukarki. Ten rozmiar jest nominalnie szerokością litery m, ale różne fonty mogą mieć różne rozmiary i możesz inaczej widzieć je względem rozmiaru, który określisz. +

Aby określić sam rozmiary fontu, użyj własności font-size. +

+

Wysokość linii

+

Wysokość linii określa odstępy między liniami. +Jeżeli Twój dokument posiada długie akapity z wieloma liniami, większe niż normalnie odstępy sprawią, że będzie go łatwiej czytać, zwłaszcza, jeśli rozmiary fontu są małe. +

Aby określić samą wysokość linii, użyj własności line-height. +

+

Ozdobniki

+

Odrębna własność text-decoration może określać inne style, jak underline (podkreślenie) lub line-through (przekreślenie). +Ustawiając tę własność na normal, usuniesz wszystkie ozdobniki. +

+

Inne własności

+

Aby ustawić kursywę, użyj font-style: italic;
+Aby ustawić pogrubienie, użyj font-weight: bold;
+Aby określić, że wszystkie litery mają być małymi literami, użyj font-variant: small-caps; +

Aby ustawić dowolną z nich indywidualnie, możesz ustawić wartość na normal lub +inherit (dziedzicz). +

+ + +
Więcej szczegółów +
Możesz określić style tekstowe na kilka innych sposobów. +

Na przykład, niektóre własności wymienione w tym rozdziale mają inne wartości, których możesz użyć. +

W złożonym arkuszu stylów unikaj używania skrótowej własności font, ponieważ ma to efekty uboczne (resetuje inne własności danego fontu). +

Aby zapoznać się ze szczegółami własności fontów, zajrzyj do rozdziału Fonty w specyfikacji CSS. +Aby zapoznać się ze szczegółami odnośnie dekoracji tekstu, zajrzyj Tutaj. +

+
+

Zadanie: Określanie fontu

+

W prostych dokumentach możesz określić font elementu BODY, a reszta dokumentu będzie dziedziczyć jego ustawienia. +

Wyedytuj swój plik CSS. +Dodaj regułę, która zmieni font. +Logicznie byłoby umieścić tę regułę na górze pliku CSS, ale będzie ona miała taki sam efekt niezależnie od miejsca położenia: +

+
+

body {font: 16px "Comic Sans MS", cursive;} +

+
+

Dodaj komentarz wyjaśniający regułę oraz dodaj białe znaki, aby całość pasowała do Twojego ulubionego schematu. +

Odśwież okno przeglądarki, aby zobaczyć efekt. +Jeżeli Twój system zawiera Comic Sans MS lub inny font kursywy, który nie obsługuje pochylenia, wtedy Twoja przeglądarka wybierze inny typ fontu dla pochylonego tekstu w pierwszej linii: +

+ + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+

Z paska menu przeglądarki wybierz Widok – Rozmiar tekstu – Powiększ. Nawet jeśli określiłeś(aś) w stylu rozmiar 16 pikseli, użytkownik czytający dokument może zmienić jego rozmiar. +

+ + +
Wyzwanie +
Nie zmieniając nic innego, powiększ dwukrotnie wszystkie sześć pierwszych liter w domyślnym foncie szeryfowym przeglądarki: + + + + +
Cascading Style Sheets +
Cascading Style Sheets +
+
+

Co dalej?

+

Twój przykładowy dokument korzysta już z kilku nazwanych kolorów. +Na następnej stronie znajdziesz listę nazwanych, standardowych kolorów oraz opis, jak można określić inne: +Kolor +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "fr": "fr/CSS/Premiers_pas/Styles_de_texte", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }} diff --git a/files/pl/learn/css/styling_text/styling_lists/index.html b/files/pl/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..64f4218a9d --- /dev/null +++ b/files/pl/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,269 @@ +--- +title: Listy +slug: Web/CSS/Na_początek/Listy +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +

+

Ta strona opisuje jak możesz użyć CSS-a do określania wyglądu list. +

Stworzysz nowy dokument zawierający listę, oraz nowy arkusz stylów ze stylami dla niej. +

+

Informacja: Listy

+

Jeżeli podjąłeś(aś) wyzwanie z poprzedniej strony (Treść), widziałeś(aś), jak można dodać treść przed jakimś elementem, aby wyglądało to jak elementy listy. +

CSS posiada specjalne własności stworzone dla list. +Staraj się z nich korzystać, jeśli masz możliwość. +

Aby określić styl dla listy, użyj własności list-style do określenia typu znacznika. +

Selektor w regule CSS może określać elementy listy (np. LI) lub element rodzica list (np. UL), z którego elementy listy będą dziedziczyły te style. +

+

Listy nieuporządkowane (unordered lists)

+

W liście nieuporządkowanej każdy element jest oznaczony w ten sam sposób. +

W CSS występują trzy typy oznaczeń. +Wyświetlane są w następujący sposób: +

+ +

Alternatywnie możesz określić URL do obrazka. +

+ + +
Przykład +
Te reguły określają różne oznaczenia dla różnych klas elementów listy: +
+

li.open {list-style: circle;} +li.closed {list-style: disc;} +

+
+

Kiedy użyjesz tych klas w liście, rozdzielisz elementy otwarte i zamknięte: +

+
+

<UL> +

+
 <LI class="open">Lorem ipsum</LI>
+ <LI class="closed">Dolor sit</LI>
+ <LI class="closed">Amet consectetuer</LI>
+ <LI class="open">Magna aliquam</LI>
+ <LI class="closed">Autem veleum</LI>
+
+

</UL> +

+
+

Wynik może wyglądać na przykład tak: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+

Listy uporządkowane (ordered lists)

+

W przypadku list uporządkowanych każdy element listy jest osobno oznaczony, aby zaznaczyć jego pozycję w sekwencji. +

Użyj własności list-style, aby określić typ oznaczenia: +

+ + + +
Przykład +
Ta reguła określa, że w bloku OL z klasą info elementy są oznaczane dużymi literami. +
+

ol.info {list-style: upper-latin;} +

+
+

Elementy LI dziedziczą ten styl: +

+ + +
    +
  • Lorem ipsum
    • +
  • Dolor sit
    • +
  • Amet consectetuer
    • +
  • Magna aliquam
    • +
  • Autem veleum
    • +
+
+
+ + +
Więcej szczegółów +
Własność list-style jest własnością skrótową. W złożonych arkuszach stylów raczej będziesz wolał(a) używać osobnych własności dla osobnych wartości. Aby dowiedzieć się więcej na temat osobnych własności oraz jak CSS określa listy, zajrzyj do sekcji Listy w dokumentacji CSS. +

Jeżeli używasz języka znaczników, jak HTML, który korzysta z własnych znaczników dla list nieuporządkowanych (UL) i uporządkowanych (OL), wówczas dobrym zwyczajem jest korzystanie z nich zgodnie z przeznaczeniem. Jednakże możesz użyć CSS, aby wyświetlić UL jako posortowaną, a OL jako nieposortowaną, jeśli wolisz. +

Różne przeglądarki w różny sposób obsługują te style dla list. +Nie oczekuj, że Twój arkusz stylów zostanie wyświetlony identycznie we wszystkich. +

+
+

Liczniki

+
+

Notatka:  Niektóre przeglądarki nie obsługują liczników.

+
+

Możesz używać liczników do różnych elementów, nie tylko list. +Na przykład w niektórych dokumentacjach możesz chcieć numerować nagłówki lub paragrafy. +

Aby określić numerację, musisz zadeklarować counter z określoną nazwą. +

W którymś z elementów, zanim rozpocznie się naliczanie, zresetuj licznik, używając właściwości counter-reset i nazwą Twojego licznika. +Rodzic elementów, które liczysz, jest dobrym miejscem na reset, ale możesz użyć dowolnego elementu, który pojawia się przed elementami listy. +

W każdym elemencie, w którym licznik jest inkrementowany, dodaj właściwość counter-increment. Jako wartość podaj nazwę licznika. +

Aby wyświetlić wartość licznika, dodaj :before lub :after do selektora i użyj własności content (tak jak na poprzedniej stronie Treść). +

Jako wartość własności content wstaw counter() z nazwą swojego licznika. +Opcjonalnie określ typ. +Typy są takie same jak w sekcji 'listy uporządkowane. +

Zwykle element, który wyświetla licznik, inkrementuje go. +

+ + +
Przykład +
Ta reguła inicjalizuje licznik w każdym elemencie H3 z klasą numbered: +
+

h3.numbered {counter-reset: mynum;} +

+
+

Ta reguła wyświetla i inkrementuje licznik dla każdego elementu P z klasą numbered: +

+
+

p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Wynik wygląda tak: +

+ + +
Heading
+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+
+ + +
Więcej szczegółów +
Nie należy używać liczników, jeśli nie masz pewności, że każdy, kto czyta Twój dokument, posiada obsługującą je przeglądarkę. +

Jeżeli możesz używać liczników, mają one tę zaletę, że określasz ich styl niezależnie od elementów listy. W powyższym przykładzie liczniki są pogrubione, a elementu listy nie. +

Możesz też używać liczników w bardziej złożony sposób — na przykład do numerowania sekcji, nagłówków, podnagłówków i paragrafów w dokumentach. +Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS do sekcji Automatyczne liczniki i numerowanie. +

+
+

Zadanie: Style list

+

Stwórz nowy dokument HTML, doc2.html. +Skopiuj i wklej poniższą treść, upewniając się, że zaznaczyłeś(aś) cały: +

+
+

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Sample document 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">The oceans</H3> +<UL> +<LI>Arctic</LI> +<LI>Atlantic</LI> +<LI>Pacific</LI> +<LI>Indian</LI> +<LI>Southern</LI> +</UL> + +<H3 class="numbered">Numbered paragraphs</H3> +<P class="numbered">Lorem ipsum</P> +<P class="numbered">Dolor sit</P> +<P class="numbered">Amet consectetuer</P> +<P class="numbered">Magna aliquam</P> +<P class="numbered">Autem veleum</P> + +</BODY> +</HTML> +

+
+

Stwórz nowy arkusz stylów, style2.css. +Skopiuj i wklej poniższą treść: +

+
+

/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { +

+
 content: counter(mynum) ": ";
+ counter-increment: mynum;
+ font-weight: bold;}
+
+
+

Jeżeli układ i komentarze Ci nie odpowiadają, zmień je. +

Otwórz ten dokument w swojej przeglądarce. +Jeżeli Twoja przeglądarka obsługuje liczniki, zobaczysz coś takiego, jak poniżej. +Jeżeli Twoja przeglądarka nie obsługuje stylów, wówczas nie zobaczysz liczb (i prawdopodobnie także dwukropków): +

+ + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+

Numbered paragraphs

+

1: Lorem ipsum

+

2: Dolor sit

+

3: Amet consectetuer

+

4: Magna aliquam

+

5: Autem veleum

+
+


+

+ + +
Wyzwania +
Dodaj jedną regułę do swojego arkusza stylów, aby ponumerować oceany, używając rzymskich liczb od i do v: + + +

The oceans

+
    +
  • Arctic
    • +
  • Atlantic
    • +
  • Pacific
    • +
  • Indian
    • +
  • Southern
    • +
+
+

Jeżeli Twoja przeglądarka obsługuje liczniki, zmień swój arkusz stylów, aby identyfikował nagłówki dużymi literami w takim stylu: +

+ + +

(A) The oceans

+

. . . +

+

(B) Numbered paragraphs

+

. . . +

+
+
+


+

+

Co dalej?

+

Jeżeli masz problemy ze zrozumieniem tej strony albo chcesz ją skomentować, pomóż nam, dopisując się na stronie Dyskusji. +

Kiedy Twoja przeglądarka wyświetla przykładowy dokument, tworzy przy okazji przestrzeń dookoła elementów, które określają ich rozkład na stronie. +

Następna strona opisuje, jak można użyć CSS do pracy z przestrzenią wokół elementów: +Bloki +

{{ languages( { "en": "en/CSS/Getting_Started/Lists", "fr": "fr/CSS/Premiers_pas/Listes", "pt": "pt/CSS/Como_come\u00e7ar/Listas" } ) }} -- cgit v1.2.3-54-g00ecf