Aishiteru_

Bonjour à tous!

Après avoir appris les bases de l'HTML, nous allons donc à présent nous pencher sur le CSS.

Mais, qu'est ce que c'est le CSS?
- Le CSS est un langage informatique tout comme le HTML, mais il agit différement sur votre page web.
  En effet, celui-ci va permettre de créer votre mise en forme de votre page web.

Tandis que le HTML permet de gérer le contenu de votre page et de le structure. Le CSS, autrement dit le Cascading Style Sheets, permet de travailler l'aspect visible de votre page, la présentation que vous voulez faire d'elle...
Ainsi, la page web deviens tout de suite plus attrayante avec des couleurs par exemple!

Avant de commencer, j'aimerai appuyez un point qui me parait important.
Le CSS est un langage informatique différent du HTML. Ainsi, pour les relier, on devra modifier notre '' base '' de page HTML.

Rapellez-vous, dans le premier topic sur le HTML, je vous ai expliqué ce code-ci avec une petite différence :




   
       
       
               
   

   
       
   
[/code] • Je pense que vous avez remarqué qu'une ligne s'est rajoutée. En effet! La 5ème ligne vous parait nouvelle n'est-ce pas? Je vais vous expliquer la signification de celle-ci. Cette ligne permet de [b]faire le lien[/b] entre le fichier .css et le fichier .html . En effet, il est [b]fortement[/b] recommandé de coder le css dans un fichier nouveau autre que celui où vous avez coder la partie html de votre page web. Ainsi, vos codages seront [b]plus clair[/b] pour vous, et il y a moins de risque pour d'éventuelles fautes. Je vais à présent vous expliquez comment fonctionnent les codes CSS. Pour cela je vais utilisé l'exemple ci-dessous : [code]p
{
     color: blue
} •Ceci est un exemple de code CSS.  Bien, à partir de cet exemple, je vais maintenant l'expliquer en détail et en généralisant son écriture. Ainsi, vous pouvez remarquer quatre éléments différentes : la lettre p, color: et blue. Je vais procéder ligne par ligne. Tout d'abord, on fera le rapprochement entre et p. En CSS, pour indiquer les balises que l'ont veut modifier, il suffit simplement de retirer les signes autour de ses noms de balises. Ensuite, il existe des propriétés CSS, qui permet d'indiquer de quelle façon va être modifier la partie choisie, là dans l'exemple, cela sera au niveau de la couleur. Et pour finir, il y a les valeurs associées à ses propriétés, pour l'exemple, il faut entrer une couleur, ici c'est le bleu. Pour généraliser, une page de code CSS ressemble à ceci :  balise1
{
propriété1: valeur1;
propriété2: valeur2;
}

balise2
{
propriété1: valeur1;
propriété2: valeur2;
propriété3: valeur3;
}[/code]


Voilà pour ce premier tutoriel sur le CSS! Nous rentrerons dans le vif du sujet prochainement!

Si vous avez des questions à propos de ce topic, n'hésitez pas à me les poser en commentaire, je serais ravie de vous apporter mon aide!

A bientôt pour de nouveaux tutoriels!

Ola ! Petite intrusion ! Je viens corriger quelques petites choses, rien de grave, je viens panser vos blessures snif.
 
Bon, dans tous les langages cités Html, CSS, PHP, SQL, C, C+,  C++, Java, Javascript, Ajax. Il est bon de dire que tous ces langages ne sont pas tous à utiliser de la même façon. Certains sont coté serveur, d'autres coté client. D'autres sont des langages orientés objet, d'autres non, etc.. Ca c'est un fait, mais ce n'est pas ça qui nous intéresse.
 
Je cite le monsieur du début de poste : 
-> Ceci mon ami, est complètement et absolument faux. Tout dépend de ce que tu veux entreprendre : créer un logiciel ? créer un site internet ? créer une application mobile ? Une animation an Flash ?
 
• Il n'y a pas de commencement au sens propre du terme. Certains langages se marient mieux avec d'autres suivant ce que tu veux faire. Anecdote : Un ami programmeur est un dieu du C/C++/programmation électronique, composants et tout le blablabla (tout ce que je ne fais pas), et il connait effectivement le HTML/CSS mais s'en sert comme un pied et n'est pas au courant de son évolution. Pourtant il est très bon dans les autres domaines de la programmation orientée objet (ou POO). En gros, je peux lui en apprendre et il peut m'en apprendre. Mais nous n'avons pas commencé à apprendre les mêmes choses.
 
• C'est un peu mal dit mais c'est ça en GROS.
Une balise, ça parle d'elle-même. Quand on balise quelque chose, c'est qu'on lui donne une limite d'Entrée et une limite de SORTIE. Dans le jargon, on dit Balise OUVRANTE et balise FERMANTE.
 
• Exemple: <p>..Mon blabla..</p>
Le <p> permet l'entrée, le </p> permet la sortie. Le Slash permet de définir le point de fermeture de la balise. Tout ce qu'il y a entre ce balises est donc défini comme étant un PARAGRAPHE (balises <p> et </p>)
D'ailleurs, certaines balises sont AUTO-FERMANTE et ne nécessitent pas de FERMETURE. C'est le cas pour la balise IMAGE :
<img src="#" alt="" /> ->  Elle n'a pas une paire de balise mais une seule balise auto-fermante donc. Il y a plusieurs exception comme celle-ci.
 
Je continue en citant ceci : 
-> Ceci mon ami, est complètement et absolument faux.  Ou du moins pas complètement. C'est mal dit.
 
• Le doctype permet de dire aux navigateurs quelle version de html tu vas utiliser et ainsi de les distinguer afin de pouvoir interpréter ta page correctement. HTML 5, HTML1.0, xhtml 1.1, etc..
Un DOCTYPE mal interprété, ça donne des problèmes de compatibilités et une norme W3C non respectée.
 
De plus, la balise pour PHP est : <?php  echo"Bonjour" ?>
Là encore, c'est plus vraiment une paire de balise, mais une forme distincte afin de faire un appel php.
 
• Enfin, et je terminerai là-dessus, les balises type <center>, <b>, etc.. on arrête. Ou du moins, à utiliser avec parcimonie !
On le répète souvent dans le milieu, utiliser le CSS au maximum et les CLASS, afin de minimiser le code HTML brut, de le rendre plus propre et surtout, ça facilite la vie !
 
• Pareil pour l'exemple du bgcolor="black". C'est largement mieux de faire un appel CSS comme ceci : 
body{background-color: #ffffff;}
Du coup, <body bgcolor="Couleur"> se transforme en <body>, tout simplement car nous avons fait l'appel dans le css directement.
 
Mais ça, je ferai peut être un tuto ou je donnerai des liens afin que ce soit plus clair pour tout le monde
Bisou
 
PS : L'hexadecimal s'utilise effectivement dans le style d'une page, afin de sélectionner une couleur parmi la palette. Mais on peut également utiliser le code RGBa (Red, Green, Blue, Alpha) dans le css afin de pousser plus loin l'utilisation des couleurs en ajoutant l'ALPHA, qui permet donc de régler son opacité . Si je fais background-color : rgba(0,0,0,.5);  Je dis donc à mon Css que j souhaite une couleur noire (0,0,0) et une opacité liée à cette couleur de .5. Ma couleur va donc laissé transparaitre 50% de la couche qui lui est inférieure. Si je tend vers un 0 absolue, ma couleur ne sera plus visible et inversement jusqu'à 1.