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 :
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 .
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
