Mexital I+D®

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

                       HTML   <div id =”content”></d...
Mexital I+D®

Estructura de “div´s”
                                                                           <body>
Prog...
Mexital I+D®

“Cascading Style Sheets”
Código CSS y CSS2                                                             body ...
Mexital I+D®

Claves de Diseño Front                                                       <body>


Clases, a, li, span, o...
Mexital I+D®




Fuentes
http://www.w3c.es/Divulgacion/Guiasbreves/HojasEstilo
http://www.w3.org/Style/CSS/
http://www.w3....
Próxima SlideShare
Cargando en…5
×

Mexital Css

450 visualizaciones

Publicado el

CSS short class

Publicado en: Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
450
En SlideShare
0
De insertados
0
Número de insertados
5
Acciones
Compartido
0
Descargas
3
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Mexital Css

  1. 1. 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
  2. 2. 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
  3. 3. 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
  4. 4. 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”> <div id=”level_2.2.1”> Muchas variantes se pueden lograr con un buen uso del lenguaje CSS. <div id=”level_2.2.1”> 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. <div id=”level_2.1.2”> <div id=”level_2.2.1”> 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>
  5. 5. 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

×