4 changed files with 153 additions and 0 deletions
@ -0,0 +1,12 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Document</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<a href="index.html">HOME</a> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,70 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="cs"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||
|
<title>Práce se stylem</title> |
||||
|
<link rel="stylesheet" href="style.css"> |
||||
|
</head> |
||||
|
<body> |
||||
|
<h1>Práce se stylem</h1> |
||||
|
<p style="color: purple;">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum, neque quasi minus adipisci, modi quos optio quisquam odio cupiditate sunt voluptatum, voluptatem officia atque aliquid inventore eaque temporibus libero dolores!</p> |
||||
|
<p style="color:blueviolet;background-color: gold;">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque, a aperiam, sit ducimus non quam dolore ad atque repudiandae distinctio expedita, ipsum possimus quibusdam vero maxime. Blanditiis ab veniam enim!</p> |
||||
|
<p class="trida trida2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt commodi porro officiis, ut cum velit magni quod est voluptatibus quam architecto laudantium repellat nisi, iste accusamus ratione voluptas, iusto non.</p> |
||||
|
<p class="trida2 trida">Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem architecto possimus consectetur. Voluptatem beatae doloribus repudiandae explicabo molestiae voluptatibus quas expedita quia, quidem necessitatibus excepturi minima fugiat, vero quo a.</p> |
||||
|
<p class="trida" id="unikat">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque inventore ea veniam officia ipsam labore dicta debitis quam iusto? Rem, corrupti. Expedita quam maxime voluptate magni hic dolor alias incidunt.</p> |
||||
|
|
||||
|
<h2>Test h2</h2> |
||||
|
<h3>Test h3</h3> |
||||
|
<h4>Test h4</h4> |
||||
|
|
||||
|
<div class="trida3"> |
||||
|
<p>Paragraf</p> |
||||
|
<h1>Trida h1</h1> |
||||
|
</div> |
||||
|
|
||||
|
<a href="index.html">Index.html</a> |
||||
|
<a href="blablabla.html">blablabla.html</a> |
||||
|
|
||||
|
<!-- table>tr*4>td*5 (CTRL+K CTRL+C) --> |
||||
|
<table> |
||||
|
<tr> |
||||
|
<td>OBSAH 1</td> |
||||
|
<td>OBSAH 1</td> |
||||
|
<td>OBSAH 1</td> |
||||
|
<td>OBSAH 1</td> |
||||
|
<td>OBSAH 1</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Obsah2</td> |
||||
|
<td>Obsah2</td> |
||||
|
<td>Obsah2</td> |
||||
|
<td>Obsah2</td> |
||||
|
<td>Obsah2</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>Trala la</td> |
||||
|
<td>lalalal</td> |
||||
|
<td>Trala la</td> |
||||
|
<td>lalalal</td> |
||||
|
<td>Trala la</td> |
||||
|
</tr> |
||||
|
<tr> |
||||
|
<td>aeqweqwr</td> |
||||
|
<td>aeqweqwr</td> |
||||
|
<td>qweqwe</td> |
||||
|
<td>qweqwe</td> |
||||
|
<td>qweqweqeqwe</td> |
||||
|
</tr> |
||||
|
</table> |
||||
|
|
||||
|
<ul> |
||||
|
<li>qelmqmwm qewmomop</li> |
||||
|
<li>qelmqmwm qewmomop</li> |
||||
|
<li>qelmqmwm qewmomop</li> |
||||
|
<li>qelmqmwm qewmomop</li> |
||||
|
<li>qelmqmwm qewmomop</li> |
||||
|
</ul> |
||||
|
|
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,70 @@ |
|||||
|
/* tady začíná práce s CSS |
||||
|
tagy/selektory { pravidla:hodnota;} */ |
||||
|
/* práce s tagem */ |
||||
|
|
||||
|
p { |
||||
|
color:whitesmoke; |
||||
|
background-color: black; |
||||
|
} |
||||
|
h1 { |
||||
|
text-align: center; |
||||
|
} |
||||
|
h2, h3, h4 { |
||||
|
color: red; |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
h2:hover, h3:hover, h4:hover { |
||||
|
color: yellow; |
||||
|
font-size: 30px; |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
/* Selektory: |
||||
|
třída -> HTML: class | css: . (tečka) */ |
||||
|
.trida { |
||||
|
font-size: 25px; |
||||
|
color:blue; |
||||
|
} |
||||
|
.trida2 { |
||||
|
color:red; |
||||
|
} |
||||
|
|
||||
|
/* ID -> HTML: id | css: # (hashtag) |
||||
|
prvek s ID atributem musí (měl by) být unikátní v HTML kodu*/ |
||||
|
|
||||
|
#unikat { |
||||
|
font-family: Arial, Helvetica, sans-serif |
||||
|
} |
||||
|
|
||||
|
/* třída vázáná */ |
||||
|
.trida3 p { |
||||
|
color:aqua; |
||||
|
} |
||||
|
.trida3 h1 { |
||||
|
color:navy; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
a:hover { |
||||
|
text-decoration: underline; |
||||
|
} |
||||
|
a:visited { |
||||
|
color: black; |
||||
|
} |
||||
|
|
||||
|
table, tr, td { |
||||
|
border: 2px solid black; |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
padding: 10px; |
||||
|
border-collapse: collapse; |
||||
|
} |
||||
|
|
||||
|
ul { |
||||
|
list-style-type: none; |
||||
|
} |
||||
Loading…
Reference in new issue