Mitjà

This translation is incomplete. Please help translate this article from English.

Aquesta és la 14th secció de la Part I del tutorial CSS Getting Started Moltes de les pàgines d'aquest tutorial s'han centrat en les propietats CSS i els valors que es poden utilitzar per especificar com mostrar un document. Aquesta pàgina es veu de nou en el propòsit i l'estructura de les fulles d'estil CSS.

Informació: Mitjà

El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.

Per exemple, és probable que estigueu llegint aquesta pàgina en un dispositiu de visualització. Però també pot ser que el vulgueu projectar en una pantalla per a una gran audiència, o imprimir-ho. Aquests diferents mitjans poden tenir característiques diferents. CSS proporciona formes de presentar un document de manera diferent en diferents mitjans.

Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu @media seguit pel tipus de mitjà, seguit de claus que tanquen les regles.

Exemple

Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.

En el llenguatge de marcat, l'element pare de l'àrea de navegació té el id nav-area. (A HTML5, això pot ser marcat amb l'element <nav> en lloc de <div> amb un atribut id.)

Quan s'imprimeix el document, l'àrea de navegació no té cap propòsit, de manera que la fulla d'estil l'elimina per complet:

@media print {
  #nav-area {display: none;}
  }

Alguns dels tipus de mitjans comuns són:

screen Color pantalla ordinador
print Mitjans paginats
projection Pantalla projectada
all Tots els mitjans (per defecte)
Més detalls

Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.

El llenguatge de marcat del document pot permetre que s'especifiqui el tipus de mitjà quan la fulla d'estil està vinculada al document. Per exemple, en HTML es pot especificar opcionalment el tipus de mitjà amb un atribut media en l'etiqueta LINK.

En CSS podeu utilitzar @import a l'inici d'una fulla d'estil per importar un altre fulla d'estil des d'una URL, especificant opcionalment el tipus de mitjà.

Mitjançant l'ús d'aquestes tècniques es poden separar regles d'estil per a diferents tipus de mitjans en diferents arxius. Això de vegades és una forma útil d'estructurar les fulles d'estil.

Per a més detalls sobre els tipus de mitjans, vegeu Mtjà en l'especificació CSS.

Hi ha més exemples de la propietat display en una pàgina posterior d'aquest tutorial: dades XML.

Impressió

CSS té algun suport específic per a la impressió i dels mitjans paginats en general.

Un regla @page pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a @page:left i @page:right.

Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (in) i punts (pt = 1/72 polzades) o centímetres (cm) i mil·límetres (mm). És igualment apropiat utilitzar ems (em) perquè coincideixi amb la mida de font i percentatges (%).

Podeu controlar la forma en què el contingut del document es divideix entre els límits de pàgina, mitjançant l'ús de les propietats page-break-before, page-break-after i page-break-inside.

Exemple

Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:

@page {margin: 1in;}

Aquesta regla assegura que cada element H1 comença en una nova pàgina:

h1 {page-break-before: always;}
Més detalls

Per als detalls complets de suport de CSS per als mitjans paginats, veure Mitjans paginats en l'especificació CSS.

Igual que altres característiques de CSS, la impressió depèn del navegador i la seva configuració. Per exemple, el navegador Mozilla subministra marges predeterminats, capçaleres i peus quan s'imprimeix. Quan altres usuaris imprimeixin el document, és probable que no sapigan quin navegador és i quina  configuració té, de manera que és possible que no poguin controlar completament els resultats.

Interfícies d'usuari

CSS té algunes propietats especials per als dispositius que suporten una interfície d'usuari, com pantalles d'ordinador. Això fa que l'aspecte del document canvii dinàmicament a mesura que l'usuari treballa amb la interfície.

No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.

Hi ha cinc selectors especials:

Selector Selects
E:hover Qualsevol element E que té el punter sobre ell
E:focus Qualsevol element E que té el focus del teclat
E:active L'element E que està implicat en l'acció de l'usuari actual
E:link Qualsevol element E que és un hipervincle a una adreça URL que l'usuari no ha visitat recentment
E:visited Qualsevol element E que és un hipervincle a una adreça URL que l'usuari ha visitat recentment

Nota: La informació que es pot obtenir del selector :visited està restringida a Gecko 2.0. Veure Privacitat i el selector :visited per a més detalls.

La propietat cursor especifica la forma del punter: Algunes de les formes comunes són els següents. Col·loqueu el ratolí sobre els elements de la llista per veure les formes de punter reals en el vostre navegador:

Selector Selects
pointer Indica un vincle
wait Indica que el programa no pot acceptar l'entrada
progress Indica que el programa està funcionant, encara pot acceptar l'entrada
default El valor per defecte (normalment una fletxa)

Una propietat outline crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat border, excepte que no es poden definir els costats individualment.

Algunes altres característiques de les interfícies d'usuari s'implementen utilitzant atributs, en la forma normal. Per exemple, un element que és deshabilitat o de només lectura té l'atribut disabled o l'atribut readonly. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: [disabled] o [readonly].

Exemple

Aquestes regles especifiquen els estils per a un botó que canvia dinàmicament a mesura que l'usuari interactua amb ell:

.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }

