css

Published on January 2017 | Categories: Documents | Downloads: 45 | Comments: 0 | Views: 305
of 20
Download PDF   Embed   Report

Comments

Content

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

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



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



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



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 representación
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 difusión suave de un tono a otro



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



Añadir “color stops” (franjas)



Por defecto estan equidistanciadas
Se puede añadir a cada “color stop” un porcentaje • Diferentes






implementaciones provisionales: – ¡Chequear compatibilidad!



Probablemente no pase la validación 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 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.



Centrado del contenido con CSS.



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

Sponsor Documents

Or use your account on DocShare.tips

Hide

Forgot your password?

Or register your new account on DocShare.tips

Hide

Lost your password? Please enter your email address. You will receive a link to create a new password.

Back to log-in

Close