Header

Partagez | 

[Trucs] Code CSS

Message Sujet: [Trucs] Code CSS   Mar 29 Juil - 13:33

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Le CSS (Cascade Style Sheet) est du code qui vous permet de mettre en page du contenu de l’ensemble de vos pages Internet et de le changer rapidement. Il peut être dans une page en entrée directe (dans ce cas, le code CSS est placé ente les balises « style » au niveau du « head ») ou il peut être écrit dans une page extérieure et être importée grâce au code suivant :
Code:
 <link href="http://monsite.fr/style.css" media="all" rel="stylesheet" type="text/css" />

(personnellement, je conseille cette méthode qui est la plus propre et la plus rapide à modifier si vous avez 50 pages de site à changer ^^)

Dans ce tuto, nous ne verrons pas toutes les balises et codes CSS (il y en a bien trop et je ne les connais pas toutes Smile ) mais nous verrons les plus utilisées.
Tout d’abord, parlons HTML (n’oublions pas que tout commence par là Smile). Il est possible dans votre code HTML d’affecter des « class » (si le style revient plusieurs fois dans la page) ou « id » (si le style ne revient qu'une seule fois dans la page) à vos éléments afin de leur donner un style particulier. Dans le CSS, il suffira donc d’indiquer :
Code:
 .nom_de_la_class{
Code CSS ;
}

#nom_de_l’id{
Code CSS ;
}

Vous êtes prêt ? Allons y !




La mise en page du texte



¤ Soulignement : Text-decoration: underline
¤ Ligne au dessus: Text-decorartion: overline
¤ Ligne au dessus et en dessous: Text-decoration: underline overline

¤ Mise en italique : Font-style: italic
¤ Mise en Gras: Font-weight: Bold
¤ Donner de la finesse au texte: font-weight:lighter;

¤ Modification de la taille : font-size: Xpt (X est le chiffre correspondant à la taille désirée)

¤ Modification de la couleur : color: #xxxxxx (les xxxxxx correspondent à un code de couleur de votre choix).[pour les codes, allez ici ]

¤ Soulignement Coloré: utiliser border-bottom (voir plus bas Wink )

¤ Modification de la police: font-family: Verdana (remplacez Verdana par le nom de la police désirée)

¤ Suppression d' un soulignement: text-decoration: none
¤ Texte en petites Majuscules : font-variant: small-caps
¤ Mise en 1iere lettre du texte en Majuscule: text-transform: Capitalize
¤ Mise en Minuscules : text-transform: lowercase
¤ Mise en Majuscules: text-transform: uppercase


Dernière édition par Miettes le Dim 20 Mar - 19:59, édité 7 fois
Revenir en haut Aller en bas


Message Sujet: Re: [Trucs] Code CSS   Mar 29 Juil - 13:34

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Les bordures



Voyons maintenant ce qui concerne les bordures :

Il existe 4 bordures : la bordure supérieure (border-top), la bordure inférieure (border-bottom), la droite et la gauche (respectivement border-right et border-left)
Les 4 bordures sont regroupées sous le terme border.

Il y a 4 propriétés à indiquer dans une bordure :
  • L'épaisseur : comme pour la taille de la police, il suffit de l'indiquer en pixel
  • La couleur : même principe que pour la police
  • Le type de bordure


Il existe plusieurs types de bordure :

¤ bordure normale : border: solid
¤ en pointillés: border: dotted
¤ en petits tirets: border: dashed
¤ en relief double: border: groove
¤ en relief creusé: border: inset
¤ en reliel exterieur : border: outset
¤ double: border: double


Dernière édition par Miettes le Mer 17 Fév - 21:55, édité 2 fois
Revenir en haut Aller en bas


Message Sujet: Re: [Trucs] Code CSS   Mar 29 Juil - 13:35

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Alignement du texte



¤ à gauche: text-align: left
¤ au centre: text-align: center
¤ à droite: text-align: right
¤ pour le justifier: text-align: justify

Les fonds de cellules



¤ en couleur : background: #XXXXXX
¤ une image: background-image: url('adresseurldel'image')
¤ transparent : background: transparent

et voilà, vous savez à peu près tout Very Happy

n'oubliez pas de séparer chacun de vos codes par un ";"

Si vous avez des questions, n'hésitez pas Wink
Revenir en haut Aller en bas


Message Sujet: Re: [Trucs] Code CSS   Mer 17 Fév - 22:05

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
Il est temps de compléter cette liste non ?

La position du texte



Nous allons parler ici de padding (=remplissage) et de margin (=marge). Pour vous simplifier tout ça, voici un petit schéma


Ça a l’air compliqué comme ça, mais ça ne l’est pas ^^ Voici une explication rapide.

  • margin = marge. C'est-à-dire que c’est la distance des bords d’un bloc par rapport aux bords du bloc dans lequel il se trouve.
  • padding = remplissage. Cela correspond à la distance entre le texte et le bord du bloc qui le contient.


Tout comme pour les bordures, vous pouvez en appliquer en général (margin, padding) ou individuellement (haut, bas, gauche, droite). Il vous suffit ensuite d’indiquer la distance en pixel.
Voici un exemple :
Code:
margin-left : 12px ;
margin-right : 8px ;
margin-top : 4px ;
margin-bottom : 20px ;
padding : 6px ;

Si vous souhaitez centrer un bloc, il faut lui mettre des marges automatiques
Code:
margin :auto ;

Les autres éléments


* Les liens


Ils ont eux aussi plusieurs propriétés :
  • a = lien simple
  • a :hover = lien survolé
  • a :visited = lien que le visiteur a déjà visité


Toutes les possibilités applicables pour le texte le sont pour les liens.

* Les images, les tableaux


Ici, n’oubliez pas d’indiquer une largeur (width), ainsi qu’une hauteur (height). Il est possible de faire en sorte que ces 2 éléments s’adaptent automatiquement. Pour cela, il suffit d’indiquer « auto » à la place de la taille (néanmoins, je vous conseille d’indiquer une hauteur ou largeur minimum, pour cela il faut écrire min-height ou min-width , cela fonctionne aussi pour le maximum avec max-height et max-width).
Revenir en haut Aller en bas


Message Sujet: Re: [Trucs] Code CSS   Dim 22 Juil - 16:16

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Questions Fréquentes


Centrer le texte


Alors on va essayer de tout reprendre ^^

*** Centrer un bloc (div) dans une page ou un bloc

1/ Il faut donner une largeur et/ou une hauter à ce bloc
2/ On ajoute des marges automatiques

Code:
<div style="width:200px; height:400px; margin:auto;">Mon bloc</div>

*** Centrer un texte dans un bloc ou une page (horizontal)
-> Le texte doit être dans des balises "block" (à savoir balises de hiérarchisation ou p => cela ne fonctionne pas avec le span)

Dans ce cas, on utilise un simple "text-align"

2 solutions ici :
-> soit on donne l'info dans le style de la div et dans ce cas, tout le contenu de la div sera centrée

Code:
<div style="text-align:center;">Mon bloc</div>

-> soit on donne l'info dans le style de la balise "block" et dans ce cas, seul le contenu de la balise indiquée sera centré

Code:
<h1 style="text-align:center;">Mon bloc</h1>

<p style="text-align:center;">Mon bloc</p>

*** Centrer un texte dans un bloc ou une page (vertical)

Même principe qu'au dessus sauf qu'il faut aussi indiqué : la hauteur et le line-height (qui doivent être indentique)

Code:
<div style="height:100px; line-height:auto;">Mon bloc</div>

<h1 style="height:100px; line-height:auto;">Mon bloc</h1>

<p style="height:100px; line-height:auto;">Mon bloc</p>

*** Le vertical align ne s'utilise (à ma connaissance) que dans les tableaux Smile

Faire des coins arrondis


Lydie12 a écrit:
Pour les arrondis (et accessoirement que ca marche sur quasiment tous les navigateurs (sauf internet explorer), il faut utiliser le code
Code:
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
(après le 15 est à adapter c'est juste un exemple)

Juste pour le côté droit ca sera
Code:
-webkit-border-radius: 0 15px 0 0;
-moz-border-radius: 0 15px 0 0;
border-radius: 0 15px 0 0;
(dans l'ordre c'est top (haut gauche), right (haut droit), bottom (bas droit), left (bas gauche), donc dans l'exemple j'ai affecté le 15 au bord haut droit.

Comment faire un alinéa ?


Un alinéa est un décallage de la première ligne d'un paragraphe vers la gauche ou la droite. Pour réaliser ceci, nous allons utiliser l'attribut CSS
Code:
text-indent:Npx;
Plus votre "N" sera supérieur à 0, plus la première ligne sera décallée vers la droite.
En revanche, plus votre "N" sera inférieur à 0, plus la première ligne sera décallée vers la gauche.
Revenir en haut Aller en bas

Message Sujet: Re: [Trucs] Code CSS   

Mes clubs

Contenu sponsorisé

Revenir en haut Aller en bas
[Trucs] Code CSS
Page 1 sur 1
 Sujets similaires
-
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim
» J'ai 2 code pour avoir 6 razoirs Shick Induition DÉJÀ DONNÉ
» Vidéos - générateur de code pour vidéo et player
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens