Diseño web con css

Diseño web con CSS

Instituto Superior de Electrónica Gamma

¿Qué es CSS?

Parte I

¿Qué es CSS?

• “Cascading Style Sheets” (Hojas de Estilo en Cascada), separan el contenido del diseño.

• Con este lenguaje, aplicamos reglas de estilo a las distintas etiquetas del documento HTML.

• Una regla de estilo contiene uno o más atributos como: color de fondo, color de texto, posición, márgenes, fuentes de texto, etc.

Ventajas de CSS

• Menor tiempo de desarrollo de las páginas.• Mayor orden de nuestro código.• Menos peso en las páginas.• Mayor flexibilidad en los cambios• Al ser un standard de la W3C, todos los

navegadores lo soportan.• Una misma página puede tener diferentes

presentaciones para diferentes medios (Pantalla, impresión, móviles, etc.)

El proceso de desarrollo con CSS

1. Obtener el documento HTML

2. Crear las reglas de estilo.

3. Adjuntar hoja de estilos al documento.

4. Si se desean hacer cambios en la visualidad (layout) del documento, editar las reglas de estilo CSS.

¿Cómo funciona CSS?

Parte II

Sintaxis básica de CSS

selector {atributo:valor;}

A qué etiqueta o etiquetas HTML se aplicará la propiedad (ej., “body”)

El atributo CSS al que se le desea asignar un valor (ej. , “background-color”)

El valor de la propiedad (ej. “#FF0000 que es el valor para “rojo”)

¿Dónde se escribe el código CSS?

Se pueden escribir en tres lugares:

1.En línea (usando el atributo style)

2.Interno (la etiqueta style)

3.Externo (enlazar a una hoja de estilos)

1. Escribir CSS en línea: el atributo style

• Podemos asignar la propiedad escribiendo directamente en el elemento HTML al que deseamos dar estilo.

<html> <head>

<title>Ejemplo</title> </head> <body style="background-color: #FF0000;">

<p>Esta es una página con fondo rojo</p></body>

</html>

<html> <head>

<title>Ejemplo</title> </head> <body style="background-color: #FF0000;">

<p>Esta es una página con fondo rojo</p></body>

</html>

2. Interno: la etiqueta style

• Podemos insertar una etiqueta style directamente en el documento HTML, dentro de ella incluimos una o varias reglas.

<html><head>

<title>Ejemplo</title><style type="text/css"> body {background-color: #FF0000;} </style> </head>

<body> <p>Esta es una página con fondo rojo</p>

</body> </html>

<html><head>

<title>Ejemplo</title><style type="text/css"> body {background-color: #FF0000;} </style> </head>

<body> <p>Esta es una página con fondo rojo</p>

</body> </html>

3. Externo: enlace a una hoja de estilos

• Una hoja de estilos es un archivo de texto con la extensión .css que se vincula con una etiqueta link dentro del documento HTML.

<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>

<body> ...

<html> <head> <title>Mi documento</title> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head>

<body> ...

3. Externo: ventajas de usar una hoja de estilos externa

• Al usar una hoja externa, podemos usar un único archivo .css que guarde el diseño de todas las páginas de un mismo sitio.

selector {atributo:valor;}selector {atributo:valor;}

Selectores

Parte III

Tipos de selectores

1. Selectores simples

2. Selectores de clase

3. Selectores de ID

Selectores simples

• En este caso, el selector es el nombre del tipo de etiqueta HTML a la que aplicaremos la regla.

body {background-color:#FF0000;}body {background-color:#FF0000;}

h1 { font-color: #000000; font-size: 20px;}

h1 { font-color: #000000; font-size: 20px;}

p { color: red; display: block; background-color: black;}

p { color: red; display: block; background-color: black;}

Selectores de clases

• Una clase es una regla de estilo que se puede aplicar a todas etiquetas que se estimen convenientes.

• Se pueden aplicar varias clases a un mismo elemento HTML• Una clase tiene un nombre definido por el usuario.• En el documento .css, ese nombre se define con un punto• En el documento HTML, ese nombre se referencia con el atributo

HTML “class”.

.miClase { font-color: #000000;}

.miClase { font-color: #000000;} <p class=“miClase”> Hola!!! </p><p class=“miClase”> Hola!!! </p>

<H1 class=“miClase”> Historia de Chile </p><H1 class=“miClase”> Historia de Chile </p>

estilos.css index.html

Selectores de ID

• Una ID es un identificador único asociado a un elemento HTML.

• Un elemento HTML no puede tener más de una ID.

• En el documento .css se definen con un caracter gato (#).

• En el documento HTML se definen con el atributo HTML “id”

#cabeza { border: 1px dotted #0000FF;}

#cabeza { border: 1px dotted #0000FF;}

<div id=“cabeza”> Instituto GAMMA</p><div id=“cabeza”> Instituto GAMMA</p>

estilos.css index.html

Atributos para fuentes

Parte IV

Atributos para fuentes

• font-family

• font-style

• font-variant

• font-weight

• font-size

• font

Atributos para el texto

Parte V

Atributos para el texto

• word-spacing• letter-spacing• text-decoration• vertical-align• text-transform• text-align• text-indent• line-height• text-indent• white-space• display

Color y Background

Parte VI

Color

• El atributo “color” puede declararse:– Por su nombre (ej. red, aqua, black, blue, etc)– Hexadecimal (ej. #FF0000)– RGB (ej. 255,0,0)

Background

• background-color

• background-image

• repeat

• background-attachment

• background-position

• background

Listas

Parte VII

Listas

• list-style-type

• list-style-image

• list-style-position

Atributos para cajas

Parte VIII

Estructura de la caja

Posicionamiento CSS

Parte IX

Posicionamiento CSS

• position• left• top• height• width• visibility• z-index• clip• overflow

Float

Parte X

Float

• Cualquier elemento puede flotar en una página. Al asignar “float” a cualquier elemento lo convertimos en una caja, debiéndole asignar una anchura determinada.

• float– right– left– none

• clear– none– left– right– Both

Tablas

Parte XI

Tablas

• Caption– Asignar “caption” en el documento HTML para definir

cuál es el título de la tabla– Caption en CSS

• Celdas vacías– <table style="empty-cells: show;">

• border-collapse<table border="3" style="border-collapse: collapse;">

• border-spacing<table border="3" style="border-collapse:

collapse;border-spacing:0.5em 1em;">• table-layout

Cursores y estilo

Parte XII

Cursores y estilo

• auto• crosshair • default • pointer • move • e-resize • ne-resize • nw-resize • n-resize • se-resize • sw-resize • w-resize • s-resize • text • wait • progress • help

• Ejemplos: http://www.ignside.net/man/css/cursores.php

Diseño web con css

Documents

Transcript of Diseño web con css