Tema 6 Texto y Modelo

de Caja en CSS
Resumen

Utilizar CSS para configurar parmetros de texto: tipo de letra, tamao,

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 mrgenes, bordes y rellenos con CSS
Aplicar efectos grficos avanzados con CSS:
Sombras
Bordes redondeados
Imgenes de fondo
Gradientes, opacidad, color RGBA yHSLA

2
ipos de Letra
o

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 genrico 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

Transfrmalo 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);}

Despus de la regla @font-face rule ya se puede usar la fuente

http://www.google.com/webfonts

 Propiedad font-size

Especifica el tamao 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 lnea de texto p

{ lineheight: 120%; }

Recomendacin de accesibilidad:
Utilizar tamaos 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 lnea

Nav: mostrar en negrita

Clase Companyname: mostrar en negrita

Footer: Texto small en cursiva

Alineamiento y sangra
Propiedad text-transform
Especifica la utilizacin de maysculas.Valores vlidos:
None (default), capitalize, uppercase o lowercase.
h1 { text-transform: uppercase; }
Propiedad text-align
Configura el alinemaniento del texto. Valores vlidos:
Left (default), center, right and justify are valid values.
h1 { text-align: center; }
Propiedad text-indent
Configura la sangra de primera lnea de un elemento de texto p {
text-indent: 5em; }

Alineamiento y Sangra
..\Ejemplos\chapter6\trillium3\index.html

Partir de starter.html

Utilizar trilliumlogo.gif como fondo para h1 y evitar solapamientos

Introducir sangra de primera lnea 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 numricopx, 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
mnima de 600px
Para h1, configure una altura de 86px y una altura de lnea 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 vaco 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 vaco entre un
elemento y los elementos
adyacentes.
Utiliza valores numricos (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 vaco 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 pgina:
..\Ejemplos\chapter6\box2.html

Borde CSS

Especifica un borde alrededor de un elemento

HTML

Consiste en:
border-width
border-style border-color

Atajo:
h2 { border: 2px solid #ff0000 }
Border
Style

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 numricos (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

Ejercicio: comienza con starter1.html

Transformalo en:

..\Ejemplos\chapter6\lighthouse\index.html

23

Centrar
contenido

#container { margin-left:auto;
margin-right:auto;
width:80%;}

Centrar contenido

Ejercicio

Partir de starter.html

Transformar en
..\Ejemplos\chapter6\trillium5\index.html

Propiedad box-shadow:

Sombra de
caja

horizontal offset (px): valores positivos especificansombra a la

derecha
vertical offset (px): valores positiovs especifican sombra debajo
blur radius (px, opcional)
Spread distance (px, opcional)
Color value
Example:
#wrapper { box-shadow: 5px 5px 5px #828282;}
Palabra clave opcional inset: sombra hacia el interior
Sombra de Texto

Especifica valores para

horizontal offset, vertical offset,
blur radius, y color

Ejemplo:
#wrapper { text-shadow: 3px
3px 3px #666; }
CSS3 textshadowProperty
13

Ejercicio:

Partir de lcenter.html

Transformar en:

..\Ejemplos\chapter6\lighthouse\shadow.html

14

Imagen de Fondo

background-clip
Especifica los lmites del fondo:
.test { background-clip: content-box;}
Valores: content-box, padding-box, border-box(por defecto)

background-origin
Coloca la imagen de fondo en relacin 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 pgina 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

Rango de valores: 0 Totalmente transparente

1 Totalmente opaco

Ejemplo:
h1{ background-color: #FFFFFF;
opacity: 0.6; }
Opacidad

Ejercicio:

Utiliza una imagen grande de tu eleccin

como fondo de la pgina

Introduce una seccin de ttulo transparente de la manera siguiente:

..\Ejemplos\chapter6\opacity\index.html Elemento centrado de tamao

640x480px.

Ttulo 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 nmero entre 0 (transparente) y 1
(opaco) Se pueden indicar dos valores de color con formatos distintos:
Navegadores no compatibles con CSS3

Ejemplo:

h1 { color: #ffffff;
color:
rgba(255,
255,
255,0.7);
font-size:
5em;
padding17

right:10px;
text-align:
right;
}

font-family: Verdana, Helvetica,sans-serif;

35
Color HSLA
Forma de representacin
alternativa:

Hue
Saturation
Light
Alpha

Hue es un valor del tono del color entre

0y
360
Saturation: porcentaje

Color intenso 100%, gris 0%

Lightness: porcentaje
Blanco 100%, Negro 0%
Alpha/transparencia (opcional): de 0 a 1

36
Degradado

Degradado: una difusin suave de un tono a otro

Propiedad background-image:
linear-gradient() to bottom, to top, to left, to right
radial-gradient() Shape, size, position

Aadir color stops (franjas)

Por defecto estan equidistanciadas

Se puede aadir a cada color stop un porcentaje Diferentes

implementaciones provisionales: Chequear compatibilidad!

Probablemente no pase la validacin CSS3

background-color: #8FA5CE;

background-image: -webkit-linear-gradient(top, #FFFFFF,

#8FA5CE); background-image: -moz-lineargradient(top,
#FFFFFF, #8FA5CE); filter:
progid:DXImageTransform.Microsoft.gradient

(startColorstr=#FFFFFFFF, endColorstr=#FF8FA5CE);
background-image: linear-gradient(to bottom,#FFFFFF,
#8FA5CE);

19

Gradientes

Ejercicio:
Experimenta con los diferentes parmetros de lineargradient y radialgradient y crea una pgina Web con elementos que muestren varios
degradados alternativos
Trata de explorar todas las posibilidades de los degradados
Resumen

Varias propiedades CSS

Configuracin de texto con CSS

Modelo de caja de CSS

Configuracin de propiedades relacionadas con el modelo de caja:

margin, border, padding y width.

Centrado del contenido con CSS.

Propiedades CSS3: border-radius, box-shadow, text-shadow, opacity.