AccueilAccueil  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  



 
Bonjour Invité
Merci d'avoir choisi city of pub



→ Pour poster dans la partie "AIDES CSS" il te faut te présenter:
"Fiche de présentation"
Des jeux pour vous, pour vos pubs et pour s'amuser !
C'est par ici: Jeu du JackPot et CityGame
Bonne chance à vous !
Recherche URGENT:
Graphiste, Aide RPG, Codeur, Correcteur,
En savoir + !!
Notre forum met en place sa fiche
Vous pouvez la mettre sur votre forum
une fois votre pub poster: Fiche du forum

Explications du CSS
Voir le sujet précédent Voir le sujet suivant Aller en bas

 :: Entraides :: CSS & HTML
MessageSujet: Explications du CSS 28.10.13 17:09
Le terme CSS est un acronyme pour Counter Strike Source Cascading Style Sheets, Feuilles de Style en Cascade en français. Il permet de modifier le style et la présentation d'une page HTML. En d'autres mots, c'est le code CSS qui indiquera la police utilisée pour les pages, les couleurs, les dimensions des tableaux etc.

La propriété de feuille de style border-style css peut prendre la valeur de :

- none, aucune bordure,
- dotted, bordure en pointillé (sauf internet explorer),
- dashed, bordure en tirets (sauf internet explorer),
- solid, bordure continue,
- double, bordure en double trait,
- groove, bordure en creux,
- ridge, bordure en saillie,
- inset, bordure en 3d lumière basse,
- outset, bordure en 3d lumière haute,
- inherit, hérite de son parent (css 2).
- Padding, marge interne
- Margin, marge externe (top, left, bottom, right) plus ça descend, moins ça monte pour le top
- letter-spacing: Espace entre les lettres
- text-align: Alignement d'un texte
- text-transform: Transformation du texte
- text-shadow: ombre sous le texte
- background-image: Le fond du cellule
- border: bordure suivit de solid, dotted...
- border-radius: Bordure qui s'arrondit suivit de xxPX (xx nombre de pixel)
- width: xxpx; largeur
- height: xxpx; hauteur
- color: couleur du texte
- font-size: Taille police
- opacity: Opacité sur une image
- overflow: permet de gérer les dépassements de blocs, Définit ce qui se passe lorsque le contenu d'un élément est trop grand. génère le scroll (l'ascenseur)
- font-weight: italic, gras, normal, souligné (bold, underline, none, italic, blink : clignotant. Ne fonctionne pas sur tous les navigateurs (Internet Explorer et Google Chrome, notamment)., line-through)
- filter: grayscale(100%): génère la couleur de l'image ici gris/blanc

Les commentaires en CSS

Il est très conseillé de mettre des commentaires dans votre code CSS. L'avantage de les mettre est qu'ils permettent à d'autres utilisateurs de comprendre votre code facilement en cas de travail en groupe par exemple. Si vous décidez de reprendre le code après un long moment sans l'ouvrir, les commentaires vous aideront beaucoup à vous rafraîchir la mémoire. De plus, les commentaires permettent de structurer le code et le rend plus lisible.

Pour les mettre en pratiques, il suffit de les mettre dans les balises slash et étoile et pour fermer, étoile slash

Code:
/*COMMENTAIRE*/
Si vous oubliez l'étoile et le slash à la fin, le code ne m'arrachera pas ni les autres qui sont juste en dessous. Ils seront marron.

Sinon, il faut toujours bien fermer { .... } les "accolades" quand on définit des blocs, sinon le CSS fera une erreur.
Ne jamais oublier d'utiliser les " : " deux-points pour séparer la propriété de sa valeur
Mettre un " ; " point-virgule en fin des blocs en cas de plusieurs déclarations

les balises DIV

Les DIV sert à modifier des blocs de texte, faire des tableaux, des encadrements. Voici un exemple de CSS

Code:
.carre{
background-color:#000000;
color: #FFFFFF;
font-size:24px;
width:100px;
height:100px;
}
Remarquez qu'on a le titre de la DIV: ".carre", on a ouvert avec une accolade pour afficher les codes CSS, donc on a ajouté le fond (background-color) en dessous la couleur du texte (color) juste en dessous la taille du texte (font-size) la hauteur et la largeur du carré et qu'on a fermé avec une autre accolade. et bien sûr séparé par un point-virgule.

Dans le sujet on place ensuite la DIV qui est:

Le Carré


Code:
<div class="carre">Le Carré</div>
Remarquez qu'on a mis le titre de la DIV qui est dans le CSS aussi (carre) dans ce HTML entre guillemet on a mis une classe car le CSS commence par un point, puis on a fermé. Ce qui forme un carré autour des mots Le Carré.

