• Accueil
  • Prestations

      Digital

      Community Management
      Publicités réseaux sociaux
      Newsletters
      Webmarketing

      Image de marque

      Création de logos
      Création d'identités visuelles
      Rédaction

      Développement web

      Création de site vitrine
      Création de site e-commerce
      Référencement
      Maintenance
  • Formations

      Création web

      Créer son site avec WordPress - Initiation
      Créer son site avec WordPress - Perfectionnement
      Créer son e-commerce avec Prestashop
      Elementor et Elementor PRO

      Webdesign

      Création de logos
      Création d'identités visuelles
      UX/UI

      Webmarketing

      Analyse de la situation actuelle
      Veille stratégique
      Référencement
      E-mailing
      Réseaux sociaux
  • Contact

      Contactez NETTIM

Les bases du HTML et du CSS Partie 2

Ajouter du CSS

Le CSS sera écrit dans un fichier nommé  style.css, qui sera rangé dans le dossier CSS.

On appellera notre fichier de cette façon :

				
					<!DOCTYPE html>
<html>
	<head>
	    <title>Le titre de ma page web</title>
	    <meta charset="utf-8" />
	    <link rel="stylesheet" href="css/style.css">
	</head>
	<body data-rsssl=1>
	</body>
</html>
				
			

Les sélecteurs

1- Sélecteurs universels : Sélectionne toutes les balises

				
					*{}
				
			

2- Une balise contenue dans une autre : Sélectionne toutes les balises em situées à l’interieur d’une balise h3

				
					h3 em
{
}
				
			

3- Une balise qui en suit une autre : Sélectionne la première balise p située après un titre h3

				
					h3 + p
{
}
				
			

4- une balise qui possède un attribut : sélectionne tous les liens a qui possèdent un attribut title

				
					a[title]
{
}
				
			

5- une balise, un attribut et une valeur exacte : 

				
					a[title="Cliquez ici"]
{
}
				
			

Les pseudo-classes

Ils permettent d’appliquer des propriétés CSS à un moment donné et à une action précise
-Hover 
-Focus
-Click
-Sélection de certains enfants (:first child , :last child et : nth child

Les différents pseudo-éléments

::after permet de créer un pseudo-élément qui sera le dernier enfant de l’élément sélectionné
::before permet de créer un pseudo-élément qui sera le premier enfant de l’élément sélectionné
::selection permet d’appliquer des règles à la sous-partie sélectionnée par l’utilisateur
::first-line permet d’appliquer des règles à la première ligne d’un élément
::first-letter permet d’appliquer des règles à la première lettre de la première ligne d’un élément

Les effets en CSS

1- LINEAR-GRADIENT : permet de créer une image représentant un dégradé de couleurs.

2- BOX ET TEXT SHADOW : permet d’ajouter un ou plusieurs ombres à la boîte d’un élément ou au texte.

3- FILTRE ET OPACITÉ : filter permet d’appliquer des filtres sur des éléments. Ils sont principalement utilisés pour les images :

– blur : effet flou
– brightness : luminosité
– contrat : contrast
– drop-shadow : ombre portée
– grayscale : conversion au niveau de gris
– hue-rotate : rotation de teinte
– invert : inversion des couleurs
– saturate : saturation des couleurs

La propriété opacity définit la transparence d’un élément.

4- TRANSITIONS : permet de modifier progressivement la valeur d’une ou de plusieurs propriétés

– Transition-property : définit le nom des propriétés CSS pour lesquelles nous souhaitons appliquer des transitions
– Transition-duration : définit la durée de la transition
– Transition-delay : définit le temps à attendre avant le début
– Transition-timing-function : définit la façon dont les valeurs intermédiaires sont calculées

5- TRANSFORM : Cette propriété modifie les coordonnées d’un élément sur les axes X, Y et Z ainsi qu’en 3D). Elle permet de créer des :

– Déplacements : translate
– Rotations : rotate
– Changement d’échelle : scale
– Distorsions : skew

6- ANIMATIONS : Elles permettent de créer des transitions complexes entre deux états de mise en forme. Elle est configurée par deux éléments :

1- Les propriétés de l’animation
2- Les étapes (appelées keyframes) qui indiquent un état initial, un état final et éventuellement des états intermédiaires.

Contrairement aux transitions, les animations se déclenchent automatiquement (et non avec le hover, le click…).

• Animation-name : nom utilisé comme référence pour les @keyframes
• Animation-delay : délai avant le début de l’animation
• Animation-direction : aller-retour ou reprise du cycle entre le from et le to
• Animation-duration : durée du cycle d’animation
• Animation-fill-mode : valeurs à appliquer avant et après l’exécution
• Animation-iteration-count : la répétition de l’animation
• Animation-play-state : permet de gérer l’exécution de l’animation
• Animation-timing-function : la fonction de chronométrage
(accélération)

Créer une animation

Mise en pratique

Exercice

L'animation

Créer un carré qui se déplace sur la page en CSS

La transformation

Transformer un carré en losange en CSS

Logo Nettim Agence Web Metz
  • Accueil
  • Prestations
    • E-Commerce
    • Vitrine
    • Services +
    • Maintenance
    • Tarifs
  • Formations
  • A Propos
    • A propos
Menu
  • Accueil
  • Prestations
    • E-Commerce
    • Vitrine
    • Services +
    • Maintenance
    • Tarifs
  • Formations
  • A Propos
    • A propos

Benchmark

©2022 Nettim

  • Mentions Légales
  • Contact
  • Accueil
  • Conseils
  • Plan du site
  • FAQ
Menu
  • Mentions Légales
  • Contact
  • Accueil
  • Conseils
  • Plan du site
  • FAQ
Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désabonner si vous le souhaitez. AccepterRejeter En savoir +
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Toujours activé
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Non-necessary
Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.
Enregistrer & appliquer