viernes, 11 de marzo de 2016

3.1 LENGUAJE DE PRESENTACIÓN


LENGUAJE DE PRESENTACIÓN

3.1 INTRODUCCION
Un leguaje de presentación define un conjunto de etiquetas y atributos validos y que ofrecen un significado visual para cada elemento del lenguaje, sino que ofrece un numero de reglas sintácticas para poder crear documentos. Uno de los lenguajes mas comunes para presentar información web es HTML. 
•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 paginas web complejas. 

Al crear una pagina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la pagina: párrafo, titular, texto destacado, tabla, lista de elementos, etc.

Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal, etc.
  
3.2 SINTAXIS

El siguiente ejemplo muestra una pagina HTML con estilos definidos sin utilizar CSS.
  
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento. 

La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
 
CSS permite separar los contenidos de la pagina y la información sobre su aspecto. En le ejemplo anterior, dentro de la propia pagina HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la pagina.

Utilizando CSS, se puede establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se vera mas adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la pagina. Los estilos se definen en una zona especifica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (solo dentro de la sección <head>).

Normalmente, la etiqueta <link> 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 pagina 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.
3.3 SELECTORES

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.
*{
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.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:
h1 {
 color: red;
}
 h2 {
 color: blue;
}
 p {
 color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:
h1 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:
h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
 h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

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 <span> de la página que se encuentren dentro de un elemento <p>:
p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
  ...
  <span>texto1</span>
  ...
  <a href="">...<span>texto2</span></a>
  ...
</p>

El selector p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el 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.
Los selectores descendentes permiten aumentar la precisión del selector de tipo o 
etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos
a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de
color azul todo el texto de los <span> contenidos dentro de un <h1>:

p span  { color: red;  }
h1 span { color: blue; }




Con las reglas CSS anteriores:
Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo. Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul. El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores: 
p a span em { text-decoration: underline; }

Los estilos de la regla anterior se aplican a los elementos de tipo <em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }

/* El estilo se aplica solo a los elementos "em" que se
   encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }

El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }
 <p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de 
color rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>

La razón es que el selector p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.


Selector de clase
Si se considera el siguiente código HTML de ejemplo:
<body>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>

¿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:
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>

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:
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> 
  accumsan...</p>
 <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</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.
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;
}
<span class="error">...</span>
 <div class="aviso">...</div>

El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas  CSS indicadas por el selector.error. Por su parte, el elemento <div> 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:
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> 

         accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>

¿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 <p> 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
   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 class="especial destacado error">Párrafo de texto...</p>

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 class="especial destacado error">Párrafo de texto...</p>

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 class="especial destacado error">Párrafo de texto...</p>

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

3.4 TIPOS DE MEDIOS

Tipos de medios

Uno de los rasgos más importantes de las hojas de estilo es que especifican cómo debe ser presentado un documento en diferentes medios: en la pantalla, en papel, con un sintetizador de voz, con un dispositivo braille, etc. 
Ciertas propiedades CSS son diseñadas sólo para ciertos medios (ejemplo, la propiedad 'cue-before' para las aplicaciones del usuario auditivas). En ocasiones, sin embargo, las hojas de estilo para diferentes tipos de medios pueden compartir una propiedad, pero requieren de valores diferentes para esa propiedad. Por ejemplo, la propiedad 'font-size' es útil para la pantalla y los medios impresos. Sin embargo, los dos medios son lo suficientemente diferentes como para requerir diferentes valores para la propiedad común; un documento necesitará típicamente una fuente mayor en una pantalla de computadora que sobre papel. La experiencia también demuestra que las fuentes sans-serif son más fáciles de leer en pantalla, mientras que las fuentes con serif son más fáciles de leer sobre papel. Por estas razones, es necesario expresar que una hoja de estilo --o una sección de una hoja de estilo-- se aplica a ciertos tipos de medios. 
Especificación de hojas de estilos dependientes de los medios 
Actualmente hay dos maneras de especificar la dependencia de las hojas de estilos:
Especificando el medio de destino desde una hoja de estilo con las reglas-arroba @media o @import.
@import url("loudvoice.css") aural;
@media print {
  /* la hoja de estilo para impresión va aquí */
}

Especificando el medio de destino dentro del lenguaje del documento. Por ejemplo, en HTML 4.0 ([HTML40]), el atributo "media" en el elemento LINK especifica el medio de destino de una hoja de estilo externa:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
   <HEAD>
      <TITLE>Vínculo a un medio</TITLE>
      <LINK rel="stylesheet" type="text/css"
  media="print, handheld" href="foo.css">
   </HEAD>
   <BODY>
      <P>El cuerpo...
   </BODY>
