Nombre: María Mercedes Sanmartín Jaén

Curso: Quinto Semestre “A”

Fecha: Martes 19 de Diciembre del 2017

Tema: Atributos para las hojas de estilos.

PROPIEDADES DE LAS HOJAS DE ESTILO

Tipos

Propiedad Descripción Valores

contador Contador counter(nombre, estilo)

familia- Familia cursive | fantasy | monospace | serif | sans-

genérica genérica de serif
fuente

forma Forma rect(top, right, bottom, left)

tamaño- Tamaño xx-small | x-small | medium | large | x-

absoluto absoluto de large | xx-large
fuente

tamaño- Tamaño larger | smaller

relativo relativo de
fuente

uri Dirección url("ruta_y_nombre_de_archivo")

(para image absoluta o
n de relativa
fondo o fuen
tes web)

Reglas arroba

Propiedad Descripción Descriptores / Características

@import Importar url(...)

recurso
@font-face Fuente web font-family, src, font-style, font-weight, font-
stretch, unicode-range, font-variant, font-
feature-settings

@media Características width | height | orientation | aspect-

del dispositivo ratio | resolution | etc.

Tipo de letra (fuente)

Propiedad Descripción Valores

font propiedad [ [ font-style || font-variant || font-weight ]?

compuesta font-size [ / line-height ]? font-family ]
| caption | icon | menu | message-box| small-
caption | status-bar

font-family tipo de letra [ nombre-fuente | familia-genérica ] [, nombre-

(fuente) fuente | familia-genérica ]*

font-size tamaño tamaño-absoluto | tamaño-relativo | distancia

| porcentaje

font-style inclinación normal | italic | oblique

(cursiva)

font-variant versalitas normal | small-caps

font-weight grosor del normal | bold | bolder | lighter | 100 | 200 | 30

trazo (negrita) 0 | 400 | 500 | 600 | 700 | 800 | 900

Texto

Propiedad Descripción Valores

color color del texto color

direction dirección del ltr | rtl

texto

letter- espacio entre normal | distancia

spacing caracteres

line-height espaciado normal | número | distancia | porcentaje

entre líneas

text-align alineación del center | justify | left | right

texto
text- decoración del none | blink | line-
decoration texto through | overline | underline

text-indent sangría de la distancia | porcentaje

primera línea

text- mayúsculas / none | capitalize | lowercase | uppercase

transform minúsculas

text- sombreado desplazamiento horizontal, desplazamiento

shadow(3) vertical, tamaño desenfoque, color

unicode-bidi dirección del normal | embed | bidi-override

texto

vertical- alineación baseline | bottom | middle | sub | super | text-

align vertical bottom | text-top | top | distancia | porcentaje

white-space espacios en normal | nowrap | pre | pre-line(+) | pre-wrap(+)

blanco, saltos
de línea y
wrap

word- espacio entre normal | distancia

spacing palabras

Bordes

Propiedad Descripción Valores

border cuatro bordes border-color || border-width || border-style

simultáneame
nte

border-top borde superior border-color || border-width || border-style

border-right borde derecho border-color || border-width || border-style

border- borde inferior border-color || border-width || border-style

bottom

border-left borde border-color || border-width || border-style

izquierdo

border- esquinas [ distancia | porcentaje ] {1, 4}

radius(3) redondeadas
border-top- esquina distancia | porcentaje
right- superior
radius(3) derecha
redondeada

border- esquina distancia | porcentaje

bottom- inferior
right- derecha
radius(3) redondeada

border- esquina distancia | porcentaje

bottom-left- inferior
radius(3) izquierda
redondeada

border-top- esquina distancia | porcentaje

left-radius(3) superior
izquierda
redondeada

border-color color de los [ color | transparent ] {1, 4}

bordes

border-width grosor de los [ medium | thick | thin | distancia ] {1, 4}

bordes

border-style estilos de los [ none | hidden | dashed | dotted | double | gr

bordes oove | inset | outset | ridge | solid ] {1, 4}

border-top- color del borde [ color | transparent ] {1, 4}

color superior

border-top- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde superior

border-top- estilo del [ none | hidden | dashed | dotted | double | gr

style borde superior oove | inset | outset | ridge | solid ] {1, 4}

border-right- color del borde [ color | transparent ] {1, 4}

color derecho

border-right- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde derecho

border-right- estilo del [ none | hidden | dashed | dotted | double | gr

style borde derecho oove | inset | outset | ridge | solid ] {1, 4}
border- color del borde [ color | transparent ] {1, 4}
bottom-color inferior

border- grosor del [ medium | thick | thin | distancia ] {1, 4}

bottom- borde inferior
width

border- estilo del [ none | hidden | dashed | dotted | double | gr

bottom-style borde inferior oove | inset | outset | ridge | solid ] {1, 4}

border-left- color del borde [ color | transparent ] {1, 4}

color izquierdo

border-left- grosor del [ medium | thick | thin | distancia ] {1, 4}

width borde
izquierdo

border-left- estilo del [ none | hidden | dashed | dotted | double | gr

style borde oove | inset | outset | ridge | solid ] {1, 4}
izquierdo

Margen exterior

Propiedad Descripción Valores

margin cuatro [ auto | distancia | porcentaje ] {1, 4}

márgenes
exterior
simultáneame
nte

margin-top margen auto | distancia | porcentaje

exterior
superior

margin-right margen auto | distancia | porcentaje

exterior
derecho

margin- margen auto | distancia | porcentaje

bottom exterior inferior

margin-left margen auto | distancia | porcentaje

exterior
izquierdo

Margen interior
Propiedad Descripción Valores

padding cuatro [ distancia | porcentaje ] {1, 4}

márgenes
interiores
simultáneame
nte

padding-top margen interior distancia | porcentaje

superior

padding- margen interior distancia | porcentaje

right derecho

padding- margen interior distancia | porcentaje

bottom inferior

padding-left margen interior distancia | porcentaje

izquierdo

Fondos

Propiedad Descripción Valores

background propiedad background-attachment || background-color ||

compuesta background-image || background-position ||
background-repeat

background( fondos separados por comas

3) múltiples

background- ligadura de la fixed | scroll

attachment imagen

background- color de fondo transparent | color

color

background- imagen de none | uri

image fondo

background- posición de la [ [ left | center | right | distancia | porcentaje]

position imagen de [ top | center | bottom | distancia | porcentaje]
fondo ]? | [ [ left | center | right ] ||
[ top | center | bottom ] ]
background- repetición de no-repeat | repeat | repeat-x | repeat-
repeat la imagen de y | space(3) | round(3)
fondo

background- límite de la border-box | padding-box | content-box

clip(3) imagen de
fondo

background- tamaño de la auto | [ distancia | porcentaje ] {2}

size(3) imagen de | contain | cover
fondo

background- origen de la border-box | padding-box | content-box

origin(3) imagen de
fondo

Listas

Propiedad Descripción Valores

list-style propiedad list-style-image || list-style-position || list-style-

compuesta type

list-style- imagen del none | uri

image marcador

list-style- posición del inside | outside

position marcador

list-style- tipo de none | circle | disc | square | decimal | decima

type marcador l-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(-)

Tablas

Propiedad Descripción Valores

border- modo de collapse | separate

collapse bordes

border- separación distancia distancia?

spacing entre celdas
caption-side posición de la top | bottom | left(-) | right(-)
leyenda

empty-cells borde de hide | show

casillas vacías

table-layout algoritmo auto | fixed

ancho de tabla

Tamaño

Propiedad Descripción Valores

width anchura auto | distancia | porcentaje

min-width anchura distancia | porcentaje

mínima

max-width anchura distancia | porcentaje

máxima

height altura auto | distancia | porcentaje

min-height altura mínima distancia | porcentaje

max-height anchura distancia | porcentaje

máxima

overflow si el contenido auto | hidden | scroll | visible

desborda al
elemento

Posicionamiento

Propiedad Descripción Valores

display tipo de caja none | block | compact(-) | inline | inline-

block(+) | inline-table | list-item | marker(-) | run-
in | table | table-caption | table-cell | table-
column | table-column-group | table-footer-
group | table-header-group | table-row | table-
row-group

float modo de none | left | right

posicionamient
o flotante
clear lado en el que none | both | left | right
no puede
haber
elementos
flotantes

position modo de absolute | fixed | relative | static

posicionamient
o

top posición del auto | distancia | porcentaje

borde superior
del elemento

right posición del auto | distancia | porcentaje

borde derecho
del elemento

bottom posición del auto | distancia | porcentaje

borde inferior
del elemento

left posición del auto | distancia | porcentaje

borde
izquierdo del
elemento

clip recorta el auto | forma

elemento

visibility visibilidad hidden | collapse | visible

z-index apilamiento auto | número-entero

Impresora

Propiedad Descripción Valores

page-break- salto de auto | always | avoid | left | right

after página
después de

page-break- salto de auto | always | avoid | left | right

before página antes
de
page-break- salto de auto | avoid
inside página dentro
de

orphans número de número-entero

líneas al final
de página

widows número de número-entero

líneas al
principio de la
página

Interface de usuario

Propiedad Descripción Valores

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 outline-color || outline-width || outline-style

simultáneame
nte

outline-color color de los color

bordes

outline- grosor de los border-width

width bordes

outline-style estilos de los border-style

bordes

Pseudo-elementos

Nombre Descripción Valores

:after inserta content: contenido

contenido
después del
elemento

:before inserta content: contenido

contenido
 antes del
elemento

:first-letter primera letra

:first:line primera línea

de texto

content contenido normal(+) | none(+) | [ texto | uri | contador |

generado attr(atributo) | open-quote | close-quote | no-
open-quote | no-close-quote]+

counter- incremento de none | [ identificador número-entero? ]+

increment contador

counter- puesto a cero none | [ identificador número-entero? ]+

reset de contador

quotes comillas none | [ texto-apertura texto-cierre ]+

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
Propiedades no incluidas en CSS 2.1

Propiedad Descripción Valores

font-size- ajuste de número-decimal

adjust tamaño

font-stretch anchura ultra-condensed | extra-

condensed | condensed | semi-
condensed | semi-
expanded | expanded | extra-
expanded | ultra-
expanded normal | wider | narrower

marker- distancia entre distancia

offset marcador y
elemento

marks marcas de crop | cross

corte de papel
ATRIBUTOS DE LAS HOJAS DE ESTILO