Revision 626739 of CSS

<p><span class="seoSummary"><strong>Cascading Style Sheets</strong>, 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-US/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é podobě nebo na jiném médiu.</span></p>
<p>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="https://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-US/docs/CSS/CSS3" title="CSS3">CSS3</a>, dnes rozdělená na menší moduly pokračuje v cestě standardizací. V současnosti se rodí první koncepty spacifikace CSS4.</p>
<div style="margin:auto;text-align:center;">
  <div class="callout-box action-driven">
    <div>
      CSS Reference</div>
    <p><a href="/en-US/docs/CSS/CSS_Reference" title="en-US/docs/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 CSS.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      CSS Tutoral</div>
    <p><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áklady.</p>
  </div>
  <div class="callout-box action-driven">
    <div>
      Ukázky CSS3</div>
    <p><a href="/en-US/demos/tag/tech:css3" title="https://developer.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 inspiraci.</p>
  </div>
</div>
<div class="row topicpage-table">
  <div class="section">
    <h2 class="Documentation" id="Documentation" name="Documentation">Dokumentace a Úvodní kurzy CSS</h2>
    <dl>
      <dt>
        Základní koncepty CSS</dt>
      <dd>
        Popisují <a href="/en-US/docs/CSS/Syntax" title="/en-US/docs/CSS/Syntax">syntaxi a formy jazyka</a> a uvádí základní principy jako jsou <a href="/en-US/docs/CSS/Specificity" title="Specificity">priority</a> a <a href="/en-US/docs/CSS/inheritance" title="inheritance">dědičnost</a>, <a href="/en-US/docs/CSS/box_model" title="Box model">box model</a>, <a href="/en-US/docs/CSS/margin_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/docs/CSS/block_formatting_context" title="block formatting context">block-formatting</a> contexts, nebo <a href="/en-US/docs/CSS/initial_value" title="initial value">initial</a>, <a href="/en-US/docs/CSS/computed_value" title="computed value">computed</a>, <a href="/en-US/docs/CSS/used_value" title="used value">used</a> and <a href="/en-US/docs/CSS/actual_value" title="actual value">actual</a> values. Entity jako <a href="/en-US/docs/CSS/Shorthand_properties" title="CSS/Shorthand_properties">CSS shorthand properties</a> jsou též definovány.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Writing_Efficient_CSS" title="CSS/Writing_Efficient_CSS">Píšeme efektivní CSS</a></dt>
      <dd>
        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 CSS.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transforms" title="How to use CSS3 Transforms (2D and 3D)">CSS transforms</a></dt>
      <dd>
        Presents the 2D operations that can be applied to each element in order to rotate, skew, translate it.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Tutorials/Using_CSS_transitions" title="How to use a CSS transition">CSS transitions</a></dt>
      <dd>
        Explains how to change the aspect of an element using a smooth animation between the initial and final state.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Tutorials/Using_CSS_animations" title="How to use a CSS animation">CSS animations</a></dt>
      <dd>
        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/docs/CSS/CSS_animations/Detecting_CSS_animation_support">detect</a> in Javascript if the browser supports it.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Using_CSS_gradients" title="How to use CSS3 Gradients">CSS gradients</a></dt>
      <dd>
        Explains how to define gradients, images composed of smooth variations of colors.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="How to use CSS3 Multicol layout">CSS multi-column layouts</a></dt>
      <dd>
        Presents how to make multi-column page settings using the CSS Level 3 multi-column layout.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Multiple_backgrounds" title="How to use the CSS3 multiple background feature">CSS multiple backgrounds</a></dt>
      <dd>
        Describes how to define several backgrounds on the same element.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Scaling_background_images" title="CSS/Scaling_background_images">Scaling background images</a></dt>
      <dd>
        Shows how to control background images when the image and the container are not the same size.</dd>
      <dt>
        <a class="internal" href="/en-US/docs/CSS/Media_queries" title="How to use CSS3 Media Queries">CSS media queries</a></dt>
      <dd>
        Presents how to select style sheets based on details of the rendering device, like its viewport size, its resolution or if it has a touchscreen.</dd>
      <dt>
        <a href="/en-US/docs/CSS_Counters" title="CSS Counters">CSS counters</a></dt>
      <dd>
        Explains how to use automatic counters and numbering, essentially used as list counters.</dd>
      <dt>
        Fonts and Typography</dt>
      <dd>
        Informs about managing your <a href="/en-US/docs/CSS/font" title="font">fonts</a> using {{ cssxref("@font-face") }} and the <a href="/en-US/docs/WOFF" title="About_WOFF">WOFF font</a> format.</dd>
      <dt>
        <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="Using CSS flexible boxes">CSS flexible boxes</a></dt>
      <dd>
        Describes how to use flexible boxes to design layouts.</dd>
      <dt>
        <a href="/en-US/docs/Consistent_List_Indentation" title="Consistent_List_Indentation">Consistent List Indentation</a></dt>
      <dd>
        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.</dd>
      <dt>
        <a href="/en-US/docs/DOM/Using_dynamic_styling_information" title="DOM/Using_dynamic_styling_information">Using dynamic styling information</a></dt>
      <dd>
        How to obtain information on and manipulate styling via the DOM.</dd>
    </dl>
    <p><span class="alllinks"><a href="/en-US/docs/tag/CSS" title="/en-US/docs/tag/CSS">View All...</a></span></p>
  </div>
  <div class="section">
    <h2 class="Community" id="Community" name="Community">Getting help from the community</h2>
    <p>You need help on a CSS-related problem and can't find the solution in the documentation?</p>
    <ul>
      <li>Check the <a href="/en-US/docs/CSS/Common_CSS_Questions" title="en-US/docs/CSS/Common_CSS_Questions">common CSS questions</a> that give hints to solve common CSS problems.</li>
      <li>Go to <a href="https://stackoverflow.com/questions/tagged/css" title="https://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 not you will be able to ask your question there.</li>
      <li>Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}
        <ul>
          <li>Ask your question on the Mozilla IRC channel: <a class="link-irc" href="irc://irc.mozilla.org/css">#css</a></li>
          <li>Ask your question on the <a class="external" href="https://www.css-discuss.org/">CSS-Discuss site and list</a></li>
        </ul>
      </li>
    </ul>
    <p><span class="alllinks"><a class="external" href="https://www.catb.org/~esr/faqs/smart-questions.html" title="https://www.catb.org/~esr/faqs/smart-questions.html">Don't forget about the <em>netiquette</em>...</a></span></p>
    <h2 class="Tools" id="Tools" name="Tools">Tools easing CSS development</h2>
    <ul>
      <li><span class="external">The </span><a class="external" href="https://jigsaw.w3.org/css-validator/">W3C CSS Validation Service</a> checks if a given CSS is valid. It is an invaluable debugging tool.</li>
      <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.</li>
      <li><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 CSS on watched sites. Simpler than Firebug, though less powerful.</li>
      <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.</li>
    </ul>
    <p><span class="alllinks"><a href="/en-US/docs/tag/CSS:Tools" title="/en-US/docs/tag/CSS:Tools">View All...</a></span></p>
    <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Related Topics</h2>
    <ul>
      <li>Mozilla Learn <a href="/en-US/learn/css" title="https://developer.mozilla.org/en-US/learn/css">CSS resources</a>.</li>
      <li>Open Web languages on which CSS is often applied: <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a>, <a href="/en-US/docs/SVG" title="SVG">SVG</a>, <a href="/en-US/docs/XHTML" title="en-US/docs/XHTML">XHTML</a>, <a href="/en-US/docs/XML" title="en-US/docs/XML">XML</a>.</li>
      <li>Mozilla technologies which make extensive use of CSS: <a href="/en-US/docs/XUL" title="en-US/docs/XUL">XUL</a>, Firefox 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>.</li>
    </ul>
  </div>
</div>
<p>&nbsp;</p>