MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla

Compare Revisions

CSS

Change Revisions

Revision 124096:

Revision 124096 by fscholz on

Revision 371525:

Revision 371525 by makovickym on

Title:
CSS
CSS
Slug:
CSS
CSS
Tags:
css, Všechny_kategorie
"css", "Všechny_kategorie"
Content:

Revision 124096
Revision 371525
n8      &nbsp;n8      <span class="seoSummary"><strong>Cascading Style Sheets</st
 >rong>, zkráceně <strong>CSS</strong>, jazyk <a href="/en-US/docs/
 >DOM/stylesheet">kaskádových stylů</a>, který se používá k popisu 
 >grafické reprezentace dokumentu napsaného v <a href="/en-US/docs/
 >HTML" title="The HyperText Mark-up Language">HTML</a></span> nebo
 > <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a> (včetně
 > různých XML jazyků jeko je <a href="/en-US/docs/SVG" title="en-U
 >S/docs/SVG">SVG</a> nebo <a href="/en-US/docs/XHTML" title="en-US
 >/docs/XHTML">XHTML</a>)<span class="seoSummary">. CSS určuje, jak
 > má být daný element zobrazen na monitoru, papíře, ve zvukové pod
 >obě nebo na jiném médiu.</span>
nn10    <p>
11      CSS je jeden z nejdůležitějších jazyků na <em>otevřené pavu
 >čině</em> a je standardizován ve <a class="external" href="http:/
 >/w3.org/Style/CSS/#specs">specifikaci W3C</a>. Je vyvíjen v etapá
 >ch, CSS1 je dnes zastaralá, CSS2.1 je doporučená a <a href="/en-U
 >S/docs/CSS/CSS3" title="CSS3">CSS3</a>, dnes rozdělená na menší m
 >oduly pokračuje v cestě standardizací. V současnosti se rodí prvn
 >í koncepty spacifikace CSS4.
12    </p>
13    <div style="margin:auto;text-align:center;">
10    <div class="callout-box">14      <div class="callout-box action-driven">
11      <strong><a href="/cs/CSS/Jak_za%C4%8D%C3%ADt" title="cs/CSS15        <div>
>/Jak_začít">Jak začít</a></strong><br> 
12      Tutoriál, který vám pomůže začít s kaskádovými styly.16          CSS Reference
17        </div>
18        <p>
19          <a href="/en-US/docs/CSS/CSS_Reference" title="en-US/do
 >cs/CSS/CSS_Reference">Vyčerpávající reference</a> pro <u>ostřílen
 >é vývojáře Webu</u> jež popisuje všechny vlastnosti a principy CS
 >S.
20        </p>
21      </div>
22      <div class="callout-box action-driven">
23        <div>
24          CSS Tutoral
25        </div>
26        <p>
27          <a href="/en-US/docs/CSS/Getting_Started" title="en-US/
 >docs/CSS/Getting_Started">Postupné seznámení</a>, které pomůže za
 >čít <u>naprostým začátečníkům</u>. Pokrývá ty nejdůležitější zákl
 >ady.
28        </p>
29      </div>
30      <div class="callout-box action-driven">
31        <div>
32          Ukázky CSS3
33        </div>
34        <p>
35          <a href="/en-US/demos/tag/tech:css3" title="https://dev
 >eloper.mozilla.org/en-US/demos/tag/tech:css3">Kolekce ukázek</a> 
 >představující <u>poslední technologie CSS</u> v akci: dodá vám in
 >spiraci.
36        </p>
37      </div>
n14    <div>n
15      <strong>Cascading Style Sheets</strong> (<strong>CSS</stron
>g>) je jazyk používaný k určení vzhledu dokumentu napsaného v <a  
>href="/cs/HTML" title="cs/HTML">HTML</a> nebo <a href="/cs/XML" t 
>itle="cs/XML">XML</a> (včetně jednotlivých XML jazyků jako <a hre 
>f="/cs/XHTML" title="cs/XHTML">XHTML</a> nebo <a href="/cs/SVG" t 
>itle="cs/SVG">SVG</a>). V produktech založených na <a href="/cs/X 
>UL" title="cs/XUL">XUL</a> jako např. Mozilla Suite, Firefox nebo 
> Thunderbird je také používán k upravení vzhledu uživatelského ro 
>zhraní aplikace. Např. <a href="/cs/Motivy_vzhledu" title="cs/Mot 
>ivy_vzhledu">motivy vzhledu</a> hojně využívají CSS k úpravám vzh 
>ledu aplikace. CSS je <a class="external" href="http://w3.org/Sty 
>le/CSS/#specs">doporučením W3C</a>. 
16    </div>
17    <table class="topicpage-table">39    <div class="row topicpage-table">
18      <tbody>40      <div class="section">
41        <h2 class="Documentation" id="Documentation" name="Docume
 >ntation">
42          Documentace a Úvodní kurzy CSS
43        </h2>
19        <tr>44        <dl>
20          <td>45          <dt>
21            <h4 id="Dokumentace_v_.C4.8De.C5.A1tin.C4.9B" name="D46            Základní koncepty CSS
>okumentace_v_.C4.8De.C5.A1tin.C4.9B"> 
22              <a href="/Special:Tags?tag=CSS&amp;language=cs" tit
>le="Special:Tags?tag=CSS&amp;language=cs">Dokumentace v češtině</ 
>a> 
23            </h4>
24            <dl>
25              <dt>
26                <a class="external" href="http://interval.cz/clan
>ky/kaskadove-styly-poprve/">Kaskádové styly poprvé</a> 
27              </dt>
28              <dd>
29                <small>Tutorial k CSS1 na serveru Interval.cz.</s
>mall> 
30              </dd>
31            </dl>
32            <dl>
33              <dt>
34                <a class="external" href="http://interval.cz/clan
>ky/css2-kaskadove-styly-podruhe/">Kaskádové styly podruhé</a> 
35              </dt>
36              <dd>
37                <small>Tutorial k CSS2 na serveru Interval.cz.</s
>mall> 
38              </dd>
39            </dl>
40            <p>
41              <span class="alllinks"><a href="/Special:Tags?tag=C
>SS&amp;language=cs" title="Special:Tags?tag=CSS&amp;language=cs"> 
>Zobrazit vše...</a></span> 
42            </p>
43            <p>
44              &nbsp;
45            </p>
46            <h4 id="Dokumentace_v_anli.C4.8Dtin.C4.9B" name="Doku
>mentace_v_anli.C4.8Dtin.C4.9B"> 
47              <a href="/Special:Tags?tag=CSS&amp;language=cs">Dok
>umentace v anličtině</a> 
48            </h4>
49            <dl>
50              <dt>
51                <a href="/en/Using_URL_values_for_the_cursor_prop
>erty">Použití hodnot URL pro vlastnost cursor</a> 
52              </dt>
53              <dd>
54                <small><a href="/cs/Gecko" title="cs/Gecko">Gecko
></a> 1.8 (Firefox 1.5, SeaMonkey 1.0) podporuje hodnoty URL pro < 
>a class="external" href="http://www.w3.org/TR/CSS21/ui.html#curso 
>r-props">vlastnost CSS 2/2.1 cursor</a>. To umožňuje použití libo 
>volných obrázků namísto kurzorů myši — je možné použít jakýkoliv  
>formát obrázku podporovaný jádrem <a href="/cs/Gecko" title="cs/G 
>ecko">Gecko</a>.</small> 
55              </dd>
56            </dl>
57            <dl>
58              <dt>
59                <a href="/en/CSS3_Columns">Sloupce v CSS3</a>
60              </dt>
61              <dd>
62                <small>Stručný tutoriál, jak používat vlastnost c
>olumn (rozdělení textu do sloupců), jež je zahrnuta v CSS3.</smal 
>l> 
63              </dd>
64            </dl>
65            <dl>
66              <dt>
67                <a href="/en/Issues_Arising_From_Arbitrary-Elemen
>t_hover">Problémy vyplývající z použití hover u některých prvků s 
>tránky</a> 
68              </dt>
69              <dd>
70                <small>Mnoho tvůrců používá pseudo-třídu <code>:h
>over</code> (součást CSS2) k úpravě vzhledu odkazů, avšak rozvíje 
>jící se podpora CSS v prohlížečích měla neočekávaně za následek a 
>gresivní použití&nbsp;:hover na některých stránkách.</small> 
71              </dd>
72            </dl>
73            <dl>
74              <dt>
75                <a href="/en/Consistent_List_Indentation">Shodné 
>odrážkování seznamů</a> 
76              </dt>
77              <dd>
78                <small>Změna odrážek u seznamů pomocí CSS je slož
>itější než by se mohlo zdát, ale jen proto, že prohlížeče, řídící 
> se CSS, zvolily odlišné varianty pro výchozí odrážkování. Naučte 
> se, jak na to, aby bylo zobrazení stejné ve všech případech.</sm 
>all> 
79              </dd>
80            </dl>
81            <p>
82              <span class="alllinks"><a href="/Special:Tags?tag=C
>SS&amp;language=cs">Zobrazit vše...</a></span> 
83            </p>
84          </td>47          </dt>
85          <td>48          <dd>
86            <h4 id="Komunita" name="Komunita">49            Popisují <a href="/en-US/docs/CSS/Syntax" title="/en-
 >US/docs/CSS/Syntax">syntaxi a formy jazyka</a> a uvádí základní p
 >rincipy jako jsou <a href="/en-US/docs/CSS/Specificity" title="Sp
 >ecificity">priority</a> a <a href="/en-US/docs/CSS/inheritance" t
 >itle="inheritance">dědičnost</a>, <a href="/en-US/docs/CSS/box_mo
 >del" title="Box model">box model</a>, <a href="/en-US/docs/CSS/ma
 >rgin_collapsing" title="Margin collapsing">splynutí okolí</a>, <a
 > href="/en-US/docs/CSS/Understanding_z-index/The_stacking_context
 >" title="The stacking context">překrývání</a> a <a href="/en-US/d
 >ocs/CSS/block_formatting_context" title="block formatting context
 >">block-formatting</a> contexts, nebo <a href="/en-US/docs/CSS/in
 >itial_value" title="initial value">initial</a>, <a href="/en-US/d
 >ocs/CSS/computed_value" title="computed value">computed</a>, <a h
 >ref="/en-US/docs/CSS/used_value" title="used value">used</a> and 
 ><a href="/en-US/docs/CSS/actual_value" title="actual value">actua
 >l</a> values. Entity jako <a href="/en-US/docs/CSS/Shorthand_prop
 >erties" title="CSS/Shorthand_properties">CSS shorthand properties
 ></a> jsou též definovány.
87              Komunita
88            </h4>50          </dd>
51          <dt>
52            <a href="/en-US/docs/CSS/Writing_Efficient_CSS" title
 >="CSS/Writing_Efficient_CSS">Píšeme efektivní CSS</a>
53          </dt>
54          <dd>
55            Vysvětluje, jak analyzátory kaskádových stylů provádě
 >jí výběr elementů a popisují pravidla pro zápis efektivnějších CS
 >S.
56          </dd>
57          <dt>
58            <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transfor
 >ms" title="How to use CSS3 Transforms (2D and 3D)">CSS transforms
 ></a>
59          </dt>
60          <dd>
61            Presents the 2D operations that can be applied to eac
 >h element in order to rotate, skew, translate it.
62          </dd>
63          <dt>
64            <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transiti
 >ons" title="How to use a CSS transition">CSS transitions</a>
65          </dt>
66          <dd>
67            Explains how to change the aspect of an element using
 > a smooth animation between the initial and final state.
68          </dd>
69          <dt>
70            <a href="/en-US/docs/CSS/Tutorials/Using_CSS_animatio
 >ns" title="How to use a CSS animation">CSS animations</a>
71          </dt>
72          <dd>
73            Describes how to define animations of an element but 
 >also how to <a href="/en-US/docs/CSS/CSS_animations/Detecting_CSS
 >_animation_support" title="https://developer.mozilla.org/en-US/do
 >cs/CSS/CSS_animations/Detecting_CSS_animation_support">detect</a>
 > in Javascript if the browser supports it.
74          </dd>
75          <dt>
76            <a href="/en-US/docs/CSS/Using_CSS_gradients" title="
 >How to use CSS3 Gradients">CSS gradients</a>
77          </dt>
78          <dd>
79            Explains how to define gradients, images composed of 
 >smooth variations of colors.
80          </dd>
81          <dt>
82            <a href="/en-US/docs/CSS/Using_CSS_multi-column_layou
 >ts" title="How to use CSS3 Multicol layout">CSS multi-column layo
 >uts</a>
83          </dt>
84          <dd>
85            Presents how to make multi-column page settings using
 > the CSS Level 3 multi-column layout.
86          </dd>
87          <dt>
88            <a href="/en-US/docs/CSS/Multiple_backgrounds" title=
 >"How to use the CSS3 multiple background feature">CSS multiple ba
 >ckgrounds</a>
89          </dt>
90          <dd>
91            Describes how to define several backgrounds on the sa
 >me element.
92          </dd>
93          <dt>
94            <a href="/en-US/docs/CSS/Scaling_background_images" t
 >itle="CSS/Scaling_background_images">Scaling background images</a
 >>
95          </dt>
96          <dd>
97            Shows how to control background images when the image
 > and the container are not the same size.
98          </dd>
99          <dt>
100            <a class="internal" href="/en-US/docs/CSS/Media_queri
 >es" title="How to use CSS3 Media Queries">CSS media queries</a>
101          </dt>
102          <dd>
103            Presents how to select style sheets based on details 
 >of the rendering device, like its viewport size, its resolution o
 >r if it has a touchscreen.
104          </dd>
105          <dt>
106            <a href="/en-US/docs/CSS_Counters" title="CSS Counter
 >s">CSS counters</a>
107          </dt>
108          <dd>
109            Explains how to use automatic counters and numbering,
 > essentially used as list counters.
110          </dd>
111          <dt>
112            Fonts and Typography
113          </dt>
114          <dd>
115            Informs about managing your <a href="/en-US/docs/CSS/
 >font" title="font">fonts</a> using {{ cssxref("@font-face") }} an
 >d the <a href="/en-US/docs/WOFF" title="About_WOFF">WOFF font</a>
 > format.
116          </dd>
117          <dt>
118            <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" ti
 >tle="Using CSS flexible boxes">CSS flexible boxes</a>
119          </dt>
120          <dd>
121            Describes how to use flexible boxes to design layouts
 >.
122          </dd>
123          <dt>
124            <a href="/en-US/docs/Consistent_List_Indentation" tit
 >le="Consistent_List_Indentation">Consistent List Indentation</a>
125          </dt>
126          <dd>
127            Trying to change the indentation of lists with CSS is
 > trickier than it looks, but only because CSS-conformant browsers
 > took different paths to default indentation. Find out how to get
 > them all in line.
128          </dd>
129          <dt>
130            <a href="/en-US/docs/DOM/Using_dynamic_styling_inform
 >ation" title="DOM/Using_dynamic_styling_information">Using dynami
 >c styling information</a>
131          </dt>
132          <dd>
133            How to obtain information on and manipulate styling v
 >ia the DOM.
134          </dd>
135        </dl>
89            <p>136        <p>
90              {{ SeznamDiskuzí("dev-tech-css", "mozilla.dev.tech.137          <span class="alllinks"><a href="/en-US/docs/tag/CSS" ti
>css") }}>tle="/en-US/docs/tag/CSS">View All...</a></span>
91            </p>138        </p>
139      </div>
140      <div class="section">
141        <h2 class="Community" id="Community" name="Community">
142          Getting help from the community
143        </h2>
144        <p>
145          You need help on a CSS-related problem and can't find t
 >he solution in the documentation?
146        </p>
147        <ul>
148          <li>Check the <a href="/en-US/docs/CSS/Common_CSS_Quest
 >ions" title="en-US/docs/CSS/Common_CSS_Questions">common CSS ques
 >tions</a> that give hints to solve common CSS problems.
149          </li>
150          <li>Go to <a href="http://stackoverflow.com/questions/t
 >agged/css" title="http://stackoverflow.com/questions/tagged/css">
 >Stack Overflow</a>, a collaboratively built and maintained Q&amp;
 >A site and look if you can find the answer to your question. If n
 >ot you will be able to ask your question there.
151          </li>
152          <li>Consult the layout forum, which covers CSS and HTML
 >: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
n93              <li>n154              <li>Ask your question on the Mozilla IRC channel: <
 >a class="link-irc" href="irc://irc.mozilla.org/css">#css</a>
94                <a class="link-irc" href="irc://irc.mozilla.org/c
>ss">#css kanál na IRC</a> 
n96              <li>n
97                <a class="external" href="http://www.css-discuss.156              <li>Ask your question on the <a class="external" hr
>org/">CSS-Discuss site and list</a>>ef="http://www.css-discuss.org/">CSS-Discuss site and list</a>
n100            <h4 id="N.C3.A1stroje" name="N.C3.A1stroje">n
101              Nástroje
102            </h4>
103            <ul>
104              <li>
105                <a class="link-https" href="https://addons.mozill
>a.org/extensions/moreinfo.php?category=Developer%20Tools&amp;id=6 
>0">Rozšíření Web Developer pro Firefox</a> 
106              </li>159          </li>
160        </ul>
161        <p>
162          <span class="alllinks"><a class="external" href="http:/
 >/www.catb.org/~esr/faqs/smart-questions.html" title="http://www.c
 >atb.org/~esr/faqs/smart-questions.html">Don't forget about the <e
 >m>netiquette</em>...</a></span>
163        </p>
164        <h2 class="Tools" id="Tools" name="Tools">
165          Tools easing CSS development
166        </h2>
167        <ul>
107              <li>168          <li>
108                <a class="external" href="http://jigsaw.w3.org/cs169            <span class="external">The</span> <a class="external"
>s-validator/">CSS validátor</a>> href="http://jigsaw.w3.org/css-validator/">W3C CSS Validation Se
 >rvice</a> checks if a given CSS is valid. It is an invaluable deb
 >ugging tool.
109              </li>170          </li>
110              <li>171          <li>Firefox' <a class="link-https" href="https://addons
 >.mozilla.org/en-US/firefox/addon/1843">Firebug extension</a><span
 > class="external">, a popular</span> extension of that navigator 
 >that allows to edit live CSS on watched sites. Very practical to 
 >test some changes, though this extension does much more.
111                <a class="link-https" href="https://addons.mozill
>a.org/extensions/moreinfo.php?id=179">Rozšíření EditCSS pro Firef 
>ox</a> 
112              </li>172          </li>
173          <li>
174            <span class="external">Firefox'</span> <a class="link
 >-https" href="https://addons.mozilla.org/en-US/firefox/addon/60">
 >Web Developer extension</a> also allows to watch and edit live CS
 >S on watched sites. Simpler than Firebug, though less powerful.
113            </ul>175          </li>
114            <p>176          <li>Firefox' <a class="external link-https" href="https
 >://addons.mozilla.org/en-US/firefox/addon/179">EditCSS extension<
 >/a> allows editing CSS in the sidebar.
115              <span class="alllinks"><a href="/Special:Tags?tag=C
>SS:N%C3%A1stroje&amp;language=cs" title="Special:Tags?tag=CSS:Nás 
>troje&amp;language=cs">Zobrazit vše...</a></span> 
116            </p>
117            <h4 id="Souvisej.C3.ADc.C3.AD_t.C3.A9mata" name="Souv
>isej.C3.ADc.C3.AD_t.C3.A9mata"> 
118              Související témata
119            </h4>
120            <dl>
121              <dd>
122                <a href="/cs/Roz%C5%A1%C3%AD%C5%99en%C3%AD" title
>="cs/Rozšíření">Rozšíření</a>, <a href="/cs/HTML" title="cs/HTML" 
>>HTML</a>, <a href="/cs/Motivy_vzhledu" title="cs/Motivy_vzhledu" 
>>Motivy vzhledu</a>, <a href="/cs/XHTML" title="cs/XHTML">XHTML</ 
>a>, <a href="/cs/XML" title="cs/XML">XML</a>, <a href="/cs/XUL" t 
>itle="cs/XUL">XUL</a> 
123              </dd>
124            </dl>177          </li>
125          </td>178        </ul>
179        <p>
180          <span class="alllinks"><a href="/en-US/docs/tag/CSS:Too
 >ls" title="/en-US/docs/tag/CSS:Tools">View All...</a></span>
126        </tr>181        </p>
182        <h2 class="Related_Topics" id="Related_Topics" name="Rela
 >ted_Topics">
183          Related Topics
184        </h2>
185        <ul>
186          <li>Mozilla Learn <a href="/en-US/learn/css" title="htt
 >ps://developer.mozilla.org/en-US/learn/css">CSS resources</a>.
187          </li>
188          <li>Open Web languages on which CSS is often applied: <
 >a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a hr
 >ef="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XH
 >TML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML
 >" title="en-US/docs/XML">XML</a>.
189          </li>
190          <li>Mozilla technologies which make extensive use of CS
 >S: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Fire
 >fox and Thunderbird <a href="/en-US/docs/Extensions" title="en-US
 >/docs/Extensions">extensions</a> and <a href="/en-US/docs/Themes"
 > title="en-US/docs/Themes">themes</a>.
191          </li>
192        </ul>
127      </tbody>193      </div>
128    </table>
129    <p>
130      <span class="comment">Categories</span>
131    </p>194    </div>
132    <p>
133      <span class="comment">Interwiki Language Links</span>
134    </p>
t138    <p>t
139      {{ languages( { "en": "en/CSS", "de": "de/CSS", "es": "es/C
>SS", "fr": "fr/CSS", "ja": "ja/CSS", "pl": "pl/CSS", "pt": "pt/CS 
>S", "nl": "nl/CSS", "ko": "ko/CSS" } ) }} 
140    </p>

Back to History