HTML y XHTML

Una pgina web medianamente conformada debe

tener las capas de
presentacin
(css),
contenido
(html)
y
comportamiento (js).
Para prrafos.
<p></p>
Para encabezados o titulos.
* La x indica la prioridad es decir, mayor
tamao y peso y va de 1 a 6
<hx></hx>
Enlaces. Para ir de una pgina a otra (Link).
Este elemento no est permitido fuera de los
elementos
p, * hx, div, pre, address, fieldset, ins, del
<a></a>
Listas desordenadas (Colocan puntos al inicio
de cada valor). Pueden ser compuestas:
<ul>
<li> elemento n </li>
<li> elemento n </li>
<ul/>
Listas ordenadas (Colocan nmeros al inicio de
cada valor). Pueden ser compuestas:
<ol>
<li> elemento n </li>
<li> elemento n </li>
<ol/>
Enfatizar texto en la pgina, algo as como
negrita.
<strong></strong>
Estructurar elemento en bloques y lineas.
En bloque
<div></div>
En lnea
<spam></spam>

CSS
Los estilos locales o internos se emplean
directamente sobre los tag de las pginas.
Dentro de un .css S se puede usar otro .css,
y esto se logra importando el segundo .css.
Ejm:
@import url("nombreCss.css");
Importar hojas de estilos para todos los
dispositivos.
<link
rel="stylesheet"
type="text/css"
href="../../comunes/css/generales.css"
media="all" />
Importar hojas de estilos para dispositivos
con salida por pantalla.
<link
rel="stylesheet"
type="text/css"
href="../../comunes/css/globales.css"
media="screen" />

Importar hojas de estilos para impresin.

<link
rel="stylesheet"
type="text/css"
href="../../comunes/css/impresion.css"
media="print" />
Importar hojas de estilos para dispositivos
mviles.
<link
rel="stylesheet"
type="text/css"
href="../../comunes/css/movil.css"
media="handheld" />

SELECTORES
Selector universal * y es para aplicarle las
caractiristcas de una regla a todos los
elementos de una pgina.
* {
margin: 0;
padding: 0
}
Selector de tipos (p, hx, div, etc...)
p {
margin: 0;
padding: 0;
}
<p>Prueba</p>
Selectores de clase. Se aplican directamete
sobre los tags en base a su atributo.
p.intro {
margin: 0;
padding: 0;
}
<p class="intro">Prueba</p>
Selector de id. Los id de una pgina deben ser
nicos en dicha pgina. Intro sera el id de
un elemento de la pgina.
p#intro {
margin: 0;
padding: 0;
}
<p class="intro">Prueba</p>
Selector en grupo. Se puede aplicar el mismo
estilo a varios tipos de tags.
p, div, ul {
margin: 0;
padding: 0;
}
<p>...</p>
<div>...</div>
<ul>...</ul>
Selector descendente. Aplica las propiedades
de una regla a los elementos que estn dentro
de otro elemento.
div p {
margin: 0;
padding: 0;
}
<div>
<p>...</p>
</div>

Selector hijo. Aplica las propiedades de una

regla
a
los
elementos
que
sean
hijos
inmediatos.
En el siguiente ejemplo vemos que aplica solo
para <a href="">...</a>
div>a {
margin: 0;
padding: 0;
}
<div>
<a href="">...</a>
<p>
<a href="xxxxx">yyyyy</a>
</p>
</div>
Selector adyacente. Aplica las propiedades de
una regla a los elementos inmediatamente
precedidos por un elemento hermano. En el
ejemplo aplica solo a los dos ltimos
prrafos.
p+p {
margin: 0;
padding: 0;
}
<p>...</p>
<p>...</p>
<p>...</p>
LINKS
Selector
pseudo-clase
:link.
Aplica
las
propiedades de una regla a los links no
visitados.
a:link {
color: blue;
text-decoration:underline;
}
<a>...</a>
Selector pseudo-clase :active.
propiedades
de
una
regla
a
visitados.
a:active {
color: red;
}
<a>...</a>

Aplica las
los
links

