2. Knowledge Providers
Objetivos
Aprenderá qué son las páginas CSS
Aprenderá las diferentes estrategias para incluir estilos en una
página.
Aprenderá qué son las páginas maestras, y cómo consumirlas.
3. Knowledge Providers
¿Qué es CSS?
Las Hojas de estilo en cascada o CSS (Cascade Style Sheets por sus
siglas en inglés) permiten integrar en un recurso externo a las
páginas, las especificaciones de estilo que tendríamos que aplicar
en las etiquetas HTML.
o A través de esta página CSS podemos afectar de manera directa y
uniforme la representación de los elementos visuales de los contenidos
Web.
o La enorme ventaja es que, si decidimos un cambio en el formato, basta
modificar el archivo CSS para modificar todas las páginas que consumen
su información.
4. Knowledge Providers
Componentes de un estilo CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family:Arial;
font-size:medium;
}
</style>
</head>
<body>
Este contenido aparecerá en Arial.
</body>
</html>
Selector
Declaración
6. Knowledge Providers
Estilo por etiqueta
La especificación de estilo se coloca en la etiqueta misma que
se quiere afectar.
o Esta estrategia es la menos recomendable. Se usa para dar formato
a un elemento, cuando ningún otro elemento tendrá el mismo
estilo.
<p style=”font-family:Arial;”>Este es un párrafo</p>
<p>Este es otro</p>
7. Knowledge Providers
Estilos incrustados
En estilos incrustados, se colocan los diferentes estilos en una
única sección del documento.
o En la sección <HEAD> se coloca un elemento <STYLE>.
o Se especifica el valor “text/css” en el atributo type.
o Se colocan los selectores y sus declaraciones.
8. Knowledge Providers
Selectores de elemento
Los selectores de elemento,
o selectores estándar, nos
permiten indicar qué
elemento o etiqueta HTML
se verá afectada.
o Si se definen de esta forma,
los elementos y sus
elementos contenidos
tendrán el estilo
especificado en las
declaraciones
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p
{
font-family:Arial;
font-size:medium;
}
</style>
</head>
<body>
<p>Este contenido aparecerá en Arial.</p>
<div>Este elemento no aparecerá en Arial.</div>
</body>
</html>
9. Knowledge Providers
Contextuales descendientes
Los selectores contextuales
descendientes, afectan el
estilo de ciertos elementos,
siempre y cuando se
encuentren dentro de otros
elementos específicos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p b
{
font-family:Arial;
font-size:medium;
}
</style>
</head>
<body>
<p>En este contenido las <b>negritas van negritas Arial</b></p>
<div>En este contenido <b>las negritas van negritas</b></div>
</body>
</html>
10. Knowledge Providers
Selectores de clase
Los selectores de clase sirven para
especificar selectores nominados,
que pueden estar asociados a
elementos estándar o no. Al definir
uno de estos tipos de estilo, se
pueden asignar a través de la
especificación class.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
p.rojo {color:Red;}
p.verde {color:Green;}
.amarillo {color:Yellow;}
</style>
</head>
<body>
<p class="rojo">Párrafo en rojo.</p>
<p class="verde">Párrafo en verde.</p>
<div class="rojo">Rojo no aplica en div.</div>
<p class="amarillo">Amarillo aplica en todo.</p>
</body>
</html>
11. Knowledge Providers
Selectores de identificador
Los selectores de
identificador sirven para
especificar estilos en
función al ID de los
objetos afectados.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div#Peligro {color:Red;}
div#Contenido{color:Green;}
</style>
</head>
<body>
<div ID="Peligro"><b>Cuidado:</b> La información puede perderse.</div>
<div ID="Contenido">El proceso de depuración es necesario.</div>
</body>
</html>
13. Knowledge Providers
Propiedades de tipografía
Propiedad Descripción
font-family Especifica una fuente o lista de fuentes en el orden de preferencia.
font-size Especifica el tamaño del texto pudiendo expresarse en: palabras
clave de tamaño relativo, Medidas porcentuales o medidas de
longitud
font-weight Controla el peso (grosor) de la fuente
font-style Determina la “postura” de la fuente
font Permite especificar múltiples propiedades tipográficas a la vez
pero al menos deben incluirse los valores de tamaño y familia.
14. Knowledge Providers
Propiedades de colores y fondo
Propiedad Descripción
color Especifica cualquier tipo de color o color de sistema válido
y se especifica en: formatos hexadecimales, funcionales o
por nombres de color.
background-color Determina el color de fondo para el elemento.
background-image Especifica la imagen de fondo.
background-position Controla la posición de la imagen de fondo dentro del área
del elemento afectado.
15. Knowledge Providers
Páginas maestras
El uso de páginas maestras o Master Pages como se
denominan en inglés, permite definir un “armazón” HTML que
contiene lugares en blanco en donde se alojará contenido de
forma dinámica al momento de renderizar la página.
o Tienen extensión .MASTER
o Se consumen desde las páginas cliente, mismas que no deberán
tener estructura general de página, pues la heredarán de la página
maestra.
18. Knowledge Providers
¿Cómo se relacionan las páginas master
y cliente?
Nombre.master
<html>
<head runat=“server”>
</head>
<body>
</body>
ContentPlaceHolder ID=“Head”
ContentPlaceHolder ID=“ContentPlaceHolderX”
Página.aspx
<%@ Page MasterPageFile=“Nombre.master” %>
Content ContentPlaceHolderID=“Head”
Content ContentPlaceHolderID=“ContentPlaceHolderX”
a)
b)
c)
Una página cliente no repite los elementos de estructura de la página maestra: simplemente indica qué página maestra
utilizará (a); al momento de llamar la página, el proceso de rendering coloca lo que se encuentre en los bloques de
contenido, en sus contenedores correspondientes. Hay un contenido que se agregará al encabezado (b) y otro al cuerpo
(c); al final, la página retornada al navegador será la fusión de la master y la cliente.
20. Knowledge Providers
Lab.07.01: Creando y consumiendo una página CSS.
Lab.07.02: Creando y utilizando una Master Page.
Lab.07.03: Utilizar Master Page en una página no cliente.
Lab.07.04: Pasando de las páginas al Web Site.
22. Knowledge Providers
Aprenda – Microsoft ASP.NET usando Visual Studio 2012
Programa desarrollado por:
Dr. Felipe Ramírez
Doctor en Filosofía con Especialidad en Administración
Licenciado en Derecho y Ciencias Sociales
Master en Informática Administrativa
ITIL Certified Trainer
Correo: Felipe.Ramirez@aprenda.mx
Copyright, 2013. Derechos reservados.
