{{tag>cours dev développement web css sass html}}
====== Définissez des priorités ======
Notes et tr... s respectent un ordre bien précis : en premier le HTML, qui va déterminer les fondations de votre page web, puis le CSS pour le style.
Si pour le HTML la tâche reste simple, pour le CSS en revanche c’... = 1 - Le style inline, défini directement dans le HTML ====
Lorsque vous écrivez du CSS dans du HTML, c
{{tag>cours dev développement web css sass html}}
====== Clarifiez votre HTML avec BEM ======
Notes et transcriptions du cours [[https://openclassr... ation ? Ou même d’une page qui a été supprimée en HTML et dont on aurait oublié de supprimer le CSS ?
T... nce ou le pouvoir. C’est la même chose pour notre HTML.
Comme pour les pokémons, l’idéal serait qu’en u
{{tag>cours dev développement web css sass html}}
====== Simplifiez votre code ======
Notes et trans... se aux pokémons, euh... aux répétitions !
<code html>
<body>
<h2>Différents exemples de boutons</h2>... n</button>
</div>
</body>
</code>
Avec ce code HTML, on comprend que cette page contient quatre bouto... c’est très bien… mais il faut aussi adapter notre HTML ! Et pour ce faire, nous allons combiner nos séle
{{tag>cours dev développement web css sass html}}
====== Quiz : Structurer son code ======
Notes et ... niser votre CSS par ordre d’apparition dans votre HTML et favoriser la compréhension.
++++ Réponse|
Cho... === Question 4 =====
En vous basant sur le code HTML et CSS ci-dessous :
<code html>
<div id="header" class="header">
Header Content!
</div>
</code>
{{tag>cours dev développement web css sass html}}
====== Optimisez la lecture du code ======
Notes e... e la même façon que vous imbriquez des balises en HTML, dans Sass vous pouvez imbriquer les sélecteurs, ... e de sélecteurs claire qui reflète leur structure HTML : vos sélecteurs sont imbriqués exactement comme ils le seraient en HTML. Regardez le CSS qui en résulte :
<code css>
.na
{{tag>cours dev développement web css sass html}}
====== Simplifiez vous le CSS avec Sass ======
Not... rs:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:000_start|Créez votre site web avec HTML5 et CSS3]].
Avec le temps, vos projets grossissent, ... hir à l'organisation et la structure des fichiers HTML/CSS. On aurait gagné du temps aussi bien dans la
{{tag>cours dev développement web css sass html}}
====== Quiz : Optimiser son CSS avec Sass ======
N... === Question 2 =====
En vous basant sur le code HTML suivant,
<code html>
<section>
<h1>Titre</h1>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
... e d'expressions.
On vous donne un titre :
<code html>
<h1>Titre</h1>
</code>
Comment faites-vous pour
{{tag>cours dev développement web css sass html}}
====== Passez au niveau supérieur avec Sass ======
... 'nav'', vous ne trouvez pas ? Exactement comme en HTML ! Eh bien, c’est une des fonctionnalités de Sass ... Sass pour optimiser votre code.
[[130_clarifier_html_via_bem|◁ Précédent]] |
[[000_start|⌂ Retour au s
{{tag>cours dev développement web css sass html}}
====== Utilisez les variables et mixins ======
Not... //sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types|documentation Sass]].
</note>
=====
{{tag>cours dev développement web css sass html}}
====== Adaptez votre code sur tous supports ======
... rs:informatique:dev:web:creez_votre_site_web_avec_html5_et_css3:420_responsive_design_et_media_queries|Créez votre site web avec HTML5 et CSS3]].
</note>
Les media queries indiquent