Selector pseudo-clase :hover. Aplica las

propiedades de una regla a los elementos
cuando nos posicionamos sobre ellos.
a:hover {
text-decoration: none;
}
<a>...</a>
Selector pseudo-element :firts-line. Aplica
las propiedades de una regla a los contenidos
de la primera linea formateada del elemento.
p:firts-line {
background: red;
}
<p>...</p>
Selector pseudo-element :firts-letter. Aplica
las propiedades de una regla a la primera letra
de un elemento.

p:firts-letter {
color: red;
font-size: 30px;
}
<p>...</p>
Selector pseudo-element :before. Insertar
contenido generado antes de un elemento.
a:before {
content: "Tu perfil";
}
<a>...</a>
Selector
pseudo-element
:after.
Insertar
contenido generado despues de un elemento.
li:after {
content: ". ";
}
<ul>
<li>...</li>
...
</ul>
HERENCIA
Sobre el body. Se aplica a todos los elementos
dentro del body, excepto los links y quiz
otro mas...
body {
color: red;
}
Sobre los id. Todos los elementos dentro del
div heredaran del div#idCosa.
div#idCosa {
color: black;
text-decoration: underline;
font-size: 18px;
}
ORDEN DE LECTURA DE LAS CLASES
Mientras ms interno sea aplicada la regla css
tendr ms prioridad que las ms externas. En
otras palabras, las reglas ms internas sobre
escriben a las ms externas. Ejm:
Punto 1.
<p
style=
background:
black;
color:
white;></p>
Punto 2.
<head>
<style tipe=text/css>
P {
background: black;
color: white;
}
</style>
</head>
Punto 3.
Archivo.css
P {
background: black;
color: white;
}

De acuerdo a lo dicho, si se aplicasen todos

los 3 puntos sobre una misma pgina el que
finalmente ser mostrado ser el nmero 1.
Porque es el ms interno de los tres y sobre
escribir a los otros (2 y 3)
PESO DE LOS SELECTORES DE CLASE Y DE TIPO
Un selector de id tiene mayor peso que un
selector de tipo, al igual que un selector de
clase tiene mayor peso que un selector de tipo.
R1. Selector de tipo.clase.
p.uno {
color: lime;
}
R2. Selector de tipo.
p {
color: red;
}
R3. Selector de tipo.id.
p#dos {
color: blue;
}
R4.Selector de tipo.id.clase.
p#tres.uno {
color: purple;
}
Linea
Linea
Linea
Linea

1.
2.
3.
4.

<p id="tres" class="uno">...</p>

<p id="dos">...</p>
<p class="uno">...</p>
<p>...</p>

A los prrafos se les aplicarn los colores de

acuerdo a las reglas de cada regla (R1, R2,
R3, R4).
Aunque haya una regla "general" (R2) que
podra ser aplicada en todas las lneas (1, 2,
3 y 4) solo se aplicar sobre la lnea 4.
La regla R3 se aplicar solo sobre la lnea 2.
La regla R1 se aplicar solo sobre la lnea 3.
Y la regla R4 solo se aplicar sobre la lnea
1.

PROPIEDADES DE LOS ELEMENTOS

DISPLAY
Tipo de caja del elemento o la forma en cmo
se va a mostrar un elemento por pantalla.
Algunas de sus propiedades son block, inline,
none.
Block
Hace que el elemento genere un bloque (un
cuadrado) y un conjunto de elementos en bloque
se agrupan verticalmente.
Inline
Hace que el elemento genere una o ms lneas.
Estos elementos se agrupan horizontalmente.
None
Hace que el elemento no se muestre.
Ejm:

R1.
p {
Border: 1px solid red;
}
R2.
span {
border: 1px solid green;
}
R3.
P#block span {
display: block;
}
<body>
<h1>Display: block,
<h1>Block</h1>
<p id=block>
<span>Elento
<span>Elento
<span>Elento
<span>Elento
</p>
</body>

inline y none</h1>
1</span>
2</span>
3</span>
4</span>

Los elementos spam son inline, por lo que se

agrupan horizontalmente: