Tema 6 – Texto y Modelo
de Caja en CSS
Resumen
•
•
•
•
•
–
–
–
–
Utilizar CSS para configurar parámetros de texto: tipo de letra, tamaño,
estilo, etc.
Utilizar CSS para alinear texto y aplicar sangrias
Describir y aplicar el Modelo de Caja de CSS
Configurar las dimensiones de los elementos HTML con CSS •
Configurar márgenes, bordes y rellenos con CSS
Aplicar efectos gráficos avanzados con CSS:
Sombras
Bordes redondeados
Imágenes de fondo
Gradientes, opacidad, color RGBA yHSLA
2
ipos de Letra
o
1
Tipos de letra: La fuente tiene que estar instalada en el cliente
• Propiedad font-family – Configura la Fuente del texto
– Incluye la posibilidad de usar un nombre genérico de “familia”
– El navegador intentará utilizar las fuentes en el orden especificado
p { font-family: Verdana, Arial, sans-serif;}
Tipos de Letra
•
Comienza a partir de starter.html
•
–
–
–
Transfórmalo en ..\Ejemplos\chapter6\trillium\index.html
Body element: Verdana, Arial, sans-serif
h1 & h2: Georgia, “Times New Roman”, serif
Footer: Georgia, “Times New Roman”, serif
Tipos de Letra
•
Si se poseen los derechos de una fuente determinada, se puede distribuir
utilizando @font-face:
@font-face { font-family: MyFont;
src: url(myfont.woff) format (“woff”);}
•
Después de la regla @font-face rule ya se puede usar la fuente
•
http://www.google.com/webfonts
2
– Propiedad font-size
•
Especifica el tamaño del texto (%, px, em,
palabra clave) p { font-size: 90%: }
– Propuedad font-weight
•
Configures la letra negrita. Similar a
<b> li {font-weight: bold; }
– Propiedad font-style
•
Configura el estilo del texto. Normal, italic,
oblique
#footer { font-style: italic; }
– Propiedad line-height
•
Modifica la altura de una línea de texto p
{ lineheight: 120%; }
Recomendación de accesibilidad:
Utilizar tamaños en em o porcentajes porque facilitan a los
navegadores su agrandamiento
Unidades:
https://librosweb.es/libro/css/capitulo_3/unidades_de_medida.html
•
Transformar starter.html en
..\Ejemplos\chapter6\trillium2\index.html
•
h1: especifica el fondo con el logo de trillium y doble altura de línea
•
Nav: mostrar en negrita
•
Clase Companyname: mostrar en negrita
•
Footer: Texto small en cursiva
Alineamiento y sangría
– Propiedad text-transform
○Especifica la utilización de mayúsculas.Valores válidos:
None (default), capitalize, uppercase o lowercase.
h1 { text-transform: uppercase; }
– Propiedad text-align
○Configura el alinemaniento del texto. Valores válidos:
Left (default), center, right and justify are valid values.
h1 { text-align: center; }
– Propiedad text-indent
○Configura la sangría de primera línea de un elemento de texto p {
text-indent: 5em; }
•
Alineamiento y Sangría
..\Ejemplos\chapter6\trillium3\index.html
•
Partir de starter.html
•
Utilizar trilliumlogo.gif como fondo para h1 y evitar solapamientos
•
Introducir sangría de primera línea de 3em en <p>
•
Configurar alineamiento al centro para el pie.
Anchura y altura
– Propiedad width
• Configura la anchura del CONTENIDO
de un elemento h1 { width: 80%; }
(Valor numérico–px, em- o %)
– Propiedad min-width
• Especifica la anchura minima de un
elemento
– Propiedad max-width
• Especifica la anchura minima de un
elemento – Propiedad height
• Configura la altura de un elemento h1
{ height: 100px; }
Anchura y altura
– ..\Ejemplos\chapter6\trillium4\index.html
– Empieza a partir de starter.html
– Para el cuerpo, especifica una anchura de 80% y una anchura
mínima de 600px
– Para h1, configure una altura de 86px y una altura de línea de
250%
Modelo de
caja
•Content
–El texto, imagen,etc.
• Padding
Area
–
entre el contenido
y elborde
• Border
–Entre el padding yel
margen
• Margin
E
– l espacio vacío entre
el elemento y los
adyacentes
13
Modelo de Caja
•
Ejemplos
– <h1> - fondo azul claro, padding de 20 pixeles, borde negro de
1 pixel
– <div> - fondo azul, sin padding (por defecto), borde negro de
5 pixels.
•
..\Ejemplos\chapter6\box.html
14
Margen CSS
– La zona del margen: siempre
transparente – Propiedades
relacionadas:
• margin, margin-top, margin-right, margin-left, margin-bottom
– Define el espacio vacío entre un
elemento y los elementos
adyacentes.
• Utiliza valores numéricos (px/em) o porcentajes
– Ejemplos h1 { margin: 0; }
h1 { margin: 20px 10px; }
top&bottom left&right h1
{ margin:10px 30px 20px; } top left&right bottom h1
{ margin:20px 30px 0 30px; }top right bottom left
Padding CSS
– Zona padding (relleno): muestra el
fondo – Propiedades relacionadas:
• Padding, padding-top, padding-right, padding-left, padding-bottom
– Especifica el espacio vacío entre el
contenido del elemento HTML y
el borde – Ejemplos: h1 { padding:
0; } h1 { padding : 20px 10px; }
h1 { padding :10px 30px 20px; }
h1 { padding :20px 30px 0
30px; }
Padding CSS
– Ejercicio - trata de replicar la siguiente página: –
..\Ejemplos\chapter6\box2.html
Border CSS
Se puede configurar de manera independiente cada uno de los lados del
borde:
– border-bottom
– border-left
– border-right – border-top h2 { border-bottom: 2px solid #ff0000
}
Borde CSS
•
Ejercicio - trata de copiar el siguiente ejemplo:
•
..\Ejemplos\chapter6\box3.html
•
Experimenta con varios estilos de borde y visualiza con diferentes
navegadores.
Bordes redondeados
•
•
•
•
•
•
Propiedad border-radius.
Ejemplo:
h1 { border: 1px solid #000033;
border-radius: 15px; }
Ejercicio - replica los ejemplos
siguientes:
..\Ejemplos\chapter6\box4.html
..\Ejemplos\chapter6\box5.html •Se utilizan valores numéricos (px, em).
– Un solo valor configura las 4 esquinas.
– Cuatro valores configuran independientemente cada esquina,
empezando por la superior izquierda y siguiendo como las agujas
del reloj
Se pueden configurar independientemente utilizando las propiedades
border-bottom-left-radius, etc.
22
Bordes redondeados
background-clip
Especifica los límites del fondo:
.test { background-clip: content-box;}
Valores: content-box, padding-box, border-box(por defecto)
•
background-origin
Coloca la imagen de fondo en relación con el contenido,el
relleno o el borde
Valores: content-box, padding-box (por defecto), border-box
•
background-size
Se puede utilizar para redimensionar o escalar el fondo
(%width,%height), (pxWidth,pxHeight), cover, contain
•
Ejercicio: Escribe una página Web para probar los
diferentes valores de background-clip, background-origin y
background-size.
•
¿En qué se diferencian las diferentes posibilidades?
•
Ejemplos:
•
..\Ejemplos\chapter6\clip\index.html
•
..\Ejemplos\chapter6\origin\index.html
•
..\Ejemplos\chapter6\size\sedona.html
–
–
–
–
–
15
Imagen de Fondo
Contain
•
Diferencias cover / contain
•
..\Ejemplos\chapter6\size\cover.html
•
..\Ejemplos\chapter6\size\contain.html
Cover
16
Opacidad
•
Especifica la opacidad (transparencia) del color de fondo
Utiliza una imagen grande de tu elección
como fondo de la página
•
Introduce una sección de título transparente de la manera siguiente:
•
..\Ejemplos\chapter6\opacity\index.html • Elemento centrado de tamaño
640x480px.
•
Título sobre impresionado
Color RGBA
•
Formato de color:
3 Canales para RGB, un canal para alpha (transparencia)
Los valores para rojo, verde y azul deben ser decimales de 0 a 255.
El valor de transparencia debe ser un número entre 0 (transparente) y 1
(opaco) – Se pueden indicar dos valores de color con formatos distintos:
Navegadores no compatibles con CSS3
Ejercicio:
Experimenta con los diferentes parámetros de lineargradient y radialgradient y crea una página Web con elementos que muestren varios
degradados alternativos
Trata de explorar todas las posibilidades de los degradados
Resumen
•
Varias propiedades CSS
•
Configuración de texto con CSS
•
Modelo de caja de CSS
•
Configuración de propiedades relacionadas con el modelo de caja:
margin, border, padding y width.