blob: 846f268cb4055a3556023d3fb25830daba2011a3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
---
title: Skrócone deklaracje CSS
slug: Web/CSS/Shorthand_properties
tags:
- CSS
- Wszystkie_kategorie
translation_of: Web/CSS/Shorthand_properties
original_slug: Web/CSS/Skrócone_deklaracje_CSS
---
<p>
</p>
<h2 id="Dlaczego_skracamy_deklaracje_CSS.3F" name="Dlaczego_skracamy_deklaracje_CSS.3F"> Dlaczego skracamy deklaracje CSS? </h2>
<p>Wielu programistów CSS stosuje skrócone wersje często stosowanych własności w celu zaoszczędzenia czasu i energii. Chociaż skracanie deklaracji może wydawać się nie intuicyjnie i prawdopodobnie będzie wymagało trochę zapamiętywania, to z całą pewnością zaoszczędzi nam pisania na klawiaturze, podczas tworzenia dużych lub kompleksowych arkuszy stylów.
</p>
<h2 id="W.C5.82asno.C5.9Bci_t.C5.82a" name="W.C5.82asno.C5.9Bci_t.C5.82a"> Własności tła </h2>
<p>Tło określone za pomocą następujących własności:
</p>
<pre>background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>
<p>Można zapisać w jednej deklaracji jako:
</p>
<pre>background: #000 url(images/bg.gif) no-repeat top right;</pre>
<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>background-attachment: scroll</code> oraz kilku dodatkowych własności w CSS3)
</p>
<h2 id="W.C5.82asno.C5.9Bci_czcionki" name="W.C5.82asno.C5.9Bci_czcionki"> Własności czcionki </h2>
<p>Następujące deklaracje:
</p>
<pre>font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>
<p>Mogą zostać skrócone do następującej deklaracji: </p>
<pre>font: italic bold .8em/1.2 Arial, sans-serif;</pre>
<p>(Forma skrócona jest ściśle mówiąc odpowiednikiem wypisanych powyżej własności plus <code>font-variant: normal</code> i <code>font-size-adjust: none</code> (CSS2.0 / css3), <code>font-stretch: normal</code> (css3).)
</p>
<h2 id="W.C5.82asno.C5.9Bci_obramowania" name="W.C5.82asno.C5.9Bci_obramowania"> Własności obramowania </h2>
<p>Obramowanie, szerokość, kolor i styl możemy uprościć do jednej deklaracji. Na przykład:
</p>
<pre>border-width: 1px;
border-style: solid;
border-color: #000;</pre>
<p>Możemy zapisać jako:
</p>
<pre>border: 1px solid #000;</pre>
<h2 id="W.C5.82asno.C5.9Bci_margin.2Fpadding" name="W.C5.82asno.C5.9Bci_margin.2Fpadding"> Własności margin/padding </h2>
<p>Skrócona wersja wartości margin i padding działa w ten sam sposób. Następujące deklaracje CSS: </p>
<pre>margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>
<p>Są tym samym, co poniższa deklaracja (ważne jest, aby wartości były rozmieszczone zgodnie z kierunkiem ruchu wskazówek zegara, zaczynając od wartości top: top, right, bottom i left (TRBL, spółgłoski w słowie "trouble"))
</p>
<pre>margin: 10px 5px 10px 5px;</pre>
{{ languages( { "en": "en/Guide_to_Shorthand_CSS" } ) }}
|
