1. Describa todos los medios definidos por CSS.
Resp.-
Una de las características más importantes de las hojas de estilos CSS es que permiten
definir diferentes estilos para diferentes medios o dispositivos: pantallas, impresoras,
móviles, proyectores, etc.
Además, CSS define algunas propiedades específicamente para determinados medios,
como por ejemplo la paginación y los saltos de página para los medios impresos o el
volumen y tipo de voz para los medios de audio. La siguiente tabla muestra el nombre
que CSS utiliza para identificar cada medio y su descripción:
Medio Descripción
all Todos los medios definidos
braille Dispositivos táctiles que emplean el sistema braille
embosed Impresoras braille
handheld Dispositivos de mano: móviles, PDA, etc.
print Impresoras y navegadores en el modo "Vista Previa para Imprimir"
projection Proyectores y dispositivos para presentaciones
screen Pantallas de ordenador
speech Sintetizadores para navegadores de voz utilizados por personas discapacitadas
tty Dispositivos textuales limitados como teletipos y terminales de texto
tv Televisores y dispositivos con resolución baja
Los medios más utilizados actualmente son screen (para definir el aspecto de la página
en pantalla) y print (para definir el aspecto de la página cuando se imprime), seguidos
de handheld (que define el aspecto de la página cuando se visualiza mediante un
dispositivo móvil).
Además, CSS clasifica a los medios en diferentes grupos según sus características. La
siguiente tabla resume todos los grupos definidos en el estándar:
Medio
Continuo /
Paginado
Visual / Auditivo / Táctil
/ Vocal
Mapa de bits /
Caracteres
Interactivo /
Estático
braille continuo táctil caracteres ambos
embossed paginado táctil caracteres estático
handheld ambos visual, auditivo, vocal ambos ambos
print paginado visual mapa de bits estático
projection paginado visual mapa de bits interactivo
screen continuo visual, auditivo mapa de bits ambos
speech continuo vocal (no tiene sentido) ambos
tty continuo visual caracteres ambos
Introducción a CSS Capítulo 1. Introducción
tv ambos visual, auditivo mapa de bits ambos
La gran ventaja de CSS es que permite modificar los estilos de una página en función del
medio en el que se visualiza. Existen cuatro formas diferentes de indicar el medio en el
que se deben aplicar los estilos CSS.
2. Describa como se puede definir una CSS en un documento HTML.
Resp.-
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta
Un párrafo de texto.
Este método se
emplea cuando se define un número pequeño de estilos o cuando se quieren
incluir estilos específicos en una determinada página HTML que completen los
estilos que se incluyen por defecto en todas las páginas del sitio web.
El principal
inconveniente es que si se quiere hacer una modificación en los estilos
definidos, es necesario modificar todas las páginas que incluyen el estilo que
se va a modificar.
Definir CSS en un archivo externo
En este caso,
todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML
enlazan mediante la etiqueta . Un archivo de tipo CSS no es más que
un archivo simple de texto cuya extensión es .css Se pueden
crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar
tantos archivos CSS como necesite.
Si se quieren
incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben
seguir los siguientes pasos:
1) Se crea un
archivo de texto y se le añade solamente el siguiente contenido:
p {
color: black; font-family: Verdana; }
2) Se guarda el
archivo de texto con el nombre estilos.css Se debe poner especial atención a que
el archivo tenga extensión .css y no .txt
3) En la página
HTML se enlaza el archivo CSS externo mediante la etiqueta :
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Un párrafo de texto.
Cuando el
navegador carga la página HTML anterior, antes de mostrar sus contenidos
también descarga los archivos CSS externos enlazados mediante la etiqueta y aplica los
estilos a los contenidos de la página.
Normalmente, la
etiqueta incluye cuatro atributos cuando enlaza un archivo CSS:
- rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
- type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css
- href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.
- media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.
De todas las
formas de incluir CSS en las páginas HTML, esta es la más utilizada con mucha
diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS
en multitud de páginas HTML, por lo que se garantiza la aplicación homogénea de
los mismos estilos a todas las páginas que forman un sitio web.
Con este
método, el mantenimiento del sitio web se simplifica al máximo, ya que un solo
cambio en un solo archivo CSS permite variar de forma instantánea los estilos
de todas las páginas HTML que enlazan ese archivo.
Aunque
generalmente se emplea la etiqueta para enlazar los archivos CSS
externos, también se puede utilizar la etiqueta
Un párrafo de texto.
En este caso,
para incluir en la página HTML los estilos definidos en archivos CSS externos
se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre
preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).
La URL del
archivo CSS externo se indica mediante una cadena de texto encerrada con
comillas simples o dobles o mediante la palabra reservada url(). De esta
forma, las siguientes reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
1.6.3. Incluir CSS en los elementos HTML
El último
método para incluir estilos CSS en documentos HTML es el peor y el menos
utilizado, ya que tiene los mismos problemas que la utilización de las
etiquetas .
Ejemplo:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Un párrafo de texto.
Esta forma de
incluir CSS directamente en los elementos HTML solamente se utiliza en
determinadas situaciones en las que se debe incluir un estilo muy específico
para un solo elemento concreto.
3.
¿Cuál es la sintaxis de los medios definidos con las
reglas de tipo @media?
Resp.-
Las reglas @media son un tipo especial de
regla CSS que permiten indicar de forma
directa el medio o medios en los que se aplicarán los estilos incluidos en
la regla. Para
especificar el medio en el que se aplican los estilos, se incluye su nombre
después de
@media. Si los estilos se aplican a varios medios, se incluyen los nombres de
todos los
medios separados por comas.
A continuación se muestra un ejemplo sencillo:
@media
print {
body { font-size: 10pt }
}
@media
screen {
body { font-size: 13px }
}
@media
screen, print {
body { line-height: 1.2 }
}
El ejemplo anterior establece que el tamaño de letra de la página cuando se
visualiza en
una pantalla debe ser 13 píxel. Sin embargo, cuando
se imprimen los contenidos de la
página, su tamaño de letra debe ser de 10 puntos. Por último, tanto cuando la página se
visualiza en una pantalla como cuando se imprimen sus contenidos, el
interlineado del
texto debe
ser de 1.2
veces el tamaño de letra del texto.
4.
¿Cuál es la sintaxis de los medios definidos con las
reglas de tipo @import?
Resp.-
Cuando se utilizan reglas de tipo @import para enlazar archivos CSS externos, se puede
especificar el medio en el que se aplican los estilos
indicando el nombre del medio
después de la URL del archivo CSS:
@import url("estilos_basicos.css")
screen;
@import url("estilos_impresora.css")
print;
Las reglas del ejemplo anterior establecen que cuando la
página se visualiza por
pantalla, se cargan los estilos definidos en el primer
archivo CSS. Por otra parte, cuando
la página se imprime, se tienen en cuenta los estilos que
define el segundo archivo CSS.
Si los estilos del archivo CSS externo deben aplicarse en
varios medios, se indican los
nombres de todos los medios separados por comas. Si no se
indica el medio en una regla
de tipo @import, el navegador sobreentiende que el medio es all, es decir, que los estilos
se aplican en todos los medios.
Introducción
a CSS Capítulo 1. Introducción
5.
Describa el funcionamiento de un selector de clase.
Resp.-
Si se considera el siguiente código HTML de ejemplo:
Lorem ipsum dolor sit amet...
Nunc sed lacus et est adipiscing accumsan...
Class aptent taciti sociosqu ad litora...
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector
universal (*) no
se puede utilizar porque selecciona todos los elementos de la página. El
selector de tipo
o etiqueta (p) tampoco se puede utilizar porque seleccionaría
todos los párrafos. Por
último, el selector descendente (body p) tampoco
se puede utilizar porque todos los
párrafos se encuentran en el mismo sitio.
Una de las soluciones más sencillas para aplicar estilos a un solo elemento
de la página
consiste en utilizar el atributo class de HTML
sobre ese elemento para indicar
directamente la regla CSS que se le debe aplicar:
Lorem ipsum dolor sit
amet...
Nunc sed lacus et est adipiscing accumsan...
Class aptent taciti sociosqu ad litora...
A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos
los estilos que se van a aplicar al elemento. Para que el navegador no
confunda este
selector con los otros tipos de selectores, se prefija el valor del
atributo class con un
punto (.) tal y como muestra el siguiente ejemplo:
.destacado { color: red; }
El selector .destacado se interpreta como "cualquier elemento de la página
cuyo atributo
class sea igual a destacado", por lo que solamente el primer párrafo cumple esa
condición.
Este tipo de selectores se llaman selectores de clase y son los más
utilizados junto con
los selectores de ID que se verán a continuación. La principal característica
de este
selector es que en una misma página HTML varios elementos diferentes pueden
utilizar
el mismo valor en el atributo class:
Lorem ipsum dolor sit
amet...
Nunc sed lacus et est adipiscing
accumsan...
Class aptent taciti sociosqu ad litora...
Los selectores de clase son imprescindibles para diseñar
páginas web complejas, ya que
permiten disponer de una precisión total al seleccionar
los elementos. Además, estos
selectores permiten reutilizar los mismos estilos para
varios elementos diferentes.
A continuación se muestra otro ejemplo de selectores de
clase:
.aviso {
padding: 0.5em;
border: 1px solid #98be10;
background: #f6feda;
}
.error {
color: #930;
font-weight: bold;
}
...
...
El elemento tiene un atributo class="error", por lo que se le aplican las reglas
CSS indicadas por el selector .error. Por su parte, el elemento
tiene un atributo
class="aviso", por lo que su estilo es el que definen las
reglas CSS del selector .aviso.
En ocasiones, es necesario restringir el alcance del
selector de clase. Si se considera de
nuevo el ejemplo anterior:
Lorem ipsum dolor sit amet...
Nunc sed
lacus et est
adipiscing
accumsan...
Class
aptent taciti sociosqu ad
litora...
¿Cómo es posible aplicar estilos solamente al párrafo
cuyo atributo class sea igual a
destacado? Combinando el selector de tipo y el
selector de clase, se obtiene un selector
mucho más específico:
p.destacado {
color: red }
El selector p.destacado se interpreta como "aquellos elementos de tipo
que
dispongan de un atributo class con valor destacado". De la misma forma, el selector
a.destacado solamente selecciona los enlaces cuyo
atributo class sea igual a
destacado.
De lo anterior se deduce que el atributo .destacado
es equivalente a *.destacado, por
lo que todos los diseñadores obvian el símbolo * al escribir un selector de clase normal.
No debe confundirse el selector de clase con los
selectores anteriores:
/* Todos los elementos de tipo "p"
con atributo class="aviso" */
p.aviso { ... }
/* Todos los elementos con atributo
class="aviso" que estén dentro
Introducción a CSS Capítulo 2.
Selectores
de cualquier elemento de tipo "p"
*/
p .aviso { ... }
/* Todos los elementos "p" de la
página y todos los elementos con
atributo class="aviso" de la página
*/
p, .aviso { ... }
Por último, es posible aplicar los estilos de varias
clases CSS sobre un mismo elemento.
La sintaxis es similar, pero los diferentes valores del
atributo class se separan con
espacios en blanco. En el siguiente ejemplo:
Párrafo de texto...
Al párrafo anterior se le aplican los estilos definidos
en las reglas .especial, .destacado
y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de
color rojo, en
negrita y con un tamaño de letra de 15 píxel:
.error { color:
red; }
.destacado {
font-size: 15px; }
.especial {
font-weight: bold; }
Párrafo de texto...
Si un elemento dispone de un atributo class con más de un valor, es posible utilizar un
selector más avanzado:
.error { color:
red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial { font-weight: bold; }
Párrafo de texto...
En el ejemplo anterior, el color de la letra del texto es
azul y no rojo. El motivo es que se
ha utilizado un selector de clase múltiple .error.destacado, que se interpreta como
"aquellos elementos de la página que
dispongan de un atributo class
con al
menos los
valores error y destacado".
No hay comentarios:
Publicar un comentario