Bonjour. visiteurs jour : 212       Au président     Beauté santé     Infos loisirs     Ensemble      Jean      Informatique     Relativité     Relativity

Les joies de l'informatique et de l'internet !





Coucou et merci


  Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels  - Programation - Sites RJ - Vidéo - Plan du site -



   

CSS, STYLES


KNA CSS


style="width: 80%;   padding: 20px;   border: 1px solid #666; 

position: absolute; top:210px; left:120px;

font-family: " Times New Roman", Helvetica, Verdana, Arial;

size=80%;     /*small, medium,  18pt;                */

font-weight: bold;

text-align: left;                           /*  right ; center ;  justify ;  */
letter-spacing: 8px;                    /* espaces entre les lettres    */
color : #333333 ;                        /* couleur du texte  */  color: blue ; color : rgb(0,0,255)
background-color: #CCCCCC;  /* couleur de fond  */   background-color :transparent ;


background-image: url("1024x768_fond.jpg");
background-repeat: no-repeat ;    /*pas de répition de l'image*/
background-attachment: fixed ;  /* Cette propriété "background-attachment" permet de définir si une image reste fixe : fixed ; ou suit le mouvement de la page lors du scroll : scroll ; 


le z-index vaut 1 par défaut. En le mettant à 2 pour un menu déroulant on affichera le menu "déroulké" par dessus la page affichée

.menu_d { position:absolute;  z-index: 2;background-color: #f0f0f0; border:1px}


h1 {font-size:150%; font-weight:800; color:navy; text-align:center; margin: 2 0 2 0;}
h2 {font-size:140%; font-weight:800; color:navy; text-align:center;  margin: 1 0 1 0;} 


border-top-left-radius,
border-top-right-radius,
border-bottom-right-radius,
border-bottom-left-radius.
/* 1. coin en haut à gauche */
/* 2. coin en haut à droite */
/* 3. coin en bas à droite  */
/* 4. coin en bas à gauche  */
border-radius: 10px 5% / 20px 30px

en % Les rayons verticaux sont donc proportionnels à la hauteur de la boîte H 
et les rayons horizontaux proportionnels à la largeur de la boîte. L
50% donne une ellipse ou un cercle si H=L
source  mozilla




Changer la couleur de fond onclick="javascript:document.getElementById('div1').style.backgroundColor='#00ff00';"

Augmenter /Diminuer   la largeur"

document.getElementById('div1').style.width=(parseInt(document.getElementById('div1').clientWidth)+25)+'px';

document.getElementById('div1').style.width=(parseInt(document.getElementById('div1').clientWidth)-25)+'px';"

Augmenter la hauteur"

document.getElementById('div1').style.height=(parseInt(document.getElementById('div1').clientHeight)+25)+'px';" Augmenter la taille de la police"

document.getElementById('div1').style.fontSize=(parseInt(document.getElementById('div1').style.fontSize)+3)+'px';


javascript:document.getElementById('divA').className='divB';


STUDIO VITAMINE

 




html, body { margin: 0; padding: 0; }
body { background-color: white;  font-family: Verdana, sans-serif;  font-size: 100%; }
h1 { font-size: 200%;  color: navy;  text-align: center;  padding-left: 15px; }
p,ul,li,td {color: black;  }
a:link { color: green;text-decoration: underline; }
a:visited { color: gray; }
a:hover { color: red; text-decoration: none;}
a:active, a:focus { color: red;}



ALSA CREATION Une feuille de styles de base pour bien démarrer vos projets


