Coding

Mon memento CSS

Sélecteur CSS

Texte

  
.p {
font-family: "Times New Roman", Times, serif;
   }
/*----------------------------------*/
.p {
font-size: 1.2em;   /*--px--%--*/
   }
/*----------------------------------*/
.p {
font-weight: normal; 
   }
/*bold-lighter-bolder-100-900*/
/*----------------------------------*/
.p {
font-style: normal;   /*italic-oblique-oblique 40deg*/
   }
/*----------------------------------*/
.p {
color:tomato;  /*#FF6347*-rgb(255,99,71)-rgba(255,99,71,0.5)/
   }  
/*----------------------------------*/
.p {
text-transform:capitalize; /*uppercase-lowercase-full-width*/
   }
/*----------------------------------*/
 .p {
text-decoration:none;  /*underline dotted
underline dotted red-green wavy underline
underline overline #FF3028*/
}
/*----------------------------------*/
.p {
text-align: left; /*-right-center-justify*/
/*----------------------------------*/
.p {
line-height:normal; /*2.5-3em-150%-32px*/
   }
Appel d'une font family dans le féchier media

@font-face{
src:url("media/ulti.ttf");
 font-family: "ultitypo";
}

Espacement


.div {
margin: 1em; /*10px 50px 20px 30px*/
/*margin-top_ right_bottom_left_*/
padding: 1em;

Bordures


border: solid; /*dashed red-1rem solid-
/*thick double #32a1ce-4mm ridge rgba(170, 50, 220, .6)*/

Backgroung-color


main{
background-color: grey; /*couleur de font*/
 }

Backgroung-image


header{
background-image: url("../image/background.jpg");
background-position:top center;
background-repeat: no-repeat;
}

body{
background:
linear-gradient(90deg, grey 30%,pink 70%),
linear-gradient(200deg, grey, blue);
}

header{
background-image: linear-gradient(rgba(0, 0, 255, 0.5),
rgba(255, 255, 0, 0.5)),
url("../../media/examples/lizard.png");
/*degrader + image*/

header{
background-image: url("../../media/examples/lizard.png"),
url("../../media/examples/star.png");
/*deux image*/
}

Tailles

Les différentes tailles

header nav ul {
height: 300px;
 }

img{
max-width: 100%;
 }
/*width-min-width-max-width-
height-min-height-max-height*/

Positionnement


.img {
position: static;
}
/*relative-top-right-bottom-left-float-
display-z-index-overflow*/

Mot clés

Déclaration du CSS

Dans le HTML
A mettre dans le<header>HTML

<style type="text/css">
p {color: #1E89CA; font-size:1.5rem;}
</style>

Interne

A mettre dans le<header>HTML
       

<link rel="stylesheet" href="style/j7.css">

Externe

Styles externe Boostrap dans le<header>HTML
         

<link href="
https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.cs
"rel="stylesheet" 
integrity="sha384-+
0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" 
crossorigin="anonymous">

Externe

Google font

<link rel="preconnect" href="https://fonts.gstatic.com">
Font Awesome

<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css
"integrity="
sha384-
SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk
" crossorigin="anonymous">

Feuille de style

 

p {...}

Sélecteur de classe

Il s'applique à toutes les éléments ayant l'attribut class="ma_classe".

.ma_classe {
background-color:red;
}

Sélecteur d'identifiants

Il s'applique à l'élément unique ayant l'attribut id="mon_id".
#mon_id {
background-color:green;
}

Sélecteur universel

La règle s'applique à tous les éléments.

*{
background-color:red;
}

Sélecteurs composés

La règle s'applique à tous les éléments <p class="ma_classe">...</p>

<p class="ma_classe">Exemple</p>.
p.ma_classe {
background-color:red;
}

Sélecteur par ascendance.

S'applique aux seuls éléments <strong> ayant un ancêtre <p> qui luimême à un ancêtre<div></p> Sélecteur par ascendance. S'applique aux seuls éléments <strong> ayant un ancêtre <p> qui lui même à un ancêtre <div>.

div p strong {
background-color:red;
}

Sélecteur collectif

Sélecteur collectif. S'applique aux élémentslecteur collectif. S'applique aux <div>, <p> et <strong>.
         
div, p, strong {
background-color:red;
}

Sélecteurs d'enfants

Sélecteurs d'enfants. S'applique aux seuls éléments <p> dont le parent direct est <div>.

div > p {
background-color:red;
}

Variable

:root est une pseudo-classe CSS pouvant être utilisée afin de contenir différentes déclarations de variables qui seront utilisées par la suite. De cette manière, on évite la répétition.
On reconnait les variables CSS grâce au <-->devant leur nom.

:root {
--card-offset: -100px;
--success: #595642; /*vert*/
--dark: #3A3835; /*gris fonce*/
--primary: #FF940A;/*orange*/
--secondary: #EAEAEA;/*gris clair*/
}
/*------apel----*/
.text-primary {
color: var(--primary) 
}
.text-secondary {
color: var(--secondary)
}
.bg-primary {
background: var(--primary)
}
.bg-success {
background: var(--success) 
}
.bg-dark {
background: var(--dark)
}