From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../learn/css/howto/generated_content/index.html | 140 +++++++++++++++++++++ files/pl/learn/css/howto/index.html | 86 +++++++++++++ 2 files changed, 226 insertions(+) create mode 100644 files/pl/learn/css/howto/generated_content/index.html create mode 100644 files/pl/learn/css/howto/index.html (limited to 'files/pl/learn/css/howto') diff --git a/files/pl/learn/css/howto/generated_content/index.html b/files/pl/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..b027725c1a --- /dev/null +++ b/files/pl/learn/css/howto/generated_content/index.html @@ -0,0 +1,140 @@ +--- +title: Treść +slug: Learn/CSS/Howto/Generated_content +tags: + - 'CSS:Na_początek' +translation_of: Learn/CSS/Howto/Generated_content +--- +

+

Ta strona opisuje niektóre metody, dzięki którym możesz użyć CSS-a, aby dodać treść do dokumentu w trakcie jego wyświetlania. +

Zmodyfikujesz swój arkusz stylów, aby dodać treść oraz obrazek. +

+

Informacja: Treść

+

Jedną z ważnych zalet CSS-a jest to, że pomaga on oddzielić warstwę prezentacyjną dokumentu od jego treści. +Zdarzają się jednak sytuacje, kiedy dobrym rozwiązaniem jest określenie treści jako elementu arkusza stylów, a nie dokumentu. +

Treść określona w arkuszach stylów może składać się z tekstu i obrazów. Możesz określić treść w arkuszu stylów, kiedy jest ona blisko związana ze strukturą dokumentu. +

+ + +
Więcej szczegółów +
Wstawianie treści w arkusz stylów może spowodować komplikacje. Na przykład możesz mieć wiele wersji językowych dokumentu, które dzielą arkusz stylów. +

Jeżeli jakiś fragment arkusza stylów zawiera ciągi wymagające tłumaczenia, to musisz go wyciągnąć do osobnego pliku i przygotować osobną wersję dla każdej wersji językowej. +

Unikniesz takich komplikacji, jeśli treść określona w arkuszach stylów będzie zawierała tylko symbole i obrazki, które pasują do wszystkich języków i kultur. +

Treść określona w arkuszu stylów nie staje się częścią DOM-u. +

+
+

Teksty

+

CSS pozwala umieścić tekst przed i po elemencie. Stwórz regułę i dodaj +:before lub :after do selektora. Ustaw własność content z tekstem jako wartością. +

+ + +
Przykład +
Ta reguła dodaje tekst Dokumentacja: przed każdym elementem należącym do klasy ref: +
+

.ref:before { +

+
 font-weight: bold;
+ color: navy;
+ content: "Dokumentacja: ";
+ }
+
+
+
+ + +
Więcej szczegółów +
Arkusz stylów domyślnie zakodowany jest jako UTF-8, ale można to zmienić w odnośniku, w samym arkuszu stylów lub w inny sposób. Aby dowiedzieć się więcej, zajrzyj do specyfikacji CSS, do rozdziału 4.4 reprezentacja arkuszy stylów CSS. +

Pojedyncze znaki mogą także być zakodowane przy użyciu znaku odwróconego ukośnika. Na przykład \265B jest symbolem szachów dla czarnej królowej ♛. Aby dowiedzieć się więcej, zajrzyj do dokumentacji CSS, do rozdziałów Korzystanie ze znaków nie reprezentowanych w kodowaniu oraz Characters and case. +

+
+

Obrazki

+

Aby dodać obrazek przed lub po jakimś elemencie, możesz określić URL pliku obrazka jako wartość własności content. +

+ + +
Przykład +
Ta reguła dodaje wolną przestrzeń oraz ikonę po każdym odnośniku, który posiada klasę glossary: +
+

a.glossary:after {content: " " url("../images/glossary-icon.gif");} +

+
+
+

Aby dodać obrazek jako element tła, określ URL pliku obrazu jako wartość własności background. Jest to skrótowa własność, która określa kolor tła, obrazek tła, jak ten obrazek jest powielany i inne szczegóły. +

+ + +
Przykład +
Ta reguła określa tło podanego elementu, używając URL-a do określenia pliku obrazu. +

Selektor określa identyfikator elementu. +Wartość no-repeat powoduje, że obrazek wyświetlany jest tylko raz: +

+
+
  1. sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +
+
+
+ + +
Więcej szczegółów +
Aby dowiedzieć się więcej o poszczególnych własnościach tła oraz innych opcjach określanych dla obrazków tła, zajrzyj do dokumentacji CSS, rozdział Tła. +
+

Zadanie: Dodawanie obrazu tła

+

Poniższy obrazek to biały prostokąt z niebieską linią na dole. +Pobierz ten obrazek do katalogu, w którym trzymasz plik CSS: +

+ + +
Grafika:Blue-rule.png +
+

(Na przykład wciśnij prawy klawisz myszy, aby otworzyć menu kontekstowe, i wybierz Zapisz Obraz Jako... a następnie określ katalog, którego używasz w tym kursie.) +

Wyedytuj swój plik CSS i dodaj tę regułę, aby ustawić obrazek tła dla całej strony. +

+
+

background: url("Blue-rule.png"); +

+
+

Wartość repeat jest domyślna i nie musi być określana. +Obrazek jest powtarzany horyzontalnie i wertykalnie, sprawiając wrażenie, jakby strona była kartką papieru w linie: +

+
+

Grafika:Blue-rule-ground.png

+
+
+

Cascading Style Sheets +

+
+
+

Cascading Style Sheets +

+
+
+
+ + +
Wyzwanie +
Pobierz ten obraz: + + +
Grafika:Yellow-pin.png +
+

Dodaj jedną regułę do Twojego arkusza stylów, aby wyświetlał obrazek na początku każdej linii: +

+
+

Grafika:Blue-rule-ground.png

+
+
Grafika:Yellow-pin.png Cascading Style Sheets +
+
Grafika:Yellow-pin.png Cascading Style Sheets +
+
+
+
+

Co dalej?

+

Zazwyczaj treść jest dodawana przez arkusz stylów podczas modyfikowania list. +

Następna strona opisuje, jak określić style dla elementów listy: +Listy +

+
+
+{{ languages( { "en": "en/CSS/Getting_Started/Content", "fr": "fr/CSS/Premiers_pas/Contenu", "ja": "ja/CSS/Getting_Started/Content", "pt": "pt/CSS/Como_come\u00e7ar/Conte\u00fado" } ) }} diff --git a/files/pl/learn/css/howto/index.html b/files/pl/learn/css/howto/index.html new file mode 100644 index 0000000000..1f087d3e22 --- /dev/null +++ b/files/pl/learn/css/howto/index.html @@ -0,0 +1,86 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +
Translation in progress{{LearnSidebar}}
+ +

The following links provide solutions to common problems you can solve with CSS.

+ +

Common use cases

+ +
+
+

Basics

+ + + +

CSS and text

+ + +
+ +
+

Boxes and layouts

+ + +
+
+ +

Uncommon and advanced techniques

+ +

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + + +

See also

+ +

CSS FAQ — A variety of topics: from debugging to selector usage.

-- cgit v1.2.3-54-g00ecf