Scribd Logo
Upload

Welcome to Scribd!

  • 2 Css

    Uploaded by

    Thanos
    10 views4 pages

    Original Title

    2-css

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views4 pages

    2 Css

    Uploaded by

    Thanos

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 4

    ΕΡΓΑΣΤΗΡΙΟ 30/5/2016 – CSS

    ΑΣΚΗΣΗ 3
    Δημιουργήστε τα 2 παρακάτω αρχεία.

    ask3.html ask3.css
    <html> .fancy{
    <head> font-family:cursive;
    <link type="text/css" rel="stylesheet" href="ask3.css"/> color: #0000CD;
    <title>Κλάσεις</title> }
    </head>
    <body> #serious{
    <h3>Λίστα</h3> font-family:Courier;
    <ul class=fancy> color:#BAC120;
    <li>Καφές </li> }
    <li>Ζάχαρη </li>
    <li>Κανέλα </li>
    </ul>
    <h3 class=fancy> Λίστα στην κλάση fancy</h3>
    <h2> Τίτλος</h2>
    <h2 id=serious> Τίτλος2</h2>
    </body>
    </html>

    ΑΣΚΗΣΗ 4
    Δημιουργήστε τα 2 παρακάτω αρχεία.

    ask4.html ask4.css
    <html> .red {
    <head> color: red;
    <link type="text/css" rel="stylesheet" href="ask4.css"/> }
    <title>Result</title>
    </head> #rogue {
    <body> color: #FF00FF;
    <h3 class="red">I'm an h3 header in the red font-weight: bold;
    class!</h3> font-family: cursive;
    <h3>I'm just a regular old h3 header.</h3> }
    <p class="red">I'm a paragraph in the red
    class!</p>
    <p>I'm just a regular old paragraph.</p>
    <p id="rogue">I'm a rogue paragraph! I do what I
    want!</p>
    </body>
    </html>

    1
    ΑΣΚΗΣΗ 5
    ask5.html ask5.css
    <html> p{
    <head> text-indent: 20px;
    <link type="text/css" rel="stylesheet" href="ask5.css"/> font-family: Garamond;
    <title>Σταφύλια</title> }
    </head> a{
    <body> color: blue;
    <p>Σταφύλια για άσπρο κρασί : </p> }
    <ul> <li><a href="ri.htm" a.whitewine {
    class="whitewine">Riesling</a></li> color: #FFBB00;
    <li><a href="ch.htm" }
    class="whitewine">Chardonnay</a></li> a.redwine {
    <li><a href="pb.htm" color: #800000;
    class="whitewine">Pinot Blanc</a></li> }
    </ul>
    <p>Σταφύλια για κόκκινο κρασί : </p>
    <ul>
    <li><a href="cs.htm"
    class="redwine">Cabernet Sauvignon</a></li>
    <li><a href="me.htm"
    class="redwine">Merlot</a></li>
    <li><a href="pn.htm"
    class="redwine">Pinot Noir</a></li>
    </ul>
    </body>
    </html>

    ΑΣΚΗΣΗ 6
    ask6.html ask6.css
    <html> #thessaly {
    <head> background:blue;
    <link type="text/css" rel="stylesheet" href="ask6.css"/> color:white;
    <title>ΗΠΕΙΡΟΣ</title> font-weight:bold;
    </head> }
    <body> #epirus {
    <div id="thessaly"> background:red;
    <ul> color:white;
    <li>Καρδίτσα</li> }
    <li>Λάρισα</li>
    <li>Μαγνησία</li>
    <li>Τρίκαλα</li>
    </ul>
    </div>
    <div id="epirus">
    <ul>
    <li>Άρτα</li>
    <li>Θεσπρωτία</li>
    <li>Ιωάννινα</li>
    <li>Πρέβεζα</li>
    </ul>
    </div>
    </body></html>

    2
    ΑΣΚΗΣΗ 7
    Ο στόχος της άσκησης είναι δημιουργήσουμε την παρακάτω ιστοσελίδα με τη βοήθεια ενός εξωτερικού
    αρχείου CSS.

    Για το σκοπό αυτό, δημιουργήστε αρχικά τα παρακάτω και αποθηκεύστε ως template.html.

    Δίνεται ο κώδικας σχεδίασης του παραπάνω template, όσον αφορά το κυρίως σώμα.
    <body>
    <div id="page">
    <div id="logo">
    <h1>My First Website</h1>
    </div>
    <div id="nav">
    <ul>
    <li><a href="#/home.html">Home</a></li>
    <li><a href="#/about.html">About</a></li>
    <li><a href="#/contact.html">Contact</a></li>
    </ul>
    </div>
    <div id="content">
    <h2>Home</h2>
    <p>This is my first webpage! I was able to code all the HTML and CSS in order to make it.
    Watch out world of web design here I come!</p>
    <p> I can use my skills here to create websites for my business, my friends and family, my
    C.V, blog or articles. As well as any games or more experiment stuff (which is what the web is really all about). </p>
    </div>
    <div id="footer">
    <p>Webpage made by <a href="#">[your name]</a></p>
    </div>
    </div>
    </body>

    3
    Ακολούθως, ο κώδικας για το αρχείο style.css, είναι ο παρακάτω:

    p{ line-height: 1em; }

    h1, h2, h3, h4{


    color: orange;
    font-weight: normal;
    line-height: 1.2em;}

    h1{ font-size: 1.8em; }


    h2{ font-size: 1.5em; }

    a{ color: black;
    text-decoration: none;}
    a:hover, a:active{ text-decoration: underline; }

    body{
    font-family: arial; font-size: 80%; line-height: 1.2em; width: 100%; margin: 0; background: #ddc;}

    #page{ margin: 20px; }

    #logo{
    width: 35%;
    margin-top: 5px;
    font-family: georgia;
    display: inline-block;}

    #nav{
    width: 60%;
    display: inline-block;
    text-align: right;
    float: right;}
    #nav ul{}
    #nav ul li{
    display: inline-block;
    height: 22px;
    }
    #nav ul li a{
    padding: 20px;
    background: orange;
    color: white;
    }
    #nav ul li a:hover{
    background-color: #ffb424;
    }
    #nav ul li a:active{ background-color: #ff8f00; }

    #content{
    margin: 30px 0;
    background: white;
    padding: 20px;
    clear: both;
    }
    #footer{
    border-bottom: 1px #ccc solid;
    margin-bottom: 10px;}
    #footer p{
    text-align: right;
    text-transform: uppercase;
    font-size: 80%;
    color: grey;}

    You might also like