Fich Css

STRUCTURE D'UN FICHIER HTLM
<!DOCTYPE>
<html>
{
<head>{
<meta charset="utf-8">
<title> Titre de la page </title>
<body>{contient tout ce qui sera afficher a l'ecran}
Selcteur:
**Simple: h1{.....}
**Groupe:h1, p{...}
**Pseudo-classes:(id="menu") #menu{...}
**Pseudo-elements
**Contextuels
La balise body contient tout ce qui sera affiche a l'ecran
####
!!!!Mettre en valeur un texte important

<mark> </mark> Surligner le texte
<em> </em> mettre en italic
<strong> </strong> mettre en gras
Deux attributs pour aplliker un style a seul element: id (#id), class (.class)
!!!!!
Les deux balises universelles:<span></span> et <div><div/>; elles n'ont aucunes
signification;
<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 pour sélectionner certains mots uniquement. Les balises
<strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu
d'un paragraphe,
<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.<div> est une balise fréquemment utilisée dans la construction
d'une mise en page, comme nous le verrons plus tard.
*****Pour modifier la taille du texte, on utilise la propriété CSS font-size et

ensuite, on indique :
une taille absolue ; en px(deconseillé)
ou une taille relative.('x'em)
*****La propriété CSS qui permet d'indiquer la police à utiliser est font-family :
Arial Black ;
Futura ;
Helvetica ;
Impact ;
Trebuchet MS ;
Verdana.
Pour cela, rendez-vous sur Google Fonts pour sélectionner une police, puis :
Copiez les balises <link> dans le <head> </head> du fichier HTML.
Utilisez la propriété font-family dans le fichier CSS pour déclarer que vous
voulez utiliser cette police.
Par exemple, pour la police Roboto, on vient coller dans le HTML :
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
rel="stylesheet">
Et on l'utilise dans le CSS en déclarant dans notre sélecteur :
font-family: 'Roboto', sans-serif;

font-size:'x'px | 'x'em | 'x'%
font-family: Verdanna, sans serif
font-style:italic, normal
font-weight:bold, normal, thin
text-decoration: underline, barré, none
text-align: left, right, center, justify (permet d'alligner le text selon la valeur
qu'on lui donne)
!!'alignement ne fonctionne que sur des balises de type block : <p>, <div>, <h1>…
Aligner le texte d'une balise inline, comme <span>, <a>, <em> , <strong> n'est
pas possible. Et c'est logique quand on y pense : on ne peut pas modifier
l'alignement de quelques mots au milieu d'un paragraphe.
**color: modifie la couleur du texte (color: bleue |rgb(255,125,142, 0.5(opacity))

**background-color: elle s'applik au body
body
{
background-color:black;
color: white;
}
backgroun-color:
{
}
background-image
{
url("image");
}
Si vous utilisez beaucoup de propriétés en rapport avec le fond, vous pouvez

utiliser une sorte de “super-propriété” appelée background dont la valeur peut
combiner plusieurs des propriétés :
background-image ;
background-repeat;|()
background-attachment(fixed) ;
background-size ;(cover)
background-position(left, right, center, top, bottom)
background:linear-gradient((0-100)deg, color1, color2);
oppacity !=transparence;(0-1)
######################################################
LES BORDURES
border-width, border-color, border-style; on peut utiliser la superpropriété:border
qui regroupe tout
On a 3 valeurs: largeur,couleur, type de bordure(solide, dotted, dashed,doudle
il existe aussi:
border-top : bordure du haut.
border-bottom : bordure du bas.
border-left : bordure de gauche.
border-right : bordure de droite.
!!!!Arronissement des bordures

border-radius: peutprendre 1 ou 4 valeurs
Il est tout à fait possible de creer des courbe elliptik avec border-radius en deux
valeurs par /
##################################
LES OMBRES(box-shadow):box-shadow:6px 6px 0px rgba(0, 0, 0);
La propriété CSS box-shadow s'applique à tout le bloc, et prend quatre valeurs

dans l'ordre suivant :
Le décalage horizontal de l'ombre.
Le décalage vertical de l'ombre.
L'adoucissement du dégradé.
La couleur de l'ombre.
text-shadow fonctionne sur le meme principe
#######################################################
Les pseudoclasses:
**hover:s'appik lorsque le user survol un element
a:hover (a etant la balise de lien hypertexte)
{
insererz les proprietes voulu
}
**pseudo-classe :active permet d'appliquer un style particulier au moment du

clic.(elle s'applik generallema au liens)
a:active
{
background-color: #C1FFD7;
}
***La pseudo-classe :focus applique un style lorsque l'élément est sélectionné.

a:focus
{
background-color: #FCFFA6;
}
***La pseudo-classe :visited s'applik à un lien deja visité

a:visited
{
color: black;
}
#############################################
Selection des balises:
~~h1 em: selectionne toutes les balises em situé dans h1;
~~h1+em: selectionne la 1ere balise em apres h1;
~~a[title]: selectionne toutes les balises a ayant l'attribut title
~~a[title="valeur"]: selectionne toutes les balises a ayant l'attribut titleet la
valeur precisée
###########################
les marges
exterieures:margin:l'esp entre le bordure et le bloc suivant
intrieures: padding: l'esp entre le texte et la bordure
margin: auto permet de centrer les blocs
############################
Flexbox:
###flex-direction:
row : organisés sur une ligne (par défaut) ;
column : organisés sur une colonne ;
row-reverse : organisés sur une ligne, mais en ordre inversé ;
column-reverse : organisés sur une colonne, mais en ordre inversé.
###flex-wrap:
nowrap : pas de retour à la ligne (par défaut) ;
wrap : les éléments vont à la ligne lorsqu'il n'y a plus la place ;
wrap-reverse : les éléments vont à la ligne, lorsqu'il n'y a plus la place, en
sens inverse.
###justify-content:
flex-start: alignés au début (par défaut) ;
flex-end: alignés à la fin ;
center: alignés au centre ;
space-between: les éléments sont étirés sur tout l'axe (il y a de l'espace
entre eux) ;
space-around: idem, les éléments sont étirés sur tout l'axe, mais ils laissent
aussi de l'espace sur les extrémités.
###align-items:
stretch: les éléments sont étirés sur tout l'axe (valeur par défaut) ;
flex-start: alignés au début ;
flex-end: alignés à la fin ;
center: alignés au centre ;
baseline: alignés sur la ligne de base (semblable à flex-start ).
###########################################################
Les Grid
display: grid pour positionner les elements en grille
.conteneur {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px 150px 200px;
}
gap :pour espacer les elemnets entre eux
#########################################################
Les tableaux
balise en paire <table> </table> indique le début et la fin d'un tableau. Cette
balise est de type block , on va donc la placer en dehors d'un paragraphe ou
d'une div.
<tr> </tr> indique le début et la fin d'une ligne du tableau ;
<td> </td> indique le début et la fin du contenu d'une cellule.
collapse : les bordures seront collées entre elles, c'est l'effet qu'on
recherche ici ;
separate : les bordures seront dissociées (valeur par défaut).

Pour ajouter un en tête on use la balise <th></th>
Pour un titre on utilise la balise <caption></caption>
ous pouvez changer la position du titre avec la propriété CSS caption-side. Par
défaut, la valeur est top (au-dessus du tableau), mais vous pouvez aussi indiquer
bottom : le titre sera alors placé en dessous du tableau.
Pour ajouter des marges à un tableau on utilise padding

td, th {
border: 1px solid black;
padding: 15px;
}
Pour centrer un tableau sur une page, on use margin: auto;

table {
border-collapse: collapse;
margin: auto;
}
Fusion colonne et lignes

l'attribut colspan permet de fusionner des colonnes : la fusion s'effectue
horizontalement, aussi bien sur les lignes d'en-tête que sur le contenu lui-même.
l'attribut rowspan permet de fusionner des lignes : là, deux lignes seront
groupées entre elles. La fusion s'effectuera verticalement.
wget https://github.com/subhra74/xdm/releases/download/7.2.11/xdm-setup-
7.2.11.tar.xz
tar -xvf xdm-setup-7.2.11.tar.xz
sudo sh install.sh
https://www.google.com/search?channel=fs&client=ubuntu&q=conception+de+portfolio+
+avec+html+css#fpstate=ive&vld=cid:dee1c99f,vid:zH_kk8ZzeFo
sudo apt-install python3-pip

sudo apt install ffmpeg libcurl4-openssl-dev libssl-dev python3-pip python3-pil
python3-pil.imagetk python3-tk python3-dbus
sudo apt install fonts-symbola fonts-linuxlibertine fonts-inconsolata fonts-

emojione
python3 -m pip install firedm --user --upgrade --no-cache

Fich Css

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Fich Css

Transféré par

Droits d'auteur :

Formats disponibles

STRUCTURE D'UN FICHIER HTLM

La balise body contient tout ce qui sera affiche a l'ecran

!!!!Mettre en valeur un texte important

*****Pour modifier la taille du texte, on utilise la propriété CSS font-size et

<link rel="preconnect" href="https://fonts.googleapis.com">

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

Et on l'utilise dans le CSS en déclarant dans notre sélecteur :

font-family: 'Roboto', sans-serif;

**color: modifie la couleur du texte (color: bleue |rgb(255,125,142, 0.5(opacity))

Si vous utilisez beaucoup de propriétés en rapport avec le fond, vous pouvez

!!!!Arronissement des bordures

La propriété CSS box-shadow s'applique à tout le bloc, et prend quatre valeurs

Le décalage horizontal de l'ombre.

Le décalage vertical de l'ombre.

text-shadow fonctionne sur le meme principe

**pseudo-classe :active permet d'appliquer un style particulier au moment du

***La pseudo-classe :focus applique un style lorsque l'élément est sélectionné.

***La pseudo-classe :visited s'applik à un lien deja visité

<td> </td> indique le début et la fin du contenu d'une cellule.

separate : les bordures seront dissociées (valeur par défaut).

Pour ajouter des marges à un tableau on utilise padding

Pour centrer un tableau sur une page, on use margin: auto;

Fusion colonne et lignes

tar -xvf xdm-setup-7.2.11.tar.xz

sudo apt-install python3-pip

sudo apt install fonts-symbola fonts-linuxlibertine fonts-inconsolata fonts-

python3 -m pip install firedm --user --upgrade --no-cache

Vous aimerez peut-être aussi