Aplikacje WWW

Marcin Benke

6 marca 2015

CSS = Cascading Style Sheets

<style>... </style>
<link href="foo.css" type="text/css" rel="stylesheet">
http://www.cssbasics.com/css-syntax/

body {
    background-color:   #e2e699;
    font:               120% arial, verdana, helvetica, lucida, sans-serif;
}

#content{ background-color: #f7faee; } /* <foo id="content*/

.centered { text-align: center; } /* <foo class="centered" */

Cascading

#leftnav a { color: green; }
#content h2 { color: red; }

<body>
  <div id="leftnav">        <!-- body #leftnav -->
    <a href="#">Galeria</a> <!-- body #leftnav a -->
  </div>
  <div id="content">    
    <h2>Tytuł </h2>         <!-- #content h2 -->
  </div>
</body>

Firefox Inspector

Tools->Web Developer->Inspector
Narzędzia->Dla twórców witryn->Inspektor
Shift+Ctrl+C
Obejrzyjmy http://benke.org/example1

Box model

w3schools.com/css/css_boxmodel.asp

#content{
margin-left: 200px;
background-color: #f7faee;
border-left: 1px solid gray;
padding: 1em;
max-width: 36em;
text-align: left;
}

Jednostki miary

Najważniejsze:

px - pixel
em - szerokość czcionki
% - względem domyślnej (np font-size: 120%)

w3schools.com/cssref/css_units.asp

7 CSS Units You Might Not Know About