CSS

  • Revision slug: CSS
  • Revision title: CSS
  • Revision id: 371527
  • Created:
  • Creator: makovickym
  • Is current revision? Ano
  • Comment

Revision Content

Cascading Style Sheets, zkráceně CSS, jazyk kaskádových stylů, který se používá k popisu grafické reprezentace dokumentu napsaného v HTML nebo XML (včetně různých XML jazyků jeko je SVG nebo XHTML). CSS určuje, jak má být daný element zobrazen na monitoru, papíře, ve zvukové podobě nebo na jiném médiu.

CSS je jeden z nejdůležitějších jazyků na otevřené pavučině a je standardizován ve specifikaci W3C. Je vyvíjen v etapách, CSS1 je dnes zastaralá, CSS2.1 je doporučená a CSS3, dnes rozdělená na menší moduly pokračuje v cestě standardizací. V současnosti se rodí první koncepty spacifikace CSS4.

CSS Reference

Vyčerpávající reference pro ostřílené vývojáře Webu jež popisuje všechny vlastnosti a principy CSS.

CSS Tutoral

Postupné seznámení, které pomůže začít naprostým začátečníkům. Pokrývá ty nejdůležitější základy.

Ukázky CSS3

Kolekce ukázek představující poslední technologie CSS v akci: dodá vám inspiraci.

Dokumentace a Úvodní kurzy CSS

Základní koncepty CSS
Popisují syntaxi a formy jazyka a uvádí základní principy jako jsou priority a dědičnost, box model, splynutí okolí, překrývání a block-formatting contexts, nebo initial, computed, used and actual values. Entity jako CSS shorthand properties jsou též definovány.
Píšeme efektivní CSS
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.
CSS transforms
Presents the 2D operations that can be applied to each element in order to rotate, skew, translate it.
CSS transitions
Explains how to change the aspect of an element using a smooth animation between the initial and final state.
CSS animations
Describes how to define animations of an element but also how to detect in Javascript if the browser supports it.
CSS gradients
Explains how to define gradients, images composed of smooth variations of colors.
CSS multi-column layouts
Presents how to make multi-column page settings using the CSS Level 3 multi-column layout.
CSS multiple backgrounds
Describes how to define several backgrounds on the same element.
Scaling background images
Shows how to control background images when the image and the container are not the same size.
CSS media queries
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.
CSS counters
Explains how to use automatic counters and numbering, essentially used as list counters.
Fonts and Typography
Informs about managing your fonts using {{ cssxref("@font-face") }} and the WOFF font format.
CSS flexible boxes
Describes how to use flexible boxes to design layouts.
Consistent List Indentation
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.
Using dynamic styling information
How to obtain information on and manipulate styling via the DOM.

View All...

Getting help from the community

You need help on a CSS-related problem and can't find the solution in the documentation?

  • Check the common CSS questions that give hints to solve common CSS problems.
  • Go to Stack Overflow, a collaboratively built and maintained Q&A site and look if you can find the answer to your question. If not you will be able to ask your question there.
  • Consult the layout forum, which covers CSS and HTML: {{ DiscussionList("dev-tech-css", "mozilla.dev.tech.layout") }}

Don't forget about the netiquette...

Tools easing CSS development

  • The W3C CSS Validation Service checks if a given CSS is valid. It is an invaluable debugging tool.
  • Firefox' Firebug extension, a popular 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.
  • Firefox' Web Developer extension also allows to watch and edit live CSS on watched sites. Simpler than Firebug, though less powerful.
  • Firefox' EditCSS extension allows editing CSS in the sidebar.

View All...

 

Revision Source

<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="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-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="http://stackoverflow.com/questions/tagged/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 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="http://www.css-discuss.org/">CSS-Discuss site and list</a></li>
        </ul>
      </li>
    </ul>
    <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://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="http://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>
Revert to this revision