Elementos básicos de HTML y CSS, elementos de lineas, elementos de bloques, etiquetas, posiciones, etc.

1. Basics
HTML-CSS
@agnamihira

2. <h1> Este es <strong> <strong> y aquí un otro de bloque </h1>
<h2> Hello World , other block </h2>
<p> Hello World
</p>www.helloworld.com
www.helloworld.com
(Elemento de linea)
(Elemento de linea)
(Elemento de bloque)
Bloque:
<p> <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<div>
<ul>, <ol>, <li>
<menú>, <dir>, <pre>, <hr>,
<blockquote>, <address>, <center>,
<noframes>, <isindex>, <fieldset>,
<table>, <form>
!Linea:
<a>, <br>, <span>, <bdo>, <object>,
<applet>, <img>, <map>, <iframe>, <tt>, <i>,
<b>, <big>, <small>, <u>, <s>, <strike>,
<Font>, <basefont>, <em>, <strong>, <dfn>,
<code>, <q>, <sub>, <sup>, <samp>, <kbd>,
<var>, <cite >, <abbr>, <acronym>, <input>,
<select>, <textarea>, <label>, <button>
float
right
float
left
*inherit:
El elemento toma el
valor declarado su padre
o ancestro más próximo.
(posicionamiento flotante del elemento)
tipo de elemento
HTML-CSS
(Elemento de linea)
otro bloque
Bloque Bloque Bloque Bloque Bloque
“Bloque y linea”
ins, del
“Subordinados”
Ni en bloque ni linea
caption tr th td thead tbody
tfoot col colgroup
li dd dl optgroup option, area,
param, legend
!
Padre
Hijo
div > div
(div)
(div)
Padre(div)
Hijo(span)
div>span

3. Margen*
contenidoborde
Color de background
relleno/padding*Imagen de background
Jerarquía de
Modelo de Cajas
CCS
*Elementos transparentes
@agnamihira
width
height
(menos imagenes)
margin
left
margin
bottom
margin top
margin right
padding top
padding bottom
padding right
padding left
border top width
border left width
border bottom width
border-top-color
border bottom color
border left color
border-color
border-style
color-background(url)
color image
background-position
background-attachment

4. id=div-2
posición estática
id=div-0
id=div-2
id=div-1
id=div-1a
id=div-1b
id=div-1c
id=div-0
id=div-1
id=div-1a
id=div-1b
id=div-1c
posición relativa
id=div-2
id=div-0
id=div-1
id=div-1a
id=div-1b
id=div-1c
posición absoluta
id=div-2
id=div-0
id=div-1
id=div-1a
id=div-1b
id=div-1c
posición relativa/absoluta
id=div-2
id=div-0
id=div-1 id=div-1a
dos columnas absolutas
id=div-2
id=div-0
float
(columnas de altura variable)
id=div-1
id=div-1b
id=div-1a id=div-1c
#div-1 {
position:static;
}
#div-1 {
position:relative;
top:20px;
left:-40px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}
#div-1a {
float:left;
width:200px;
}