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;
 }