Scribd Logo
Upload

Welcome to Scribd!

  • Fundal (Background) CSS: Body (Background-Color: Pink )

    Uploaded by

    Stefania Stoica
    11 views8 pages
    buiiub

    Original Title

    Web

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    buiiub

    Copyright:

    © All Rights Reserved
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    11 views8 pages

    Fundal (Background) CSS: Body (Background-Color: Pink )

    Uploaded by

    Stefania Stoica
    buiiub

    Copyright:

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

    Fundal (background) CSS

    Proprietatile CSS pentru fundalul unei pagini HTML sunt:


    background-color
    background-image
    background-repeat
    background-attachment
    background-position

    Aplicatie: pagina HTML cu fundal pink

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: pink;
    }
    </style>
    </head>
    <body>
    <h1>Prima pagina HTML cu CSS.</h1>
    </body>
    </html>

    Formatarea textului cu CSS


    1. Culoarea textului
    Exemplu:
    h1 {
    color: #00ff00;
    }

    h2 {
    color: rgb(255,0,0);
    }

    1. Alinierea textului

    Exemplu:

    1
    h1 {
    text-align: center;
    }

    2. Text decoration

    Exemplu:

    h1 {
    text-decoration: none;
    }

    h3 {
    text-decoration: underline;
    }

    3. Indentarea textului

    Exemplu:

    p{
    text-indent: 50px;
    }

    4. Fonturi

    Exemplu:

    p{
    font-family: "Times New Roman", Times, serif;
    }

    Stilizarea link-urilor
    Pentru link-uri putem folosi orice proprietate CSS (color,
    background, etc)

    2
    Exista patru stari ale link-urilor:

    a:link link normal, nevizitat


    a:visited link vizitate
    a:hover link pe care se face mouse over
    a:active link pe care se face clic

    Aplicatie:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    /* link nevizitat */
    a:link {
    color: #FF0000;
    }

    /* link vizitat*/
    a:visited {
    color: gray;
    }

    /* link cu mouse over */


    a:hover {
    color: #FF00FF;
    }

    /* link selectat */
    a:active {
    color: red;
    }
    </style>
    </head>

    <body>

    3
    <p>
    <a href="destinatii.html" target="_blank">Destinatii
    turistice</a>
    </p>
    </body>
    </html>

    Liste in CSS
    In CSS putem defini diferiti marcatori pentru liste:
    cerc, patrat, imagine, etc.

    Aplicatie:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    ul.a {
    list-style-type: circle;
    }

    ul.b {
    list-style-type: square;
    }

    ol.c {
    list-style-type: upper-roman;
    }

    </style>
    </head>
    <body>

    <p>Liste neordonate:</p>
    <ul class="a">

    4
    <li>Luni</li>
    <li>Marti</li>
    <li>Miercuri</li>
    </ul>

    <ul class="b">
    <li>Luni</li>
    <li>Marti</li>
    <li>Miercuri</li>
    </ul>

    <p>Lista ordonata:</p>
    <ol class="c">
    <li>Ianuarie</li>
    <li>Februarie</li>
    <li>Martie</li>
    </ol>

    </body>
    </html>

    5
    Tabele in CSS:

    1. Chenare

    table, th, td {
    border: 1px solid blue;
    }

    2. Latimea, inaltimea tabelului

    table {
    width: 90%;
    }

    th {
    height: 50px;
    }

    3. Alinierea in celula:

    td {
    text-align: center;
    }

    td {
    vertical-align: bottom;
    }

    4. Culoarea tabelului, chenarului:

    table, td, th {
    border: 1px solid blue;
    }

    th {
    background-color: yellow;

    6
    color: white;
    }

    Bare de navigare create cu ajutorul listelor

    <ul>
    <li><a href="destinatii.html">Destinatii</a></li>
    <li><a href="noutati.html">Noutati</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="galerie.html">Galerie</a></li>
    </ul>

    Stergerea marcatorilor se face astfel:

    <head>
    <style>
    ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    }
    </style>
    </head>

    Pentru a construi o bara de navigare pe un fundal de culoare


    rosie, se adauga:

    a{
    display: block;
    width: 60px;
    background-color: red;
    }

    Pentru a afisa bara de navigare orizontal se foloseste:

    li {
    display: inline;
    }

    7
    Aplicatie: Sa se realizeze urmatoarea pagina, folosind HTML
    4 si CSS:

    You might also like