/* base font-size corresponds to 10px and is adapted to rem unit */
html { font-size: 62.5%;}
body { background-color: #fff; color: #000; font-family: "Century Gothic", helvetica, arial, sans-serif; font-size: 1.4em; /* equiv 14px */ line-height: 1.5; /* adapt to your design */}

/* font-sizing for content   preserve vertical-rythm, thanks to http://soqr.fr/vertical-rhythm/ */


p,ul,ol,dl,blockquote,pre,td,th,label,textarea,caption,details, figure, hgroup { font-size: 1em; /* equiv 14px */ line-height: 1.5; margin: 1.5em 0 0;}


h1, .h1-like { font-size: 1.8571em; /* equiv 26px */ font-weight: normal; line-height: 1.6154em; margin: .8077em 0 0 0;}
h2, .h2-like { font-size: 1.7143em; /* equiv 24px */ font-weight: normal; line-height: 1.75em; margin: .875em 0 0 0;}
h3, .h3-like { font-size: 1.5714em; /* equiv 22px */ font-weight: normal; line-height: 1.909em; margin: .9545em 0 0 0;}
h4, .h4-like { font-size: 1.4286em; /* equiv 20px */ font-weight: normal; line-height: 1.05em; margin: 1.05em 0 0 0;}
h5, .h5-like { font-size: 1.2857em; /* equiv 18px */ font-weight: normal; line-height: 1.1667em; margin: 1.1667em 0 0 0;}
h6, .h6-like { font-size: 1.1429em; /* equiv 16px */ font-weight: normal; line-height: 1.3125em; margin: 1.3125em 0 0 0;}

/* alternate font-sizing */
.smaller { font-size: .7143em; /* equiv 10px */ line-height: 2.1em;}
.small { font-size: .8571em; /* equiv 12px */ line-height: 1.75em;}
.big { font-size: 1.1429em; /* equiv 16px */ line-height: 1.3125em;}
.bigger { font-size: 1.2857em; /* equiv 18px */ line-height: 1.1667em;}
.biggest { font-size: 1.4286em; /* equiv 20px */ line-height: 1.05em;}

/* soft reset */
html,body,textarea,figure,label { margin: 0; padding: 0;}
ul, ol { padding-left: 2em;}
code, pre,samp { white-space: pre-wrap; font-family: consolas, 'DejaVu Sans Mono', courier, monospace;}
code { line-height: 1em; }
table { margin-bottom: 1.5em; }

/* avoid top margins on first content element */
p:first-child,
ul:first-child,
ol:first-child,
dl:first-child,
blockquote:first-child,
pre:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child { margin-top: 0;}

/* avoid margins on nested elements */
li p,
li ul,
li ol { margin-top: 0; margin-bottom: 0;}

/* HTML5 tags */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block;}

/* max values */
img, table, td, blockquote, code, pre, textarea, input, video { max-width: 100%;}

/* you shall not pass */
div, textarea, table, td, th, code, pre, samp { word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; -o-hyphens: auto; hyphens: auto;}

/* pictures */
img { width: auto; height: auto; vertical-align: middle;}
a img { border: 0; }

/* scripts */
body > script {display: none !important;}

/* skip-links */
.skip-links { position: absolute;}
.skip-links a { position: absolute; left: -9999px; padding: 0.5em; background: #000; color:#fff; text-decoration: none;}
.skip-links a:focus { position: static;}


// Fin Alsacreation



Depuis css3 on dispose du mode transparent

.boltred { font-weight: bold; color: rgba(125,0,0,0.3);} // on indique les valeurs de RGB en décimale entre 0 et 255 et la quatrième valeur notée a varie entre 1=opaque et 0 = totalement transparent. c'est disons la densité de la couleur à 0.5 c'est demi transparent



Vous pouvez définir la position de l'image de fond avec précision:
background-position: valeur;
Valeurs possibles :
top left ; top center ; top right ; center left ; center center ; center right ;
bottom left ; bottom cente ;r bottom right;  x-% y-% ;    x-pos y-pos

Exemple de bouton couleur jaune largeur et hauteur imposée et texte réduit
<input type=button value="recule" style="background-color:#E0B000;width:66px;height:20px;font-size:75%"  onclick="javascript: recule ();" >     



Correspondances entre les proprietes JavaScript et CSS :

 
JavaScript
CSS
textDecoration
textDecorationLineThrough
textDecorationNone
textDecorationUnderline
textDecorationOverline
textIndent
textTransform
text-decoration
text-decoration: line-through
text-decoration: none
text-decoration: underline
text-decoration: overline
text-indent
text-transform
styleFloat
float
listStyle
listStyleImage
listStylePosition
listStyleType
list-style
list-style-image
list-style-position
list-style-type
paddingBottom
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
fontFamily
fontSize
fontWeight
fontVariant
font-family
font-size
font-weight
font-variant
borderBottom
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-color
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-style
border-top
border-top-color
border-top-style
border-top-width
border-width
marginBottom
marginLeft
marginRight
marginTop
margin-bottom
margin-left
margin-right
margin-top
lineHeight
line-height
letterSpacing
letter-spacing
verticalAlign
vertical-align
zIndex
z-index
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
background-attachment
background-color
background-image
background-position
background-repea


/* Avec un mot-clé */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* Valeurs de longueur */
/* type <length> */
vertical-align: 10em;
vertical-align: 4px;

/* Valeurs en pourcentage */
/* type <percentage> */
vertical-align: 20%;

/* Valeurs globales */
vertical-align: inherit;
vertical-align: initial;
vertical-align: unset;
source https://developer.mozilla.org/fr/docs/Web/CSS/vertical-align
-
vues  2130     En ligne actuellement :   2   Total des clics  1714367