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 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
  • Style ecran 3270 noir et blanc
  • <pre style=" background-color:black; color:white; ">
    
    ## 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; ">
  • Largeur auto dans espace dispo
  • <textarea style=" height: 162px; overflow: auto; width: 100%; width: -moz-available; width: -webkit-fill-available; ">
    • 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>
    
    
  • Mettre un icone à l'onglet
  • doivent être dans <head> ... </head> <link rel="shortcut icon" href="http://999999999999:8888/image/logo.jpg" type="image/png"/> <link rel="icon" href="http://999999999999:8888/image/logo.jpg" type="image/png"/>
    • 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