Comment puis-je appliquer le style CSS à l'impression?

Je suis en train d'imprimer un div dans une de mes pages, mais je ne peux pas appliquer le style css lors de l'impression. Écrit media="print" à l'intérieur des balises de style ne fonctionne pas. Que dois-je faire?

   <style type="text/css" media="print">
body
{
font-size:medium;
color:Black;
font-size:14px;
}
input 
{
margin:0px;
font-size:14px;


}
.grid
{
border-color:Gray;
border-width:1px;

}
.alan
{
border-style:none;

}

.grid1
{
border-color:Gray;
border-width:1px;
}
    </style>

InformationsquelleAutor Mert Karatas | 2012-03-23
  1. 8

    Utiliser les éléments suivants:

    <style type="text/css">
    @media print
    {
        body {
            /* styles */
        }
    }
</style>
    • Elle reste toujours la même avec pas de css à la page d'impression.
    • Quel navigateur utilisez-vous? Aussi il n'ya aucune garantie que Print Preview sera le style du document; car il est à la discrétion de l'aperçu du programme, alors essayez d'imprimer une page.
    • J'utilise Chrome et j'ai essayé de lancer son impression. Mais encore css n'est pas appliquée.
    InformationsquelleAutor Brian Graham
  2. 3

    Il y a de nombreuses façons pour que:

    Première: <style type="text/css"media="print">

    Deuxième: <style type="text/css"media="screen">

    Troisième: 

    @media print 
 {
 body { margin: 0; background-image: none; font-size: 12pt; }
 }

    Espère que cela est Utile pour vous..

    InformationsquelleAutor Rony SP
  3. 1

    Ce que vous faites dans votre message d'origine fonctionne correctement. C'est juste la de la vieille école façon de faire les choses.

    Une chose à noter est que le navigateur ne s'appliquera pas à tous vos styles à la mode d'impression. Il sélectionne et choisit les styles d'impression approprié. J'ai trouvé aussi que si vous utiliser un doctype HTML 5, il va vous donner des résultats légèrement différents.

    Voici un exemple simple similaire à la vôtre que vous pouvez essayer dans le navigateur.

    <!DOCTYPE html>
<html>
<head>
<style media="print">
.hideForPrint { display:none; }
.anotherSTyle { font-family: Verdana; text-decoration:underline; }
</style>
</head>
<body>
<div class="hideForPrint">Print This?</div>
<div class="anotherStyle">Another Style</div>
</body>
</html>

    Voici une capture d'écran de l'aperçu avant impression de Chrome (v19.0.1077.3 canaries), que vous avez mentionné votre aide pour tester cela.

    Comment puis-je appliquer le style CSS à l'impression?

    InformationsquelleAutor scottheckel
  4. 0

    Je suis en utilisant le Jquery Imprimer Élément 1.2 plugin pour imprimer uniquement le contenu d'un div.
    De cette façon, vous n'avez pas besoin de css display:none pour tous ces éléments que vous ne souhaitez pas imprimer.

    Je sais que c'est pas une réponse directe à votre question, mais le voir comme une sorte de suggestion.

    Exemple: 

    $('SelectorToPrint').printElement();

    Voici ma mise en œuvre à l'aide de la classNameToAdd option: 

    function printDiv(divToPrint) {

   $('#' + divToPrint).printElement(
        {
            printBodyOptions:
            {
                classNameToAdd: 'printarea'

            }
        }
   );

}

    Une fois que vous avez ajouté le plugin à votre page, vous pouvez appeler la fonction ci-dessus lorsque l'utilisateur clique sur le bouton imprimer/link.

    <a href="#" onclick="javascript:printDiv('theIDofYourDiv')">Print part of the page</a>

    Vous pouvez télécharger ce plugin et de trouver plus de documentation ici.

    InformationsquelleAutor ThdK