Estilos de Aplicaciones Web

ESTILOS EN
APPLICACIONES ASP.NET
Preparado por Nelson Abreu
14 de junio 2012
Hojas de Estilo (stylesheet)
El lenguaje HTML está limitado a la
hora de aplicarle forma a un
documento. Esto es así porque fue
concebido para otros usos (científicos
sobretodo), distinto a los actuales,
mucho más amplios.
http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada
Para solucionar estos problemas los
diseñadores han utilizado técnicas tales
como la utilización de tablas, imágenes
transparentes para ajustarlas, utilización
de etiquetas que no son estándares del
HTML y otras. Estas "trampas" han
causado a menudo problemas en las
páginas a la hora de su visualización en
distintas plataformas.
• El nombre hojas de estilo en cascada viene
del inglés Cascading Style Sheets, del que toma
sus siglas. CSS es un lenguaje usado para definir
la presentación de un documento estructurado
escrito en HTML o XML2 (y por extensión
en XHTML). El W3C (World Wide Web
Consortium) es el encargado de formular la
especificación de las hojas de estilo que servirán
de estándar para los agentes de usuario o
navegadores.
• La idea que se encuentra detrás del desarrollo de CSS es
separar la estructura de un documento de
su presentación.
• La información de estilo puede ser adjuntada como un

documento separado o en el mismo documento HTML.
En este último caso podrían definirse estilos generales en
la cabecera del documento o en cada etiqueta particular
mediante el atributo "<style>".
Para dar formato a un documento HTML, puede emplearse CSS
de tres formas distintas:
1) Un estilo en línea (inline) es un método para insertar el lenguaje

de estilo de página directamente dentro de una etiqueta HTML.
2) Una hoja de estilo interna, que es una hoja de estilo que está
incrustada dentro de un documento HTML, dentro del elemento
<head>, marcada por la etiqueta <style>.
3) Una hoja de estilo externa, es una hoja de estilo que está

almacenada en un archivo diferente al archivo donde se almacena
el código HTML de la página Web. Esta es la manera de programar
más potente, porque separa completamente las reglas de formateo
para la página HTML de la estructura básica de la página.
• Estilo Inline
<input type="text" name="textfield" id="textfield"
style="color:green;width:300px;" />
<input type="submit" name="Submit"

value="Enviar" id="Enviar"
style="color:green;width:300px;" />
Hoja de Estilos Interna
<html>
<head>
<style type="text/css">
#Enviar
{
width:300px;
color: green;
}
#cajadetexto
{
width:300px;
color: blue;
}
</style>
</head>
<body>
<label for="textfield"></label>
<p>
<input type="text" name="cajadetexto" id="cajadetexto" />
</p>
<p>
<input type="submit" name="Submit" value="Enviar" id="Enviar"/>
</p>
</body>
</html>
• Hoja de Estilos Externa
Para esta opción se crea una hoja externa y se incluye en
la página web utilizando las siguiente opciones:
<style type="text/css">
@import url ("estilo.css");
</style>
<link rel="stylesheet" type="text/css" href="hoja.css">

• Definición de estilos usando clases
Las clases nos sirven para crear definiciones de estilos
que se pueden utilizar repetidas veces.
Una clase se puede definir entre las etiquetas <STYLE>

(en la cabecera del documento),o en un archivo externo a
la página.
.nombredelaclase {atributo: valor;atributo2:valor2; ...}

