Diverses propriétées CSS
Exemples propriétées CSS
- Paramètres target dans les liens html balise <a href="...." target="..." >liens html </a>
Valeur : "_blank" Ouvre le document dans une nouvelle fenêtre (popup) Valeur : "_self" Ouvre le document dans la même frame Valeur : "_parent" Ouvre le document dans la fenêtre parent des frames Valeur : "_top" Ouvre le document dans la même fenêtre Valeur : "TOTO" Ouvre le document dans le même onglet qui porte ce nom TOTO
- white-space permet de spécifier le formatage du texte
white-space : normal; # affichage normal du texte white-space : pre; # affichage du texte tel qu'il a été écrit white-space : pre-wrap; # idem mais ajoute sauts de ligne pour ne pas sortir du bloc white-space : pre-line; # sup multi spaces et ajout sauts de ligne pour ne pas sortir du bloc white-space : nowrap; # pas de retour à la ligne
- CSS pour texte
##<<span style="font-size:16px;font-style:italic;font-weight:bold;text-decoration:underline;">claudel</span>>##
##<claudel>##
- CSS pour balise <TABLE> et <TH>
<style type="text/css" > TABLE { margin:0; /* font-family: "Times New Roman",Georgia,Serif; font-weight:normal; width: 100%; max-width: 1200px; */ font-family: "Arial"; FONT-SIZE: x-small; border-width: 1px; border-spacing: 2px; border-style: outset; border-color: gray; border-collapse: separate; /* background-color: #ddd; */ height: 400px; overflow: auto; white-space: pre-line; } table TH { align:CENTER; background-color: rgb(153, 153, 204); border-spacing: 2px; } table td { vertical-align:top; #middle bottom text-align: justify; } /* surlignage ligne tableau */ /* table td:hover::after, table tr:hover { background-color: #ffa; } */ table tr:hover { /* background-color: #fff; */ background-color: rgb(109,109,249); } table tr:hover td { background-color: transparent; /* or #000 */ font-family: 'Comic Sans MS'; border-color: blue; /* font-size: 115%; */ </style>
- CSS pour balise <pre> ou <textarea>
<pre style=" border: 0px solid #000; background-color: #ddd; font-family: courier; line-height: 1.5em; font-size: 70%; width: 70%; height: auto; overflow: auto; ">test test test<pre style=" background-color:black; color:white; font-family: Courier,sans-serif; font-size: 10pt; font-style: normal; width:-moz-max-content; # permet le !important ">test test test<pre style=" border: 0px solid #000; background-color: #ddd; font-family: courier; line-height: 1.5em; font-size: 80%; "> $( iconv -f IBM-850 -t ISO8859-1 ${Cft_fname} ) </pre>test test test
## crée dans la liste des lancement un upr XX210AO prévu pour le 01/09/2012 à 23h00 et maximum le lendemain à 03h00 unix@unix:> uxadd FLA UPR=XX210A0 MU=M91QR USER=informix LSTART="(20120901,2300)" LEND="(20120902,0300)" PDATE=20120901<textarea style=" background-color:black; color:white; width:100%; height:100px; overflow: auto; ">
- Generer des onglets dans une page
<style> #menu { border-bottom : 0px solid #9EA0A1; padding-bottom : 0px; height : auto; } #onglets { font : bold 11px Batang, arial, serif; list-style-type : none; padding-bottom : 34px; /* ? modifier suivant la taille de la police ET de la hauteur de l'onglet dans #onglets li */ border-bottom : 1px solid #9EA0A1; margin-left : 0; } #onglets li { float : left; height : 31px; /* ? modifier suivant la taille de la police pour centrer le texte dans l'onglet */ background-color: #F4F9FD; margin : 2px 2px 0 2px !important; /* Pour les navigateurs autre que IE */ margin : 1px 2px 0 2px; /* Pour IE */ border : 1px solid #9EA0A1; list-style-type: none; border-radius: 4px 3px 6px / 2px 4px; } #onglets li.active { border-bottom: 1px solid #fff; background-color: #fff } #onglets a { display : block; color : #666; /* -------href sans soulignement */ text-decoration : none; padding : 4px; } #onglets a:hover { background : #fff; } </style> <!-- Dans le content --> <div id="menu" > <ul id="onglets"> <li><a href="#" onClick="activerMenu(this, 'Consultation'); return false;" >Consultation</a> <li><a href="#" onClick="activerMenu(this, 'Resultats'); return false;" >Resultats</a> </ul> </div>
- inherit = Ignore style précedent
Ignore style précedent pour vertical-align et ajout class pour colonne tableau texte à droite
<style type="text/css" > table td { vertical-align:inherit; text-align: justify; } .right-cell { text-align: right; } </style> <table border=1> <COLGROUP> <COL width=170> <COL width=100> </COLGROUP> <TBODY> <tr><th>Nom Action</th><th>Cotation</th></tr> <tr><td>Col1</td><td class="right-cell">Col2</td></tr> </tbody> </table>
Previous page: Caractères et balises
Page suivante : Divers javascript