Uso de selectores CSS

CSS
Instrucciones que debe seguir un navegador para presentar la
información

viernes 27 de agosto de 2010

CSS
Separar al máximo la forma (presentación) y el fondo (datos)


SINTAXIS
como escribimos aquello que queremos visualizar


Selector: Etiqueta

¿Dónde?

body
{

background-color:#FFFFFF;
}


documento
body
{

background-color:#FFFFFF;
}


Selector: Identiﬁcador individual

¿Dónde?

#encabezado
{

background-color:#666666;
}

1
vez por documento


documento
#encabezado
{

background-color:#666666;
}

id

Selector: Identiﬁcador común

¿Dónde?

.datos
{

background-color:#00FFCC;
}

+1
vez por documento


documento
.datos
{

background-color:#00FFCC;
}

class

REGLAS BÁSICAS


JERARQUÍA
autor - usuario - navegador

<h1>Hola</h1>


JERARQUÍA
Hola
<h1>Hola</h1>


JERARQUÍA
Hola
<h1>Hola</h1>

h1
{
color:red;
}


ESPECÍFICO - GENÉRICO
<body>
<h1>Hola</h1>
<p>Contenido</p>
</body>


Hola
<body> Contenido
<h1>Hola</h1>
<p>Contenido</p>
</body>


Hola
<body> Contenido
<h1>Hola</h1>
<p>Contenido</p>
</body>

body
{
color:red;
}


Hola
<body> Contenido
<h1>Hola</h1>
<p>Contenido</p>
</body>

body
{
color:red;
}

p
{
color:blue;
}


SINTAXIS ESTRICTA
navegador omite deﬁnición
Hola
<body> Contenido
<h1>Hola</h1>
<p>Contenido</p>
</body>

BODY
{
color:red;
}


CONTENEDORES DIV
La etiqueta <div> o división de bloque es un elemento de html
utilizado para deﬁnir secciones de un documento.


COMO EXPLICAR UN DIV?


COMO EXPLICAR UN DIV?
Bueno, vamos a hacerlo gráﬁco: imaginen a los divs como cajas.


Tenemos el cuerpo de la página, y dentro de ella
metemos cajas y las ubicamos como queremos y
donde queremos.


VAYAMOS A ALGO MAS
GRÁFICO


El HTML de la página que armamos arriba sería:
<body>

<div>(header)</div>

<div>(barra lateral)</div>

<div>(nota 1)</div>

<div>(nota 2)</div>

<div>(footer)</div>
</body>


El HTML de la página que armamos sería:

<body>

<div>(header)</div>

<div>(barra lateral)</div>

<div>(nota 1)</div>

<div>(nota 2)</div>

<div>(footer)</div>
</body>


2 ATRIBUTOS BÁSICOS

ﬂoat
clear


float
La propiedad float permite sacar
a un elemento del flujo del
documento, y posicionarlo a la
izquierda o derecha de otros
elementos adyacentes. Admite
tres valores, right, left y none.


FLOAT
<div id=“caja1”>
1 1
</div>
2
2 3
</div>

3
</div>


FLOAT
1 1
</div>
2
2 3
</div>

3
</div>

#caja1
{
border-color:red
ﬂoat:left;
}


FLOAT
1
</div> 1 2
<div id=“caja2”> 1 3
2
</div>

3
</div>

#caja1
{
border-color:red
ﬂoat:left;
}


FLOAT
1
</div> 1 2
<div id=“caja2”> 1 3
2
</div>

3
</div>

#caja1
{
border-color:red
ﬂoat:left;
}
#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}


FLOAT
1
</div> 1 2 3
2
</div>

3
</div>

#caja1
{
border-color:red
ﬂoat:left;
}
#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}


clear
clear se utiliza conjuntamente con float para
indicar cuando un elemento flotante
permite otros elementos flotantes junto a el.

Sus posible valores son none, left right o
both.

none: el elemento permite otros flotantes a
ambos lados
left: el elemento no permite flotantes a su
izquierda
right: el elemento no permite flotantes a su
derecha
both: el elemento no permite flotantes a
ningun lado

CLEAR
1
</div> 1 2 3
2
</div>

3
</div>

#caja1
{
border-color:red
ﬂoat:left;
width:25px;
}
#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}

CLEAR
1
</div> 1 2 3
2
</div>

3
</div>

#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}
#caja3
{
width:25px;
clear:both;
}


CLEAR
1
</div> 1 2 3
<div id=“caja2”> 3
2
</div>

3
</div>

#caja2
{
border-color:blue
ﬂoat:left;
width:25px;
}
#caja3
{
width:25px;
clear:both;
}


EL RESTO ES PRACTICAR, Y ES
LO QUE VAMOS A HACER
AHORA.


Uso de selectores CSS

Recomendados

Recomendados

Más contenido relacionado

Más de iConstruye

Más de iConstruye (20)

Último

Último (20)

Uso de selectores CSS