<link href="ubicación" type="text/css" rel="stylesheet"/>
<link href=”ubicación” type=”text/css” media=”print” rel=”stylesheet”/> media: print | screen | tv | all
Las reglas @media son un tipo especial de regla CSS que permiten indicar de forma directa el medio o medios en los que se aplicarán los estilos incluidos en la regla. Para especificar el medio en el que se aplican los estilos, se incluye su nombre después de @media. Si los estilos se aplican a varios medios, se incluyen los nombres de todos los medios separados por comas.
A continuación se muestra un ejemplo sencillo:
@media print { body { font-size: 10pt } }
@media screen { body { font-size: 13px } }
@media screen, print { body { line-height: 1.2 } }
Inserción de la hoja de estilos dentro del código html:
<style>
h1 {
color: blue;
}
body {
background-color: red;
}
body p {
font-family: arial;
font-size: 16px;
}
</style>
Aplicando un estilo a los elementos ‘p’ de una clase, si estos elementos se encuentran entre las llaves de apertura y cierre del otro elemento:
.nombredelaclase p { background-color: red; font-size: 14px; }
Aplicando un estilo a los elementos ‘p’ de un id:
#nombredelaclase p { background-color: red; font-size: 14px; }
Se consigue aplicando un estilo a los hijos directos ‘p’ de una clase, se indica con la llave de apertura mayor que:
.nombredelaclase > p { background-color: red; font-size: 14px; }
Se aplica un estilo cuando el primer y segundo elemento comparten un mismo padre e inmediatamente al primer elemento le precede el segundo:
p + span { background-color: red; font-size: 14px; }
Se aplica un estilo solo si el primer y segundo elemento comparten un padre en común y si el segundo elemento va precedido por el primero:
p ~ span { background-color: red; font-size: 14px; }
| Elemento | Ejemplo | Qué hace |
|---|---|---|
| * | * | Selecciona todos los elementos. |
| #id | #lateral | Selecciona el elemento con id="lateral" |
| .class | .izquierdo | Selecciona todos los elementos con class="izquierdo" |
| elemento | p | Selecciona todos los elementos p |
| elem1,elem2 | div,p | Selecciona todos los elementos div y todos los elementos p |
| elem1 elem2 | div p | Selecciona todos los elementos p dentro de los elementos div |
| elem1>elem2 | div>p | Selecciona todos los elementos p cuyo padre es un elemento div |
| elem1+elem2 | div+p | Selecciona todos los elementos p que se colocan inmediatamente después de los elementos div |
| elem1∼elem2 | p∼ul | Selecciona cada elemento ul que está precedido por un elemento p |
| [atributo][destino] | Selecciona todos los elementos con un atributo de destino | |
| [atributo = valor] | [volumen = _alto] | Selecciona todos los elementos con volumen="_alto" |
| [atributo ∼= valor] | [titulo ∼= flor] | Selecciona todos los elementos cuyo valor de atributo titulo que contiene la palabra flor |
| [atributo | = valor] | [lang | = en] | Selecciona todos los elementos cuyo valor de atributo lang que comienza con "en" |
| [atributo ^= valor] | [href ^= "https"] | Selecciona cada elemento a cuyo valor del atributo href comienza con "https" |
| [atributo $= valor] | [href $= ".pdf"] | Selecciona cada elemento a cuyo valor de atributo href finaliza con ".pdf" |
| [atributo *= valor] | a[href *= "hola" | Selecciona cada elemento a cuyo valor de atributo href contiene la subcadena "hola" |
| :active | a:active | Selecciona el enlace activo |
| ::after | p::after | Insertar algo después del contenido de cada elemento p |
| ::before | p::before | Insertar algo antes del contenido de cada elemento p |
| :checked | input:checked | checked selecciona cada elemento input marcado |
| :enabled | input:enabled | enabled selecciona cada elemento input habilitado |
| :disabled | input:disabled | disabled selecciona cada elemento input deshabilitado |
| :empty | p:empty | Selecciona cada elemento p que no tiene hijos, incluidos los nodos de texto |
| :first-child | p:first-child | Selecciona cada elemento p que es el primer hijo de su padre. |
| ::first-letter | p::first-letter | Selecciona la primera letra de cada elemento p |
| ::first-line | p::first-line | Selecciona la primera linea de cada elemento p |
| :first-of-type | p:first-of-type | Selecciona cada elemento p que es el primer elemento p hijo de su padre |
| :focus | input:focus | Selecciona el elemento de input que tiene el foco |
| :hover | a:hover | Selecciona enlaces en el mouse al pasar el puntero por encima |
| :last-child | p:last-child | Selecciona cada elemento p que es el último elemento hijo de su padre |
| :last-of-type | p:last-of-type | Selecciona cada elemento p que es el último elemento p hijo de su padre |
| :link | a:link | Selecciona todos los enlaces no visitados |
| :visited | a:visited | Selecciona todos los enlaces visitados |
| :not(selector) | :not(p) | Selecciona cada elemento que no es un elemento p |
| :nth-child(n) | p:nth-child(2) | Selecciona cada elemento p que es el segundo hijo de su padre |
| :nth-last-child(n) | p:nth-last-child(2) | Selecciona cada elemento p que es el segundo hijo de su padre, contando desde el último |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selecciona cada elemento p que es el segundo elemento principal, contando desde el último elemento secundario |
| :nth-of-type(n) | p:nth-of-type(2) | Selecciona cada elemento p que es el segundo elemento p hijo de su padre |
| :only-of-type | p:only-of-type | Selecciona cada elemento p que es el único de su tipo sin ningun otro elemento. |
| :only-child | p:only-child | Selecciona cada elemento p que es el único elemento hijo de su padre |
| ::selection | ::selection | Selecciona la parte de un elemento que selecciona un usuario(::-moz-selection en Firefox, ::-webkit-selection en Chrome) |
| Propiedad | Función |
|---|---|
| width | Define el ancho |
| height | Define el alto |
| box-sizing: border-box; | Incluye padding y bordes en el tamaño |
| position: relative, absolute, fixed | Coloca la caja de forma relativa, absoluta o fija |
| top, bottom, left, right | Se usan con position para desplazar la caja |
| z-index: 1; | A mayor valor, más encima está el elemento |
| display: inline, block, inline-block | Tipo de visualización de los elementos |
| visibility: visible, hidden, collapse, flex, grid, none | Visibilidad del elemento |
| overflow: visible, hidden, scroll, auto, inherit | Define cómo se visualiza el contenido que hay en la caja |
| Propiedad | Función |
|---|---|
| background-attachment: scroll, fixed | La imagen se mueve con la página o se queda fija |
| background-image: url("imagen.jpg"); | Colocar una imagen |
| background-repeat: repeat, repeat-x, repeat-y, no-repeat | Repetición de la imagen |
| background-color: #0000; | Define el color de fondo |
| opacity: 0.6; | Define la opacidad. De 0 a 1 |
| Propiedad | Función |
|---|---|
| float: none, left, right; | La imagen flota hacia ese lado |
| clear: none, left, right, both | Controla el comportamiento de los elementos adyacentes a elementos posicionados de forma flotante |
| Propiedad | Función |
|---|---|
| font-family: Arial, Sans-serif; | Define la fuente que va a emplear el texto |
| font-size: 12px, 1.5em, 2% | Define el tamaño de la fuente |
| color: #00000; | Define el color del texto |
| font-weight: bold, bolder, 100, 200.. | Define el grosor de la fuente |
| text-transform: uppercase, capitalize, lowercase | Mayúsculas, primera mayúscula y minúsculas |
| line-height: 12px, 1em | Define la separación entre líneas |
| text-indent: 10px; | Define el sangrado del texto |
| text-align: left, center, right, justify | Alineación horizontal del texto |
| vertical-align: baseline, sub, super, top, middle, bottom | Alineación vertical del texto |
| Propiedad | Función |
|---|---|
| border-color: red; | Define el color del borde |
| border-width: 2px; | Define el ancho del borde |
| border-style: solid, dotted, dashed, double, groove, ridge, inset, outset | Tipo de borde |
| border: 2px solid blue; | Modo abreviado para definir el borde |
| border-radius: 10px; | Define el borde redondo |
| border-top-left-radius: 10px; | Borde superior izquierdo redondo |