Si cela aurait été un Id au lieu de class, le CSS aurait commencé par dièse. C'est plus compliqué.

Sinon sans passé par le CSS on peut créer une DIV style.
Voici un codage:

Le carré


Code:
<div style="background-color:#000000; color: #FFFFFF; font-size:24px; width:100px; height:100px;">Le carré</div>
Remarquez qu'à la place de class on a mis style, pas besoin de passer par le CSS tout est déjà dans le sujet. J'ai remis tout les codes dans cette style, ne pas oublier de mettre entre "" guillemet et de fermer.


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 31.10.13 10:50
Petit rajout: Si par exemple vous voulez mettre une police d'écriture sur votre forum en entier, vous téléchargez votre police sur Dafont, vous mettez donc le code, mais les membres ne le voient pas, ne cherchez pas plus loin, vous l'avez sur votre PC mais les membres, eux, ne l'ont pas, alors logique, ils ne voient pas votre sublime écriture que vous avez mis des heures à trouver ! soit vous mettez un communiqué sur votre Forum pour inciter vos membre à la télécharger, soit et bien, vous la changez... Y en a une très bien dans tous ceux que les membres ont et c'est: Segoe Script par contre ils y aura toujours des gens qui trouveront tout le temps à redire, d'accord elle est super, mais il faut la mettre assez grande pour comprendre l'écriture !

Au pire, vous avez ça: http://www.google.com/fonts/

Vous choisissez la police que vous voulez mettre sur votre forum
Une fois que vous avez trouvé la police que vous voulez, vous cliquez sur "Quick-use"
En bas vous trouverez : "Add this code to your website" , copiez le code et collez-le dans votre template Overall_header, juste après la balise :
Code:
<head>
Puis vous validez

Et pour mettre la police là ou vous voulez, suffit de copier le code CSS qui se trouve juste en bas dans la même page, là ou y'a ecrit : "Integrate the fonts into your CSS".
Panneau d’administration ► Affichage ► Couleurs ► Feuille de styles CSS)
bon CSS .


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 15.03.14 9:53
La propriété de feuille de style css !important permet de spécifier que la propriété est la plus importante dans votre feuille css. Une fois noté dans votre CSS n'oubliez pas de mettre "!" elle apparait en violet dans votre feuille de style

Elle oblige ainsi au code CSS de mettre en place votre demande. Si par exemple vous désirez changer le titre d'une catégorie sur votre accueil et que par exemple la couleur choisi ne marche pas et que c'est toujours celle du forum, vous pouvez mettre !important entre la couleur et le point virgule.

Code:
color: #254658 !important;


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 25.03.14 10:23
Les coins arrondit pour les cadres:

