Css - Tema 1
35
Cascading Style Sheets Tema 1: Introducción al CSS © Abril, 2015 Prof. Renny Batista
-
Upload
instituto-universitario-de-tecnologia-antonio-jose-de-sucre -
Category
Software
-
view
89 -
download
1
Transcript of Css - Tema 1
Cascading Style Sheets
Tema 1: Introducción al CSS
© Abril, 2015
Prof. Renny Batista
¿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 o más declaraciones separadas por punto y coma.
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 <p> de una página: estos elementos <p> 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; } <p id="para1">Buenos Dias..!</p> <p>Este párrafo no está afectado por el estilo</p>
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; } <h1 class="center">Encabezado Centrado</h1> <p class="center">Párrafo centrado.</p>
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 <p> con class
= "center" serán alineados en el centro.
p.center {
text-align: center;
color: red; } <h1 class="center">Encabezado no afectado</h1> <p class="center">Párrafo centrado</p>
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:
Hoja de estilos externa
Hoja de estilo interna
Estilo en línea (inline)
Abril, 2015 11
1
2
3
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 <link>. La etiqueta <link> va dentro de la sección del <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
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 <head> de una página HTML, dentro de la etiqueta <style>, así:
<head> <style> body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style> </head>
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:
Predeterminado del navegador
Hoja de estilos externa
Hoja de estilo interna (en la sección <head>)
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 <head>, o en una hoja de estilos externa, o en un navegador (el valor por defecto).
Abril, 2015 15
1
2
3
4
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 background-
image 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 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; }
Abril, 2015 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:
Familia genérica (generic family)
– Un grupo de familias de fuentes con un aspecto
similar (como "Serif" o "Monospace")
Familia tipográfica (font family)
– Una familia de fuentes concretas (como "Times
New Roman" o "Arial").
Abril, 2015 25
1
2
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 { font-family: "Times New Roman", Times, serif; }
Abril, 2015 26
Propiedades: Font Family (Serif Fonts)
Abril, 2015 27
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
Propiedades: Font Family (Sans-Serif Fonts)
Abril, 2015 28
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
Propiedades: Font Family (Monospace Fonts)
Abril, 2015 29
font-family Texto de ejemplo
"Courier New", Courier, monospace This is a heading
This is a paragraph
"Lucida Console", Monaco, monospace
This is a heading This is a paragraph
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
Abril, 2015 35
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/
