text: # CSS - aby byla tvoje aplikace krásná!
  
  Náš blog nevypadá stále dost pěkně, že? Je na čase ho udělat hezčí! Použijeme na to CSS.
  
  ## Co je to CSS?
  
  CSS (neboli Cascading Style Sheets) je jazyk používaný pro popis vzhledu a formátování webové stránky. Je to značkovací jazyk (jako HTML). Ber ho jako make-up pro náš web ;).
  
  Nechceme ale zase začínat úplně od začátku, že? Opět použijeme něco, co již bylo vytvořeno jinými programátory a sdíleno zdarma na internetu. Vymýšlet znovu, co již před námi někdo vymyslel, to by nebyla žádná legrace.
  
  ## Použijme Bootstrap!
  
  Bootstrap je jedním z nejpopulárnějších HTML a CSS frameworků pro vývoj pěkné webové stránky: https://getbootstrap.com/
  
  Napsali ho programátoři, kteří pracovali pro Twitter, a nyní ho vyvíjí dobrovolníci z celého světa.
  
  ## Instalace Bootstrapu
  
  Chceš-li nainstalovat Bootstrap, je třeba přidat do `< head >` v souboru `.html` (`blog/templates/blog/post_list.html`):
  
  ```html
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
  ```
  
  To nepřidá žádné soubory do projektu. Jen to odkazuje na soubory, které existují na internetu. Jen do toho, otevři tvůj web a aktualizuj stránku. Hurá!
  
  ![Obrázek 14.1][1]
  
   [1]: images/bootstrap1.png
  
  Hned to vypadá lépe!
  
  ## Statické soubory v Djangu
  
  Konečně se podíváme zblízka na téma, které jsme již zmínili, **statické soubory**. Statické soubory jsou všechny naše CSS soubory a obrázky, které nejsou dynamické, takže jejich obsah není závislý na kontextu požadavku a budou pro každého uživatele stejné.
  
  ### Kam umístit statické soubory pro Django
  
  Jak jsi viděla, když jsme spustili `collectstatic` na serveru, Django už ví, kde najít statické soubory pro vestavěnou aplikaci "admin". Teď jen musíme přidat nějaké statické soubory pro vlastní aplikaci, `blog`.
  
  Uděláš to tak, že vytvoříš složku s názvem `static` uvnitř aplikace blog:
  
  ```
  djangogirls
  ├── blog
  │   ├── migrations
  │   ├── static
  │   └── templates
  └── mysite
  ```    
  
  Django automaticky najde všechny složky s názvem "static" uvnitř vašich složek aplikací a bude moci využívat jejich obsah jako statické soubory.
  
  ## Tvůj první soubor CSS!
  
  Pokud chceš na webovou stránku přidat svůj vlastní styl, vytvoř css soubor. Vytvoř nový adresář s názvem `css` uvnitř adresáře `static`. Vytvoř nový soubor s názvem `blog.css` uvnitř tohoto adresáře `css`. Připraveno?
  
  ```
  djangogirls
  └─── blog
       └─── static
            └─── css
                 └─── blog.css
  ```
  
  Čas napsat nějaké CSS! Otevři soubor `blog/static/css/blog.css` v editoru kódu.
  
  Nepůjdeme příliš hluboko do tématu přizpůsobení webu a učení o CSS, protože je to docela snadné a můžeš se o tom naučit více sama po tomto workshopu. Opravdu můžeme doporučit [Codeacademy HTML & CSS kurz][2], kde se dozvíš vše, co potřebuješ vědět, aby tvoje stránky s CSS vypadaly dobře.
  
   [2]: https://www.codecademy.com/tracks/web
  
  Ale pojďme něco málo udělat. Co třeba změnit barvu našeho záhlaví? Pro interpretaci barev počítače používají speciální kódy. Začínají `#` a následuje 6 písmen (A-F) a číslic (0-9). Kódy barev můžeš najít například zde: http://www.colorpicker.com/. Můžeš také použít [předdefinované barvy][3], `červená/red` a `zelená/green`.
  
   [3]: http://www.w3schools.com/cssref/css_colornames.asp
  
  V souboru `blog/static/css/blog.css` přidej následující kód:
  
  ```css
  h1 a {
      color: #FCA205;
  }
  ```  
  
  `h1` je CSS selector. To znamená, že budeme aplikovat naše styly na jakýkoliv `a` element uvnitř `h1` (např. když máme v kódu něco jako: `< h1 ><a href = "" > odkaz < /a >< / h1 >`). V takovém případě sdělujeme, že barvu elementu měníme na `#FCA205`, což je oranžová. Samozřejmě sem můžeš vložit vlastní barvu!
  
  V CSS souboru určujeme styly pro prvky v souboru HTML. Prvky jsou identifikovány pomocí názvu prvku (tj, `a`,`h1`, `body`), atributem `class` nebo atributem `id`. Třídy/Class a id jsou jména, která pojmenovávají samotný prvek. Třídy definují skupiny prvků a id poukazují na konkrétní prvky. Například následující tag může identifikovat pomocí CSS tag `a`, třídu `external_link` nebo id `link_to_wiki_page`:
  
  ```html
  <a href="https://en.wikipedia.org/wiki/Django" class="external_link" id="link_to_wiki_page">
  ```  
  
  Přečti si o [CSS selektorech ve w3schools][4].
  
   [4]: http://www.w3schools.com/cssref/css_selectors.asp
  
  Pak je třeba také říct naší HTML šabloně, že jsme přidali nějaké CSS. Otevři soubor `blog/templates/blog/post_list.html` a přidej tento řádek na samý začátek:
  
  ```html
  {% load staticfiles %}
  ```  
  
  Právě nahráváme statické soubory :). Pak mezi `< head >` a `< / head >` za odkazy na soubory Bootstrap CSS (prohlížeč načte soubory v pořadí, ve kterém jsou zapsány, takže kód v našem souboru může přepsat kód v Bootstrap souborech) přidejte tento řádek:
  
  ```html
  <link rel="stylesheet" href="{% static 'css/blog.css' %}">
  ```
  
  Právě jsi řekla naší šabloně, kde je umístěn náš soubor CSS.
  
  Soubor by měl nyní vypadat takto:
  
  ```html
  {% load staticfiles %}
  <html>
      <head>
          <title>Django Girls blog</title>
          <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
          <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
          <link rel="stylesheet" href="{% static 'css/blog.css' %}">
      </head>
      <body>
          <div>
              <h1><a href="/">Django Girls Blog</a></h1>
          </div>
  
          {% for post in posts %}
              <div>
                  <p>published: {{ post.published_date }}</p>
                  <h1><a href="">{{ post.title }}</a></h1>
                  <p>{{ post.text|linebreaksbr }}</p>
              </div>
          {% endfor %}
      </body>
  </html>
  ```
  
  OK, ulož soubor a aktualizuj stránky!
  
  ![Obrázek 14.2][5]
  
   [5]: images/color2.png
  
  Dobrá práce! Co kdybychom také chtěli provzdušnit náš web a zvětšit okraj na levé straně? Pojďme to zkusit!
  
  ```css
  body {
      padding-left: 15px;
  }
  ```  
  
  Přidej toto do svého CSS souboru, ulož soubor a koukni se, jak to funguje!
  
  ![Obrázek 14.3][6]
  
   [6]: images/margin2.png
  
  Možná můžeme také chtít přizpůsobit písmo v našem záhlaví. Vlož za tag `< head >` v souboru `blog/templates/blog/post_list.html`:
  
  ```html
  <link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  ```  
  
  Tento řádek bude importovat písmo s názvem *Lobster* z Google písem (https://www.google.com/fonts).
  
  Nyní přidej řádek `font-family: "Lobster";` do CSS souboru `blog/static/css/blog.css` uvnitř deklarace `h1` bloku (kód mezi závorkami `{` a `}`) a aktualizuj stránky:
  
  ```css
  h1 a {
      color: #FCA205;
      font-family: 'Lobster';
  }
  ```  
  
  ![Obrázek 14.3][7]
  
   [7]: images/font.png
  
  Skvěle!
  
  Jak jsme si řekli výše, CSS má koncept tříd, který v podstatě umožňuje pojmenovat části kódu HTML a styly aplikovat pouze na tyto části bez ovlivnění ostatních částí. Je to zvlášť užitečné, pokud máš dva div tagy, ale každý dělá něco jiného (jako záhlaví a příspěvek), takže nechceš, aby vypadaly stejně.
  
  Pokračuj a pojmenuj některé části kódu HTML. Přidáš třídu s názvem `page-header` do tvého `div` tagu, který obsahuje záhlaví, jako je tento:
  
  ```html
  <div class="page-header">
       <h1><a href="/">Django Girls Blog</a></h1>
  </div>
  ```
  
  A nyní přidej třídu `post` do svého `div` obsahující blog post.
  
  ```html
  <div class="post">
       <p>published: {{ post.published_date }}</p>
       <h1><a href="">{{ post.title }}</a></h1>
       <p>{{ post.text|linebreaksbr }}</p>
  </div>
  ```    
  
  Nyní přidáme deklaraci bloků pro jiné selektory. Selektory začínající `.` se týkají tříd. Existuje mnoho skvělých návodů a vysvětlení CSS na webu, které ti pomohou pochopit následující kód. Pro tuto chvíli stačí zkopírovat a vložit do souboru `blog/static/css/blog.css`:
  
  ```css
  .page-header {
       background-color: #ff9400;
       margin-top: 0;
       padding: 20px 20px 20px 40px;
  }
  
  .page-header h1, .page-header h1 a, .page-header h1 a:visited, .page-header h1 a:active {
       color: #ffffff;
       font-size: 36pt;
       text-decoration: none;
  }
  
  .content {
       margin-left: 40px;
  }
  
  h1, h2, h3, h4 {
       font-family: 'Lobster', cursive;
  }
  
   .date {
       float: right;
       color: #828282;
  }
  
  .save {
       float: right;
  }
  
   .post-form textarea, .post-form input {
       width: 100%;
  }
  
   .top-menu, .top-menu:hover, .top-menu:visited {
       color: #ffffff;
       float: right;
       font-size: 26pt;
       margin-right: 20px;
  }
  
   .post {
       margin-bottom: 70px;
  }
  
   .post h1 a, .post h1 a:visited {
       color: #000000;
  }
  ```  
  
  Pak obklopující HTML kód, který zobrazuje příspěvek s deklaracemi tříd, nahraď tímto:
  
  ```html
  {% for post in posts %}
       <div class="post">
           <p>published: {{ post.published_date }}</p>
           <h1><a href="">{{ post.title }}</a></h1>
           <p>{{ post.text|linebreaksbr }}</p>
       </div>
  {% endfor %}
  ```    
  
  v `blog/templates/blog/post_list.html` tímto:
  
  ```html
  <div class="content container">
       <div class="row">
           <div class="col-md-8">
               {% for post in posts %}
                   <div class="post">
                       <div class="date">
                           {{ post.published_date }}
                       </div>
                       <h1><a href="">{{ post.title }}</a></h1>
                       <p>{{ post.text|linebreaksbr }}</p>
                   </div>
               {% endfor %}
           </div>
       </div>
  </div>
  ```    
  
  Tyto soubory ulož a aktualizuj své webové stránky.
  
  ![Obrázek 14.4][8]
  
   [8]: images/final.png
  
  Woohoo! Vypadá to super, ne? Kód, který jsme vložili, opravdu není tak těžké pochopit. Měla bys být schopna pochopit většinu z něj jen jeho čtením.
  
  Neobávej se trochu poupravit CSS a pokusit se změnit některé věci. Když něco rozbiješ, můžeš to vždy vrátit zpět!
  
  Mimochodem opravdu doporučujeme tento bezplatný online [Codeacademy HTML & CSS kurz][2] jako post-workshop úkol, naučíš se vše, co potřebuješ vědět, aby tvoje stránky byly díky CSS hezčí.
  
  Připravena na další kapitolu?! :)
  