SLeitgeb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Pomocí classes (tříd) si můžete označit jednotlivé prvky ve stránce a můžete je přes CSS odlišit od ostatních prvků se stejným tagem.
V tomto příkladu jsou vidět další možnosti použití vlastností prvků, které stanovíte pomocí CSS.

  
## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page title</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <h1>Or is it?</h1>
    <p>You've already familiar with paragraphs.</p>
    <ul>
        <li>And you've</li>
        <li class="middle">used some</li>
        <li>unordered lists</li>
    </ul>
    <ol>
        <li>Did you know</li>
        <li class="middle">there were</li>
        <li>ordered lists as well?</li>
    </ol>
    <h2 class="middle">What if we put this somewhere around here?</h2>
    <p>Sometimes you might want to display tabular data:</p>
    <table>
        <tr>
            <td>so</td>
            <td>they</td>
            <td>can</td>
        </tr>
        <tr>
            <td>deliver</td>
            <td>your</td>
            <td>message</td>
        </tr>
        <tr>
            <td colspan=3>easily</td>
        </tr>
    </table>
    <div>Use divs to structure the page.
        <div>You can nest them if you want. Actually, you can nest <span class="emphasis">a lot of elements.</span>
        </div>
    </div>
</body>
</html>

## style.css
html {
    font: 12px/24px Arial, "Trebuchet MS";
}

body {
    background: #ccc;
}

h1 {
    color: blue;
}

h2 {
    margin-top: 25px;
    margin-left: 25px
}

table {
    border-collapse: collapse;
}

table tr td {
    border: 1px solid white;
    padding: 5px;
    text-align: center;
}

p {
    border-top: 1px solid rgb(121, 66, 107);
    color: red;
}

.emphasis {
    color: green;
    font-style: italic;
    font-weight: bold;
}

h2 {
    color: blue !important;
}

.middle, h2.middle {
    color: yellow;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Page title</title>
	<link rel="stylesheet" type="text/css" href="./style.css">
	</head>
	<body>
	<h1>Or is it?</h1>
	<p>You've already familiar with paragraphs.</p>
	<ul>
	<li>And you've</li>
	<li class="middle">used some</li>
	<li>unordered lists</li>
	</ul>
	<ol>
	<li>Did you know</li>
	<li class="middle">there were</li>
	<li>ordered lists as well?</li>
	</ol>
	<h2 class="middle">What if we put this somewhere around here?</h2>
	<p>Sometimes you might want to display tabular data:</p>
	<table>
	<tr>
	<td>so</td>
	<td>they</td>
	<td>can</td>
	</tr>
	<tr>
	<td>deliver</td>
	<td>your</td>
	<td>message</td>
	</tr>
	<tr>
	<td colspan=3>easily</td>
	</tr>
	</table>
	<div>Use divs to structure the page.
	<div>You can nest them if you want. Actually, you can nest <span class="emphasis">a lot of elements.</span>
	</div>
	</div>
	</body>
	</html>
	html {
	font: 12px/24px Arial, "Trebuchet MS";
	}

	body {
	background: #ccc;
	}

	h1 {
	color: blue;
	}

	h2 {
	margin-top: 25px;
	margin-left: 25px
	}

	table {
	border-collapse: collapse;
	}

	table tr td {
	border: 1px solid white;
	padding: 5px;
	text-align: center;
	}

	p {
	border-top: 1px solid rgb(121, 66, 107);
	color: red;
	}

	.emphasis {
	color: green;
	font-style: italic;
	font-weight: bold;
	}

	h2 {
	color: blue !important;
	}

	.middle, h2.middle {
	color: yellow;
	}