Selectores de ID

Tabla de contenidos Selectores de ID Para el ejercicio crear una imagen en Fireworks Ejercicio configuracin estructura del sitio Ejercicio
ercicio configuracin estructura del sitio1 Ejercicio configuracin estructura del sitio3 Ejercicio configuracin estructura del sitio 4 Ejercicio configuracin estructura de sitio
SELECTORES DE ID
Es un selector ms eficiente que uno de clase, ya que permite aplicar estilos a un nico elemento de la pgina a travs de su atributo ID. Este tipo de selectores solo seleccionan un elemento de la pgina, porque el valor del atributo ID no se puede repetir en dos elementos diferentes de una misma pgina. La sintaxis de los selectores ID es muy parecida a los selectores de clase, salvo que se utiliza el smbolo de la almohadilla (#) en vez del (.) como prefijo del nombre de la regla CSS. #destacado{color=red;} <p> Primer prrafo</p> <p id="destacado"> Segundo prrafo</p> <p> Tercer Prrafo</p> El selector #destacado solamente selecciona el segundo prrafo.
La principal diferencia entre el selector de ID y de clase tiene que ver con HTML y no con CSS, En una misma pgina el valor del atributo ID debe ser nico. El atributo class no es obligatorio que sea nico, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. Por tanto la recomendacin es aplicar selector ID cuando se quiere aplicar un estilo a un solo elemento especfico de la pgina y utilizar el selector de clase cuando se quier aplicar un estilo a varios elementos diferentes de la pgina HTML.
Restringir el alcance del selector ID Podra parecer absurso, pero tiene sentido cuando el archivo CSS se aplica sobre algunas pginas HTML diferentes. Ejemplo p#aviso{color:blue;} pueden haber algunas pginas que tengan el atributo ID pero que no sean prrafos. No confundir el selector ID con los selectores anteriores. /* Todos los elementos de tipo "p" con atributo id="aviso"*/ p#aviso{color:blue;}
/*Todos los elementos con atributo id="aviso" que estn dentro de cualquier elemento de tipo "p"*/
p #aviso{...;} /*Todos los elementos "p" de la pgina y todos los elementos con atributo id="aviso" de la pgina*/ p, #aviso{...}
CREAR UNA IMAGEN EN FIREWORKS
Utiliza Con Crear
esta esta un
imagen
para
el
body
puedes
crear
tu
propia le
imagen
en
fireworks Sitio2 archivos
imagen Crear Index.HTML, un
un nuevo sitio, archivo template.css
llamaremos enlazar los
Los Selectores ID sirven para la maquetacin de la pgina web, es decir diseo y espacios en la pgina. son la base del diseo estructural. Comensaremos con el Diseo del Body.....
CONFIGURACIN ESTRUCTURA DEL SITIO El primer paso es configurar el body, el diseo que pongamos en el body es estructural, quiere decir que conforma la base del diseo. body { font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #003366; background-color: #FFFF99; background-image: url(../Im%C3%A1genes/bgbody.jpg); background-repeat: repeat-x; text-align: justify; width: 960px; margin-top: 0px; margin-right: auto; margin-left: auto; } En esta defincin hubieron puntos a considerar:
1. En la definicin del fondo se especifi el color y una imagen muy liviana de fondo la cual se la repite en el eje de las x.
2. Fijense como configuro el cuadro del body.
Hasta el momento:
Muy bien continuemos!! EJERCICIO CONFIGURACIN ESTRUCTURA DEL SITIO 1 Insertemos los div necesarios, lo hacemos de la siguiente manera:
De esta forma inserta todos los div sigientes: <body> <div id="wrapper"> <div id="header">Colocar aqu el contenido para id "header"</div> <div id="mainbody"> <div id="menuleft">Colocar aqu el contenido para id "mainbody"</div> <div id="contenido">Colocar aqu el contenido para id "contenido"</div> </div> </div> <div id="footer">Colocar aqu el contenido para id "footer"</div> </body>
con esto hemos maquetado, en forma simple la pgina. Si estas aqu muy bien felicitaciones!!
EJERCICIO CONFIGURACIN DEL SITIO WRAPPER O CUERPO Se define su ancho pero no es necesario definir al alto. margin en auto es para que se centre. al fondo del cuerpo lo hacemos blanco. el wrapper sigue siendo estructural.
#wrapper { background-color: #FFF; margin: auto; width: 960px; } header y footer los definimos de un ancho de 960 con un alto de 100. En el caso de footer es importante un clear: both para que se ubique debajo de todo elemento.
#header { height: 100px; width: 960px; background-color: #06C; } #footer {
background-color: #06C; clear: both; height: 100px; width: 960px; } He colocado un texto tanto en el encabezado como en el footer, he creado un selector de Etiqueta h1 y lo aplico a ellos.
h1 { font-family: "MS Serif", "New York", serif; font-size: 24px; font-style: italic; font-weight: bold; color: #FFF; text-align: left; margin: 20px; } resultado: lo normal es en el encabezado colocar una imagen y en el pie colocar otros cuadros para organizar asuntos como derechos reservados, sguemme, etc
CONFIGURANDO EL SITIO MAINBODY(MEN IZQUIERDO + CONTENIDO), MEN DERECHO Estas cajas se encuentran al mismo nivel, la suma de los dos anchos deber ser igual al ancho
de su contenedor MainBody Entonces tenemos 960 px de ancho del wrapper. mainbody tendr 760 px ( 200 px para el men izquierdo) (560 px para el contenido) men derecho 200 px 200 +560 +200 ----------960 px Considerando que estas cajas no tienen definidos bordes ni padding. (luego hablaremos de ello. Men y contenido es mampostera. Por tanto las definiciones de mainbody, menizquierdo y menu derecho son: Coloquemos texto y contenido en el contenido, hasta el momento quedra as:
Fijmonos que el formato del texto lo hered de body.
he agregado estos estilos para los ttulos del cuerpo.
#contenido h1 { color: #FF6600; font-size: 24px; } h2 { color: #993300; font-size: 18px; } h4 { font-size: 11px; color: #333333; } Arreglo la Imagen: creamos una clase img1 le flotamos a la izquierda para que el texto suba.y le dejamos un margen de 10 px para que se separe del texto. asignamos a la imagen la clase .img1 { margin: 10px; float: left; }
El resultado hasta aqu ser :
EJERCICIO CONFIGURACIN ESTRUCTURA DEL SITIO
BOTONES PARA EL MENU IZQUIERDO Todos sabemos que el men{u izquierdo lo haremos con botones del tipo link, para eso deberamos hacer una reglla para la marca a pero como esto afectara a todas las marcas a del sitio y solo necesitamos para el menleft entonces hacemos una selector compuesto solo para este lado. #menuleft a { font-size: 11px; line-height: 20px; font-weight: bold; color: #FFFFFF; text-decoration: none;
background-color: #06C; text-align: center; float: left; height: 20px; width: 150px; margin-top: 3px; } con text -decoration : none se est eliminando el subrayado de la marca a, con line-height es altura de lnea. margin top es la separacin entre botones. En menu left escribe Botn 1 Botn2 Botn 3 marca cada uno y asigna una link www.hotmail.com (propiedades), as{i para los 3 botones. como ya fu creada el selector compuesto, El resultado sera:
Para crear el Roll over del botn. crear la clase compuesta #wrapper #mainbody #menuleft a:hover { color: #009; background-color: #999; }

Selectores de ID

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Selectores de ID

Transféré par

Droits d'auteur :

Formats disponibles

Tabla de contenidos Selectores de ID Para el ejercicio crear una imagen en Fireworks Ejercicio configuracin estructura del sitio Ejercicio

CREAR UNA IMAGEN EN FIREWORKS

Utiliza Con Crear

fireworks Sitio2 archivos

imagen Crear Index.HTML, un

un nuevo sitio, archivo template.css

llamaremos enlazar los

2. Fijense como configuro el cuadro del body.

#header { height: 100px; width: 960px; background-color: #06C; } #footer {

Fijmonos que el formato del texto lo hered de body.

he agregado estos estilos para los ttulos del cuerpo.

El resultado hasta aqu ser :

EJERCICIO CONFIGURACIN ESTRUCTURA DEL SITIO

Vous aimerez peut-être aussi