Aquest wiki no és compatible amb una interfície d'usuari en la pàgina, pel que aquests botons no "fan clic". Aquestes són algunes de les imatges estàtiques per il·lustrar la idea:

Click Me Click Me Click Me
 
deshabilitat normal actiu

Un botó completament funcional també té un contorn fosc al voltant de tot el botó quan el valor és per defecte, i un contorn en línia de punts a la cara del botó quan té el focus del teclat. També podria tenir un efecte estacionari quan el punter es troba a sobre d'ell.

Més detalls

Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu Interfície d'usuari en l'especificació CSS.

Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.

Acció: Impressió d'un document

  1. Feu un nou document HTML, doc4.html. Copieu i enganxeu el contingut d'aquí:
    <!DOCTYPE html>
    <html>
      <head>
        <title>Print sample</title>
        <link rel="stylesheet" href="style4.css">
      </head>
      <body>
        <h1>Section A</h1>
        <p>This is the first section...</p>
        <h1>Section B</h1>
        <p>This is the second section...</p>
        <div id="print-head">
          Heading for paged media
        </div>
        <div id="print-foot">
          Page: 
        </div>
    </body>
    </html>
    
  2. Feu una nova fulla d'estil, style4.css. Copieu i enganxeu el contingut d'aquí:
    /*** Print sample ***/
    
    /* defaults  for screen */
    #print-head,
    #print-foot {
      display: none;
      }
    
    /* print only */
    @media print {
    
    h1 {
      page-break-before: always;
      padding-top: 2em;
      }
    
    h1:first-child {
      page-break-before: avoid;
      counter-reset: page;
      }
    
    #print-head {
      display: block;
      position: fixed;
      top: 0pt;
      left:0pt;
      right: 0pt;
    
      font-size: 200%;
      text-align: center;
      }
    
    #print-foot {
      display: block;
      position: fixed;
      bottom: 0pt;
      right: 0pt;
    
      font-size: 200%;
      }
    
    #print-foot:after {
      content: counter(page);
      counter-increment: page;
      }
    
    } /* end print only */
    
  3. Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.
  4. Imprimir (o vista prèvia d'impressió) el document; la fulla d'estil col·loca cada secció en una pàgina separada, i s'afegeix una capçalera i peu de pàgina per a cada pàgina. Si el navegador és compatible amb els comptadors, s'agrega un número de pàgina al peu de pàgina.
    Heading for paged media
    Section A
    This is the first section...
    Page: 1
    Heading for paged media
    Section B
    This is the second section...
    Page: 2
Reptes
Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent.

Llegiu la pàgina de referència @import per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil style4.css.

Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.

Veure la solució per el repte.

I ara què?

Si teniu dificultats per entendre aquesta pàgina, o si teniu altres comentaris al respecte, si us plau, contribuïu a la vostre pàgina de Discussió.

Fins al moment, totes les regles d'estil en aquest tutorial s'han especificat en els arxius. Les regles i els seus valors són fixos. La pàgina següent descriu com poden canviar les regles de forma dinàmica mitjançant l'ús d'un llenguatge de programació: JavaScript

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,