css + html5

Rédigé par Paulo Aucun commentaire
Classé dans : Web Mots clés : css

Quelques notes en vrac sur l'utilisation de CSS:
Source : openclassroom

  • balise class=xxx dans le html -> .xxx dans le css
    balise id=xxx dans le html -> #xxx dans le css
    Ps: id ne peut s'utiliser que dans un seul element :(

     
  • h1, em --> on apllique le style aux balises h1 et em
    h1 + p --> signifie le premier paragraphe qui suit la balise h1
    h1 em --> tous les em qui se trouvent dans un h1

     
  • <span> </span>: c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte

    <div> </div>: c'est une balise de type block, qui entoure un bloc de texte. Les balises<p>,<h1>, etc. sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau « bloc » dans la page et provoquent donc obligatoirement un retour à la ligne.
     
  • preferer la notation : 1em; pour préciser la taille de la police (taille de la lettre M, plus responsive)
     
  • installer une nouvelle police : http://www.fontsquirrel.com/
    - telecharger la police 
    - dézipper l'archive dans un repertoire 'fonts' par exemple
    - copier/coller le contenu du css telechargé dans le css du site (adapter la source des fichiers de font)
     
  • faire flotter une image : ici
     

Bonne pratique HTML5 : 
Source : openclassroom



  • Sections de la page identifiées par les balises
  • <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Zozor - Le Site Web</title>
    </head>

    <body>
        <header>
            <h1>Zozor</h1>
            <h2>Carnets de voyage</h2>
        </header>
        
        <nav>
            <ul>
                <li><a href="#">Accueil</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">CV</a></li>
            </ul>
        </nav>
        
        <section>
            <aside>
                <h1>À propos de l'auteur</h1>
                <p>C'est moi, Zozor ! Je suis né un 23 novembre 2005.</p>
            </aside>
            <article>                
                <h1>Je suis un grand voyageur</h1>
                <p>Bla bla bla bla (texte de l'article)</p>
            </article>
        </section>
        
        <footer>
            <p>Copyright Zozor - Tous droits réservés<br />
            <a href="#">Me contacter !</a></p>
        </footer>
        
    </body>
</html>

    • <header>: en-tête ;

    • <footer>: pied de page ;

    • <nav>: liens principaux de navigation ;

    • <section>: section de page ;

    • <aside>: informations complémentaires ;

    • <article>: article indépendant.
       

Les Balises de type inline et block: ici

  • Les balises inline : c'est le cas par exemple des liens<a></a>.
    Une balise de type inline se trouve obligatoirement à l'intérieur d'une balise block. Une balise inline ne crée pas de retour à la ligne, le texte qui se trouve à l'intérieur s'écrit donc à la suite du texte précédent, sur la même ligne (c'est pour cela que l'on parle de balise « en ligne »).
  • Les balises block : c'est le cas par exemple des paragraphes<p></p>.
    Une balise de type block sur votre page web crée automatiquement un retour à la ligne avant et après. Il suffit d'imaginer tout simplement un bloc. Votre page web sera en fait constituée d'une série de blocs les uns à la suite des autres. Mais vous verrez qu'en plus, il est possible de mettre un bloc à l'intérieur d'un autre, ce qui va augmenter considérablement nos possibilités pour créer le design de notre site !

Liens :

Les commentaires sont fermés.