Scribd Logo
Importer

Bienvenue sur Scribd !

  • SNT-NSI-ISN HTML5Elements CSS3Proprietes.v2

    Transféré par

    bary
    68 vues2 pages

    Titre original

    SNT-NSI-ISN_HTML5Elements_CSS3Proprietes.v2

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    68 vues2 pages

    SNT-NSI-ISN HTML5Elements CSS3Proprietes.v2

    Transféré par

    bary

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 2

    Manuels de référence du langage HTML, en ligne 

    :
    MEMENTO - HTML5 ●
    https://developer.mozilla.org/fr/docs/Web/HTML/Element
    ●
    https://www.w3schools.com/TAGs/tag_details.asp

    Éléments de structure de Éléments « conteneurs » ( balise ouvrante + contenu + balise fermante)


    page
    <html>
    Eléments de contenu sémantique Éléments de contenu textuel généraux
    <head> ●
    <header></header>
    ●
    <nav></nav> Titres : Liste à puces
    <title></title> ●
    <main></main>
    ●
    <section></section> de <h1></h1> à <h5></h5> <ul><li></li></ul>
    ●
    <footer></footer>
    ●
    <aside></aside> Paragraphe : <p></p>
    <meta> Liste numérotée
    ●
    <article></article>
    </head> Hyperlien : <a></a> <ol><li></li></ol>
    <body></body>
    Éléments de contenu textuel
    </html>
    spécifiques Éléments génériques <div></div> block
    <abbr></abbr> <span></span> inline
    Attributs de <meta>
    ●

    ●
    <acronym></acronym>
    charset keyword ●
    <address></address> Élément formulaire Attributs de <form>
    author author
    ●
    <cite></cite> <form> ●
    action
    ●
    <code></code> <input> ●
    method
    HTML5 et CSS3 ●
    ... <textarea></textarea>
    <select>
    <style> <option></option>
    Regles CSS Attributs de <input>,
    Élément de Éléments </select>
    sélecteur{propriété:valeur;} <button></button> <textarea>et <select>
    </style> marquage de texte divers
    </form> ●
    id
    ou <b></b> gras <hr> trait ●
    name
    <u></u> souligné <br> retour
    <link href="URL" <i></i> italique à la ligne
    rel="stylesheet">
    Valeurs de l’attribut
    Élément tableau Valeurs de l’attribut ‘type’ ‘type’ de <button>
    <table> de <input> ●
    button (par défaut)
    HTML5 et Javascript <tr> submit (envoi du
    text (par défaut)
    ● ●

    <script>Instructions </script> <td> contenu </td> ●


    checkbox (case à cocher) formulaire)
    ou </tr> ●
    radio (bouton radio)
    ●
    reset (réinitialisation)
    <script src="URL"> </table>

    Attributs universels (applicables à tous les éléments) Attributs Éléments de média


    ●
    id="identifiantUnique" Sélecteur CSS et/ou identifiant du DOM : liaison avec javascript d’événements Image <img src="URL">
    ●
    title="chaineDeCaracteres" texte d’une Infobulle onclick, onkeyup, Vidéo <video src="URL"></video>
    ●
    style="propriété:valeur;" règles CSS applicables à l’élément uniquement onkeydown,ondblclick,
    Son <audio src="URL"></audio>
    ●
    class="nomDeClasse" Sélecteur CSS onkeypressed,
    oncontextmenu...
    Manuels de référence du langage CSS, en ligne :
    MEMENTO - CSS3 ●
    https://developer.mozilla.org/fr/docs/Web/CSS/Reference
    ●
    https://www.w3schools.com/cssref/default.asp

    Les différentes types de sélecteurs Pseudo-classes Valeurs pour les couleurs


    Sélecteur de type nomElement ●
    :hover Les couleurs peuvent être définies selon le modèles rouge-vert-bleu-
    Sélecteur de classe .nomClasse Sélecteur universel *, ns|*, *|*, |* alpha (RGB avec une composante alpha, optionnelle, pour gérer la
    Sélecteur d’identifiant #nomID Sélecteur d’attribut [attr=valeur]
    ●
    :focus transparence.
    ●
    :active Notation hexadécimale : #RRGGBB[AA] ou #RGB[A]
    signe « # » suivi par huit ou 4 caractères hexadécimaux (0-9, A-F)
    Mise en forme de Mise en forme de conteneurs ●
    :visited
    texte Notation fonctionnelle avec des virgules :
    ●
    Marges extérieures à l’élément ●
    :link rgb(R, G, B[, A]) ou rgba(R, G, B, A)
    ●
    color margin, -top, -bottom, -left,-right Cette fonction permet d'ajouter une composante d'opacité (par rapport
    ●
    :checked
    ●
    Marges intérieures à l’élément à la fonction rgb()). Le quatrième argument définira la force de l'opacité
    ●
    background-color : 1 pour une opacité complète et 0 pour une transparence totale. Les
    padding, -top,-bottom, -left, -right ●
    :disabled
    ●
    font-size arguments peuvent être des nombres ou des pourcentages.
    ●
    width ●
    :empty
    ●
    font-family ●
    border-style Mots-clés : black, white, grey, blue, green, yellow, red,
    ●
    height border-color :invalid
    ●
    font-weight
    ● ●
    orange, maroon, pink, purple...
    ●
    box-shadow ●
    border-width
    ●
    text-align
    ●
    text-decoration Pseudo- Valeurs pour les longueurs, tailles, dimensions
    Rendu d’un élément éléments
    ●
    text-shadow Une longueur est un nombre suivi d'une unité de longueur (px, em, pc,
    ●
    display in, mm…). Il n'y aucun espace entre le nombre et l'unité.
    ●
    ::after
    ●
    list-style Unités de longueur relatives :
    ●
    ::before
    Valeurs spéciales de ●
    liées à la taille de la police de caractères : em, rem
    ●
    overflow ::placeholder
    propriété – cf principe ●

    d’héritage plus bas


    ●
    liées aux dimensions du viewport (= partie visible du
    document) : vh, vw
    ●
    nherit | initial Positionnement d’un élément Rendu du
    Unités de longueur absolues :
    ●
    float curseur de la
    Etiquette particulière souris ●
    px, mm, cm, in, pt, pc
    ●
    clear
    !important ●
    cursor Pour certaines propriétés : %
    ● ●
    position

    Principe de « cascade ». Principe de spécificité. Il régit la manière dont le


    navigateur décide quelle règle s’applique si plusieurs règles ont
    Cela signifie que l'ordre dans lequel sont écrites les règles CSS est important.
    des sélecteurs différents, mais peuvent quand même s’appliquer
    Lorsque deux règles s'appliquent à un même élément, c’est celle qui est « lue » en au même élément.
    dernier qui sera utilisée.
    Un sélecteur d'élément est moins spécifique (il sélectionnera
    tous les éléments de ce type qui apparaissent sur une page), ce
    Principe d’héritage. Il existe deux types de propriétés : des propriétés qui donnera un score inférieur.
    héritées et des propriétés non héritées.
    Un sélecteur de classe est plus spécifique - il sélectionne
    Lorsqu’un élément -dit parent - contient un autre élément – dit fils - : les propriétés uniquement les éléments d'une page ayant une valeur d'attribut
    héritées du parent s’appliquent au fils ; les propriétés non héritées ne s’appliquent pas : de classe spécifique - il obtient donc un score plus élevé.
    ce sont les propriétés initiales prédéfinies qui s’appliquent.

    Vous aimerez peut-être aussi