diff options
Diffstat (limited to 'files/ca/web/guide/css/inici_en_css/mitjà/index.html')
| -rw-r--r-- | files/ca/web/guide/css/inici_en_css/mitjà/index.html | 402 |
1 files changed, 402 insertions, 0 deletions
diff --git a/files/ca/web/guide/css/inici_en_css/mitjà/index.html b/files/ca/web/guide/css/inici_en_css/mitjà/index.html new file mode 100644 index 0000000000..f3b14fb062 --- /dev/null +++ b/files/ca/web/guide/css/inici_en_css/mitjà/index.html @@ -0,0 +1,402 @@ +--- +title: Mitjà +slug: Web/Guide/CSS/Inici_en_CSS/Mitjà +tags: + - CSS + - 'CSS:Getting_Started' + - Example + - Guide + - Intermediate + - NeedsBeginnerUpdate + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Web/Progressive_web_apps/Responsive/Media_types +--- +<p>{{CSSTutorialTOC}} {{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Taules")}}</p> + +<p>Aquesta és la 14th secció de la Part I del tutorial <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> 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.</p> + +<h2 class="clearLeft" id="Informació_Mitjà">Informació: Mitjà</h2> + +<p>El propòsit de CSS és especificar com els documents es presenten a l'usuari. La presentació pot tenir més d'una forma.</p> + +<p>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.</p> + +<p>Per especificar regles que són específiques d'un tipus de mitjà, utilitzeu {{CSSXref("@media")}} seguit pel tipus de mitjà, seguit de claus que tanquen les regles.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Un document, en un lloc web, té una àrea de navegació per permetre a l'usuari moure's pel lloc.</p> + +<p>En el llenguatge de marcat, l'element pare de l'àrea de navegació té el <strong>id</strong> <code>nav-area</code>. (A {{HTMLVersionInline (5)}}, això pot ser marcat amb l'element {{HTMLElement("nav")}} en lloc de {{HTMLElement("div")}} amb un atribut id.)</p> + +<p>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:</p> + +<pre class="brush:css">@media print { + #nav-area {display: none;} + } +</pre> +</div> + +<p><span class="short_text" id="result_box" lang="ca"><span>Alguns dels tipus</span> <span>de mitjans</span> <span>comuns</span> <span>són</span><span>:</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>screen</code></td> + <td>Color pantalla ordinador</td> + </tr> + <tr> + <td><code>print</code></td> + <td>Mitjans paginats</td> + </tr> + <tr> + <td style="padding-right: 1em;"><code>projection</code></td> + <td>Pantalla projectada</td> + </tr> + <tr> + <td><code>all</code></td> + <td>Tots els mitjans (per defecte)</td> + </tr> + </tbody> +</table> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Hi ha altres formes d'especificar el tipus de mitjà d'un conjunt de regles.</p> + +<p>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 <code>media</code> en l'etiqueta LINK.</p> + +<p>En CSS podeu utilitzar {{CSSXref("@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à.</p> + +<p>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.</p> + +<p>Per a més detalls sobre els tipus de mitjans, vegeu <a href="http://www.w3.org/TR/CSS21/media.html">Mtjà</a> en l'especificació CSS.</p> + +<p>Hi ha més exemples de la propietat {{cssxref ("display")}} en una pàgina posterior d'aquest tutorial: <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en-US/docs/Web/Guide/CSS/Getting_Started/XML_data">dades XML</a>.</p> +</div> + +<h3 id="Impressió">I<span id="result_box" lang="ca"><span>mpressió</span></span></h3> + +<p>CSS té algun suport específic per a la impressió i dels mitjans paginats en general.</p> + +<p>Un regla {{cssxref("@page")}} pot establir els marges de pàgina. Per a la impressió a doble cara, es poden definir els marges per separat per a <code>@page:left</code> i <code>@page:right</code>.</p> + +<p>Per als mitjans d'impressió, normalment s'utilitza com a unitats de longitud les polzades (<code>in</code>) i punts (pt = 1/72 polzades) o centímetres (<code>cm</code>) i mil·límetres (<code>mm</code>). És igualment apropiat utilitzar ems (<code>em</code>) perquè coincideixi amb la mida de font i percentatges (<code>%</code>).</p> + +<p>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 {{cssxref("page-break-before")}}, {{cssxref("page-break-after")}} i {{cssxref("page-break-inside")}}.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p>Aquesta regla estableix els marges de pàgina a una polzada en els quatre costats:</p> + +<pre class="brush:css">@page {margin: 1in;} +</pre> + +<p>Aquesta regla assegura que cada element <code>H1</code> comença en una nova pàgina:</p> + +<pre class="brush:css">h1 {page-break-before: always;} +</pre> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per als detalls complets de suport de CSS per als mitjans paginats, veure <a href="http://www.w3.org/TR/CSS21/page.html">Mitjans paginats</a> en l'especificació CSS.</p> + +<p>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.</p> +</div> + +<h3 id="Interfícies_d'usuari">I<span id="result_box" lang="ca"><span>nterfícies</span> <span>d'usuari</span></span></h3> + +<p>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.</p> + +<p>No hi ha cap tipus de mitjà especial per als dispositius amb interfícies d'usuari.</p> + +<p>Hi ha cinc selectors especials:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr> + <td><code>E{{cssxref(":hover")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el punter</span> <span>sobre ell</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":focus")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E</span> <span>que té</span> <span>el focus del</span> <span>teclat</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":active")}}</code></td> + <td><span id="result_box" lang="ca"><span>L'element</span> <span>E</span> <span>que està</span> <span>implicat</span> <span>en l'acció</span> <span>de l'usuari actual</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":link")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari <em>no</em></span> <span>ha visitat</span> <span>recentment</span></span></td> + </tr> + <tr> + <td><code>E{{cssxref(":visited")}}</code></td> + <td><span id="result_box" lang="ca"><span>Qualsevol</span> <span>element</span> <span>E que és</span> <span>un hipervincle</span> <span>a una adreça</span> <span>URL</span> <span>que l'usuari ha</span> <span>visitat</span> <span>recentment</span></span></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota: </strong>La informació que es pot obtenir del selector :visited està restringida a {{gecko("2.0")}}. Veure <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Privacy_and_the_:visited_selector" title="en-US/docs/Web/Guide/CSS/Privacy and the :visited selector">Privacitat i el selector :visited</a> per a més detalls.</p> +</div> + +<p>La propietat {{cssxref("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:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Selector</strong></td> + <td><strong>Selects</strong></td> + </tr> + <tr style="cursor: pointer;"> + <td><code>pointer</code></td> + <td>Indica un vincle</td> + </tr> + <tr style="cursor: wait;"> + <td><code>wait</code></td> + <td>Indica que el programa no pot acceptar l'entrada</td> + </tr> + <tr style="cursor: progress;"> + <td><code>progress</code></td> + <td>Indica que el programa està funcionant, encara pot acceptar l'entrada</td> + </tr> + <tr style="cursor: default;"> + <td><code>default</code></td> + <td><span class="short_text" id="result_box" lang="ca"><span>El</span> <span>valor per</span> <span>defecte</span> <span>(</span><span>normalment una</span> <span>fletxa</span><span>)</span></span></td> + </tr> + </tbody> +</table> + +<p>Una propietat {{cssxref("outline")}} crea un contorn que sovint s'utilitza per indicar el focus del teclat. Els seus valors són similars a la propietat {{cssxref("border")}}, excepte que no es poden definir els costats individualment.</p> + +<p>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 <strong>disabled</strong> o l'atribut <strong>readonly</strong>. Els selectors poden especificar aquests atributs com qualsevol altre atribut, mitjançant l'ús de claudàtors: <code>{{mediawiki.external('disabled')}}</code> o <code>{{mediawiki.external('readonly')}}</code>.</p> + +<div class="tuto_example"> +<div class="tuto_type">Exemple</div> + +<p><span id="result_box" lang="ca"><span>Aquestes regles</span> <span>especifiquen els</span> <span>estils</span> <span>per a un</span> <span>botó</span> <span>que canvia</span> <span>dinàmicament</span> <span>a mesura</span> <span>que l'usuari</span> <span>interactua</span> <span>amb</span> <span>ell</span><span>:</span></span></p> + +<pre class="brush:css">.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; + } +</pre> + +<p>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:</p> + +<table style="background-color: #ffffff; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table> + <tbody> + <tr> + <td><span style="background-color: #ccddcc; border: 2px outset #cceecc; color: #777777; cursor: default; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px outset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + <td><span style="background-color: #cceecc; border: 2px inset #cceecc; cursor: move; height: 2em; margin-right: 1em; padding: .5em 1em; width: 8em;">Click Me</span></td> + </tr> + <tr style="line-height: 25%;"> + <td> </td> + </tr> + <tr style="font-style: italic;"> + <td>deshabilitat</td> + <td>normal</td> + <td>actiu</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p>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.</p> +</div> + +<div class="tuto_details"> +<div class="tuto_type">Més detalls</div> + +<p>Per obtenir més informació sobre les interfícies d'usuari en el CSS, vegeu <a href="http://www.w3.org/TR/CSS21/ui.html">Interfície d'usuari</a> en l'especificació CSS.</p> + +<p>Hi ha un exemple del llenguatge de marcat de Mozilla per a interfícies d'usuari, XUL, en la Part II d'aquest tutorial.</p> +</div> + +<h2 id="Acció_Impressió_d'un_document">A<span id="result_box" lang="ca"><span>cció</span><span>:</span> <span>Impressió</span> <span>d'un</span> <span>document</span></span></h2> + +<ol> + <li><span id="result_box" lang="ca"><span>Feu</span> <span>un nou</span> <span>document HTML,</span> <code><span>doc4.html</span></code><span>.</span> <span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + + <pre class="brush:html"><!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> +</pre> + </li> + <li>Feu una nova fulla d'estil, <code>style4.css</code>. <span id="result_box" lang="ca"><span>Copieu</span> <span>i enganxeu el</span> <span>contingut</span> <span>d'aquí:</span></span> + <pre class="brush:css">/*** 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 */ +</pre> + </li> + <li>Vegeu aquest document en el vostre navegador; utilitza l'estil per defecte del navegador.</li> + <li>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. + <table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section A</div> + + <div style="font-size: 75%;">This is the first section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 1</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td> + <table style="margin-right: 2em; width: 15em;"> + <tbody> + <tr> + <td> + <div style="font-size: 110%; text-align: center; margin-bottom: .5em;">Heading for paged media</div> + + <div style="font-size: 150%; font-weight: bold;">Section B</div> + + <div style="font-size: 75%;">This is the second section...</div> + + <div style="font-size: 150%; text-align: right; margin-top: 12em;">Page: 2</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </li> +</ol> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em; width: 100%;"> + <caption>Reptes</caption> + <tbody> + <tr> + <td>Moveu les regles d'estil específiques d'impressió en un fitxer CSS independent. + <p>Llegiu la pàgina de referència {{CSSXref("@import")}} per trobar detalls de com importar el nou arxiu CSS específic de la impressió en el vostre full d'estil <code>style4.css</code>.</p> + + <p>Feu que els encapçalaments es tornin blaus quan el punter del ratolí estigui sobre ells.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Media" title="en-US/docs/Web/Guide/CSS/Getting_started/Challenge_solutions#Media">Veure la solució per el repte.</a></p> + +<h2 id="I_ara_què">I ara què?</h2> + +<p>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 <a href="/Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media" title="Talk:en-US/docs/Web/Guide/CSS/Getting_Started/Media">Discussió</a>.</p> + +<p>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ó: <strong><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en-US/docs/Web/Guide/CSS/Getting_Started/JavaScript">JavaScript</a></strong></p> |