{"id":26,"date":"2007-01-04T07:43:11","date_gmt":"2007-01-04T06:43:11","guid":{"rendered":"http:\/\/www.loretahur.es\/AprendiendoCSS\/diferente-css-segun-quien-nos-mire\/"},"modified":"2007-01-03T23:28:56","modified_gmt":"2007-01-03T22:28:56","slug":"diferente-css-segun-quien-nos-mire","status":"publish","type":"post","link":"http:\/\/www.loretahur.net\/AprendiendoCSS\/diferente-css-segun-quien-nos-mire\/","title":{"rendered":"Diferente CSS seg\u00fan quien nos mire"},"content":{"rendered":"<p>Una de las gracias que tiene el CSS es presentar un mismo contenido de diferentes formas. Por tanto, podemos crear diferentes presentaciones dependiendo del dispositivo en el que se vaya a visualizar nuestra p\u00e1gina. Por ejemplo, no ser\u00e1 lo mismo mostrar una p\u00e1gina en un ordenador convencional que en una PDA.<\/p>\n<p>Para ello tenemos una serie de valores que aplicar a las etiquetas <code>&lt;style&gt;<\/code> o <code>&lt;link&gt;<\/code> con el par\u00e1metro <em>media<\/em>.<\/p>\n<p>Si a <strong>media<\/strong> le damos el valor:<\/p>\n<ul>\n<li>all: ese fichero CSS ser\u00e1 cargado para todos los dispositivos<\/li>\n<li>screen: para monitores de ordenador normales (valor por defecto)<\/li>\n<li>print: para impresi\u00f3n<\/li>\n<li>aural: sintetizadores de voz<\/li>\n<li>handheld: asistentes personales (PDA&#8217;s)<\/li>\n<li>braille: m\u00e1quinas capaces de reproducir formato braille para personas invidentes<\/li>\n<li>embossed: para imprimir texto en braille<\/li>\n<li>projection: proyectores y transparencias<\/li>\n<li>tty: terminales<\/li>\n<li>tv: televisores<\/li>\n<\/ul>\n<p>Puede ser un solo valor o varios separados por comas.<\/p>\n<p>Veamos un ejemplo en el que dependiendo de si han accedido a nuestra p\u00e1gina a trav\u00e9s de un ordenador o a trav\u00e9s de una PDA, cargamos una hoja de estilos u otra:<br \/>\n<code><br \/>\n&lt;style type=\"text\/css\" media=\"screen\"&gt;<br \/>\n&#160;&#160;@import \"estilos_normal.css\";<br \/>\n&lt;\/style&gt;<br \/>\n&lt;style type=\"text\/css\" media=\"handheld\"&gt;<br \/>\n&#160;&#160;@import \"estilos_pda.css\";<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>Pero tambi\u00e9n podemos hacer esto dentro de una \u00fanica hoja de estilos con la regla <strong>@media<\/strong>. \u00c9sta permite aplicar diferentes estilos dentro de una misma hoja dependiendo del medio. Ejemplos:<\/p>\n<p>@media print {<br \/>\nbody { font-size: 10pt }<br \/>\n}<br \/>\n@media screen {<br \/>\nbody { font-size: 12pt }<br \/>\n}<br \/>\n@media screen, print {<br \/>\nbody { line-height: 1.2 }<br \/>\n}<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Una de las gracias que tiene el CSS es presentar un mismo contenido de diferentes formas. Por tanto, podemos crear diferentes presentaciones dependiendo del dispositivo en el que se vaya a visualizar nuestra p\u00e1gina. Por ejemplo, no ser\u00e1 lo mismo mostrar una p\u00e1gina en un ordenador convencional que en una PDA. Para ello tenemos una [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"_links":{"self":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/26"}],"collection":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":0,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/posts\/26\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/media?parent=26"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/categories?post=26"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.loretahur.net\/AprendiendoCSS\/wp-json\/wp\/v2\/tags?post=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}