CSSdebutant.com

Débuter avec le langage CSS, apprendre pas à pas !
Cours CSS (Cascading Style Sheets ou feuille de style)

Débuter avec le langage CSS : gérer la couleur, bordure, taille de la police...

C'est quoi le CSS ? Puis-je apprendre facilement ?

En deux mots : Le langage CSS ou Cascading Style Sheets est utilisé pour définir l'aspect futur de votre site: exemple la couleur du fond de la page ou le type de police.

Plus concrètement : le CSS (ou feuille de style), c'est un petit fichier (exemple "style.css") dans lequel vous allez définir l'ensemble des choix de couleurs, type de police (arial, comic sans MS, etc), taille du texte... TOUT sauf le texte lui même !

Euh... CSS / HTML : Comment ça marche ?
HTML vs CSS Commençons par la base : pour créer un site, il faut utiliser un langage primodiale : HTML, c'est un langage qui permet de mettre en place la structure de la page mais aussi la forme d'un texte : gras, couleur, italique..

code css

D'accord, tu as un exemple avec le langage CSS ?

Et bien, avec le CSS, la structure HTML et la présentation sont gérées séparément

En effet, vous pouvez modifier les couleurs, polices de caratères directement dans le fichier CSS et la structure (texte, images) directement dans la page HTML.

CSS facilite la portabilité du contenu

Une fois le contenu HTML correctement mis en place, il devient facile de changer l'apparence de son site.

Le code HTML est réduit en taille et en complexité.

Pour le référencement, c'est un grand plus : Les feuilles de styles simplifient le code HTML et améliorent la vitesse de chargement de la page.

D'accord, tu me donner un exemple pour utiliser le langage CSS ?

Je souhaite le fond de mes pages en gris. Si j'ai un site de 5 pages, je vais répéter 5 fois :

En HTML simple : 
  <body bgcolor="#CCCCCC">

