Selectores
Selector universal Todos los elementos de la página * { …. } | p * span{ …. }
Selector de tipo o Elementos de la página cuya etiqueta p { …. } | span { …. } | h1 { …. }
etiqueta HTML coincide con el valor del selector
elementos que se encuentran dentro de p em { …. } | h1 strong { …. }
Selector descendente
BÁSICOS otro elemento
Selector de clase Los que tienen un atributo class concreto .importante { …. } | h2.precio { …. }
Selectores de ID Los que tienen un atributo ID concreto #titulo { …. } | div#titulo { …. }
Cualquiera de los que están separados por P, span, h1 strong { …. }
Cualquiera de la lista
comas
Selectores de hijos hijos directos de otro elemento p>a{…}
elementos que se encuentran justo a h1 + h2 { ...}
Selector adyacente
AVANZADOS continuación de otros elementos
en función de sus atributos y/o valores de a[class"]{ …} | a[class="externo"]{ …}
Selector de atributos
esos atributo
Definir CSS en HTML
<style type="text/css">
En el mismo documento p { color: black; font-family: Verdana; }
</style>
<head>
<title>CSS en un archivo externo</title>
En un archivo externo
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
En los elementos HTML <p style="color: black; font-family: Verdana;">Un párrafo de texto.</p>
</body>
MODELO DE CAJAS
BORDES
CONTENIDO MÁRGEN RELLENO FONDO
Anchura (width) Color (color) Estilo (style) Shorthands
Width margin padding border-width border-color border-style border background
Height margin-top, padding-top border-top-width border-top-color border-top-style border-top background-color
margin-right, padding-right border-right-width border-right-color border-right-style border-right background-image
margin-bottom padding-bottom border-bottom-width border-bottom-color border-bottom-style border-bottom background-repeat
margin-left padding-left border-left-width border-left-color border-left-style border-left background-attachment
background-position
POSICIONAMIENTOS
ESTÁTICO RELATIVO ABSOLUTO FIJO FLOTANTE Romper flotante
No se pone position: relative position: absolute position: fixed float: (left,rigtht) clear: (left,rigtht, both)
nada top, bottom, right, left top, bottom, right, left top, bottom, right, left Mantiene flujo solo
Respecto a elemento Respecto a primer Respecto a body para flotantes.
Mantiene flujo ancestro posicionado NO mantiene flujo
NO mantiene flujo Siempre en el mismo sitio
VISUALIZACIÓN
DISPLAY VISIBILITY OVERFLOW Z-INDEX
display: visibility: overflow: z-index:
none visible visible auto
inline hidden hidden número
block collapse scroll
inline-block auto
TEXTO (formato de Fuente)
font-style font-variant
Color font-family font-size font-weight
display: Nombre de familia Tamaño absolute normal, bold, normal, italic, normal, small-
color Nombre genérico Tamaño relativo bolder, lighter, 100, oblique caps
200, 300, 400, 500,
600, 700, 800, 900
TEXTO (avanzado)
text- text- vertical-align text- letter-spacing white-space pseudo-
text-align line-height
decoration transform indent word-spacing elementos
left Interlineado none uppercase baseline middle Unidad Unidad de normal :first-line
right underline lowercase sub bottom de medida pre :first-letter
center overline capitalize super text-bottom medida nowrap
justify line-through top porcentaje pre-wrap
blink text-top unidad de medida pre-line
