CSS Tema 1

Cascading Style Sheets Tema 1: Introducción al CSS Prof. Renny Batista

© Abril, 2015

¿Qué 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.  Al crear una página 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 página: 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 y vertical entre elementos, posición de cada elemento dentro de la página, etc. Abril, 2015

2

Sintaxis  Un conjunto de reglas CSS consiste en un selector y un bloque de declaración:

 El selector es el elemento HTML al cual se le quiere aplicar el estilo.  El bloque de declaración contiene una declaraciones separadas por punto y coma.

o

más

 Cada declaración incluye un nombre de propiedad (property) y un valor (value), separados por dos puntos.

Abril, 2015

3

Los comentarios  Los comentarios se utilizan para explicar su código, y pueden se de ayuda al editar el código fuente. Los comentarios son ignorados por los navegadores.  Un comentario CSS comienza con / * y termina con * /. Los comentarios también pueden abarcar varias líneas: p {

color: red; /* This is a single-line comment */ text-align: center; }

/* This is a multi-line comment */ Abril, 2015

4

Los selectores  Los selectores CSS permiten seleccionar y manipular los elementos HTML.

 Se utilizan para "encontrar" (o seleccionar) elementos HTML en base a su identificación, clase, tipo, atributo, y más.  El selector de elementos selecciona elementos basados en el nombre del elemento.

 Se puede seleccionar todos elementos de una página: estos elementos serán alineados en el centro, con un texto de color rojo. p {

text-align: center; color: red; } Abril, 2015

5

Los selectores: id  El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.

 Un id debe ser único dentro de una página, por lo que el selector de id se utiliza si quiere seleccionar un elemento único.  Para seleccionar un elemento con una identificación específica, escriba una almohadilla, seguido por el id del elemento. #para1 { text-align: center; color: red; } Buenos Dias..! Este párrafo no está afectado por el estilo Abril, 2015

6

Los selectores: class  El selector class selecciona elementos con un atributo de clase específica.

 Para seleccionar los elementos con una clase específica, escriba un carácter de punto, seguido del nombre de la clase:  En el siguiente ejemplo, todos los elementos HTML con class = "center" serán alineados en el centro: .center { text-align: center; color: red; } Encabezado Centrado Párrafo centrado. Abril, 2015

7

Los selectores: class  También puede especificar que sólo un elemento HTML en concreto debe verse afectado por un class.

 En el siguiente ejemplo, todos los elementos con class = "center" serán alineados en el centro.

p.center { text-align: center; color: red; } Encabezado no afectado Párrafo centrado

Abril, 2015

8

Agrupación de selectores  Si tiene elementos con las mismas definiciones de estilo, como este: h1 { text-align: center; color: red; } h2 { text-align: center; color: red; } p { text-align: center; color: red; } Abril, 2015

9

Agrupación de selectores  Se puede agrupar los selectores, para minimizar el código.

 Para selectores de grupo, separe cada selector con una coma.  En el siguiente ejemplo hemos agrupado los selectores del código anterior:

h1,h2,p { text-align: center; color: red; }

Abril, 2015

10

¿Cómo insertar los estilos?  Cuando un navegador lee una hoja de estilo, se dará formato al documento de acuerdo con la información en la hoja de estilos.  Hay tres maneras de insertar una hoja de estilo: 1

Hoja de estilos externa

2

Hoja de estilo interna

3

Estilo en línea (inline)

Abril, 2015

11

Hoja de estilos externa  Una hoja de estilo externa es ideal cuando se aplica el estilo a muchas páginas. Con una hoja de estilos externa, puede cambiar el aspecto de un sitio Web completo, cambiando un sólo archivo.  Cada página debe incluir un enlace a la hoja de estilos con la etiqueta . La etiqueta va dentro de la sección del :

Abril, 2015

12

Hoja de estilos externa  Una hoja de estilo externa puede estar escrito en cualquier editor de texto. El archivo no debe contener etiquetas HTML. El archivo de hoja de estilo se debe guardar con la extensión .css  Un ejemplo de un archivo de hoja de estilo llamado "myestyle.css", se muestra a continuación: body { background-color: lightblue; } h1 { color: navy; margin-left: 20px; } Abril, 2015

13

