LABORATORIO #4
1.¿Que es un CSS?
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.


2.¿Para que sirve un CSS?

CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.



3.¿Que elementos necesita el CSS para que funcione?


CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Las tres formas más conocidas de dar estilo a un documento son las siguientes:

Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento , el cual debe ir situado en la sección .
(!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN")
(html)
(head)
(title>Título (link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" /)
(/head)
(body)
(/body)
(/html)


4 ¿Que variante puede tener la etiqueta div cuantos tiene su CSS?



(DIV ALIGN=LEFT)
Texto justificado a la izquierda, texto justificado
a la izquierda, texto justificado a la izquierda,
texto justificado a la izquierda.
(/DIV)
(DIV ALIGN=RIGHT)
Texto justificado a la derecha, texto justificado
a la derecha, texto justificado a la derecha,
texto justificado a la derecha.
(/DIV)
(DIV ALIGN=CENTER)
Texto centrado, texto centrado, texto centrado,
texto centrado, texto centrado, texto centrado.
(/DIV)

DIV de nuesto CSS
1.(div id="page")
(div id="header")
(h1)(a href="#")LABORATORIO #4(/a)(/h1)

(div class="description")CHATO Y POLLITA(/div)

2.div id="menulinks")
(a class="active" href="#")(span)INICIO(/span)(/a)
(a href="#")(span>EXTENCIO1/(span)(/a)
(a href="#")(span>EXTENCION2(/span)(/a)
(a href="#")(span>EXTENCION3(/span)(/a)
(/div)

3.
(div id="mainarea")
(div id="contentarea")
(h2)Que es un CSS(/h2)
el css es la extencion del style y comunmente se le asogna un servidor grafico para que lo elabore. (a href="http://www.free-css-templates.com/")(/a)
(h2)ELEMENTOS PARARA QUE EL CSS FUNCIONE(/h2)

(/div)

4.(div id="sidebar")
(h2)TESTIMONIALS(/h2)
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(br/)(br/)
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(br/)(br/)
(strong)Joe Bloggs(/strong)
(/div)(/div)

5.(div id="footer")
Designed by (a href="http://www.free-css-templates.com/")Free CSS Templates(/a), Thanks to (a href="http://www.injuryexperts.com/")Personal Injury Attorney(/a)
(/div)

6.(div id="page")
(div id="header")
(h1)(a href="#")LABORATORIO #4(/a)(/h1)

(div class="description")CHATO Y POLLITA(/div)
(/div)

dd(


(div id="mainarea")
(div id="contentarea")
(h2)Que es un CSS(/h2)
el css es la extencion del style y comunmente se le asogna un servidor grafico para que lo elabore. (a href="http://www.free-css-templates.com/")(/a)
(h2)ELEMENTOS PARARA QUE EL CSS FUNCIONE(/h2)
(/div)

(div id="sidebar")
(h2)TESTIMONIALS(/h2)
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(br/)(br/)
Lorem ipsum dolor sit amet, consectetur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
(br/)(br/)
(strong)Joe Bloggs(/strong)
(/div)(/div)

(div id="footer")
Designed by (a href="http://www.free-css-templates.com/")Free CSS Templates(/a), Thanks to (a href="http://www.injuryexperts.com/")Personal Injury Attorney(/a)
(/div)


(/div)

5.¿Que palabra reservada se utiliza para que la etiqueta img tenga altura y ancho. EJEMPLO:

WIDTH es para el ancho de laimagen.
HEIGHT es para el largo de laimagen.
TOP sirve para darle alineacion superior al texto respecto al lineage.
BLOCKQUOTE sirve para bloques tabulados.
ALING nos alinea el texto segun lo pidamos.

7. Haga un mapa conceptual de su página web utilizando las palabras reservadas abriendo y cerrando sus etiquetas que se utilizaron en su pagina html.

c//
< .html. >
< .head. >
< .meta. "contenido de la pagina / >
< .title. > titulo de la pagina < /.title. >
< /.head. >
< .body. >
Incluye toda nuestra pagina web
< .div. >
Incluyen todas las divisiones de nuestra pagina
< /.div. >
< .h2 class="title". >Titulo de nuestra division< /.h2. >
< .p class="date". > Incluye la hora y fecha < /.p. >
< .div class="entry". > Abarca todo lo que ira dentro de nuestra división
< .p. > Texto < /.p. >
< /.div. >
< .!-- end #sidebar -->.
< .div style="clear: both;". > < /.div. >
< /.div. >
< .div id="bottom-bg". >< .img src="images/img07.gif" alt="" /. >< /.div. >
< .!-- end #page -->.
< .div id="footer". >
< .p. >Copyright (c) 2008 Sitename.com. All rights reserved. Design by < .a href="http://www.freecsstemplates.org/">Free CSS Templates< /.a. >
< /.div. >
< .!-- end #footer -->.
< /.div.>
< /.body. >
< /.html. >

8.¿como se edita una imagen del CSS?
Para editar la imagen se presiona click derecho y abrir con paint y uno mismo la edita a su gusto.