S3GG CSS

HTML5/CSS3 1
HOJAS DE ESTILO CSS

 html define elementos de contenido
 Con <style> se define cómo visualizar los elementos: color,
tamaño, fuente…
 Cascading Style Sheets: hoja de estilo guardada fichero .css
 Permite separar el contenido y aspecto.
Introducción.
En este tema pretendemos representar… Contenido
css
Introducción.
En este tema pretendemos representar…
Con estilo
HTML5/CSS3
HTML5/CSS3 2
HOJAS DE ESTILO CSS

 Los estilos son aplicables a toda la web: modificando el estilo se
cambia el aspecto del web sin afectar al contenido.
 Sintaxis: selector {popiedad:valor; propiedad:valor;……}
 Selectores: https://www.w3schools.com/cssref/css_selectors.asp
 Propiedades: https://www.w3schools.com/cssref/default.asp
 Ejemplos de asignación de estilos a elementos:
h2 {color:green; font-size:10px;}
p {color:blue; font-family:arial; text-align:left}
HTML5/CSS3
HTML5/CSS3 3
SELECTORES DE ESTILO CON IDENTIFICADOR

 Selector define dónde se aplica un estilo
 Identificadores asociados a estilo: #nombre_identificador
 Estilo aplicado a un elemento.
 Ejemplo: El identificador “sid1” define un estilo y se aplica a un
párrafo. <!DOCTYPE html>
<html>
<head>
<style>
#sid1
{
text-align:right;
color:blue;
}
</style>
</head>
<body>
<p id=”sid1">Este párrafo sigue el estilo sid1</p>
<p>Párrafo con estilo estándar.</p>
</body>
HTML5/CSS3 </html>
HTML5/CSS3 4
SELECTORES DE ESTILO CON CLASS

 Estilo aplicable a un grupo de elementos.
 Ejemplo: define el estilo “der” que afecta a los elementos que
lo definan (sólo de tipo “p” en el ejemplo de la derecha)
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
.der p.der
{ {
text-align:right; text-align:right;
} }
</style> </style>
</head> </head>
<body> <body>
<h1 class=”der">Afectado por el estilo der</h1> <h1 class=”der">No afectado por der</h1>
<p class=”der">Afectado por el estilo der</p> <p class=”der">Afectado por der al ser p</p>
</body> <p>No afectado por der</p>
</html> </body>
</html>
HTML5/CSS3
HTML5/CSS3 5
OTROS SELECTORES
 Ejemplos:
• * Todos los elementos
 p Todos los elementos de tipo <p>
 div,p Todos los <div> y todos los elementos <p>
 div p Todos los <p> dentro de <div>
 div>p Todos los <p> en los que el padre es un <div>
 div+p Todos los <p> situados después de <div>
Más casos en:

https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3schools.com/cssref/trysel.asp?selector=id
HTML5/CSS3
HTML5/CSS3 6
FORMAS DE DEFINIR ESTILOS

 Hoja externa (menor prioridad)
<head>
<link rel="stylesheet" type="text/css" href=”estilo1.css”>
</head>
 Interna en la cabecera hr {color:blue;}
