CSS - Hojas de Estilo en Cascada.pdf

CSS Hojas de Estilo en Cascada
Prof. Ramiro Estigarribia
ramiroec@gmail.com
Link a la presentación

Es un lenguaje para deﬁnir la presentación visual del sitio web.
Permite a los desarrolladores controlar el estilo y el formato de
múltiples páginas al mismo tiempo.
En lugar de deﬁnir el tipo de Letra/Color para cada parte, permite
hacer para todo el sitio.
¿Qué es CSS?

HTML fue creado para mostrar texto en pantalla.
Ejemplo: <p>Esto es un párrafo.</p>
Cuando se agregaron etiquetas como <font> y color,
comenzó una pesadilla para los desarrolladores web.
Para resolver este problema, el World Wide Web Consortium
(W3C) creó CSS.
¿Por qué CSS fue creado?

body {
font-size: 12px;
font-family: arial;
color: red;
background-color: blue;
}
En este ejemplo se deﬁne el tipo de letra: tamaño 12, arial,
color rojo, fondo azul.
Lista de colores: Lista de colores
Ejemplo de CSS
Probar el código:
https://www.w3schools.com

Cada declaración incluye un nombre de propiedad CSS y un
valor, separados por dos puntos.
Las declaraciones se separan con punto y coma, y los
bloques están rodeados por llaves.
Sintaxis de CSS

Un comentario CSS se coloca dentro del elemento <style> y
comienza con /* y termina con */
/* This is a single-line comment */
p {
color: red;
}
Comentarios con CSS
Probar el código:

1. Estilo inline: Combinar código CSS con HTML.
Se agrega la etiqueta <style> a las partes.
2. Estilo en la cabecera de la página: Se coloca en la
cabecera utilizando la etiqueta <style type=text/css>
3. Separación real del código HTML y CSS:
La etiqueta <link> sirve para informar que tenemos un
código CSS3 en un ﬁchero externo.
Diferentes formas de incluir CSS

Se deﬁne con la propiedad style y es la forma más simple
pero menos recomendada.
El problema es que el código se repite muchas veces, en
lugar de hacer asignaciones genéricas.
1.Estilo inline
<h1 style=color:red;background-color:yellow>
Este mensaje es de color rojo sobre fondo amarillo.
</h1>
Probar el código:
https://code.sololearn.com

Permite deﬁnir estilos al inicio del código, que se aplican a las
distintas marcas HTML de la página.
2.Estilo en la cabecera
<style type=text/css>
h1 {color:red}
h2 {color:green}
h3 {color:blue}
</style>
<h1>rojo</h1>
<h2>verde</h2>
<h3>azul</h3>
Probar el código:

La ventaja es que podemos aplicar las mismas reglas a
varias las páginas un sitio web.
Al programador le resulta más ordenado tener código HTML y
CSS separado.
3.CSS en archivo externo.

3.CSS en archivo externo.
Archivo: prueba.html
<link rel=StyleSheet href=estilo.css>
</head>
<body>
<h1>Estilo en archivo externo.</h1>
<p>Un archivo separado.</p>
</body>
Archivo: estilo.css
body {
background-color:yellow;
color:blue;
font-family:arial;
}
Probar el código:

Cuando se establece CSS en un elemento, sus descendientes
heredan de forma automática.
¿Cómo funciona la Herencia?
body {
color:blue;
font-family:arial;
}
</style>
<p>Texto de Prueba</p>
Probar el código:

Si existen 2 reglas iguales, tiene prioridad la más especíﬁca.
¿Cómo es la prioridad?
body { color:black; }
h1 { color:red; }
p { color:green; }
</style>
<body>
<h1>Primero</h1>
<p>Texto de Prueba</p>
</body>
Probar el código:

Es una regla CSS que puede ser utilizada muchas veces.
¿Qué son las Clases en CSS?
<body>
<h1 class=resaltado>Titulo</h1>
<p class=resaltado>Es un texto
resaltado.</p>
</body>
Archivo: estilo.css
.resaltado{
color:black;
font-style:italic; }
Probar el código:

En lugar de usar class, se puede definir un identificador: id
Clase con identificador: id
<div id="prueba">
<h1 class=resaltado>Titulo</h1>
<p class=resaltado>Es un texto
resaltado.</p>
</div>
Archivo: estilo.css
#prueba{
color:black;
}
Probar el código:

La propiedad background-color especiﬁca el color de fondo
de un elemento.
opacity: especiﬁca la transparencia entre 0 y 1.
Cuanto menor sea el valor es más transparente.
CSS background-color
Probar el código:

Especiﬁca una imagen para usar como fondo.
De forma predeterminada, la imagen se repite para que cubra
todo el elemento.
body {
background-image: url("paper.gif");
}
CSS background-image
Probar el código:

Permite definir el tipo de borde:
➔ dotted - Define un borde punteado.
➔ dashed - Define un borde discontinuo.
➔ solid - Define un borde sólido.
➔ double - Define un borde doble.
➔ none: sin borde.
CSS Border Style
Probar el código:

Con CSS puede agregar sombra al texto y a los elementos.
h1 {
text-shadow: 2px 2px;
}
Sombra con color:
h1 {
text-shadow: 2px 2px red;
}
CSS Shadow Effects
Probar el código:

Permiten mover, rotar y escalar elementos.
div {
transform: rotate(20deg);
}
div {
transform: scale(2, 3);
}
Más información
CSS 2D Transforms
Probar el código:

Permite realizar animaciones. Ejemplo de animación que cambia el color.
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Más información
CSS Animations
Probar el código:

La regla @keyframes hace que la animación cambie de forma
gradual.
/* The animation code */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
La regla @keyframes

Deﬁne cuánto tiempo debe tomar una animación:
div {
animation-duration: 3s;
}
CSS Animation-duration
Probar el código:

La propiedad animation-delay especiﬁca un retraso para el
inicio de una animación.
El siguiente ejemplo tiene un retraso de 2 segundos antes de
iniciar la animación.
animation-delay: 2s;
Animación Spinner: https://www.w3schools.com
CSS Animation-delay
Probar el código:

CSS posee más propiedades que pueden consultarse en
listados de referencias:
CSS Reference
Otras propiedades de CSS

<div class="loader"></div>
Ejemplo de Spinner con CSS
.loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px; height: 120px;
animation: spin 2s linear inﬁnite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
Probar el código:
Explicación del ejemplo:

CSS permite deﬁnir cómo se presentan las aplicaciones web
a los usuarios.
CSS está basado en reglas que permiten deﬁnir los estilos
visuales y animaciones que van a aplicarse a elementos
particulares de una aplicación web.
Cuestionario
Resumen y conclusiones

CSS - Hojas de Estilo en Cascada.pdf

Más contenido relacionado

La actualidad más candente

Similar a CSS - Hojas de Estilo en Cascada.pdf

Más de Ramiro Estigarribia Canese

CSS - Hojas de Estilo en Cascada.pdf