Je vais mettre dans mon fichier CSS (exemple :style.css) 

 body { background-color: #CCCCCC; }

Si un jour je souhaite modifier la couleur de mes pages, avec le CSS, j'ai un seul fichier a modifier, avec HTML 5 ! CQFD


Et le CSS3, c'est quoi ? Je vous propose de découvrir le CSS3 grace au responsive design et ce tutorial sur responsive design et bootstrap.

Voulez-vous laisser une note ou un commentaire ?

Avis sur la page http://www.cssdebutant.com/ Votes: 3.9 / 5 étoiles - 46 vote(s) et 10 commentaires

Robert Manyanock () Note : 5: hi
Emmanuel de Vauxmoret () Note : 5: Merci pour ce site très clair !
Mohamed Azer () Note : 4: merci pou votre idée
Sarath Popotin Huitgiga Abdou () Note : 4: MERCI
Danger Electrique () Note : 3: Bonjour, j'ai des erreurs dans ce programme ce programme ile me permet de de suivi la point de puissance maximal de système photovoltaïque il y a des jeunes qui me dit ce programme CSS et l'autre c'est un C svp m'aider .................................................... #include <p18f1220.h> #include <stdio.h> #include <math.h> #pragma config WDT = OFF // page 182 // Variables globales int i, H; unsigned int tension_conv, tension_conv1, tension_conv2, tension_conv1_totale; unsigned char derive_puiss; unsigned int intensite_conv1, intensite_conv2, intensite_conv, intensite_conv1_totale; unsigned int tension_panneau; unsigned long puissance, puissance_ancienne=1, puissance_totale; unsigned int m; //Fonction de conversion de l'intensite unsigned int intensite (void) { intensite_conv1=0; intensite_conv1_totale=0; intensite_conv2=0; for (i=0;i<1;i++) { } ADCON0=0x05; for (i=0;i<10;i++) // petit retard pour mieux acquérir le courant du module PV et effectuer la conversion A/N. { } ADCON0=0x07; while (ADCON0!=0x05) { } intensite_conv1=ADRESH; // 8 bits du registre ADRESH intensite_conv1_totale=intensite_conv1<<8; intensite_conv2=ADRESL; // 2 bits du registre ADRESL intensite_conv=intensite_conv1_totale+intensite_conv2; // 10 bits de la conversion return(intensite_conv); } //Fonction de conversion de tension unsigned int tension (void) { tension_conv1=0; tension_conv1_totale=0; tension_conv2=0; for (i=0;i<1;i++) { } ADCON0=0x01; for (i=0;i<10;i++) { } ADCON0=0x03; while (ADCON0!=0x01) { } tension_conv1=ADRESH; tension_conv1_totale=tension_conv1<<8; tension_conv2=ADRESL;// 2 bits du registre ADRESL tension_conv=tension_conv1_totale+tension_conv2; return (tension_conv); } //Fonction calcule de la puissance unsigned long calcule_puissance (void) { unsigned int x, y; y=intensite(); // Conversion courant x=tension(); // Conversion tension puissance_totale= x * y; return (puissance_totale); } //Fonction de configuretion des registres void config_registre (void) { i=0; m=0; H=1; puissance=0; puissance_ancienne=0; ADRESH=0x00; // initialisation du registre de conversion ADRESL=0x00; //TIMER 0 INTCONbits.TMR0IE=1; // autorisation de l’interruption du timer 0 INTCONbits.GIEH=1; INTCONbits.TMR0IF=0; //Desactivation le flag du timer0 INTCON2=0x00; //interruptions par front descendant INTCON3=0x00; //désactivations des interruptions externes (registre INTCON3) PIR1=0x00; //désactivations des timers 2 et 3 (registre PIE1 et PIR1) PIE1=0x00; IPR1=0x00; //configuration du niveau de priorité des interruptions (convertisseur, comparateur, //timer 1 et 2) (registre IPR1) PIR2=0x00; //désactivations du flag de timer 3 (registre PIR2) PIE2=0x00; //Interdiction d’interruption du timer 3 (registre PIE2) IPR2=0x00; // configuration de la priorité des interruptions au niveau bas (erreur de l’oscillateur, //mémoire EEPROM, détecteur niveau bas, timer 3) (registre IPR2) RCON=0x00; //désactivations de la priorité de niveau des interruptions (registre RCON) //T0CON=0x46; //Configuration du timer 0 avec une valeur de 6.5ms . T0CON=0x46; ADCON1=0x7C; // AN0 et AN1 comme des entrées analogiques qui seront //la tension et le courant ADCON2=0x92; // Configuration du PIC pour obtenir le résultat de la conversion //justifié à gauche (ADCON2=0x92) //Periferiques PORTA=0x00; TRISA=0x03; //AN0, AN1 et AN2 configuree comme entre PORTB=0x00; TRISB=0x04; // B comme sortie } // Fonction qui genere d'interruption avec retard 6,5 ms du Timer0 void traiteIT(void); #pragma code it=0x08 // High Priority Interrupt Vector (Page 41) void saut_sur_spIT(void) { _asm goto traiteIT _endasm } #pragma code #pragma interrupt traiteIT void traiteIT(void) { if (INTCONbits.TMR0IF) { INTCONbits.TMR0IF=0; // Flag de l'interruption du Timer0 H=1; // indique que le timer est termine T0CONbits.TMR0ON=0;// reinitialisation du timer 0 } } unsigned long puissance_moy (void) { unsigned long puissance_moy_totale, mesure_puissance, conv_puissance; puissance_moy_totale=0; mesure_puissance=0; conv_puissance=0; for (m=0;m<8;m++) // puissance sur 8 echantillon { conv_puissance=calcule_puissance(); mesure_puissance=mesure_puissance+conv_puissance; } puissance_moy_totale=mesure_puissance>>3; //Division par 8 en decalant 3 bits a droite return (puissance_moy_totale); } // fonction calcule derivee unsigned char derive_puissance (void) { unsigned char derive; puissance = puissance_moy(); if (puissance>puissance_ancienne) { derive=1; // le derivee est positive PORTBbits.RB0=1; } else { derive=0; // le derivee est negative PORTBbits.RB0=0; } puissance_ancienne = puissance; return (derive); } //PROGRAMA PRINCIPAL int al; void main() { short i; short l; short j; config_registre(); al=50; while(0){ l=al; for(i=0;i<l;i++); PORTBbits.RB1=0; l=100-al; for(i=0;i<l;i++); PORTBbits.RB1=1; } while(1) { // test sur le Bouton rouge sur la carte afin de mise hors tension le systeme // if(PORTBbits.RB2==0) // { //continue; derive_puiss = derive_puissance(); if ((derive_puiss==1)&&(PORTBbits.RB1==1)) { PORTBbits.RB1=1; H=0; T0CONbits.TMR0ON=1; // Strat Time } else if ((derive_puiss==0)&&(PORTBbits.RB1==1)) { if (H==0) { PORTBbits.RB1=1; } else { PORTBbits.RB1=0; H=0; T0CONbits.TMR0ON=1; // Strat Timer0 } } else if ((derive_puiss==1)&&(PORTBbits.RB1==0)) { PORTBbits.RB1=0; H=0; T0CONbits.TMR0ON=1; // Strat Time } else if ((derive_puiss==0)&&(PORTBbits.RB1==0)) { if (H==0) { PORTBbits.RB1=0; } else { PORTBbits.RB1=1; H=0; T0CONbits.TMR0ON=1; } } else { } // } // else // { // PORTBbits.RB1=0; // PORTBbits.RB0=0; // } } }
Dhiaeddine Souei () Note : 3: METHODE INCR D4INDUCTANCE ,Trésor Sukami () Note : 3: c'est un c
Antigland Ledestructeur () Note : 5: merci beaucoup je l'ai utilisé sur mon blog et c'est géniale !
Raphael Adonlin () Note : 4: j'aime bien et je voudrai apprendre cela. mis comment m'y Prendre?
Emmanuel de Vauxmoret () Note : 5: Ce site est là pour cela :)
Janine Sabatier () Note : 4: j'aurais aimer changer le css de mon blog mais j'ai vraiment de tout ficheer en l'air, j'y comprends rien a rien lol