• Definición de estilos usando clases
Una vez tenemos una clase, podemos utilizarla en
cualquier etiqueta HTML. Para ello utilizaremos el atributo
class, poniéndole como valor el nombre de la clase, de
esta forma:
<ETIQUETA class="nombredelaclase">
Unidades de medida:
• % : significa porcentaje
• in : pulgadas;
• cm : centímetros
• mm : milimetros
• em : 1em es igual al tamaño actual de una fuente. 2em significa
dos veces el tamaño de la fuente actual.
• ex : es generalmente la mitad del tamaño de la fuente actual.
• pt : punto (1 pt es lo mismo que 1/72 pulgadas)
• pc : pica. Lo mismo que 12 puntos.
• px : pixeles.
http://www.w3.org/Style/Examples/007/units
Propiedades ShortHand
Algunas propiedades del estándar CSS 2.1 son especiales,
ya que permiten establecer simultáneamente el valor de
varias propiedades diferentes. Este tipo de propiedades se
denominan "propiedades shorthand" y todos los
diseñadores web profesionales las utilizan.
La gran ventaja de las propiedades shorthand es que
permiten crear hojas de estilos mucho más concisas y por
tanto, mucho más fáciles de leer
p div
{ {
font-style: normal; margin-top: 5px;
font-variant: small-caps; margin-right: 10px;
font-weight: bold; margin-bottom: 5px;
margin-left: 10px;
font-size: 1.5em; padding-top: 3px;
line-height: 1.5; padding-right: 5px;
font-family: Arial, sans- padding-bottom: 10px;
serif; padding-left: 7px;
} }
h1 p
{ {
background-color: #FFFFFF; font: normal small-caps bold
background-image: 1.5em/1.5 Arial, sans-serif;
url("imagenes/icono.png");
background-repeat: no-repeat; }
background-position: 10px 5px; div
} {
margin: 5px 10px;
padding: 3px 5px 10px 7px;
}
Utilizando las propiedades shorthand es posible convertir
las 24 líneas que ocupa la hoja de estilos anterior en sólo
10 líneas, manteniendo los mismos estilos:
p { font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;}

div { margin: 5px 10px; padding: 3px 5px 10px 7px;}
h1 { background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;}
Existen una serie de características que sólo están
disponibles para CSS3 y algunos navegadores. Para
generar automáticamente algunas de estas características
se pueden usar los siguientes links:
http://css3generator.com/
http://css3gen.com/box-shadow/
http://www.cssportal.com/css3-rounded-corner/
http://border-radius.com/
http://www.wpthemeshock.com/css-drop-shadow/
http://www.cssportal.com/css3-shapes/
Bordes redondeados
div
{
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
Sombras
A continuación se muestra la regla CSS 3 necesaria para crear
una sombra gris muy difuminada y que se visualice en la
esquina inferior derecha de un elemento:
elemento {
-webkit-box-shadow: 13px 13px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 13px 13px 5px rgba(50, 50, 50, 0.75);
box-shadow: 13px 13px 5px rgba(50, 50, 50, 0.75);
}
elemento {
text-shadow: 35px 35px 2px rgba(150, 150, 150, 1);
}
Transparencia
El valor de la propiedad opacity se establece mediante un
número decimal comprendido entre 0.0 y 1.0. La
interpretación del valor numérico es tal que el valor 0.0 es
la máxima transparencia (el elemento es invisible) y el
valor 1.0 se corresponde con la máxima opacidad (el
elemento es completamente visible). De esta forma, el
valor 0.5 corresponde a un elemento semitransparente y
así sucesivamente.
Transparencia
#primero, #segundo, #tercero {

opacity: 0.5;
width:300px;
height:300px;
border-color:#000000;
border-width:40px;
border: solid;
}
:hover selector
Permite seleccionar elementos cuando el ratón está
encima de ellos.
a:hover
{
background-color:yellow;
}
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
• @font-face
Esta regla permite definir en nuestra hoja de
estilos cualquier tipo de fuente, independientemente
de si el usuario dispone de ella o no y para ello solo se
debe tener la fuente instalada en el servidor web donde
está colocada la página.
@font-face
{
font-family: MiFont;
src:url("fonts/OldeEnglish.ttf");
}
Para validar las hojas de estilo se utiliza esta página:
http://jigsaw.w3.org/css-validator/
Themes - Temas
Un tema es un conjunto de valores de
propiedad que permiten definir la apariencia
de las páginas y de los controles y, a
continuación, aplicar esa apariencia de
manera coherente a las páginas de una
aplicación Web, en toda una aplicación Web
o en todas las aplicaciones Web de un
servidor.
Themes - Temas
• Puede definir temas para una aplicación Web única o
como temas globales que pueden utilizar todas las
aplicaciones en un servidor web. Una vez definido un
tema, se puede colocar en páginas individuales utilizando
el atributo Theme o StyleSheetTheme de la
directiva @Page, o se puede aplicar a todas las páginas
de una aplicación configurando el elemento <pages> en
el archivo de configuración de la aplicación. Si el
elemento <pages> se define en el archivo web.config, el
tema se aplicará a todas las páginas de las aplicaciones
web en el servidor.
Propiedades de Temas
• Como regla general, se pueden usar los temas para definir las
propiedades relacionadas con la apariencia de una página o
de un control o el contenido estático. Sólo se pueden
establecer esas propiedades que tienen un atributo
ThemeableAttribute establecidas como true en la clase de
control.
• Las propiedades que especifican explícitamente el

comportamiento de los controles en lugar de su apariencia no
aceptan valores de tema. Por ejemplo, no se puede configurar
la propiedad CommandName de un control Button mediante un
tema. De manera similar, no se puede utilizar un tema para
configurar la propiedad AllowPaging o DataSource de un
control GridView.
Temas Globales
Un tema global se aplica a todos los sitios Web de un
servidor. La ubicación en la que se crea una carpeta para
los temas globales depende de si se ejecuta el sitio Web
con Internet Information Services (IIS) o si se prueba con el
servidor de desarrollo de ASP.NET.
http://msdn.microsoft.com/es-es/library/ms247256.aspx
Aplicar Temas en VS
Puede aplicar los temas a una página, un sitio Web, o
globalmente. Al establecer un tema en el nivel del sito Web
los estilos y máscaras se aplican a todas las páginas y
controles del sitio, a no ser que reemplace un tema para
una página individual. Al establecer un tema en el nivel de
la página, los estilos y máscaras se aplican a esa página y
a todos sus controles.
De manera predeterminada, los temas reemplazan la

configuración local del control. Como alternativa, también
se puede establecer un tema como tema de la hoja de
estilos, de forma que dicho tema se aplique sólo a la
configuración del control que no esté específicamente
establecida en el mismo.
Themes
<configuration>
<system.web>
<pages theme=“NombreTema" />
<pages styleSheetTheme="Themename" />
</system.web>
</configuration>
Skin
• Un archivo skin tiene la extensión de nombre de archivo
.skin y contiene los valores de propiedades para los
controles individuales como Button, Label, TextBox o
Calendar. La configuración de las máscaras de control se
parece al propio marcado del control, pero sólo contiene
las propiedades que se desee establecer como parte del
tema. Por ejemplo, lo siguiente es una máscara de
control Button:
<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

Skin
Los archivos .skin se crean en la carpeta
Theme. Un archivo .skin puede contener una o
más máscaras de control para uno o más tipos de
control. Es posible definir un archivo de máscaras
independiente para cada control o definir todas las
máscaras para un tema en un archivo único.
Se debe colocar el atributo StyleSheetTheme en la
página donde se quiere usar el skin. Ejemplo
<%@ Page Language="C#“ StyleSheetTheme=“ArchivoSkin" %>

Skin
• Hay dos tipos de máscaras de control, máscaras
predeterminadas y máscaras con nombre:
• Una máscara predeterminada se aplica automáticamente a todos
los controles del mismo tipo cuando un tema se aplica a una
página. Una máscara de control es predeterminada si no tiene un
atributo SkinID.
• Una máscara con nombre es una máscara de controles con un
conjunto de propiedades SkinID. Las máscaras con nombre no se
aplican automáticamente a todos los controles según el tipo. En su
lugar, una máscara con nombre se aplica explícitamente a un
control estableciendo la propiedad SkinID del control. Al crear
máscaras con nombre, se pueden configurar diferentes máscaras
para distintas instancias del mismo control en una aplicación.
Cambiar Tema
Para cambiar el tema utilizando programación se debe de
utilizar el método Page_PreInit() y la propiedad Theme de
la clase Page. (Page.Theme) de la siguiente forma:
protected void Page_PreInit(object sender, EventArgs e)

{
this.Theme = “Nombre del Tema”;
}

Estilos de Aplicaciones Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Estilos de Aplicaciones Web

Încărcat de

Drepturi de autor:

Formate disponibile

ESTILOS EN

• La información de estilo puede ser adjuntada como un

1) Un estilo en línea (inline) es un método para insertar el lenguaje

3) Una hoja de estilo externa, es una hoja de estilo que está

<input type="submit" name="Submit"

<link rel="stylesheet" type="text/css" href="hoja.css">

Una clase se puede definir entre las etiquetas <STYLE>

.nombredelaclase {atributo: valor;atributo2:valor2; ...}

p { font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;}

#primero, #segundo, #tercero {

• Las propiedades que especifican explícitamente el

De manera predeterminada, los temas reemplazan la

<asp:button runat="server" BackColor="lightblue" ForeColor="black" />

<%@ Page Language="C#“ StyleSheetTheme=“ArchivoSkin" %>

protected void Page_PreInit(object sender, EventArgs e)

S-ar putea să vă placă și