Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • ID Și Class

    Încărcat de

    GHEORGHIŢA VASILE
    0 vizualizări5 pagini

    Titlu original

    ID și Class

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    0 vizualizări5 pagini

    ID Și Class

    Încărcat de

    GHEORGHIŢA VASILE

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    https://www.agernic.com/ro/css/id-si-class-diferentele-dintre-class-si-id.

    php

    ID și Class, diferențele dintre Class și Id

    Diferența dintre ID și class este că un selector de ID poate fi utilizat


    pentru a identifica un element, dar selectorul de clasă - class - poate fi
    utilizat pentru a identifica mai multe elemente.

    În CSS, selectorul de class începe cu „.” (punct fara ghilimele) urmat de


    numele selectorului și ID-ul selectorului începe cu „#” urmat de numele
    selectorului

    Sintaxa selectorului (Class):

    .class_nume {
    /* Definiti aici proprietatile*/
    }

    Sintaxa selectorului ID :

    #id_nume {
    /* Definiti aici proprietatile*/
    }
    Selectorul ID in CSS

    Un selector ID este un identificator unic al elementului HTML căruia i se va


    aplica un anumit stil. Este utilizat numai atunci când un singur element
    HTML de pe pagina web trebuie să aibă un stil specific.

    În foile de stil interne și externe, folosim hash (#) pentru un selector de


    id.
    Exemplu
    <!DOCTYPE html>
    <html>
    <head>
    <title>Titlul documentului</title>
    <style>
    #tope {
    color: #1c87c9;
    font-family: "Comic Sans MS", cursive;
    font-size: 18px;
    background-color: #CADFFF;
    height: 60px;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    padding: 10px;
    }
    #container {
    color: #333;
    font-family: "Comic Sans MS", cursive;
    font-size: 16px;
    background-color: #E1E1E1;
    height: auto;
    width: 90%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 6px;
    padding: 10px;
    }
    </style>
    </head>
    <body>
    <div id="tope">LOGO - Titlu.</div>
    <div id="container">
    <h2>Titulo </h2>
    <p>Primul paragraf, textul dvs. aici.</p>
    <p>Al doilea paragraf.</p>
    <p>Al treilea paragraf.</p> </div>
    </body>
    </html>

    Selector de clasă (class) CSS

    Un selector de clasă este utilizat atunci când același stil trebuie aplicat mai
    multor elemente HTML de pe aceeași pagină web.

    În ambele foi de stil interne și externe, folosim un punct (.) pentru un


    selector de clasă.

    Exemplu de selector de clasă:

    <!DOCTYPE html>

    <html>

    <head>

    <title>Titlul documentului</title>

    <style>
    #tope {

    color: #1c87c9;

    font-family: "Comic Sans MS", cursive;

    font-size: 18px;

    background-color: #9DFFDF;

    height: 60px;

    width: 90%;

    margin-right: auto;

    margin-left: auto;

    padding: 10px;

    .caja_div {

    color: #333;

    font-family: "Comic Sans MS", cursive;

    font-size: 16px;

    background-color: #FFB9B9;

    height: auto;

    width: 90%;

    margin-right: auto;

    margin-left: auto;

    margin-top: 6px;

    padding: 10px;

    } </style>

    </head>

    <body>

    <div id="tope">LOGO - Titlu.</div>

    <div class="caja_div"><h2>Titlu </h2></div>

    <div class="caja_div"> <p>Primul paragraf, textul dvs. aici.</p></div>

    <div class="caja_div">

    <p>Al doilea paragraf.</p>

    <p>Al treilea paragraf.</p>


    <p>mai multe paragrave aici.</p>

    </div>

    </body>

    </html>

    În exemplul nostru, un selector de clasă .caja_div este utilizat de trei ori,


    în titlu și în paragraf.

    Diferența dintre selectorul de clasă și ID

    Diferența dintre ID-uri și clase este că primul este unic și al doilea nu.

    Aceasta înseamnă că fiecare element poate avea un singur ID și fiecare


    pagină poate avea un singur element cu acest ID.

    Când același ID este utilizat în mai multe elemente, codul nu va trece


    validarea. Dar, deoarece clasele nu sunt unice, aceeași clasă poate fi
    utilizată pe mai multe elemente și invers, puteți utiliza mai multe clase pe
    același element.

    Următorul cod demonstrează diferența dintre selectoarele de clasă și ID și


    cum să le setați proprietățile individuale. Codul stabilește o clasă pentru
    div și, prin urmare, toate elementele din div vor avea această clasă.

    Exemplu

    <!DOCTYPE html>

    <html>

    <head>

    <title>Titlul documentului</title>

    <style>

    .main {

    background-color: #FFAFA4;

    #demo {

    background-color: #DEDAF7;

    padding-top: 8px;

    padding-bottom: 8px;
    }

    </style>

    </head>

    <body>

    <div class="main">

    <h3>Bine ați venit la Educational! Clasa de paragraf</h3>

    <p id="demo">Exemplu de paragraf cu un ID de identificare</p>

    <p> Exemplu de paragraf fără identificare (fără ID)</p>

    </div>

    </body>

    </html>

    S-ar putea să vă placă și