</HTML>

La regla @import es definida en el capítulo sobre cascada.

La regla @media
Una regla @media especifica los tipos de medios de destino (separados por comas) de un juego de reglas (delimitadas por llaves). La construcción @media le permite a la hoja de estilo reglas para distintos medios en la misma hoja de estilo:
  @media print {
    BODY { font-size: 10pt }
  }
  @media screen {
    BODY { font-size: 12pt }
  }
  @media screen, print {
    BODY { line-height: 1.2 }
  }

Tipos de medios reconocidos

Un tipo de medio de CSS designa un juego de propiedades CSS. Una aplicación del usuario que aspira a dar soporte a un tipo de medio por nombre debe implementar todas las propiedades que se aplican a ese tipo de medio. Los nombres elegidos para los tipos de medios de CSS reflejan los dispositivos de destino para los cuales las propiedades relevantes tienen sentido. En el siguiente listado de tipos de medios de CSS, las descripciones entre paréntesis no son normativas. Solamente brindan un sentido de la clase de dispositivo del tipo de medio a que se hace referencia.
·         All: Apropiado para todos los dispositivos.
·         Aural: Propuesto para los sintetizadores de voz. Ver la sección sobre hojas de estilo auditivas para más detalles.
·         Braille: Propuesto para dispositivos táctiles braille.
·         Embossed: Propuesto para impresoras de páginas braille.
·         Handheld: Propuesto para dispositivos de mano (típicamente de pantalla pequeña, monocromos, de limitado ancho de banda).
·         print : Propuesto para material opaco en páginas y para documentos percibidos en pantalla en modo de vista previa a la impresión.  Por favor, consulte la sección sobre medios paginados por información acerca de los formatos de publicación que son específicos de los medios paginados.
·         Projection: Propuesto para las presentaciones proyectadas, por ejemplo, proyectores o transparencias impresas. Por favor, consulte la sección sobre medios paginados por información acerca de los formatos de publicación que son específicos de los medios paginados.
·         Screen: Propuesto primariamente para pantallas de computadora a color.
·         Tty: Propuesto para medios que usan una grilla de caracteres de espacio fijo, tales como teletipos, terminales o dispositivos portátiles con limitada capacidad del monitor. Los autores no deben usar las unidades en pixeles con el tipo de medio "tty".
·         Tv: Propuesto para dispositivos de tipo televisión (baja resolución, color, pantalla con limitado desplazamiento, sonido disponible).

Los nombres de los tipos de medios no diferencian entre mayúsculas y minúsculas.

3.5 MODELOS DE CAJAS
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. La siguiente imagen muestra las tres cajas rectangulares que crean las tres etiquetas HTML que incluye la página:


Figura 4.1 Las cajas se crean automáticamente al definir cada elemento HTML

Los navegadores crean y colocan las cajas de forma automática, pero CSS permite modificar todas sus características. Cada una de las cajas está formada por seis partes, tal y como muestra la siguiente imagen:




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): espacio libre opcional existente entre el contenido y el borde. 
·         Borde (border): línea que encierra completamente el contenido y su relleno. 
·         Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno. 
·         Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno. 
·         Margen (margin): separación opcional existente entre la caja y el resto de cajas adyacentes. 
El relleno y el margen son transparentes, por lo que en el espacio ocupado por el relleno se muestra el color o imagen de fondo (si están definidos) y en el espacio ocupado por el margen se muestra el color o imagen de fondo de su elemento padre (si están definidos). Si ningún elemento padre tiene definido un color o imagen de fondo, se muestra el color o imagen de fondo de la propia página (si están definidos).

Si una caja define tanto un color como una imagen de fondo, la imagen tiene más prioridad y es la que se visualiza. No obstante, si la imagen de fondo no cubre totalmente la caja del elemento o si la imagen tiene zonas transparentes, también se visualiza el color de fondo. Combinando imagenes transparentes y colores de fondo se pueden lograr efectos gráficos muy interesantes.

Anchura
La propiedad CSS que controla la anchura de la caja de los elementos se denomina width. La propiedad width no admite valores negativos y los valores en porcentaje se calculan a partir de la anchura de su elemento padre. El valor inherit indica que la anchura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la anchura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página.

El siguiente ejemplo establece el valor de la anchura del elemento <div> lateral:

#lateral { width: 200px; }

<div id="lateral">
  ...
</div>
CSS define otras dos propiedades relacionadas con la anchura de los elementos: min-width y max-width, que se verán más adelante.

