Unidad 1 Desarrollo de paginas web estaticas.
1.3. . Construye hojas de estilo en cascada (CSS) de acuerdo con las especificaciones del World Wide Web Consortium (W3C).
Actividad de aprendizaje:
1.3.1. Construye hojas de estilo en cascada para definir su aspecto y presentación de las páginas web desarrolladas.
30
horas Del 03 de abril al 04 DE Mayo de 2017. R=08/05/2017 25%
Cuadro de evaluacion 1.3.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.
Ventajas con el uso de CSS
- Obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados “documentos semánticos”).
- Mejora la accesibilidad del documento
- Reduce la complejidad de su mantenimiento
- Permite visualizar el mismo documento en infinidad de dispositivos diferentes.
Cómo incluir CSS en un documento XHTML
Existen tres opciones para aplicar CSS a un documento HTML.
- Incluir CSS en el mismo documento HTML
- Definir CSS en un archivo externo
- Incluir CSS en los elementos HTML
- Incluir CSS en el mismo 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>).
Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en un determinado documento HTML que completen los estilos que se incluyen por defecto en todos los documentos 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.
<!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>
<p>Un párrafo de texto.</p>
</body>
</html>
- Definir CSS en un archivo externo
Todos los estilos CSS se pueden incluir en un archivo de tipo CSS que los documentos HTML enlazan mediante la etiqueta<link>. Se pueden crear todos los archivos CSS que sean necesarios y cada documento HTML puede enlazar tantos archivos CSS como necesite.
Un archivo de tipo CSS no es más que un archivo de texto normal y corriente cuya extensión es .css. Aunque generalmente se emplea la etiqueta<link> para enlazar archivos CSS externos
contenido del archivo css
p { color: black; font-family: Verdana; }
Documento HTML
<!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>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
- Incluir CSS en los elementos HTML
El último método para incluir estilos CSS en documentos HTML es el menos utilizado. 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.
<!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>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
</body>
</html>
Componentes básicos de un estilo
Los diferentes términos se definen a continuación:
▪ Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de “selectores”, un símbolo de “llave de apertura” {), otra parte denominada “declaraciones” y por último, un símbolo de “llave de cierre” (}.
▪ Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
▪ Declaración: la declaración especifica los estilos que se aplicarán a los elementos.Está compuesta por una o más propiedades CSS.
▪ Propiedad: permite modificar el aspecto de una característica del elemento.
▪ Valor: indica el nuevo valor de la característica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores.
Comentarios
Como es habitual en cualquier lenguaje de programación, de marcado o de hojas de estilos, CSS también dispone de la posibilidad de incluir comentarios. Los comentarios son contenidos de texto que el diseñador incluye en el archivo CSS para su propia información y utilidad. Los navegadores ignoran por completo cualquier comentario de los archivos CSS, por lo que es común utilizar los comentarios para estructurar correctamente los archivos CSS complejos.
La sintaxis de los comentarios CSS se muestra a continuación:
▪ Los comentarios comienzan con los caracteres/*.
▪ Los comentarios finalizan con los caracteres*/.
▪ No se pueden anidar comentarios (es decir, no se puede incluir un comentario
dentro de otro comentario).
▪ Los comentarios pueden ocupar tantas líneas como sea necesario.
Aunque los navegadores ignoren los comentarios, su contenido se envía junto con el resto de estilos, por lo que no se debería incluir en ellos ninguna información sensible o confidencial.
/* Este es un comentario en CSS */
/* Este es un
comentario CSS en varias
lineas */
Selectores
Una regla de CSS está formada por una parte llamada “selector” y otra parte llamada “declaración”. La declaración se utiliza para decir “qué hay que hacer” y el selector es lo que dice “a quién hay que hacérselo”.
- 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. Se suele combinar con otros selectores.
- Selector de tipo o etiqueta
h1 {
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}
ul {
padding: 0 0 0 2em;
list-style: square;
}
ol { padding: 0 0 0 2.5em }
li { margin: 0 0 0.5em }
Los selectores se pueden encadenar para aplicar una misma regla a varios elementos diferentes.
Si se considera el siguiente ejemplo, en el que los títulos de secciónh1,h2 yh3
comparten los mismos estilos. multánea. Para ello, se indican todos los selectores diferentes separados por una coma (,). La siguiente regla CSS es equivalente al ejemplo anterior:
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
- selector descendente
Permite seleccionar los elementos que se encuentran dentro de otros elementos. El siguiente ejemplo se emplea para visualizar en negrita el texto de cualquier elemento <span> contenido dentro de un elemento<p>:
p span { font-weight: bold; }
Si el código HTML es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
Aplicando la regla CSS anterior, tantotexto1 comotexto2 se verán en negrita. La razón es que con el selector descendente, un elemento no tiene que ser “hijo directo” de otro, sino que la única condición es que esté dentro de ese elemento, sin importar lo profundo que se encuentre.
Al resto de elementos<span> de la página que no están dentro de un elemento<p>, no se les aplica la regla CSS anterior.
- selector de clase
Con los selectores más utilizados junto con los selectores de ID
(que se verán a continuación). Utilizando este selector, se pueden seleccionar todos los elementos de la página cuyo atributo class coincida con el selector.
En este tipo de situaciones, se asigna un atributo class específico a los elementos que se quieren seleccionar y en la hoja de estilos CSS se utiliza el selector de clase. Este selector está formado por un signo de punto (.) y el nombre del atributo class que se quiere seleccionar. Por tanto, en el siguiente ejemplo, solamente el segundo párrafo se mostrará de color rojo:
.especial { color: red; }
<p>Primer párrafo</p>
<p class="especial">Segundo párrafo</p>
<p>Tercer párrafo</p>
- selector de id
CSS también permite seleccionar elementos HTML en función del valor de su atributo id.
La explicación es la misma que para el selector de clase. La sintaxis utilizada también es la misma, salvo que en este caso se utiliza el símbolo de la almohadilla (#) en vez del símbolo del punto (.).
#especial { color: red; }
<p>Primer párrafo</p>
<p id="especial">Segundo párrafo</p>
<p>Tercer párrafo</p>
En el ejemplo anterior, solamente el segundo párrafo (cuyo atributo id es igual a especial) será seleccionado por el selector#especial.
La principal diferencia entre este selector y el selector de clase tiene que ver con HTML y no con CSS. Como se sabe, en una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class.
Unidades de medida
Las unidades de medida en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto.
CSS divide todas las unidades de medida en dos grupos:
- absolutas
- relativas.
- Unidades relativas:
La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. A continuación se muestra la lista de unidades de medida relativas y la referencia que se toma para determinar su valor real:
- em, relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de1 em se puede aproximar por la anchura de la letraM (“eme mayúscula”) del tipo de letra que se esté utilizando
- ex, relativa respecto de la altura de la letrax (“equis minúscula”) del tipo de letra que se esté utilizando
- px, (píxel) relativa respecto de la pantalla del usuario
- Unidades absolutas
Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. A continuación se muestra la lista completa de unidades absolutas definidas por CSS y su significado:
▪ in, del inglés “inches”, pulgadas (1 pulgada son 2.54 centímetros)
▪ cm, centímetros
▪ mm, milímetros
▪ pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)
▪ pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)
- Porcentajes
CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje está formado por un valor numérico seguido del símbolo% y siempre está referenciado a otra medida. Cada una de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al que hace referencia ese porcentaje.
Colores
Los colores en CSS se pueden indicar de dos formas diferentes:
- Palabras clave,
- RGB hexadecimal
- palabras clave
HTML define 17 palabras clave para referirse a los colores básicos. Las palabras se corresponden con el nombre en inglés de cada color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow
- RGB hexadecimal
Recuerda que aunque es el método más complicado para definir un color, se trata del método que utilizan la inmensa mayoría de sitios web, por lo que es imprescindible dominarlo.
Afortunadamente, todos los programas de diseño gráfico convierten de forma automática los valores RGB decimales a sus valores RGB hexadecimales.
Box model
El “box model” (en ocasiones traducido como “modelo de cajas”) es el comportamiento de CSS que provoca que todos los elementos incluidos en una página HTML se representan mediante cajas rectangulares. Mediante CSS se controlan las propiedades de las cajas y también su representación visual.
El diseño de cualquier página web está compuesto por cajas rectangulares. CSS permite definir la altura y anchura de cada caja, el margen que se deja entre cada caja y el espacio de relleno interior que muestra cada caja.
Además, CSS permite controlar la forma en la que se visualizan las cajas: se pueden ocultar, desplazar respecto de su posición original, fijarlas en una posición concreta dentro del documento, etc.
Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
▪ Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)
▪ Relleno (padding): está formado por el espacio libre entre el contenido y el borde que lo encierra.
▪ Borde (border): línea que encierra completamente el contenido y su relleno.
▪ Imagen de fondo (background image): imagen que se muestra por debajo del
contenido. Si se define un color y una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza.
▪ Color de fondo (background color): color que rellena el espacio ocupado por el
contenido y su posible relleno. Si se define un color y una imagen de fondo, el
color tiene menos prioridad y por tanto se visualiza la imagen.
▪ Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.
partes que especificar de una caja
- Anchura y altura
- margen y relleno
- Bordes
- Posicionamiento y visualizacion
- desbordamiento (overflow)
- Anchura
Propiedad width
#lateral { width: 200px; }
- Altura
Propiedad height
#cabecera { height: 60px; }
- margen
Propiedad margin-top, margin-right, margin-bottom, margin-left
.destacado {Margin-left: 2em;}
Propiedad margin
div img {margin: .5em .5em .5m 1em;}
div img {margin: .5em;}
- Relleno
CSS define cuatro propiedades para controlar cada uno de los espacios de relleno horizontales y verticales de un elemento.
Propiedad padding-top, padding-right, padding-bottom, padding-left
.relleno { padding-top: 2em; padding-right: 2em; padding-bottom: 2em; padding-left: 2em; }
- Bordes
No hay comentarios.:
Publicar un comentario