Republica Bolivariana de Venezuela      Ministerio del Poder Popular para la Educación Universitaria            Instituto ...
Css, es una tecnología que le permite            al programador darle una variedad de            estilos a un documento we...
Css posee una sintaxis muy sencilla de manejar los estilos o  capas,    usando las siguientes palabras:   Selector, Atribu...
Body {                     Estilo General                   Background‐color:#00cc99;                                     ...
Formas De Usar CSS      In Line (en línea)              Hoja de estilo Interna.                                   <html>  ...
/*Hoja de estilo*/                                            Hoja de Estilo ExternaBody{background‐color:#909;}         P...
El elemento DIV (Divisor) es de tipo bloque que actúa como   contenedor, para estructurar de manera mas sencilla , dinámic...
/*style.css*/#banner {          position:absolute;          width:670px;          height:115px;            <html>         ...
Upcoming SlideShare
Loading in …5
×

Css

378 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
378
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css

  1. 1. Republica Bolivariana de Venezuela Ministerio del Poder Popular para la Educación Universitaria Instituto Universitario de Tecnología de YaracuyPonente:     López Adrian
  2. 2. Css, es una tecnología que le permite al programador darle una variedad de estilos a un documento web separando la estructura de su contenido.Cascade Este método le ofrece a los desarrolladores el control Style total del formato de sus documentos. Sheets
  3. 3. Css posee una sintaxis muy sencilla de manejar los estilos o  capas,  usando las siguientes palabras: Selector, Atributo y el Parámetro.  se estructura  la hoja de estilo.Selector: elemento al queSe le aplicaran los estilos. Body { Background‐color:   #cc00ff;  }Atributo:  características  queQue componen cada estilo.Parámetro: es el valor queSe le pasa al atributo.
  4. 4. Body { Estilo General Background‐color:#00cc99; } Estilo con  “id” #titulo { define un estilo  font‐family:Arial;Uso de los estilos único para un color:#00cc99; elemento } p.párrafo { Estilo con  “Class” Font‐Family:Arial; Especifica la clase de  color:#f25; estilo a la cual  text‐align:justify; pertenece elemento }
  5. 5. Formas De Usar CSS In Line (en línea) Hoja de estilo Interna. <html> <head><html> <title>Documento 1</title><head> <style type=“text/css”><title>Documento 1</title> P{ Color:#000;</head> Font‐Family:arial;<body> }<p  style=“Font‐Family:Arial;”> </style>Esto es CSS in line </head></p> <body></body> <p>Esto es CSS interno</p></html> </body> </html>
  6. 6. /*Hoja de estilo*/ Hoja de Estilo ExternaBody{background‐color:#909;} Para trabajar una hoja de estilo .titulo{ De manera externa  se usa una línea Font‐Family:Arial; de código dentro de la  cabecera color:#000; Que vincula el html con el css. text‐align:center;} <html>#cont{ <head> <title>Documento 1</title> text‐align:left; <link rel=“stylesheet” href=“stylo.css”  color:blue; type=“text/css”> Font‐Family:arial; </head>} <body> <h1 class=“titulo”> CSS </h1> <p id=“cont”>La hoja  de estilo se debe guardar Así ce trabaja una hoja de estiloCon la extensión “.css” externaEjemplo: </p> </body> stylo.css </html>
  7. 7. El elemento DIV (Divisor) es de tipo bloque que actúa como contenedor, para estructurar de manera mas sencilla , dinámica y practica un documento web Su sintaxis:  va inmerso dentro Del código html y su estructura es  la Siguiente: <div> </div> <div id=“Capa 1”> Banner Titulo</div> B O<div id=“Capa2”> T Botonera O</div> N Contenido E<div id=“Capa3”> R Contenido A</div>
  8. 8. /*style.css*/#banner { position:absolute; width:670px; height:115px; <html> z‐index:1; <head> left: 161px; <title>Usando capas</title> top: 1px; link rel=“stylesheet” href=“style.css” type=“ text/css”   background‐color:#0C6; media=“all”>} </head>#contenido { <body> position:absolute; <div id="apDiv1"><h1>TITULO(BANNER)</h1></div> width:672px; <div id="apDiv3"><h1>CONTENIDO</h1></div> height:444px; </body> z‐index:3; </html> left: 160px; top: 118px; background‐color:#0CF;}

×