aboutsummaryrefslogtreecommitdiff
path: root/files/pl/web/html/element/div
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:42:52 -0500
commit074785cea106179cb3305637055ab0a009ca74f2 (patch)
treee6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pl/web/html/element/div
parentda78a9e329e272dedb2400b79a3bdeebff387d47 (diff)
downloadtranslated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz
translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2
translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip
initial commit
Diffstat (limited to 'files/pl/web/html/element/div')
-rw-r--r--files/pl/web/html/element/div/index.html131
1 files changed, 131 insertions, 0 deletions
diff --git a/files/pl/web/html/element/div/index.html b/files/pl/web/html/element/div/index.html
new file mode 100644
index 0000000000..d7edffc9c6
--- /dev/null
+++ b/files/pl/web/html/element/div/index.html
@@ -0,0 +1,131 @@
+---
+title: '<div>: The Content Division element'
+slug: Web/HTML/Element/div
+translation_of: Web/HTML/Element/div
+---
+<div>{{HTMLRef}}</div>
+
+<p><span class="seoSummary"><strong>HTML Content Division element</strong> (<strong><code>&lt;div&gt;</code></strong>) jest rodzajem pojemnika na </span>treść<span class="seoSummary">. Nie ma on żadnego wpływu na treść ani układ graficzny, dopóki nie zostanie ostylizowany z użyciem CSS. </span> Element <code>&lt;div&gt;</code> jako "czysty" pojemnik niczego nie reprezentuje. Zamiast tego, jest on używany do grupowania zawartości, dzięki czemu można go łatwo stylizować za pomocą atrybutu {{htmlattrxref("class")}} lub {{htmlattrxref("id")}}, oznaczające część dokumentu jako napisaną w innym języku (używając atrybutu {{htmlattrxref("lang")}}), i tak dalej.</p>
+
+<table class="properties">
+ <tbody>
+ <tr>
+ <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Kategorie zawartości</a></th>
+ <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>, namacalna zawartosć.</td>
+ </tr>
+ <tr>
+ <th scope="row">Dopuszczalna zawartość</th>
+ <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Tekst lub treść osadzona</a>.<br>
+ Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): Jeżeli rodzic jest elementem {{HTMLElement("dl")}}: jednego lub więcej elementów {{HTMLElement("dt")}}, po których następuje jeden lub więcej elementów {{HTMLElement("dd")}}, opcjonalnie zmieszanych z elementami {{HTMLElement("script")}} i {{HTMLElement("template")}}.</td>
+ </tr>
+ <tr>
+ <th scope="row">Pominięcie znacznika</th>
+ <td>Brak, zarówno znacznik początku, jak i końca jest obowiązkowy.</td>
+ </tr>
+ <tr>
+ <th scope="row">Dozwoleni rodzice </th>
+ <td>Każdy element akceptujący <a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">tekst lub treść osadzoną</a>.<br>
+ Lub (w <a href="/en-US/docs/Glossary/WHATWG">WHATWG</a> HTML): element {{HTMLElement("dl")}}.</td>
+ </tr>
+ <tr>
+ <th scope="row">Wsparcie <a href="/pl/docs/Web/Accessibility/ARIA">ARIA</a></th>
+ <td>Tak</td>
+ </tr>
+ <tr>
+ <th scope="row">Interfejs DOM</th>
+ <td>{{domxref("HTMLDivElement")}}</td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Atrybuty">Atrybuty</h2>
+
+<p>Element ten obejmuje <a href="/en-US/docs/Web/HTML/Global_attributes">atrybuty globalne</a>.</p>
+
+<p>Atrybut <code>align</code> jest przestarzały; nie używaj go już dłużej. Zamiast tego należy użyć właściwości lub technik CSS takich jak <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid</a> lub <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">CSS Flexbox</a> do wyrównania i pozycjonowania elementów <code>&lt;div&gt;</code> na stronie.</p>
+
+<h2 id="Wskazówki_dot._użytkowania">Wskazówki dot. użytkowania</h2>
+
+<ul>
+ <li>Element <code>&lt;div&gt;</code> należy stosować tylko wtedy, gdy nie może go zastąpić żaden inny element semantyczny (np. {{HTMLElement("article")}} lub {{HTMLElement("nav")}}).</li>
+</ul>
+
+<h2 id="Przykłady">Przykłady</h2>
+
+<h3 id="Prosty_przykład">Prosty przykład</h3>
+
+<pre class="brush: html">&lt;div&gt;
+ &lt;p&gt;Any kind of content here. Such as
+ &amp;lt;p&amp;gt;, &amp;lt;table&amp;gt;. You name it!&lt;/p&gt;
+&lt;/div&gt; </pre>
+
+<p>Rezultat wygląda tak:</p>
+
+<p>{{EmbedLiveSample("A_simple_example", 650, 60)}}</p>
+
+<h3 id="Przykład_z_użyciem_stylów">Przykład z użyciem stylów</h3>
+
+<p>Ten przykład tworzy cieniowane pole, stosując styl dla <code>&lt;div&gt;</code> za pomocą CSS. Zwróć uwagę na użycie atrybutu {{htmlattrxref("class")}} na elemencie <code>&lt;div&gt;</code> aby zastosować styl o nazwie <code>"shadowbox"</code>.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;div class="shadowbox"&gt;
+ &lt;p&gt;Here's a very interesting note displayed in a
+ lovely shadowed box.&lt;/p&gt;
+&lt;/div&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.shadowbox {
+ width: 15em;
+ border: 1px solid #333;
+ box-shadow: 8px 8px 5px #444;
+ padding: 8px 12px;
+ background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc);
+}</pre>
+
+<h4 id="Rezultat">Rezultat</h4>
+
+<p>{{EmbedLiveSample("A_styled_example", 650, 120)}}</p>
+
+<h2 id="Specyfikacje">Specyfikacje</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+ <td>{{Spec2('HTML WHATWG')}}</td>
+ <td>No changes since the latest snapshot</td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-div-element', '&lt;div&gt;')}}</td>
+ <td>{{Spec2('HTML5 W3C')}}</td>
+ <td>Obsoleted <strong>align</strong></td>
+ </tr>
+ <tr>
+ <td>{{SpecName('HTML4.01', 'struct/global.html#h-7.5.4', '&lt;div&gt;')}}</td>
+ <td>{{Spec2('HTML4.01')}}</td>
+ <td> </td>
+ </tr>
+ </tbody>
+</table>
+
+<h2 id="Kompatybilność_z_przeglądarkami">Kompatybilność z przeglądarkami</h2>
+
+
+
+<p>{{Compat("html.elements.div")}}</p>
+
+<h2 id="Zobacz_także">Zobacz także</h2>
+
+<ul>
+ <li>Semantic sectioning elements: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}</li>
+ <li>{{HTMLElement("span")}} element for styling of phrasing content</li>
+</ul>