Font-family
bajo esta propiedad ponemos cualquier nombre de familia de fuente que pueda usarse:
► Serif
► Sans-Serif
► cursive
► Fantasy, Monospace
Estas pueden ser aplicables para todos los navegadores.
Para declarar esta propiedad font -family en nuestro archivo css podemos hacerlas así, haciendo una referencia de alguna etiqueta que tengamos sobre el documento de HTML.
p{font-family:"Verdana", Sans Serif}
Font-Style:
Esta propiedad font-style define que la fuente se muestre en una de tres formas: Normal, Italic u
H1 {
font-style:oblique}
p{font-style:normal}
Font-Weight
La propiedad font-weight se usa para especificar el peso de la fuente.
Los valores bolder y lighter son relativos al peso de la fuente heredada, mientras que los otros valores sn pesos de fuente absolutos.
Este peso se efectua se declara así:
H1{font-weight:800}
P{font-weight:normal}
Font-Size
La propiedad font-size se usa para especificar el tamaño de la fuente mostrada.
H1{ font-size: large }
P{ font-size: 12pt }
Font-Weight
La propiedad font puede usarse como una forma rápida para las diferentes propiedades de fuentes, así como para line height. Por ejemplo,
Font
La propiedad font-size se usa para especificar el tamaño de la fuente mostrada.P { font: italic bold 12pt/14pt Times, serif }
Color
La propiedad color permite especificar el color de un elemento. Vea la sección Unidades para descripciones del valor de colores, Algunos ejemplos de reglas de color:
H1 { color: blue }
H2 { color: #000080 }
Background Color
La propiedad background-color establece el color del fondo de un elemento. Por ejemplo:
BODY { background-color: white }
H1 { background-color: #000080 }
Background Image
La propiedad background-image establece la imagen de fondo de un elemento. Por ejemplo:
BODY { background-image: url(/images/foo.gif) }
P { background-image: url(http://www.htmlhelp.com/bg.png) }
Background Repeat
La propiedad background-repeat determina como se repite la background image (imagen de fondo) especificada. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente. Por ejemplo:
BODY { background: white url(candybar.gif);
background-repeat: repeat-x }
Background position
La propiedad background-position da la posición inicial de la background image (imagen de fondo) especificada. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados.
► Palabras clave horizontales (left, center, right)
- right top = top right = 100% 0%
- left = left center = center left = 0% 50%
► Palabras clave horizontales verticales (top, center, bottom)
Background
La propiedad background es una forma rápida para las propiedades más específicas relacionadas con background. Algunos ejemplos de declaraciones de background:
► BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
► BLOCKQUOTE { background: #7fffd4 }
► P { background: url(../fondos/peon.png) #f0f8ff fixed }
Line Height
La propiedad line-height aceptará un valor para controlar el espacio entre líneas base de texto. Si el valor es un número, la altura de línea se calcula multiplicando el tamaño de fuente del elemento por el número.
P { line-height: 200% }
Text Indentation
La propiedad text-indent puede aplicarse a elementos de nivel bloque (P, H1, etc.) para definir la cantidad de sangría que debería aplicarse a la primera línea. El valor debe ser una longitud o un porcentaje; los porcentajes se refieren al ancho del elemento padre. Un uso común para text-indent sería dar sangría a un párrafo:
P { text-indent: 5em }
Text Alignment
La propiedad text-align puede aplicarse a elementos de nivel bloque (P, H1, etc.) para dar la alineación del texto del elemento. Esta propiedad es similar en función al atributo ALIGN de HTML en párrafos, encabezados y divisiones.
H1 { text-align: center }
P.diario { text-align: justify }
Text Transformation
La propiedad text-transform permite que el texto se transforme por alguna de cuatro propiedades:
► Capitalize: escribe en mayúsculas el primer carácter de cada palabra).
► UPPERCASE: (escribe en mayúsculas todos los caracteres de cada palabra).
► lowercase: (usa letras pequeñas para todos los caracteres de cada palabra).
► none (valor inicial).
H1 { text-transform: uppercase }
H2 { text-transform: capitalize }
List Style
La propiedad list-style property es una forma rápida de las propiedades list-style-type, list-style-position y list-style-image.
Ejemplos:
LI.cuadrado { list-style: square inside }
UL.simple { list-style: none }
List Style Image
La propiedad list-style-image especifica la imagen que se usará como marcador de ítems de lista cuando se active la carga de imágenes, reemplazando al marcador especificado en la propiedad list-style-type.
Ejemplos:
UL.marca { list-style-image: url(/LI-marcadores/visto.gif) }
UL LI.x { list-style-image: url(x.png) }
Display
La propiedad list-style-image especifica la imagen que se usará como marcador de ítems de lista cuando se active la carga de imágenes, reemplazando al marcador especificado en la propiedad list-style-type.
Ejemplos:
► block: (un salto de línea antes y después del elemento)
► inline: (ningún salto de línea antes ni después del elemento)
► list-item: (igual que block, salvo que se agrega un marcador de ítems de lista)
Float
La propiedad clear especifica si un elemento permite elementos flotantes a sus lados. Un valor left mueve el elemento debajo de cualquier elemento flotante a su izquierda; right actúa en forma similar para elementos flotantes a la derecha. Otros valores son none, que es el valor inicial, y both, que mueve el elemento debajo de los elementos flotantes a ambos lados. Esta propiedad es similar en función a
width
La propiedad float permite ajustar texto alrededor de un elemento. Esto es idéntico en propósito a ALIGN=left y ALIGN=right para el elemento IMG de HTML 3.2, pero CSS1 permite que todos los elementos "floten," no solo las imágenes y tablas que permite HTML.
See the Pen pWQwMe by Whitney (@Whitney16) on CodePen.