presentación de css

10

Click here to load reader

Upload: luis-correa

Post on 08-Jul-2015

71 views

Category:

Education


0 download

TRANSCRIPT

Page 1: Presentación de css

LUIS CORREA

3RO «BI»

Page 2: Presentación de css

Las Hojas de Estilo en Cascada se escriben dentro del código HTML

de la página web, solo en casos avanzados se pueden escribir en un

archivo a parte y enlazar la página con ese archivo. En un principio

vamos a utilizar la manera más directa de aplicar estilos a los

elementos de la página, mas adelante veremos la declaración en

archivos externos. Para ello, y esto es la primera lección de este

artículo, vamos a conocer un nuevo atributo que se puede utilizar en

casi todas las etiquetas HTML: style.

Page 3: Presentación de css

Una característica esencial de las hojas de estilo en cascada (CSS) es la

posibilidad de separar los elementos formales de los de contenido. De esta

forma, sólo con una pequeña modificación de la hoja de estilo es posible

cambiar el aspecto de todas las páginas en las que se aplica esa hoja.

No todas las versiones de los navegadores las soportan. Si consideramos

los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y

Explorer desde la 3.0

Page 4: Presentación de css

¿Por qué se llaman hojas de estilo?

Con las hojas de estilo podemos crear clases y

pseudoclases. Éstas nos permiten modificar e

indicarle al navegador la forma en la que tiene que

presentar cualquier elemento HTML.

Page 5: Presentación de css

¿Por qué se llaman "en cascada"?

Cuando creamos un estilo, las especificaciones que se realicen para un

determinado elemento serán aplicables a todos aquellos elementos que

se encuentren "por debajo" de él atendiendo a un criterio de herencia.

Por ejemplo, si especificamos un tipo de letra para el elemento <body>

todos aquellos elementos que puedan heredar las características se

presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará

el tipo de letra salvo que especifiquemos lo contrario.

También debemos de tener en cuenta que se establece un orden de

prioridad para la aplicación de las normas en caso de que resulten

contradictorias. El orden de preferencia para aplicar una norma es el

siguiente:

- Estilo especificado dentro de la etiqueta.

- Estilo especificado en la cabecera del documento.

- Estilo definido en un documento independiente al que se enlaza

nuestra página.

Page 6: Presentación de css

SINTAXIS

Page 7: Presentación de css

Vinculación a una hoja de estilo externa

Para crear un vínculo a una hoja de estilo externa, insertamos una

etiqueta <link> como en el ejemplo siguiente:

<head>

<title>Hoja de estilo vinculada</title>

<link href="estilo.css" rel="stylesheet" type="text/css">

</head>

Pseudo clases

a:link

a:visited

a:hover

a:active

Como hemos visto, podemos combinar estos selectores y clases. Así tenemos

la posibilidad de crear múltiples estilos, por ejemplo para un enlace:

a.principal:link

a.pie:link

Page 8: Presentación de css

Reglas, declaraciones, propiedades

body {

font-family: Arial, sans-serif;

color: blue;

}

Una hoja de estilo contiene al menos una regla y puede contener tantas como

necesites.

Grupo de selectores

h1, h2, h3 {font-family: Arial, sans-serfi;}

Page 9: Presentación de css

Selectores ID

Son similares a los selectores de clase. Se diferencia en la semántica y en el

comportamiento.

Sintaxis:

#cabecera

<div id="cabecera">Contenido de cabecera</div>

Esto no sería correcto:

#barra

<div id="barra">Bienvenidos</div>

<div id="barra">Esto es una prueba de diseño web </div>

Page 10: Presentación de css

BIBLIOGRAFÍA

• http://www.chesco.info/curso/css.htm