Hoja de estilos interna  Una hoja de estilo interna debe ser usado cuando un único documento tiene un estilo único. Usted define estilos internos en la sección de una página HTML, dentro de la etiqueta , así: body { background-color: linen; } h1 { color: maroon; margin-left: 40px; } Abril, 2015

14

El orden en cascada… ¿Qué estilo se utilizará cuando hay más de un estilo especificado para un elemento HTML?  En términos generales podemos decir que todos los estilos "cascada" van hacia una nueva hoja "virtual" de estilo por las siguientes reglas, donde el número cuatro tiene la más alta prioridad: 1

Predeterminado del navegador

2

Hoja de estilos externa

3

Hoja de estilo interna (en la sección )

4

Estilo en línea (dentro de un elemento HTML)

 Así, un estilo en línea (dentro de un elemento HTML) tiene la más alta prioridad, lo que significa que va a reemplazar un estilo definido dentro de la etiqueta , o en una hoja de estilos externa, o en un navegador (el valor por defecto). Abril, 2015

15

Propiedades: Background  La propiedad background-color especifica el color de fondo de un elemento.  El color de fondo de una página se establece así: body { background-color: #b0c4de; }

 Con CSS, un color usualmente se especifica: – En un valor HEX - como "# FF0000" – En un valor RGB - como "rgb (255,0,0)" – Con un nombre de color - como “red"

Abril, 2015

16

Propiedades: Background  La propiedad background-image especifica una imagen para ser utilizada como fondo de un elemento.  Por defecto, la imagen se repite por lo que cubre la totalidad del elemento.  La imagen de fondo de una página se puede configurar como esto:

body { background-image: url("paper.gif"); }

Abril, 2015

17

Propiedades: Background  De forma predeterminada, la propiedad backgroundimage repite una imagen horizontal y verticalmente.  Si queremos que la imagen se repita sólo horizontalmente utilizamos background-repeat: repeat-x.  Para repetir una imagen en vertical background-repeat: repeat-y.

body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; }

Abril, 2015

18

Propiedades: Background  Por defecto una imagen de fondo se muestra en el mismo lugar que el texto. Para cambiar la posición de la imagen, de modo que no perturbe demasiado el texto, utilizamos la propiedad background-position: body { background-image: url("img_tree.png"); background-repeat: no-repeat; background-position: right top; margin-right: 200px; }

Abril, 2015

19

