vendredi 19 juin 2020

CSS - Paramétrer votre style de police d'écriture sur un page HTML!

Je continue avec le CSS. Une chose qui peut vous intéresser est le paramétrage des polices d'écriture.

Dans la balise <head> de votre page HTML, ouvrez une balise <style> (ou sinon dans une balise <style> déjà présente) inscrivez le code suivant:

<style>
.normal {   
/* mode de votre police d'écriture ici mode normal */ 
  font-style: normal; 
/* nom de la police d'écriture ici Verdana */ 
  font-family: Verdana; 
 /* taille la police d'écriture ici 14 pixels */ 
  font-size: 14px; 
/* couleur de la police d'écriture (a écrire en anglais) ici noir */
  color: black; 
}
</style>

Pour que ce style soit appliqué à un paragraphe il faut ajouter l'argument "class" à l'intérieur de la balise paragraphe <p> :


<p class="normal">Un paragraphe normale.</p>

Si vous souhaitez avoir une police en italique, il faut alors mettre dans une autre balise <style> à la ligne font-style: la valeur :" italic"


exemple :

<style>
.italic {  
/* mode de votre police d'écriture ici mode italic */ 
  font-style: italic; 
/* nom de la police d'écriture ici Verdana */ 
  font-family: Verdana; 
 /* taille la police d'écriture ici 14 pixels */ 
  font-size: 14px;
/* couleur de la police d'écriture (a écrire en anglais) ici noir */ 
  color: black; 
}
</style> 


 
Puis dans votre balise paragraphe <p> mettre l'argument "class" avec comme valeur "italic".

<p class="italic">Un paragraphe normale.</p>

Source : https://developer.mozilla.org/fr/docs/Web/CSS/font-style puis compléter par mes soins.
Publié par à Aucun commentaire:
Libellés : , ,

CSS - Ajouter des bords arrondis à une image, un tableau, un cadre sur une page HTML!

Vous avez sans doute remarquez que sur beaucoup de sites internet les images , ou les bords des cadres sont arrondies.

Cela se fait en général avec un code sur une feuille de style en cascade plus connues sous le nom de CSS. Le CSS est un morceau de code qui peut être dans un fichier à part avec une extension .css ou, intégré dans le fichier html ou php de votre page.

Voici un code simple pour avoir cet effet arrondi sur vos éléments tels que les images, les tableaux ou tout autres éléments graphiques de votre site.

Dans la balise <head> ajouter ce code :

<style>
#myBorder {
    border-radius: 10px; /* Coins arrondis de 10 pixels - la valeur peut être modifiée */
}
</style>

Ensuite lorsque vous souhaiter afficher une image ou un tableau, il faut rajouter un "id" qui rappelle le style à appliquer ici "myBorder".

Exemple pour une image :

<img src="votre_image.jpg" id="myBorder">

L'image votre_image.jpg aura ses 4 coins arrondis de 10 pixels.
Publié par à Aucun commentaire:
Inscription à : Articles (Atom)