Propriétés CSS

Je viens en renfort ! C'est bien beau de connaître un peu comment ça marche, mais encore faut-il savoir s'en servir ! Je vais donc vous donner quelques propriétés CSS qui vous seront, à mon goût, largement suffisantes pour réaliser des codes très simples ! Nous ne parlerons donc pas d'effets au survol ou de trucs compliqués à expliquer et parfois même à comprendre (coucou les positions)
Quelques notes : je parle en général de mettre les valeurs en pixels, mais sachez qu'il existe bien d'autre valeur comme le %, que je déconseille fortement d'utiliser aux débutants car des bugs sont vites arrivés !

I - POUR LES BLOCS
width
height
background
border
border-radius
box-shadow
margin
padding
overflow

II - POUR LE TEXTE
color
font-size
font-style
font-weight
text-align
text-decoration
text-shadow

----


I - BLOCS
width & height
Le premier défini la longueur, et le second la largeur. On leur donne une valeur généralement en pixels.

Code:

<div style="width: 200px; height: 100px; background-color: #F5F6F6;">J'ai donné une couleur de fond à mon bloc, sinon on ne le verrait pas</div>

(Nous utiliserons ce même code par la suite, auquel nous rajouterons les propriétés qui suivront)

background
La propriété background peut se décliner en plusieurs autres propriétés :
background-color, destinée la couleur de fond (en nom de couleur anglais, en couleur hexadécimale (aller ici)), en RVB (rgb en anglais, quantité de rouge, de vert et de bleu dans une couleur) ou RVBa (rgba en anglais, idem que pour le RVB mais avec le canal Alpha, soit la transparence) ;

Code:

background-color: #F5F6F6;" (Ici, mon fond est légèrement gris)

background-image, qui permet de mettre une image en fond

Code:

background-image: url(ton_image.extension);

Il existe bien sûr plusieurs autres propriétés pour le fond, toutes pouvant être réunies en une seule (background), mais rien qu'avec ces deux-là, vous pouvez faire beaucoup de choses ~

border
Une propriété très utile si vous souhaitez ajouter des bordures à votre cadre. C'est ce que j'appelle une super-propriété : tout comme background, elle permet de réunir plusieurs propriétés en une seule. Voici comment elle se présente :
border: ...px none/solid/dotted/dashed/double/groove/ridge/inset/outset couleur;
Epaisseur de la bordure en pixel. Choisir un des types de bordures existant, et vu qu'on en parle :
none -> valeur par défaut, pas de bordure
solid -> trait simple
dotted -> pointillés
dashed -> tirets
double ->  double bordure
groove -> en relief
ridge -> autre effet de relief
inset -> effet 3D "intérieur"'
outset -> effet 3D "extérieur"
Exemple :

Code:

border: 3px solid green;

Ce qui, dans un code, peut donner :

Vous pouvez aussi décider de ne "bordurer" qu'une partie du cadre ; dans ce cas, vous pouvez utiliser border-top pour la bordure du haut, border-right pour celle de droite, border-bottom pour celle du bas et border-left pour celle de gauche.

border-radius
Porpriété qui permet d'arrondir les bords du cadre. Valeur en pixel. Ex :

Code:

border-radius: 20px;

Vous pouvez aussi arrondir les bordures "individuellement". Ex :

Code:

border-radius: 20px 0px 5px 30px;

en gros : border-radius : haut-gauche haut-droite bas-droite bas-gauche


box-shadow
Permet de rajouter une ombre à un cadre. Elle s'écrit de cette façon :
box-shadow: décalage-horizontal-ombre* décalage-vertical-ombre** adoucissement-dégradé*** couleur;
*valeur en pixel. Plus elle est élevée, plus le décalage sera élevé, en positif ou en négatif
**valeur en pixel. Plus elle est élevée, plus le décalage sera élevé, en positif ou en négatif
***valeur en pixel. Plus elle sera élevée, plus l'ombre sera "étendue" et le dégradé adoucit. Vous ne pouvez pas aller en-dessous de 0.
Ex:

Code:

box-shadow: 3px 5px 9px #000000;

margin
Permet d'ajouter des marges extérieures à votre bloc. Pour cela, on lui attribue une valeur en pixel. Tout comme pour border, il est possible de définir où s'applique la marge (droite, gauche, top, left). Pour centrer votre bloc, préférez un margin: auto; plutôt que la balise dépréciée (sans les *)


padding
Même principe que margin, mais pour les marges intérieures du bloc.


overflow
Permet de gérer les dépassements des éléments de votre bloc. Quatre valeur son disponibles :
visible, qui est la valeur par défaut. Vous risquez de voir votre texte déborder du bloc, avec cette propriété
hidden : si votre élément dépasse des limite, il sera coupé et vous ne pourrez pas voir le reste. A éviter sur des blocs pouvant contenir du texte, à moins que ce ne soit compensé par un effet au survol.
scroll : le texte sera aussi coupé, mais cette fois une barre de défilement (le truc à droite de la page) apparaîtra à l'intérieur de votre cadre.
auto : là, laissez faire votre navigateur, c'est lui qui décide la présence de barre de défilement si tu préfère ou non ! C'est la valeur que j'utilise le plus souvent.

II - POUR LE TEXTE
Prenons cette phrase de base :
Je suis une belle fleur.

color
Permet de colorer le texte.

Code:

<span style="color: blue;">Je suis une belle fleur</span>

Je suis une belle fleur

font-family
Permet de modifier la police du texte. Vous pourrez trouver mille et une polices sur Google Font par exemple.

Code:

<span style="font-family: 'Arial', sans-serif;">Je suis une belle fleur</span>

Je suis une belle fleur

font-size
Permet de modifier la taille du texte. Valeur généralement en pixel.

Code:

<span style="font-size: 16px;">Je suis une belle fleur</span>

Je suis une belle fleur

font-style
Avec la valeur italic, met le texte en italique (c'est une des seules valeur possibles pour cette propriété, avec normal)

Code:

<span style="font-style: italic;">Je suis une belle fleur</span>

Je suis une belle fleur

text-align
Permet d'aligner le texte dans un bloc. Il peut être à gauche (left), à droite (right), centré (center) ou justifié (justify)

Code:

<div style="width: 200px; height: 20px; overflow: hidden; background: silver; text-align: center;">Je suis une belle fleur centrée</div>

text-shadow
Permet d'ajouter une ombre au texte. Même fonctionnement que pour box-shadow.

Code:

<div style="text-shadow: 3px -2px 0 magenta;">Je suis une belle fleur</div>