Download - 4505.07 estilos usando master pages y css
Estilos usando Master Pages y CSSLa vida hay que vivirla con estilo
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.
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.
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
Knowledge Providers
Estrategias para añadir estilos
Por etiqueta
IncrustadosHoja CSS
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>
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.
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>
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>
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>
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>
Knowledge Providers
Estilos en hoja externa CSS
Especificación vía <link>
Especificación vía @Import
<head><link rel=“stylesheet” href=“~/estilos.css” type=“text.css”></head>
<head><style type=“text/css”><!--
@import url(“~/estilos.css”);--> </head>
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.
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.
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.
Knowledge Providers
Ejemplo de una página maestra1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
<%@ Master Language="VB" %>
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1"
runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Knowledge Providers
Ejemplo de una página cliente
1 2 3 4 5 6 7 8 9 10
<%@ Page Language="VB" MasterPageFile="~/MiPaginaMaestra.master"
Title="Untitled Page" %>
<script runat="server">
</script>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
</asp:Content>
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.
Knowledge Providers
Ejercicios
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.
Knowledge Providers
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: [email protected]
Copyright, 2013. Derechos reservados.