Propiedades: Abreviación de las propiedades  Como se puede ver en los ejemplos anteriores, hay muchas propiedades a tener en cuenta cuando se trata de fondos.  Para acortar el código, también es posible especificar todas las propiedades en una sola propiedad. Esto se llama una propiedad abreviada.  La propiedad abreviada para el fondo no es más que "background": body { background: #ffffff url("img_tree.png") no-repeat right top; margin-right: 200px; } Abril, 2015

20

Propiedades: Abreviación de las propiedades  Cuando se utiliza la propiedad abreviada el orden de los valores de la propiedad es: – background-color – background-image

– background-repeat – background-attachment – background-position  No importa si uno de los valores de la propiedad no se encuentra, siempre y cuando los que están presentes son en este orden. Abril, 2015

21

Propiedades: Text Color  La propiedad de color se utiliza para ajustar el color del texto.  El color por defecto para una página se define en el selector del body. body { color: blue; } h1 { color: #00ff00; } h2 { color: rgb(255,0,0); } Abril, 2015

22

Propiedades: Text Decoration  La propiedad text-decoration se utiliza para establecer o eliminar decoraciones de texto.  También se utiliza sobre todo para eliminar los subrayados de enlaces para propósitos de diseño: a {

}

text-decoration: none;

 También se puede utilizar para decorar texto:). h1 { } h2 { } h3 {

} Abril, 2015

text-decoration: overline;

text-decoration: line-through;

text-decoration: underline; 23

Propiedades: Text Indent  La propiedad text-indent se utiliza para especificar la sangría de la primera línea de un texto.

p {

text-indent: 50px; }

Abril, 2015

24

Propiedades: Fuentes  En CSS, hay dos tipos de nombres de familias de fuentes: 1

Familia genérica (generic family) – Un grupo de familias de fuentes con un aspecto similar (como "Serif" o "Monospace")

2

Familia tipográfica (font family) – Una familia de fuentes concretas (como "Times New Roman" o "Arial").

Abril, 2015

25

Propiedades: Font Family  La familia de fuentes de un texto se establece con la propiedad font-family.  La propiedad font-family debe contener varios nombres de fuente como un sistema de "retorno". Si el navegador no soporta la primera fuente, se intenta con el siguiente tipo de letra.  Comience con la fuente que desea, y terminar con una familia genérica, para que el navegador elija una fuente similar en la familia genérica, si no hay otras fuentes disponibles.  Nota: Si el nombre de una familia de fuentes es más que una palabra, debe ser entre comillas, como: "Times New Roman".  Más de una familia de la fuente se especifica en una lista separada por comas:

p { } Abril, 2015

font-family: "Times New Roman", Times, serif;

26

Propiedades: Font Family (Serif Fonts)

font-family

Texto de ejemplo

Georgia, serif

This is a heading This is a paragraph

"Palatino Linotype", "Book Antiqua", Palatino, serif

This is a heading This is a paragraph

"Times New Roman", Times, serif

This is a heading This is a paragraph

Abril, 2015

27

Propiedades: Font Family (Sans-Serif Fonts) font-family

Texto de ejemplo

Arial, Helvetica, sans-serif

This is a heading This is a paragraph

"Arial Black", Gadget, sans-serif

This is a heading This is a paragraph

"Lucida Sans Unicode", "Lucida Grande", sans-serif

This is a heading This is a paragraph

Tahoma, Geneva, sans-serif

This is a heading This is a paragraph

"Trebuchet MS", Helvetica, sans-serif

This is a heading This is a paragraph

Verdana, Geneva, sans-serif

This is a heading This is a paragraph

Abril, 2015

28

Propiedades: Font Family (Monospace Fonts)

font-family

Texto de ejemplo

"Courier New", Courier, monospace This is a heading This is a paragraph "Lucida Console", Monaco, monospace

Abril, 2015

This is a heading This is a paragraph

29

Propiedades: Font Style  La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique:

p.normal { font-style: normal; } p.italic { font-style: italic; } p.oblique { font-style: oblique; } Abril, 2015

30

Propiedades: Font-size  El tamaño de la fuente se establece por medio de la propiedad font-size.

 A la hora de describir el tamaño de las fuentes, existen muchas unidades diferentes (por ejemplo, píxeles, porcentajes o em) entre las que elegir. Aquí nos centraremos en las unidades más comunes y adecuadas. Como ejemplo, podemos incluir: h1 { font-size: 40px; } h2 { font-size: 1.875em; /* 30px/16=1.875em El tamaño puede ser calculada de píxeles a em utilizando esta fórmula: píxeles / 16 = em */ } body { font-size: 100%; } Abril, 2015

31

Propiedades: Links  A los enlaces se les pueden aplicar estilos con cualquier propiedad CSS (por ejemplo, color, font-family, etc.).  Además, los enlaces pueden personalizarse diferente según el estado en que se encuentran.  Los cuatro estados de un enlaces son: – a: link - un enlace no visitado normales – a: visited - un vínculo que el usuario ha visitado – a: hover - un enlace cuando el mouses del usuarios pasa sobre él – a: activo - un enlace al momento en que se hace clic  Al configurar el estilo de varios estados de los enlaces, hay algunas reglas de orden:  a:hover debe venir después a:link y a:visited  a:active debe venir después a:hover. Abril, 2015

32

Propiedades: Links /* link sin visitar */ a:link { color: #FF0000; } /* link visitado */ a:visited { color: #00FF00; } /* mouse sobre el link */ a:hover { color: #FF00FF; } /* link seleccionado */ a:active { color: #0000FF; } Abril, 2015

33

Propiedades: Links  La propiedad text-decoration se utiliza sobre todo para eliminar los subrayados de enlaces: a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: underline; } a:active { text-decoration: underline; } Abril, 2015

34

Bibliografías Tutorial CSS. http://es.html.net/tutorials/css/ W3Schools a web developers site. http://www.w3schools.com LibrosWeb.es. Introducción a CSS. http://librosweb.es/libro/css/

Abril, 2015

35