La propriété border-radius peut accepter 4 valeurs pour l'arrondissement de chaque coins. La 1ère valeur correspond au coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre. On peut n'en indiquer que 2, qui correspondront aux coins opposés (voir l'exemple ci-dessous), ou une seule pour un même arrondis sur les 4 coins.





Le "/" permet de spécifier les 2 valeurs de l'arc de cercle.



Code:
<div style="border: 2px solid #000000; border-radius: 50px 250px / 250px 50px; width: 200px; height: 200px;"></div>


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 17.04.14 13:05
Pencher une image ou un cadre avec du texte!

Code:
-moz-box-shadow:0px 0px 10px white ;-moz-transform:rotate(-10deg); -webkit-transform:rotate(-180deg);



Je t'aime moi non plus !


marche sur firefox et google chrome !


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 04.09.14 16:44
Et si on faisait un dégradé ? Eh oui c'est possible !

Fonctionne avec:
Chrome 3
Firefox 3.6


Le principe de base est simple:
→ On définit le type de dégradé voulu : linéaire
→ On indique les couleurs de départ et d'arrivée

Le code HTML (pour que Chrome et firefox se voit) mais vous pouvez le mettre directement sur le sujet sans passer par CSS:
rajouter selon le navigateur (-moz- pour Firefox, -webkit- pour Safari et Chrome, et -o- pour Opera) si dans le CSS

Code:
<div class="Degrade">
  <p>Dégradé [xxx]</p>
</div>

Code CSS:

Code:
.Degrade {
background-image:linear-gradient(white, black);
}

Pour rajouter un sens au dégradé: right, left, bottom et top (droit, gauche, bas et haut)
à côté de white.

Vous pouvez mettre # suivi de chiffre.

sur le sujet ça donne ça:

texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte


vous remarqué que le dégradé descend par le red et se termine par le black, après ça fonctionne comme tout autre CSS. Voilà!

Code:
<div style="background-image:linear-gradient(to top, #120707, #940101); width:300px; color: #BDB76B;">texte texte</div>


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 05.12.14 20:50
Si vous voulez utiliser les écritures de Google font sur une fiche RPG, rien de plus simple.

Allez sur le site Google Font. Repérez l'écriture que vous désirez. Pour moi: Diamon.

Une fois que vous avez trouvé la police que vous voulez, vous cliquez sur "Quick-use"
En bas vous trouverez : "Add this code to your website" , copiez le code

vous avez le choix entre le mettre dans votre CSS ou le mettre direct dans votre sujet.
Vous collez direct votre code dans le sujet puis vous ouvrez une div class ou div style, suivi de font-family et le nom de l'écriture

Code:
<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'><div class="diamon">Ma citation mon titre</div>
et dans le CSS vous mettez le nom de la div class et quelques effets en plus

Code:
.diamon {
font-family: Diamon;
font-size: 3px;
text-align: center;
height: 25px;
background: #ffffff;
border: 2px solid #000000;
border-radius: 12px;
}
et directe dans le sujet ça sera style au lieu de class.
pareil collé le code de l'écriture.

Code:
<link href='http://fonts.googleapis.com/css?family=Damion' rel='stylesheet' type='text/css'><div style="font-size: 30px; font-family: Damion; background: #ffffff; border: 2px solid #000000; border-radius: 12px; text-align: center; height: 25px;">Mon titre ma citation</div>
Mon titre ma citation


Pour rajouter une écriture en plus pour pas prendre de place, il faut rajouter "|" (alt gr + 6) ce qui fait:

family=Great+Vibes|Rye' rel='stylesheet' type='text/css

et dans le code pour l'écriture ça donnerait ceci:

Code:
<link href='http://fonts.googleapis.com/css?family=Great+Vibes|Rye' rel='stylesheet' type='text/css'>

Remarquez qu'il y a les deux écriture: Great Vibes et Rye séparé par "|". Donc le titre sera en GReat Vibes et le texte sera en Rye !

voilà !


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 29.12.14 11:40
vous voulez utiliser une transparence mais Opacity mais en transparence votre fond ainsi que le texte et les images ?

J'ai fini par trouvé THE miracle pour que ce soit que le font qui soit transparent et non le reste !

C'est quoi ? c'est le RGBa !

Hein ? c'est quoi ce truc encore ?
Et bien tout simplement, le rgba() n’est pas une propriété CSS, mais une fonction. Elle s’utilise sur toutes les propriétés qui spécifient une couleur, comme par exemple:

Background
Color
border...

Il utilise les valeurs rouge, vert et bleu d’une couleur, et ajoute l’opacité.

L’exemple suivant affecte donc la couleur Rouge:123, Vert:104, Bleu:238 avec une valeur de transparence de 20%.

Code:
background: rgba( 123,104, 238, 0.2);

Le fond sera donc violet et transparent, le texte sera pas transparent mais juste le fond !

comment s'en servir ? très simple sur certain logiciel vous avez avec l'outil pipette des lettres juste au dessus de vos références web (#000000) RVB avec des chiffres

ça donne ceci:


donc résultat:

Coucou à toi qui lis ce message !


sinon vous trouverez les références de Rgba sur le net comme ici: http://fr.wikipedia.org/wiki/Noms_de_couleur_du_Web

voilà marche sur tous les navigateurs !


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
MessageSujet: Re: Explications du CSS 20.02.17 16:25
- filter: grayscale(100%): génère la couleur de l'image ici gris/blanc


Soyons extraordinaires ensemble, plutôt qu’ordinaires séparément.
Je veux mourir dans tes bras à 110 ans ou plus. Voila ce que je veux.
   
avatar

En savoir plus
Nombre de forum: 1
Emploi/loisir: crochet, bracelet brésilien, cuisiner, dessiner, cartonnage !
Un peu +:
Voir le profil de l'utilisateur
Féminin

✎ Citation : Chaque personne qu’on s’autorise à aimer, est quelqu’un qu’on prend le risque de perdre.
✎ Blabla : 1973
✎ PeaCPt's : 9782
✎ Musique du moment : Aucune je me passe de musique
✎ Livre du moment : Je n'arrive pas à lire en ce moment
✎ Gif :
Revenir en haut Aller en bas
Explications du CSS
Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Sujets similaires
-
» Explications sur ACTIVE LOG
» PA - explications des outils couleurs
» Comment mettre un cadre qui se déplace [Explications plus claires]
» Explications tutoriel selecteur de thème
» Explications sur les Accordéons Diatoniques ♥♥

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
city of pub :: Entraides :: CSS & HTML-
Sauter vers: