Introducción al código CSS: Estándares de Diseño Front

Mexital I+D®

Introducción al código CSS:
Estándares de Diseño Front

HTML <div id =”content”></div>
CSS
#content { }

Desarrollado por Mexital I+D® para FullHosting© 2007

I+D

Mexital I+D®

Estructura de “div´s”
<body>
Programación Estándar <div id=”level_1”>

</div>

Note que nos centramos en el body de una página HTML o XHTML <div id=”level_2”>

Para comenzar se define el contenedor “level_1” éstas etiquetas pueden
, <div id=”level_2.1”>
recibir variados nombres pero de preferencia se usan en inglés:
</div>
“mainContent” “content” “menu” “navigation” entre otras.
, , , ,
<div id=”level_2.2”>
Note que “level_1” y level__2” están contenidos por el “body”“level_2.1” <div id=”level_2.2.1”>
y “level_2.2” están contenidos por “level_2” , finalmente “level_2.2.1”
es contenido por “level_2.2”.
</div>
Lo anterior corresponde a una estructura básica de “div`s” con la cual </div>
podemos tener una idea de cómo se van organizando los diferentes </div>
elementos del sitio. Pero no es precisamente CSS, todos estos div´s se
controlan desde un archivo .css que es independiente dentro del sistema </body>
de archivos del sitio.

Estructura básica de código html usando div`s

Mexital I+D®

“Cascading Style Sheets”
Código CSS y CSS2 body {
width :100%px
margin : 0px;
border : 0px
<head> padding: : 15%;
<title>Ejemplo </title> background-color : #FFF ;
color: :#000;
<link rel=”stylesheet” type=”text/css” href=”ejemplo.css”> text-align :justify;
</head>
}
Link en <head> de una página a su respectivo CSS

Tomaremos un archivo imaginario llamado ejemplo.css como base para
Ejemplo
introducir los controles CSS

En simples palabras dicho archivo está linkeado con cada página de un
sitio web como muestra el <head>. Gitandam adductustam in senteat oreis,
sente conve, crist? Bem dites, quamei popu-
Este código CSS se compone de diversos “Tags” que controlan en una blibus in viris host vicon iam P. Is. Ne conter-
primera instancia ( CSS ) texto, color y posicionamiento y en una se- feces coen tast orit, que conos st? Bi publis
gunda instancia ( CSS2 ) transparencias, menues depleglabes, diseño confirtua cus cesticam patque intem ia inte-
liquido e incluso algunas mucho más específicas. roressa demus? quamdit nonlostra publis-
tius lientri talicer nihilint, pubit, enitabus se
que tanum publica; Castebate ia mus huit,
A modo de aproximación en el ejemplo : “width” en porcentaje para
que el diseño sea liquido, “márgenes” y “bordes” en cero pixeles ( no se padding
muestran), “padding” : líquido, fondo: blanco, texto: negro, y justificado,
la barra de desplazamiento aparece cuando la altura no está especificado width
o sobrepasa la pantalla. borde y margen: 0

Mexital I+D®

Claves de Diseño Front <body>

Clases, a, li, span, ojo con <div id=”level_1” class=>

los Tags </div>

<div id=”level_2”>
<div id=”level_2.1”> <div id=”level_2.2”>
<div id=”level_2.1.1”>

Muchas variantes se pueden lograr con un buen uso del lenguaje CSS.
Una buena organizacion jerárquica define la estructura que se traduce
por medio de wireframes, éstos son a su vez son el esqueleto del diseño
y gracias a ellos se define que etiqueta o Tag le corresponde a cada </div> <div id=”level_2.2.1”>
elemento de la interface.
Existen estándares para CSS y CSS2 que nos permiten diseñar para todos
los navegadores que se manejan en la Web, algunos nos ayudan a </div> </div>
ordenar o crear sitios con diseños CSS dinámico para que cada página
tenga una distinción especial. </div>

Es primordial ser amante del código y desarollar a fondo las posibilidades <div id=”level_3”>
del CSS pues es el único medio de diseñar bajo el estándar mundial de
programación de sitios web a nivel profesional. </div>
</body>

Mexital I+D®

Fuentes
http://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo
http://www.w3.org/Style/CSS/
http://www.w3.org/Style/CSS/#specs

Institución
World Wide Web Consortium
http://www.w3c.es/

Gracias por su Atención
Desarrollado por Mexital I+D® para FullHosting© 2007

I+D

Introducción al código CSS: Estándares de Diseño Front

Recommandé

Recommandé

Contenu connexe

Similaire à Introducción al código CSS: Estándares de Diseño Front

Similaire à Introducción al código CSS: Estándares de Diseño Front (20)

Dernier

Dernier (20)

Introducción al código CSS: Estándares de Diseño Front