Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

la communication web
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU CSS 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
 Menu cours 3 CSS 2  - text-align  - style  - border/style  - width/color - résumé 



Cours 3 CSS 2.0 : textes et bordures



 © LigneWeb  ... text: align,border: style,width,color.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Style des textes et bordures


Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 




Alignement du texte :


... le texte va être aligné dans les paragraphes et dans les blocs de texte ...
... ceci se définit dans les CSS en tant qu'attribut ou propriété dans les ... p ... et les ... div ...
... et la manière de l'exprimer se fait par ... text-align: ...
... il y a quatres possibilités ... à gauche, à droite, centré et justifié : ...
  • ... alignement à gauche ... text-align: left; ...
  • ... alignement à droite ... text-align: right; ...
  • ... alignement au centre ... text-align: center; ...
  • ... alignement justifié ... text-align: justify; ...

... nous pouvons voir le texte centré dans l'ensemble des blocs textes sur ce site ...

Voici ce que cela donne dans un fichier .css ... externe au fichier .html :



Border :


... chaque bloc de texte mais aussi les images, , etc. ...
... peuvent être entourées d'une ligne simple ou double avec effet ... 3D ...
... cette ligne aura aussi une épaisseur, une couleur ...



Les différents styles :

... le style de bordure (border) ... s'exprime à travers la propriété ... border-style: ...
... qui pourra prendre les valeurs suivantes : ...
  • ... none : ... pas de bordure (valeur par défault) ...
  • ... hidden : ... aucune bordure ... mais aussi : ...
  • ... solid : ... en trait plein ...
  • ... dotted : ... trait en pointillé ...
  • ... dashed : ... en tirets ...
  • ... double : ... trait plein double ...
  • ... groove : ... trait en creux ...
  • ... ridge : ... trait en relief ...
  • ... inset : ... trait creux ombré ...
  • ... outset : ... trait en relief ombré ...



Exemples :



... solid ...       avec ... {border-width: 2px;} ...


... solid ...       avec ... {border-width: 1px;} ...


... dotted ...       avec ... {border-width: 2px;} ...


... dotted ...       avec ... {border-width: 1px;} ...


... dashed ...       avec ... {border-width: 2px;} ...


... dashed ...       avec ... {border-width: 1px;} ...


... double ...       avec ... {border-width: 2px;} ...


... double ...       avec ... {border-width: 1px;} ...


... groove ...       avec ... {border-width: 2px;} ...


... ridge ...       avec ... {border-width: 2px;} ...


... inset ...       avec ... {border-width: 2px;} ...


... outset ...       avec ... {border-width: 2px;} ...



... les effets sont évidents ... mais sont fonction des couleurs du fond et de la bordure ...
... et de l'interraction entre elles ... dans tous les sens du terme ...



border-color :

... la couleur de la bordure ... se définit par ...
... border-color: #______; ... avec le nom de la couleur ...
... attention au rapport entre la couleur de la bordure ... et la ou les couleurs de fond ...

... nous avons choisi : border-color: #11ddee; ...



border-style :

... nous pouvons traîter chaque côté de la bordure séparément ...
... il nous faut donc préciser de quel côté il s'agit ...
... en le précisant comme suit : ...
  • ... border-top-style: ... pour la bordure du haut ...
  • ... border-right-style: ... pour la bordure de droite ...
  • ... border-bottom-style: ... pour la bordure du bas ...
  • ... border-left-style: ... pour la bordure de gauche ...



border-width :

... il faut aussi déterminer l'épaisseur de la bordure ... ainsi : ...
... en utilisant l'attribut ... width ... et en lui donnant une valeur en px ... (pixel) ...
... cette valeur sera ... 0 ... pour ne pas avoir de bordure ...
... cette valeur sera ... 1 ... pour une bordure d'épaisseur d'un pixel ...
... les valeurs deux ou supérieures sont peu utilisées, mais pourraient l'être ...
... on écrit donc ... border-width: 1px; ... pour une épaisseur de 1px ...

en résumé :

Voici ce que cela donne dans un fichier .css ... externe au fichier .html :



....autre regard ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 MENU CSS 2  - info css  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours  CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies