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


<head>

<title></title>


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


<head>

<title></title>


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


<head>

<title></title>


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


<head>

<title></title>


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


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

4505.07 estilos usando master pages y css

Internet

Transcript of 4505.07 estilos usando master pages y css