Hojas de estilo en cascada scc

Hojas de Estilo en
Cascada SCC
ISMAEL ZEPEDA

Que Son?
Las hojas de estilo en cascada actualmente son utilizadas en un gran número
de páginas web y blogs y ofrecen la posibilidad de dar vistosidad al sitio web
además de reducir y simplificar el trabajo. En WordPress, las hojas de estilo en
cascada o CSS (Cascading Style Sheets) son frecuentemente utilizadas en la
realización de plantillas web y son las que principalmente controlan el color,
formato, tipografía y tamaños además de otros numerosos parámetros que
permiten hacer que nuestra página web se vea atractiva.

Reglas:
 Las reglas de uso de las hojas de estilo en cascada son muy sencillas ya
que prácticamente se utiliza un mismo formato para las etiquetas. Para
entender la regla que se aplica en las hojas de estilo en cascada veamos un
ejemplo:

Descriptores
Descriptor de tipo de medios Aplicar reglas de hojas de estilo a
"all" Todos los dispositivos
"aural" Sintetizadores de voz
"Braille" Dispositivos táctiles y de braille
"embossed" Impresoras de páginas de braille
"handheld" Dispositivos de mano (como PDA
"print"
Medios de páginas (como una página
impresa) o páginas que se muestran en
pantalla (como una "presentacion
preliminar").
"Projection"
Proyectores y dispositivos de impresión
en diapositivas y transparencias
"screen" Pantallas en color de computadoras
"tty"
Dispositvos con cuadrículas de caracteres
de punto fijo, como teletipos
"tv"
Dispositivos del estilo de la televisión
(baja resolución, color, desplazacmiento
limitado, dispone de sonido).

Propiedades:
Abreviación Propiedades que incluye
background
background-attachment
background-color
background-image
background-position
background-repeat
border
border-color
border-style
border-width
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
font
font-family
font-size
font-style
font-weight
font-variant
font-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-top
margin-right
margin-bottom
margin- left
padding
padding-top
padding-right
padding-bottom
padding-left

Tipos
Tipos
Propiedad Descripción Valores
contador Contador counter(nombre, estilo)
familia-genérica Familia genérica de fuente
cursive | fantasy |
monospace | serif | sans-
serif
forma Forma
rect(top, right, bottom,
left)
tamaño-absoluto
Tamaño absoluto de
fuente
xx-small | x-small |
medium | large | x-large |
xx-large
tamaño-relativo Tamaño relativo de fuente larger | smaller
uri (para imagen de fondo
o fuentes web)
Dirección absoluta o
relativa
url("ruta_y_nombre_de_arc
hivo")

Tipos de Letra
Tipo de letra (fuente)
font propiedad compuesta
[ [ font-style || font-variant ||
font-weight ]? font-size [ /
line-height ]? font-family ] |
caption | icon | menu |
message-box | small-
caption | status-bar
font-family tipo de letra (fuente)
[ nombre-fuente | familia-
genérica ] [, nombre-fuente
| familia-genérica ]*
font-size tamaño
tamaño-absoluto | tamaño-
relativo | distancia |
porcentaje
font-style inclinación (cursiva) normal | italic | oblique
font-variant versalitas normal | small-caps
font-weight grosor del trazo (negrita)
normal | bold | bolder |
lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900

Bordes Bordes
border
cuatro bordes
simultáneamente
border-color ||
border-width ||
border-style
border-top borde superior
border-color ||
border-width ||
border-style
border-right borde derecho
border-color ||
border-width ||
border-style
border-bottom borde inferior
border-color ||
border-width ||
border-style
border-left borde izquierdo
border-color ||
border-width ||
border-style
border-color color de los bordes
[ color | transparent ]
{1, 4}
border-width grosor de los bordes
[ medium | thick |
thin | distancia ] {1, 4}
border-style estilos de los bordes
[ none | hidden |
dashed | dotted |
double | groove |
inset | outset | ridge |
solid ] {1, 4}
border-top-color
color del borde
superior
{1, 4}
border-top-width
grosor del borde
superior
[ medium | thick |
border-top-style
estilo del borde
superior
[ none | hidden |
dashed | dotted |
double | groove |
inset | outset | ridge |
solid ] {1, 4}
border-right-color
color del borde
derecho
{1, 4}
border-right-width
grosor del borde
derecho
[ medium | thick |

Margenes
Margen exterior
margin
cuatro márgenes exterior
simultáneamente
[ auto | distancia |
porcentaje ] {1, 4}
margin-top margen exterior superior auto | distancia | porcentaje
margin-right margen exterior derecho auto | distancia | porcentaje
margin-bottom margen exterior inferior auto | distancia | porcentaje
margin-left margen exterior izquierdo auto | distancia | porcentaje
Margen interior
padding
cuatro márgenes interiores
simultáneamente
[ distancia | porcentaje ] {1,
4}
padding-top margen interior superior distancia | porcentaje
padding-right margen interior derecho distancia | porcentaje
padding-bottom margen interior inferior distancia | porcentaje
padding-left margen interior izquierdo distancia | porcentaje

Fondos
Fondos
background propiedad compuesta
background-attachment ||
background-color ||
background-image ||
background-position ||
background-repeat
background-attachment atadura de la imagen fixed | scroll
background-color color de fondo transparent | color
background-image imagen de fondo none | uri
background-position
posición de la imagen de
fondo
[ [ left | center | right |
distancia | porcentaje] [
top | center | bottom |
distancia | porcentaje] ]? | [
[ left | center | right ] || [
top | center | bottom ] ]
background-repeat
repetición de la imagen de
fondo
no-repeat | repeat |
repeat-x | repeat-y

Listas
Listas
list-style propiedad compuesta
list-style-image || list-
style-position || list-style-
type
list-style-image imagen del marcador none | uri
list-style-position posición del marcador inside | outside
list-style-type tipo de marcador
none | circle | disc | square
| decimal | decimal-
leading-zero | lower-alpha
| upper-alpha | lower-
greek | lower-latin | upper-
latin | lower-roman |
upper-roman | armenian |
georgian | hebrew(-) | cjk-
ideographic(-) | hiragana (-)
| katakana (-) | hiragana-
iroha(-) | katakana-iroha(-)

Interface de Usuario
Interface de usuario
cursor tipo de cursor
[uri,]* | auto | crosshair |
default | help | move |
pointer | progress | n-resize
| ne-resize | e-resize | se-
resize | s-resize | sw-resize |
w-resize | nw-resize | text |
wait
outline
cuatro bordes
simultáneamente
outline-color || outline-
width || outline-style
outline-color color de los bordes color
outline-width grosor de los bordes border-width
outline-style estilos de los bordes border-style

Pseudo-elementos
Pseudo-elementos
Nombre Descripción Valores
:after
inserta contenido después
del elemento
content: contenido
:before
inserta contenido antes del
elemento
content: contenido
:first-letter primera letra
:first:line primera línea de texto
content contenido generado
normal(+) | none(+) | [ texto |
uri | contador |
attr(atributo) | open-quote
| close-quote | no-open-
quote | no-close-quote ]+
counter-increment incremento de contador
none | [ identificador
número-entero? ]+
counter-reset puesto a cero de contador
none | [ identificador
número-entero? ]+
quotes comillas
none | [ texto-apertura
texto-cierre ]+

Pseudo-clases
Pseudo-clases
Nombre Descripción Valores
:active
cuando se hace clic sobre el
elemento
:first-child primer elemento hijo
:focus
cuando el elemento tiene el
foco
:hover
cuando el ratón pasa sobre
el elemento
:lang idioma
:lang(en) | :lang(es) |
:lang(fr) etc.
:link enlaces no visitados
:visited enlaces ya visitados

Hojas de estilo en cascada scc

Más contenido relacionado

Último (20)

Destacado (20)

Hojas de estilo en cascada scc