css

Aprende-Web

Resumen del Manual de CSS

Resumen CSS
Este es un resumen de lo visto en el manual de CSS de Aprende-Web.
http://aprende-web.net/css

Selectores y otros elementos.
Selectores básicos
* : Selector universal. Afecta a toda la página.
h1 : Selector de etiqueta. Afecta a todas las etiquetas con ese nombre.
.clase : Selector de clase. Afecta a una clase marcada mediante class="clase".#idUnico : Selector de id. Afecta a toda la etiqueta marcada mediante
id="idUnico".

Agrupación de selectores
h1, h2, h3 : Combinación de selectores. La regla se aplica a todos los selectores
indicados.
p b : Selector descendente. La regla se aplica a la última etiqueta si está englobada
en las anteriores .
p.tipo1 : selector de etiqueta de clase. La regla se aplica la etiqueta si lleva el
atributode clase (

).
p < em : Selector de hijos. Se aplica al segundo si es hijo directo del primero.
elemento1 + elemento2 : Selector adyacente Selecciona elemento2 siempre que:
elemento1 y elemento2 son hermanos y además elemento2 aparece inmediatamente
después de elemento1.

Selectores de atributos
Se escriben siempre entre corchetes [ ... ].
[nombreAtributo]: por el nombre. Seleccionaa todos los atributos cuyo nombre es
"nombreAtributo" sea cual sea su valor.
[nombreAtributo="miValor"]: por nombre y valor. Selecciona los atributos con
nombre "nombreAtributo" y valor "miValor".
[nombreAtributo~="miValor"]: por nombre y uno de los valores. Selecciona los
atributos con nombre "nombreAtributo" y al menos uno de los valores es "miValor".

-1-

Aprende-Web

Resumen del Manual deCSS

Pseudoclases
p:first-line : primera línea. Afecta sólo a la primera línea del texto seleccionado
p:first-letter : primera letra. Afecta sólo a la primera letra del texto
seleccionado. Se emplea para hacer letras capitales.
Pseudoclases de enlaces

: normal Enlace en su estado inicial
a:visited : visitado Enlace que ya ha sido visitado
a:hover : seleccionado Enlace cuando se le pasa el ratón porencima
a:active : activo Enlace en el momento desde que es pulsado hasta

a:link

que se carga.
Pseudoelementos before/after: con la propiedad "content"
p:before : antes: para insertar texto antes de un elemento.
p:after : después: para insertar texto despùés de un elemento.

Modos de enlazar CSS y HTML
En la etiqueta: style="propiedad: valor;"
En la página: En archivo aparte; media="" />

Comentarios
Se escriben entre los signos /* ... */

-2-

Aprende-Web

Resumen del Manual de CSS

Propiedades
Propiedades de tipografía
Valores

Propiedad
color
font-family
font-size
font-weight

Descripción
color de texto

|inherit
(( | )
(, |)* ) |
inherit
| |
| | inherit
normal | bold | bolder | lighter | 100 | 200 |
300 | 400 | 500 | 600 | 700 | 800 | 900 |
inherit

Tipo de letra
Tamaño de letra
Grosor de letra

font-style

normal | italic | oblique | inherit

estilo de letra (inclinada)

font-variant

normal | small-caps | inherit

letra tipo versalles

font

( ( || || )? ( / )?
) | caption | icon | menu |
message-box | small-caption | status-bar |
inherit

propiedad sorthand.
Tipo de letra

Propiedades de texto
Propiedad

Valores

line-height

normal | | | |
inherit

text-decoration

none | ( underline || overline || line-through
|| blink )| inherittext-transform

capitalize | uppercase | lowercase | none |
inherit

text-indent

| | inherit

letter-spacing

normal | | inherit

word-spacing

normal | | inherit

white-space

normal | pre | nowrap | pre-wrap | pre-line |
inherit

-3-

Descripción
interlineado
resaltar el texto
(tachado, subrayado,
etc.)
transforma el texto
original (mayusc.
minusc. etc.)...