add css_procviceni

2 years ago · 2f8eae7885
3 changed files with 128 additions and 0 deletions
--- a/css_procviceni/bez.png
+++ b/css_procviceni/bez.png
--- a/css_procviceni/index.html
+++ b/css_procviceni/index.html
@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS procvičení</title>
+    <link rel="stylesheet" href="style.css">
+    <style>
+        
+    </style>
+</head>
+<body>
+    <h1>Procvičení k maturitě</h1>
+    <h2>CSS - kaskádové styly</h2>
+    <h4>Tento text bude změněn za pomocí CSS</h4>
+
+    <div>
+        <p> LOL TEXT <span>DALSI RANDOM TEXT</span></p>
+    </div>
+
+    <p class="cervena">Lorem ipsum dolor sit, amet consectetur adipisicing elit. In velit sapiente dolores a mollitia corporis molestias quia quisquam ullam. Corrupti odit deserunt aspernatur, voluptas sed deleniti saepe qui obcaecati ipsum!</p>
+    <p id="zelena">Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit magnam consequatur, dolores voluptatibus quibusdam quis expedita deleniti dolorum animi temporibus soluta recusandae tempora omnis mollitia labore, earum nemo? Dolore, optio.</p>
+    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laborum numquam veritatis porro, fugiat facere repudiandae doloremque perferendis tempore aliquid commodi voluptate optio corrupti reprehenderit repellendus at nostrum placeat saepe qui!</p>
+    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum voluptates aliquam voluptate, facilis ducimus eius labore iure perspiciatis accusamus ea ratione dolore sunt totam libero, delectus cumque ipsum inventore necessitatibus?</p>
+
+    <hr>
+
+    <table>
+        <tr>
+            <td>ID</td>
+            <td>Jmeno</td>
+            <td>Prijmeni</td>
+            <td>Pohlaví</td>
+        </tr>
+        <tr>
+            <td>1</td>
+            <td>Petr</td>
+            <td>Janeček</td>
+            <td>Muž</td>
+        </tr>
+        <tr>
+            <td>2</td>
+            <td>Jana</td>
+            <td>Soukupová</td>
+            <td>Žena</td>
+        </tr>
+        <tr>
+            <td>3</td>
+            <td>Eva</td>
+            <td>Králová</td>
+            <td>Žena</td>
+        </tr>
+        <tr>
+            <td>4</td>
+            <td>Pavel</td>
+            <td>Novák</td>
+            <td>Muž</td>
+        </tr>
+    </table>
+
+    <ul>
+        <li>li1</li>
+        <li>li12
+            <ul>
+                <li>lili1</li>
+                <li>lili2</li>
+            </ul>
+        </li>
+        <li>li123</li>
+        <li>li1234</li>
+        <li>li54321</li>
+    </ul>
+    <ol>
+        <li>olli</li>
+        <li>olli</li>
+        <li>olli</li>
+    </ol>
+    
+    <div style="height: 250px;"></div>
+</body>
+</html>
--- a/css_procviceni/style.css
+++ b/css_procviceni/style.css
@ -0,0 +1,46 @@
+h1 {
+    color:greenyellow;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background-color: bisque;
+    }
+/* CSS Stylizace */
+h2 {
+    color:red;
+}
+
+h4 {
+    color: blue;
+}
+/* Třída */
+.cervena {
+    color: #FF0000;
+}
+ /* ID */
+#zelena {
+    color: rgba(0, 255, 0,1);
+}
+ /* dědičnost */
+div > p > span {
+    color: whitesmoke;
+    background-color: black;
+}
+
+/* pozměnění předchozí hodnoty na novou*/
+h1{
+    color: cyan;
+}
+
+table, th, td {
+    border: 1px solid black;
+}
+
+table {
+    border-collapse: collapse;
+}
+td {
+    padding: 15px;
+}
+
+ul {
+    list-style-type: square;
+}