Las hojas de estilo en cascada, a las que se hace referencia cariñosamente como CSS, es un lenguaje de diseño simple destinado a simplificar el proceso de hacer que las páginas web sean presentables.
Las siguientes son las ventajas de usar CSS:
CSS saves time- Puede escribir CSS una vez y luego reutilizar la misma hoja en varias páginas HTML. Puede definir un estilo para cada elemento HTML y aplicarlo a tantas páginas web como desee.
Pages load faster- Si utiliza CSS, no es necesario que escriba atributos de etiquetas HTML cada vez. Simplemente escriba una regla CSS de una etiqueta y aplíquela a todas las apariciones de esa etiqueta. Por lo tanto, menos código significa tiempos de descarga más rápidos.
Easy maintenance - Para realizar un cambio global, simplemente cambie el estilo y todos los elementos de todas las páginas web se actualizarán automáticamente.
Superior styles to HTML - CSS tiene una gama de atributos mucho más amplia que HTML, por lo que puede dar una mejor apariencia a su página HTML en comparación con los atributos HTML.
Multiple Device Compatibility- Las hojas de estilo permiten optimizar el contenido para más de un tipo de dispositivo. Al usar el mismo documento HTML, se pueden presentar diferentes versiones de un sitio web para dispositivos portátiles como PDA y teléfonos celulares o para imprimir.
Global web standards- Ahora los atributos HTML están siendo obsoletos y se recomienda utilizar CSS. Por lo tanto, es una buena idea comenzar a usar CSS en todas las páginas HTML para hacerlas compatibles con futuros navegadores.
Offline Browsing - CSS puede almacenar aplicaciones web localmente con la ayuda de una captura fuera de línea. Con esto, podemos ver sitios web fuera de línea. La memoria caché también garantiza una carga más rápida y un mejor rendimiento general del sitio web.
Platform Independence - El script ofrece una independencia de plataforma constante y también es compatible con los navegadores más recientes.
Una regla de estilo se compone de tres partes:
Selector- Un selector es una etiqueta HTML en la que se aplicará un estilo. Puede ser cualquier etiqueta como <h1> o <table>, etc.
Property- Una propiedad es un tipo de atributo de etiqueta HTML. En pocas palabras, todos los atributos HTML se convierten en propiedades CSS. Pueden ser de color, borde, etc.
Value- Los valores se asignan a las propiedades. Por ejemplo, la propiedad de color puede tener un valor rojo o # F1F1F1, etc.
El selector de tipo simplemente coincide con el nombre de un tipo de elemento. Para dar color a todos los títulos de nivel 1:
h1 {
color: #36CFFF;
}En lugar de seleccionar elementos de un tipo específico, el selector universal simplemente coincide con el nombre de cualquier tipo de elemento:
* {
color: #000000;
}Esta regla muestra el contenido de cada elemento de nuestro documento en negro.
Suponga que desea aplicar una regla de estilo a un elemento en particular solo cuando se encuentra dentro de un elemento en particular. Como se muestra en el siguiente ejemplo, la regla de estilo se aplicará al elemento <em> solo cuando se encuentre dentro de la etiqueta <ul>.
ul em {
color: #000000;
}Puede definir reglas de estilo según el atributo de clase de los elementos. Todos los elementos que tengan esa clase serán formateados de acuerdo con la regla definida.
.black {
color: #000000;
}Esta regla muestra el contenido en negro para cada elemento con el atributo de clase establecido en negro en nuestro documento.
Puedes hacerlo un poco más particular. Por ejemplo
h1.black {
color: #000000;
}Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo de clase establecido en negro.
Puede definir reglas de estilo basadas en el atributo id de los elementos. Todos los elementos que tengan esa identificación serán formateados de acuerdo con la regla definida.
#black {
color: #000000;
}Esta regla muestra el contenido en negro para cada elemento con el atributo id establecido en negro en nuestro documento.
Puedes hacerlo un poco más particular. Por ejemplo
h1#black {
color: #000000;
}Esta regla muestra el contenido en negro solo para los elementos <h1> con el atributo id establecido en negro.
Considere el siguiente ejemplo:
body > p {
color: #000000;
}Esta regla representará todos los párrafos en negro si son hijos directos del elemento <body>. Otros párrafos colocados dentro de otros elementos como <div> o <td> no tendrían ningún efecto en esta regla.
También puede aplicar estilos a elementos HTML con atributos particulares. La regla de estilo a continuación coincidirá con todos los elementos de entrada que tengan un atributo de tipo con un valor de texto:
input[type = "text"] {
color: #000000;
}La ventaja de este método es que el elemento <input type = "submit" /> no se ve afectado y el color se aplica solo a los campos de texto deseados.
p [lang]: Selecciona todos los elementos de párrafo con un atributo lang.
p [lang = "fr"]: selecciona todos los elementos de párrafo cuyo atributo lang tiene un valor de exactamente "fr".
p [lang ~ = "fr"]: selecciona todos los elementos de párrafo cuyo atributo lang contiene la palabra "fr".
p [lang | = "en"]: selecciona todos los elementos de párrafo cuyo atributo lang contiene valores que son exactamente "en" o comienzan con "en-".
Hay cuatro formas de asociar estilos con su documento HTML. Los métodos más utilizados son CSS en línea y CSS externo.
Embedded CSS - El elemento <style>: puede poner sus reglas CSS en un documento HTML usando el elemento <style>.
Inline CSS - El atributo de estilo: puede utilizar el atributo de estilo de cualquier elemento HTML para definir reglas de estilo.
External CSS - El elemento <link>: el elemento <link> se puede utilizar para incluir un archivo de hoja de estilo externo en su documento HTML.
Imported CSS - Regla @import: @import se usa para importar una hoja de estilo externa de una manera similar al elemento <link>.
A continuación se muestra la regla para anular cualquier regla de hoja de estilo:
Cualquier hoja de estilo en línea tiene la máxima prioridad. Por lo tanto, anulará cualquier regla definida en las etiquetas <style> ... </style> o las reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en las etiquetas <style> ... </style> anulará las reglas definidas en cualquier archivo de hoja de estilo externo.
Cualquier regla definida en un archivo de hoja de estilo externo tiene la prioridad más baja, y las reglas definidas en este archivo se aplicarán solo cuando las dos reglas anteriores no sean aplicables.
%: Define una medida como un porcentaje relativo a otro valor, normalmente un elemento circundante.
p {font-size: 16pt; line-height: 125%;}cm: define una medida en centímetros.
div {margin-bottom: 2cm;}em: una medida relativa de la altura de una fuente en espacios em. Debido a que una unidad em es equivalente al tamaño de una fuente determinada, si asigna una fuente a 12 puntos, cada unidad "em" sería 12 puntos; por lo tanto, 2em serían 24 puntos.
p {letter-spacing: 7em;}ex: este valor define una medida relativa a la altura x de una fuente. La altura de la x está determinada por la altura de la letra minúscula de la fuente.
p {font-size: 24pt; line-height: 3ex;}in: define una medida en pulgadas.
p {word-spacing: .15in;}mm: define una medida en milímetros.
p {word-spacing: 15mm;}pc: define una medida en picas. Una pica equivale a 12 puntos; por tanto, hay 6 picas por pulgada.
p {font-size: 20pc;}pt: define una medida en puntos. Un punto se define como 1/72 de pulgada.
body {font-size: 18pt;}px: define una medida en píxeles de la pantalla.
p {padding: 25px;}vh: 1% de la altura de la ventana gráfica.
h2 { font-size: 3.0vh; }vw: 1% del ancho de la ventana gráfica.
h1 { font-size: 5.9vw; }vmin 1vw o 1vh, el que sea menor.
p { font-size: 2vmin;}Puede especificar sus valores de color en varios formatos. La siguiente tabla enumera todos los formatos posibles:
| Formato | Sintaxis | Ejemplo |
|---|---|---|
| Código hexadecimal | #RRGGBB | p {color: # FF0000;} |
| Código hexadecimal corto | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {color: rgb (50%, 50%, 50%);} |
| Absoluto RGB | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| palabra clave | aguamarina, negro, etc. | p {color: verde azulado;} |
Está la lista de 216 colores que se supone que son los colores más seguros e independientes de la computadora. Estos colores varían desde el código hexadecimal 000000 hasta FFFFFF. Estos colores son seguros de usar porque aseguran que todas las computadoras muestren los colores correctamente al ejecutar una paleta de 256 colores.
La propiedad background-color se utiliza para establecer el color de fondo de un elemento.
La propiedad background-image se utiliza para establecer la imagen de fondo de un elemento.
La propiedad background-repeat se utiliza para controlar la repetición de una imagen en segundo plano.
La propiedad background-position se utiliza para controlar la posición de una imagen en el fondo.
La propiedad background-adjunto se usa para controlar el desplazamiento de una imagen en el fondo.
La propiedad de fondo se usa como una abreviatura para especificar una serie de otras propiedades de fondo.
La propiedad font-family se utiliza para cambiar la cara de una fuente.
La propiedad font-style se usa para hacer una fuente en cursiva u oblicua.
La propiedad font-variant se utiliza para crear un efecto de versalitas.
La propiedad de peso de fuente se utiliza para aumentar o disminuir la negrita o la luz de una fuente.
La propiedad font-size se utiliza para aumentar o disminuir el tamaño de una fuente.
La propiedad de fuente se utiliza como abreviatura para especificar una serie de otras propiedades de fuente.
La propiedad de color se utiliza para establecer el color de un texto.
La propiedad de dirección se utiliza para establecer la dirección del texto.
La propiedad de espaciado entre letras se utiliza para sumar o restar espacio entre las letras que componen una palabra.
La propiedad de espaciado entre palabras se usa para sumar o restar espacio entre las palabras de una oración.
La propiedad text-indent se utiliza para sangrar el texto de un párrafo.
La propiedad text-align se utiliza para alinear el texto de un documento.
La propiedad text-decoration se utiliza para subrayar, sobremarcar y tachar el texto.
La propiedad de transformación de texto se utiliza para poner en mayúsculas el texto o convertir texto en letras mayúsculas o minúsculas.
La propiedad de espacio en blanco se utiliza para controlar el flujo y el formato del texto.
La propiedad text-shadow se utiliza para establecer la sombra del texto alrededor de un texto.
La propiedad de borde se usa para establecer el ancho de un borde de imagen.
La propiedad de altura se utiliza para establecer la altura de una imagen.
La propiedad de ancho se usa para establecer el ancho de una imagen.
La propiedad -moz-opacity se utiliza para establecer la opacidad de una imagen.
El enlace: significa hipervínculos no visitados.
El: visitado significa hipervínculos visitados.
El: hover significa un elemento que actualmente tiene el puntero del mouse del usuario sobre él.
El: activo significa un elemento en el que el usuario está haciendo clic actualmente.
El colapso del borde especifica si el navegador debe controlar la apariencia de los bordes adyacentes que se tocan entre sí o si cada celda debe mantener su estilo.
El espaciado de borde especifica el ancho que debe aparecer entre las celdas de la tabla.
Los subtítulos del lado de los subtítulos se presentan en el elemento <caption>. De forma predeterminada, estos se representan sobre la tabla en el documento. Utilice la propiedad caption-side para controlar la ubicación del título de la tabla.
Las celdas vacías especifican si el borde debe mostrarse si una celda está vacía.
El diseño de la tabla permite a los navegadores acelerar el diseño de una tabla utilizando las primeras propiedades de ancho que encuentra para el resto de una columna en lugar de tener que cargar la tabla completa antes de renderizarla.
El color del borde especifica el color de un borde.
El estilo de borde especifica si un borde debe ser sólido, línea discontinua, línea doble o uno de los otros valores posibles.
El ancho del borde especifica el ancho de un borde.
El margen especifica una propiedad abreviada para establecer las propiedades del margen en una declaración.
El margen inferior especifica el margen inferior de un elemento.
Margin-top especifica el margen superior de un elemento.
El margen izquierdo especifica el margen izquierdo de un elemento.
El margen derecho especifica el margen derecho de un elemento.
El tipo de estilo de lista le permite controlar la forma o apariencia del marcador.
La posición de estilo de lista especifica si un punto largo que se ajusta a una segunda línea debe alinearse con la primera línea o comenzar por debajo del inicio del marcador.
La imagen de estilo de lista especifica una imagen para el marcador en lugar de una viñeta o un número.
El estilo de lista sirve como abreviatura de las propiedades de estilo.
El desplazamiento del marcador especifica la distancia entre un marcador y el texto de la lista.
El padding-bottom especifica el acolchado inferior de un elemento.
El padding-top especifica el relleno superior de un elemento.
El padding-left especifica el padding-left de un elemento.
Padding-right especifica el relleno derecho de un elemento.
El relleno sirve como forma abreviada de todas las propiedades del relleno.
La propiedad de cursor de CSS le permite especificar el tipo de cursor que se debe mostrar al usuario.
auto: la forma del cursor depende del área de contexto sobre la que se encuentra. Por ejemplo, una "yo" sobre texto, una "mano" sobre un enlace, etc.
cruz: una cruz o un signo más.
predeterminado: una flecha.
puntero: una mano que señala (en IE 4, este valor es la mano).
mover o enviar texto: la barra "I".
espera - Un reloj de arena.
ayuda: un signo de interrogación o un globo, ideal para usar sobre los botones de ayuda.
¡Si! establece la URL como la fuente de un archivo de imagen de cursor.
La propiedad outline-width se utiliza para establecer el ancho del contorno.
La propiedad de estilo de contorno se utiliza para establecer el estilo de línea del contorno.
La propiedad outline-color se utiliza para establecer el color del contorno.
La propiedad de esquema se utiliza para establecer todas las propiedades de esquema en una sola declaración.
La propiedad de altura se utiliza para establecer la altura de una caja.
La propiedad de ancho se usa para establecer el ancho de una caja.