Altura
La propiedad CSS que controla la altura de los elementos se denomina height.
Al igual que sucede con width, la propiedad height no admite valores negativos. Si se indica un porcentaje, se toma como referencia la altura del elemento padre. Si el elemento padre no tiene una altura definida explícitamente, se asigna el valor auto a la altura.  El valor inherit indica que la altura del elemento se hereda de su elemento padre. El valor auto, que es el que se utiliza si no se establece de forma explícita un valor a esta propiedad, indica que el navegador debe calcular automáticamente la altura del elemento, teniendo en cuenta sus contenidos y el sitio disponible en la página. 
El siguiente ejemplo establece el valor de la altura del elemento <div> de cabecera:
#cabecera { height: 60px; }

<div id="cabecera">
  ...
</div>

CSS define otras dos propiedades relacionadas con la altura de los elementos: min-height y max-height, que se verán más adelante.

Margen
CSS define cuatro propiedades para controlar cada uno de los márgenes horizontales y verticales de un elemento. Cada una de las propiedades establece la separación entre el borde lateral de la caja y el resto de cajas adyacentes:


Las unidades más utilizadas para indicar los márgenes de un elemento son los píxeles (cuando se requiere una precisión total), los em (para hacer diseños que mantengan las proporciones) y los porcentajes (para hacer diseños líquidos o fluidos).

El siguiente ejemplo añade un margen izquierdo al segundo párrafo:
.destacado {
  margin-left: 2em;
}

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam et elit.
Vivamus placerat lorem. Maecenas sapien. Integer ut massa. Cras diam ipsum,
laoreet non, tincidunt a, viverra sed, tortor.</p>

<p class="destacado">Vestibulum lectus diam, luctus vel, venenatis ultrices,
cursus vel, tellus. Etiam placerat erat non sem. Nulla molestie odio non
nisl tincidunt faucibus.</p>

<p>Aliquam euismod sapien eu libero. Ut tempor orci at nulla. Nam in eros
egestas massa vehicula nonummy. Morbi posuere, nibh ultricies consectetuer tincidunt,
risus turpis laoreet elit, ut tincidunt risus sem et nunc.</p>

A continuación se muestra el aspecto del ejemplo anterior en cualquier navegador:


Algunos diseñadores web utilizan la etiqueta <blockquote> para tabular los contenidos de los párrafos. Se trata de un error grave porque HTML no debe utilizarse para controlar el aspecto de los elementos. CSS es el único responsable de establecer el estilo de los elementos, por lo que en vez de utilizar la etiqueta <blockquote> de HTML, debería utilizarse la propiedad margin-left de CSS.
El ejemplo anterior de márgenes se puede reescribir utilizando la propiedad margin:

Código CSS original:
div img {
  margin-top: .5em;
  margin-bottom: .5em;
  margin-left: 1em;
  margin-right: .5em;
}

Alternativa directa:
div img {
  margin: .5em .5em .5m 1em;
}

Otra alternativa:
div img {
  margin: .5em;
  margin-left: 1em;
}

3.6 APLICACIÓN EN DOCUMENTO WEB

CSS proporciona tres caminos diferentes para aplicar las reglas de estilo a una página Web:
  1. Una hoja de estilo externa, esta almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.
  2. Una hoja de estilo interna, está incrustada dentro de un documento HTML (Dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML se pierde. En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica específica una página Web.
  3. Un estilo en línea, que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona. es necesario incluir el atributo STYLE.
Hoja de estilo interna

El siguiente código estará colocado en el head del archivo html.

<style>
body {
  background-color:#345485;
}
h1 {
  color:orange;
  font-family:'Times New Roman';
  text-align:center;
}
p {
  color:#E9EBAB;
  font-family:Arial,Helvetica,sans-serif;
  font-size:20px;
  text-align:center;
}

</style>

Hoja de estilo externa
El código que a continuación se presenta deberá almacenarse en un archivo con extensión css. Dicho archivo será referenciado desde el head con la siguiente línea.
<head>
  <link href='0306css02.css' rel='stylesheet' />
<head>

Fijar una imagen de fondo
El atributo background nos indica la imagen que se usara de fondo (línea 2). El atributo background-attachment en fixed fija la imagen al centro de la forma (línea 3).
body {
  background: transparent url('escudoITV.png')
              no-repeat center
              background-attachment: fixed;
}
h1 {
  color:red;
  font-family:'Times New Roman';
  font-size:24px;
  font-weight:bold;
  text-align:center;
}
h2 {
  color:blue;
  font-family:Verdana, Geneva, sans-serif;
  font-size:20px;
  font-weight:bold;
  text-align:center;
}
p {  
  color:black;
  font-family:Arial, Helvetica, sans-serif;
  font-size:18px;
  text-align:center;

}

No hay comentarios:

Publicar un comentario