Actividad 1 CSS

Introducción a CSS
Actividad # 1: Conteste las siguientes preguntas
1. Que es CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los
documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los
contenidos y su presentación y es imprescindible para crear páginas web complejas.
2. Explique las diferentes formas que se puede incluir CSS en una página Web
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la
etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo
dentro de la sección <head>).
Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
]</head>
<body>
\Un párrafo de texto.
</body>
</html>
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.
Al 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.
Los ejemplos mostrados en este libro utilizan este método para aplicar CSS al contenido HTML
de las páginas. De esta forma el código de los ejemplos es más conciso y se aprovecha mejor el
espacio.
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML
enlazan mediante la etiqueta <link>. 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 necesita.
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).
3. Que son los selectores CSS?
Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de
CSS. Como se vio en el capítulo anterior, una regla de CSS está formada por una parte llamada
"selector" y otra parte llamada "declaración".
La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por
lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una
página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede
aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede
aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas.
El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten
seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de
una página web.
No obstante, la mayoría de páginas de los sitios web se pueden diseñar utilizando solamente los
cinco selectores básicos.
4. Mencione los tipos de selectores básicos
Selector universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el
margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la
parte de la declaración de la regla CSS):
* { margin: 0; padding: 0;}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de
una página.
Selector de tipo o etiqueta
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del
selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p { ... }
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin
los caracteres < y >) correspondiente a los elementos que se quieren seleccionar.
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento.
El selector del siguiente ejemplo selecciona todos los elementos de la página que se
encuentren dentro de un elemento :
p span { color: red; }
Selector de clase
Si se considera el siguiente código HTML de ejemplo:
<body>
Lorem ipsum dolor sit amet...
Nunc sed lacus et est adipiscing accumsan...
Class aptent taciti sociosqu ad litora...
</body>
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.
Selectores de ID
En ocasiones, es necesario aplicar estilos CSS a un único elemento de la página. Aunque puede
utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más
eficiente en este caso.
El selector de ID permite seleccionar un elemento de la página a través del valor de su

atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor
del atributo id no se puede repetir en dos elementos diferentes de una misma página.
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se
utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla
CSS:
#destacado { color: red; }

Primer párrafo
Segundo párrafo
Tercer párrafo
5. Explique en que consiste el modelo de cajas de CSS
El modelo de cajas o "box model" es seguramente la característica más importante del lenguaje
de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El modelo de
cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se
representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se inserta una etiqueta HTML,
se crea una nueva caja rectangular que encierra los contenidos de ese elemento.
6. Mencione 5 propiedades para modificar textos en CSS
La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que
también alinea todos sus contenidos, como por ejemplo las imágenes.
Además de todas las unidades de medida y el uso de porcentajes, la propiedad line-

height permite indicar un número sin unidades que se interpreta como el múltiplo del tamaño
de letra del elemento. Por tanto, estas tres reglas CSS son equivalentes:
p { line-height: 1.2; font-size: 1em }
p { line-height: 1.2em; font-size: 1em }
p { line-height: 120%; font-size: 1em }

Además de la decoración que se puede aplicar a la tipografía que utilizan los textos, CSS define
otros estilos y decoraciones para el texto en su conjunto. La propiedad que decora el texto se
denomina text-decoration.
La propiedad text-transform permite mostrar el texto original transformado en un texto
completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra
de cada palabra en mayúscula (capitalize).
CSS también permite controlar la separación entre las letras que forman las palabras y la
separación entre las palabras que forman los textos. La propiedad que controla la separación
entre letras se llama letter-spacing y la separación entre palabras se controla mediante word-
spacing.
7. Explique en qué consiste el Layout de una página web
El diseño de las páginas web habituales se divide en bloques: cabecera, menú, contenidos y
pie de página. Visualmente, los bloques se disponen en varias filas y columnas. Por este
motivo, hace varios años la estructura de las páginas HTML se definía mediante tablas.
El desarrollo de CSS ha permitido que se puedan realizar los mismos diseños sin utilizar
tablas HTML
Por estos motivos, la estructura basada en tablas ha dado paso a la estructura basada
exclusivamente en CSS. Aunque crear la estructura de las páginas sólo con CSS presenta en
ocasiones retos importantes, en general es más sencilla y flexible.

Actividad 1 CSS

Cargado por

Copyright:

Formatos disponibles

Actividad 1 CSS

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Actividad 1 CSS

Cargado por

Copyright:

Formatos disponibles

Introducción a CSS

Actividad # 1: Conteste las siguientes preguntas

contenidos y su presentación y es imprescindible para crear páginas web complejas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type"

content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en el propio documento</title>

p { color: black; font-family: Verdana; }

\<p>Un párrafo de texto.</p>

3. Que son los selectores CSS?

4. Mencione los tipos de selectores básicos

* { margin: 0; padding: 0;}

El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza

Selector de tipo o etiqueta

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es

p span { color: red; }

Si se considera el siguiente código HTML de ejemplo:

<p>Lorem ipsum dolor sit amet...</p>

<p>Nunc sed lacus et est adipiscing accumsan...</p>

<p>Class aptent taciti sociosqu ad litora...</p>

El selector de ID permite seleccionar un elemento de la página a través del valor de su

#destacado { color: red; }

<p id="destacado">Segundo párrafo</p>

5. Explique en que consiste el modelo de cajas de CSS

6. Mencione 5 propiedades para modificar textos en CSS

La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que

Además de todas las unidades de medida y el uso de porcentajes, la propiedad line-

p { line-height: 1.2; font-size: 1em }

p { line-height: 1.2em; font-size: 1em }

p { line-height: 120%; font-size: 1em }

La propiedad text-transform permite mostrar el texto original transformado en un texto

completamente en mayúsculas (uppercase), en minúsculas (lowercase) o con la primera letra

de cada palabra en mayúscula (capitalize).

entre letras se llama letter-spacing y la separación entre palabras se controla mediante word-

7. Explique en qué consiste el Layout de una página web

ocasiones retos importantes, en general es más sencilla y flexible.

También podría gustarte