Bonjour. visiteurs jour : 55
Au président
Beauté santé
Infos loisirs
Ensemble
Jean
Informatique
Einstein
Santé corona
Les joies de l'informatique et de l'internet !
Accueil - Disques - Excel - Informatique - Infos - Internet - Javascript - logiciels - Programation - Sites RJ - Vidéo - Plan du site -
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 ; */
background-image: url("1024x768_fond.jpg");
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;}
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';
html, body { margin: 0; padding: 0; }
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;}
// 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:
Exemple de bouton couleur jaune largeur et hauteur imposée et texte réduit
CSS, STYLES
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-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 ;
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
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/ */
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;}
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
<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 :
textDecorationLineThrough
textDecorationNone
textDecorationUnderline
textDecorationOverline
textIndent
textTransform
text-decoration: line-through
text-decoration: none
text-decoration: underline
text-decoration: overline
text-indent
text-transform
listStyleImage
listStylePosition
listStyleType
list-style-image
list-style-position
list-style-type
paddingLeft
paddingRight
paddingTop
pageBreakAfter
pageBreakBefore
padding-left
padding-right
padding-top
page-break-after
page-break-before
fontSize
fontWeight
fontVariant
font-size
font-weight
font-variant
borderBottomColor
borderBottomStyle
borderBottomWidth
borderColor
borderLeft
borderLeftColor
borderLeftStyle
borderLeftWidth
borderRight
borderRightColor
borderRightStyle
borderRightWidth
borderStyle
borderTop
borderTopColor
borderTopStyle
borderTopWidth
borderWidth
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
marginLeft
marginRight
marginTop
margin-left
margin-right
margin-top
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
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