p {margin-left:10px;}
<head>
<style> body {background-
hr {color:blue;} image:url("images/uah_eps.gif
p {margin-left:10px;} ");}
body {background-image:url("images/uah_eps.gif");}
</style>
</head>
 Interna en la línea (mayor prioridad)
<p style=“margin-left:10px">Párrafo con margen 10px.</p>
HTML5/CSS3
HTML5/CSS3 7
div
FORMATO DEL FONDO {
border:1px solid black;
padding:35px;
background-image:url('smiley.gif');
 Background define parámetros de fondo.
background-repeat:no-repeat;
 Propiedades usadas para hacer efectos: background-position:left;
background-origin:border-box;
 background-color: define color }
 background-image: define imagen de background
 background-repeat: cómo se repite una imagen
 background-attachment: si la imagen es fija o se desliza con la página
 background-position: posición de inicio de la imagen
 background-size (CSS3): tamaño de la imagen
 background-origin (CSS3): posición de imagen con respecto a context-box
 background-clip (CSS3): área de aplicación (content-box, border-box…)
HTML5/CSS3
HTML5/CSS3 8
MODELO DE CAJA - BOX

 Una caja tiene diferentes áreas:
 Magin: margen alrededor del borde de la caja
 Border: borde de la caja (linea o repetición de imágenes)
 Padding: margen interno entre el borde y el contenido
 Content: zona donde aparece el contenido (texto o imagen)
 Propiedades:
El tamaño (width: 245px) se refiere a content (por defecto).
Se puede definir el tamaño de las otras zonas.
width:245px; border margin

padding
padding:10px; content
border:5px solid gray;
margin:10px;
HTML5/CSS3
HTML5/CSS3 9
¿Qué puedo hacer con las cajas?

 Orientación de cajas en un contenedor (box-orient)
 Definir elementos con tamaño flexible box-flex
 Definir el orden de visualización de elementos con display y
box-ordinal-group
 Definir sombras con box-shadow , opciones
 Define si height/width de un div box se refieren al borde o
contenido (content-box/border-box) con box-sizing.
HTML5/CSS3
HTML5/CSS3 10
BORDES
 Con CSS3 se puede crear bordes redondeados y sombreados.
 También se puede crear el borde con imágenes.
border:1px solid #a1a1a1;

padding:5px 30px;
background:#ccddee;
width:300px; width:320px;
height:100px; border-radius:10px;
background-color:green;
box-shadow: 10px 10px 5px #888888;
HTML5/CSS3
HTML5/CSS3 11
1. Practica
 Escribe el código html que muestre:
 Dos cajas con las mismas dimensiones, de color naranja y texto azul,
situadas en la misma línea horizontal dentro de un contenedor de 600px.
 Las cajas deben tener una imagen de fondo que se repita en vertical con
un tamaño de 50px por 35 px .
 La imagen se debe visualizar desde el borde. El alto de las cajas debe ser
de 300px.
 El texto se debe visualizar con un margen de 10px desde el borde de la
imagen.
 El borde debe ser de 5px y color azul con formato de linea punteada.
 Las dos cajas deben estar separadas 10pxy tener el mayor ancho posible.
 Poner los estilos en un fichero de hoja de estilos.
HTML5/CSS3
HTML5/CSS3 12
HTML5/CSS3
HTML5/CSS3 13
PROPIEDADES DE TEXTO
 hanging-punctuation signos de
 color puntuación fuera de margen
 direction dirección de escritura  punctuation-trim texto reducido
 letter-spacing espaciado entre  text-align-last alineación de última
caracteres línea cuando text-align es "justify”
 word-spacing espacio ente palabras  text-justify método de justificación
 line-height altura de la línea cuando text-align es "justify”
 text-align alineamiento horizontal  text-outline define texto outline
 vertical-align alineamiento vertical  text-overflow ¿qué a hacer cuando
 text-decoration decoración añadida texto sobrepasa el contenedor?
 text-indent indentación de la primera  text-shadow define sombra
línea en bloque de texto  text-wrap define reglas para romper
 text-transform mayúsculas líneas
 white-space manejo de espacios en  word-break define reglas de romper
blanco líneas para scripts no CJK
 word-wrap permite romper palabras
largas
HTML5/CSS3
HTML5/CSS3 14
PROPIEDADES DE LAS FUENTES

<style>
 font-family: familia de fuente de texto p.ss{font-family:Arial,Helvetica,sans-serif;}
p {font-size:80%;}
 font-size: tamaño de la fuente p.italic {font-style:italic;}
 font-style: estilo de la fuente </style>
 font-variant: texto normal/mayúsculas pequeñas (small-cap)
 font-weight: intensidad de la fuente (normal, blod, lighter…)
 @font-face (CSS3): permite descargar y usar nuevas fuentes
 font-size-adjust (CSS3): tamaño fuente (sólo Firefox)
 font-stretch (CSS3): Selecciona tipo de fuente normal,
condensada o expandida, dentro de una familia
HTML5/CSS3
HTML5/CSS3 15
MEDIA TYPES
 Permite definir un estilo por cada tipo de medio: impresora,
pantalla, dispositivos de braille, dispositivos de pantalla
pequeña, proyectores…
<style>
@media screen
{
p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
p.test {font-weight:bold;}
}
</style>
HTML5/CSS3
HTML5/CSS3 16
PROPIEDADES DE TABLAS
 border-collapse define si los bordes deben ser colapsados
 border-spacing distancia entre bordes (cuando no están
colapsados)
 caption-side lugar del titulo de la tabla (top, bottom)
<caption>Tabla 1 Titulo</caption>
 empty-cells define si visualiza bordes y fondo en celdas vacías
 table-layout algoritmo usado para rellenar celdas (fixed/auto)
HTML5/CSS3
HTML5/CSS3 17
PROPIEDADES DE LISTAS
 list-style todas las propiedades de lista en una declaración
 list-style-image define una imagen como marcador de un item
de la lista
 list-style-position especifica si los marcadores de la lista
deberían aparecer dentro o fuera del flujo de contenido
 list-style-type define el tipo de marcador de item de la lista
HTML5/CSS3
HTML5/CSS3 18
MULTICOLUMNA
 column-count Nº de columnas en las que se divide un elemento
 column-fill Cómo rellenar las colunmas (balance|auto)
 column-gap Separación entre columnas
 column-rule Permite definir todas las propiedades de la línea entre columnas
 column-rule-color Color de la línea entre columnas
 column-rule-style Estílo de la línea entre columnas
 column-rule-width Ancho de la línea entre columnas
 column-span Nº de columnas que el elemento puede tener
 column-width Especifica el ancho de las columnas
 columns Permite definir column-width y column-count
HTML5/CSS3
HTML5/CSS3 19
MULTICOLUMNA
 Puede visualizar poner un bloque de texto en varias columnas
<head><style>
.articulo
{
column-count:2;
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
}
</style></head>
<body>
<div class = articulo> Etimológicamente, telégrafo es un aparato….</div>
HTML5/CSS3
HTML5/CSS3 20
PROPIEDADES DEL INTERFAZ DE USUARIO

 appearance definir el aspecto de un elemento como el de un elemento del interfaz
estándar. Tipos: normal, icon, window, button, menu, field
 Icon define un elemento img como un icono.
 nav-down, nav-left, nav-right, nav-up Especifíca donde navegar al usar la tecla de
navegación correspondiente
 nav-index define el orden de navegación con tab en un elemento
 outline-offset dibuja una línea exterior al borde con el offset indicado
 overflow: qué hacer si el contenido sobrepasa el tamaño de un elemento box
 resize Indica si en un elemento puede ser cambiado el tamaño por un usuario
 position define y devuelve el tipo de posicionamiento usado para un elemento
(static, absolute, fixed, relative, inherit)
HTML5/CSS3
HTML5/CSS3 21
EJEMPLO DE RESIZE Y OUTLINE

<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:2px solid;
padding:10px 40px;
width:300px;
resize:both;
overflow:auto;
outline:2px solid red;
outline-offset:5px;
}
</style> </head>
<body>
<div style="width: 274px; height: 23px;">Ejemplo de resize y outline.</div>
</body>
</html>
HTML5/CSS3
HTML5/CSS3 22
2. Practica
 Continuando con el ejemplo de la actividad 1.
 Define un formato de texto de cabecera en cada caja con:
 Alineación horizontal al centro
 Texto en azul de tamaño 120%
 Subrayado
 En la tabla de la izquierda inserta una tabla con datos de un tema que te guste,
con las siguientes características:
 Borde colapsado de 1px y color azul.
 El layuot automático.
 Inserta alguna imagen relaciondas con el tema.
 En la tabla de la derecha inserta una texto con dos columnas desarrollando el
tema, con las siguientes características:
 Formateado a dos columnas.
 Autoscroll y resize
HTML5/CSS3
HTML5/CSS3 23
HTML5/CSS3
HTML5/CSS3 24
TRANSFORMACIONES 2D
 matrix(n,n,n,n,n,n) Define transformación usando 6 valores para
rotar, escalar y mover
 translate(x,y) Define translación en ejes X, Y
 translateX(n) Define translación en eje X
 translateY(n) Define translation en eje Y
 scale(x,y) Define escala redimensionando ancho y alto
 scaleX(n) Define escala redimensionando ancho
 scaleY(n) Define escala redimensionando alto
 rotate(angle) Define rotation 2D indicando el ángulo
 skew(x-angle,y-angle) Define rotación sobre el eje X e Y
 skewX(angle) Define rotación sobre eje X
 skewY(angle) Define rotación sobre eje Y
HTML5/CSS3
HTML5/CSS3 25
Transfomaciones 2D: rotación
<style>
div
{
width:100px;
height:100px;
transform:rotate(10deg);
}
</style>
</head>
<body>
<div>Estoy girado 10º</div>
</body>
HTML5/CSS3
HTML5/CSS3 26
TRANSFOMACIONES 2D: CAMBIO DE ESCALA

<head>
<style>
div
{
width:100px;
height:75px;
background-color:orange;
}
div#div2
{
margin:100px;
-webkit-transform:scale(2,4); /* Chrome */
}
</style>
</head>
<body>
<div>Elemento DIV.</div>
<div id="div2">Ahora con escala 2,4.</div>
</body>
HTML5/CSS3
HTML5/CSS3 27
TRANSFOMACIONES 2D: SKEW

<head>
<style>
div
{
width:100px;
height:75px;
background-color:orange;
}
div#div2
{
transform:skew(10deg,20deg);
}
</style>
</head>
<body>
<div id="div2">Con skew giro 10 y 20
grados.</div>
</body>
HTML5/CSS3
HTML5/CSS3 28
TRANSFORMACIONES 3D - PROPIEDADES
 transform Aplica una transformación a un elemento 2D o 3D
 transform-origin Cambiar la posición de un elemento transformado
 transform-style Define cómo se visualizan en 3D elementos anidados
 perspective Define perspectiva de visualización de elementos 3D
 perspective-origin Define la posición de la parte inferior del elemento 3D
 backface-visibility Defines si elemento debe ser visible cuando se gira, por
la cara trasera (visible, hidden)
HTML5/CSS3
HTML5/CSS3 29
Transformaciones 3D - métodos
 matrix3d (n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) usa una matriz de 4x4 valores para
definir la transformación
 translate3d(x,y,z) Define la translación en los tres ejes.
 translateX(x), translateY(y), translateZ(z) Define translación en el eje X, Y o Z
 scale3d(x,y,z) Define una transformación de escala en X, Y y Z
 scaleX(x), scaleY(y), scaleZ(z) Define una transformación de escala en X, Y o Z
 rotate3d(x,y,z,angle) Defines rotación mediante ángulos en los ejes X, Y y Z
 rotateX(angle), rotateY(angle), rotateZ(angle) Defines rotación 3D en X, Y o
Z
 perspective(n) Define la perspectiva de visualización en elementos 3D
HTML5/CSS3
HTML5/CSS3 30
TRANSFORMACIONES 3D - EJEMPLO
<head>
<style>
div
{
width:80px;
height:60px;
}
div#div2
{
-webkit-transform:rotateX(180deg); /* Safari and Chrome */
}
</style>
</head>
<body>
<div id="div2">Elemento DIV rotado.</div>
</body>
HTML5/CSS3
HTML5/CSS3 31
Transición
 Define efectos visuales dinámicos haciendo cambio de estilo
gradual de un elemento
 Propiedades:
 transition define las 4 propiedades de una transición de una vez
 transition-property especifica el nombre de la propiedad a la que se
aplica la tansición
 transition-duration especifica la duración de la transición
 transition-timing-function especifica cómo calcular la velocidad de la
transición (ease por defecto)
 http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
 transition-delay define cuando comienza la tansición
HTML5/CSS3
HTML5/CSS3 32
TRANSICIÓN EJEMPLO
div HEAD
{
width:100px;
height:100px;
background:green;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
}
div:hover Ver ejemplo en acción:
{ http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
width:200px;
}
BODY
<div></div>
<p>Pon el ratón sobre el elemento de arriba durante un segundo para observar el

efecto de la transición.</p>
HTML5/CSS3
HTML5/CSS3 33
ANIMACIONES
 Permite crear animación de imágenes
 Pasos:
 Se define la animación (cambios de estilo) dentro de un @keyframes
@keyframes anim1
{
from {background: blue;}
to {background: green;}
}
 Se asocia la animación creada en @keyframes a un selector definiendo la
duración de la misma
div
{
animation: anim1 3s;
}
 Ejemplo: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1
HTML5/CSS3
HTML5/CSS3 34
ANIMACIONES
 Se puede definir los pasos que se desee en la transición.
 Cada instante de tiempo en el que hay cambios de estilo se
define como un % de la duración total de la animación.
@keyframes anim2
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
 Ver ejemplo: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3
HTML5/CSS3
HTML5/CSS3 35
ANIMACIONES: RESUMEN DE PROPIEDADES

 @keyframes Define la animacion
 Animation Define todas las propiedades de la animación excepto animation-play-
state property
 animation-name Define el nombre de la animación. Igual que en @keyframes
 animation-duration Define los segundos o milisegundos dura la animación
 animation-timing-function Define cómo progresa la animación
 animation-delay Define cuándo comienza
 animation-iteration-count Nº de veces que se reproduce la animación
 animation-direction Define si se reproduce hacia delante (normal), atrás (reverse) o
alterna (alternate).
 animation-play-state Define si la animación está corriendo (running) o pausada
(paused). Por defecto está en modo "running”.
HTML5/CSS3
HTML5/CSS3 36
3. Practica
 Continuando con el ejemplo de la actividad 2.
 Haz que las imágenes aparezcan rotadas.
HTML5/CSS3
HTML5/CSS3 37
REFERENCIAS
 Tutorial con ejemplo: http://www.w3schools.com/
 Plantillas:
 http://www.freecsstemplates.org
 http://www.templatemo.com
 http://www.free-css.com
 …..
HTML5/CSS3
HTML5/CSS3 38
PREGUNTAS
 Formas de definir estilos
 ¿Qué se puede definir en un estilo?
 ¿Qué es un selector?
 ¿Se puede personalizar el aspecto de las fuentes?
 ¿Texto que se formatee en varias columnas de forma
automática?
 ¿Se puede definir bloques de texto que?
 con color de fondo propio
 bordes redondeados
 que cambien de color
 que se muevan
 que se giren en el plano XY
 que se giren en 3D
HTML5/CSS3

S3GG CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

S3GG CSS

Cargado por

Copyright:

Formatos disponibles

HTML5/CSS3 1

HOJAS DE ESTILO CSS

HOJAS DE ESTILO CSS

SELECTORES DE ESTILO CON IDENTIFICADOR

SELECTORES DE ESTILO CON CLASS

Más casos en:

FORMAS DE DEFINIR ESTILOS

MODELO DE CAJA - BOX

width:245px; border margin

¿Qué puedo hacer con las cajas?

border:1px solid #a1a1a1;

PROPIEDADES DE LAS FUENTES

PROPIEDADES DEL INTERFAZ DE USUARIO

EJEMPLO DE RESIZE Y OUTLINE

Transfomaciones 2D: rotación

TRANSFOMACIONES 2D: CAMBIO DE ESCALA

TRANSFOMACIONES 2D: SKEW

<p>Pon el ratón sobre el elemento de arriba durante un segundo para observar el

 Ver ejemplo: http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation3

ANIMACIONES: RESUMEN DE PROPIEDADES

También podría gustarte