Hojas de estilo en cascada | |
---|---|
Extensión | .css |
Tipo de Mimica | text/css |
Desarrollado por | W3C |
1ra publicación | 17 de diciembre de 1996 |
Sitio web | www.w3.org/TR/CSS |
CSS (acrónimo de Cascading Style Sheets ) , en informática , es un lenguaje utilizado para definir el formato de documentos HTML , XHTML y XML , como sitios web y páginas web relacionadas . Las reglas para componer el CSS están contenidas en un conjunto de directivas ( Recomendaciones ) emitidas desde 1996 por el W3C .
La introducción de CSS era necesaria para separar el contenido de las páginas HTML de su formato o maquetación y permitir una programación más clara y fácil de usar , tanto para los propios autores de las páginas como para los usuarios, garantizando al mismo tiempo la reutilización del código y su mantenimiento más fácil.
Para permitir que los autores pudieran moldear libremente la apariencia de las páginas web , a partir de 1993 Netscape Navigator e Internet Explorer , los dos software de navegación que los usuarios disputaron en la conocida guerra de los navegadores , presentaban etiquetas propietarias , es decir, que no se apegaban a los estándares. compatible con los navegadores de la competencia. Un ejemplo de estas etiquetas era <font>que definía la fuente de los caracteres.
Estas etiquetas de formato propietarias eran la única forma que tenían los autores de definir el formato, por lo que su uso se volvió muy intensivo. Sin embargo, estas etiquetas tenían tres problemas:
Otro problema fue, en las páginas web no estándar, el uso de la etiqueta <table>(las tablas ) para crear el diseño de las páginas web. Los puristas consideran despreciable el diseño tabular, ya que las tablas están diseñadas para diseñar datos tabulares y no diseños web . Además de esto, el uso de tablas también tiene desventajas prácticas: aumenta el peso de las páginas, como ya se indicó en el problema 1, y empeora la accesibilidad, ya que se puede tener que sacrificar el orden lógico de los datos por razones de diseño.
Otra forma de crear sitios web en los años 90 y 2000 (hasta su abandono el 31 de diciembre de 2020 por parte de Adobe [1] ) era Adobe Flash que permitía (de forma vectorial) crear animaciones, transformaciones y en general un aspecto mucho más llamativo. que HTML y CSS. Además, permitía integrar cualquier fuente aunque el usuario no la tuviera en su dispositivo. Estos problemas se solucionaron con HTML5 y CSS3.
Otro problema fue crear el formato de las páginas HTML incrustando los estilos en las etiquetas y el tipo de letra en la etiqueta "fuente" (ahora en desuso). Esto hizo que el código fuera complicado y, a menudo, desordenado. Por ejemplo:
< p estilo = "color: azul; tamaño de fuente: 46px;" > wikipedia es una enciclopedia </ p >Para intentar solucionar esta situación, en 1996 el W3C emitió la especificación CSS 1. CSS 1 era una forma interesante de separar el contenido del formato . La base de este lenguaje, de hecho, consistía en que el contenido siempre estaría definido por el código HTML (X), mientras que el formato se transferiría a un código completamente separado , el CSS. Las referencias entre los dos códigos se hacían a través de dos atributos particulares: clase e ID . Estas especificaciones:
CSS desarrolló una idea simple pero efectiva, pero a pesar de su gran potencial no tuvieron éxito debido a la falta de navegadores capaces de soportarlos.
Para incluir las nuevas características y hacer de CSS un lenguaje bien soportado, en 1998 el W3C lanzó la especificación CSS 2. En 2004, se comenzó a trabajar en la actualización de la especificación CSS 2.1 que se convirtió en una recomendación oficial el 7 de junio de 2011. CSS 2 es la evolución natural de CSS 1 y ofrecen potentes soluciones para resolver sobre todo el tercer problema, con la posibilidad de crear hojas de estilo separadas para dispositivos portátiles. Incluso el segundo problema ahora es completamente solucionable, escribiendo una página HTML (X) dirigida exclusivamente a la estructura y el contenido y luego manipulándola exclusivamente con CSS para diseñarla.
Comenzando con Internet Explorer 5 , Firefox y Opera 7 , CSS 2 ha podido hacer uso de navegadores capaces de interpretarlos y, por lo tanto, se ha convertido en parte del código de muchos sitios web.
Se empezaron a crear los primeros tipos de diseños sin tablas (normalmente de una, dos o tres columnas) [2] [3] :
A diferencia de la especificación CSS 2, que consiste en una sola especificación, la especificación CSS3 consta de secciones separadas llamadas "módulos". Debido a esta modularización, las especificaciones de CSS3 tienen diferentes estados de progreso y estabilidad. [4] En noviembre de 2014, el W3C publicó formalmente cinco módulos como recomendaciones :
HTML y CSS3 constituyen un lenguaje de turing completo [5] [6] , condición suficiente para que un lenguaje sea considerado un lenguaje de programación .
CSS3 presenta nuevas posibilidades y propiedades en comparación con CSS2 [7] [8] . Los más importantes son:
PROPIEDAD CSS3 | TIPOS | EJEMPLO |
---|---|---|
Selectores | ||
Selectores básicos |
|
* {color rojo}
h1 {color: rojo} .título {color: rojo} #título {color: rojo} |
Selectores combinatorios o de relación |
|
div # contenedor p {color: rojo}
cuerpo > p {color: rojo} h1 + h2 {color: rojo} h1 ~ h2 {color: rojo} |
Selectores de atributos |
|
un [título] {color: azul}
a [título = "Lorem"] {color: azul} a [título ~ = "dolor"] {color: azul} a [título ^ = "Lorem"] {color: azul} a [título $ = "amet"] {color: azul} a [título * = "dolor"] {color: azul} |
Pseudoclases y pseudoclases estructurales |
|
: raíz {color de fondo: rojo} |
Otras pseudoclases |
|
div: objetivo {borde: 3px}
div: no (.negro) {color: rojo} entrada: habilitado {color: rojo} |
Pseudo-clases para validación |
|
: predeterminado {fondo: rojo} |
pseudo-elementos |
|
:: primera letra {color: rojo} |
Color | ||
Opacidad | opacidad | div {fondo: blanco; de color negro; opacidad: 0.5} |
color RGBa | RGB
rgb |
cuerpo {color de fondo: rgb (100%, 100%, 100%)}
_____________________ cuerpo {color de fondo: rgb (255, 255, 255)} _____________________ cuerpo {color de fondo: rgba (255, 255, 255, 0.5)} |
color HSLa | hsl
hsla |
cuerpo {color de fondo: hsl (0, 100%, 50%)}
______________________ # box1 {color de fondo: hsla (0.100%, 100%, 0.5); } |
Bordes | ||
Esquinas redondeadas |
|
# box1 {border-top-left-radius: 20px} |
Bordes decorados | imagen de borde | #border {border-image: url (border.png) 27 27 27 27 redondo redondo; } |
Sombras de los contenedores | sombra de la caja | sombra de cuadro: 5px 5px 10px 2px # 333333; |
Antecedentes | ||
Múltiples fondos | url ( primera imagen ), url ( segunda imagen ), ... | imagen de fondo: url (imagen1.png), url (imagen2.png); |
Cortar la imagen de fondo |
|
#cuadro {clip-de-fondo: cuadro-del-borde}
#caja {clip-de-fondo: caja-de-relleno} #box {clip de fondo: cuadro de contenido} |
Posición de la imagen de fondo |
|
origen de fondo: caja de relleno; |
Tamaño de fondo |
|
tamaño de fondo: 50% 50%;
tamaño de fondo: 200px 50px; tamaño de fondo: portada; tamaño de fondo: contener; |
Gradientes como imágenes de fondo | gradiente lineal | imagen de fondo: degradado lineal (arriba a la derecha, #FFFFFF 0 %, #AACFEF 100 %); |
Texto y fuente | ||
fuentes web
(alternativa a las fuentes de Google ) |
@ Perfil delantero | @ Perfil delantero {
familia de fuentes: myFirstFont;
fuente: url (sansation_light.woff);
} |
Salto de texto | ajuste de línea: | #box {envoltura de palabra: palabra de ruptura; } |
Sombra debajo del texto | sombra de texto: | p {texto-sombra: 2px 2px 3px # 333;} |
Orientación del texto (por ejemplo para idiomas donde el texto es vertical) [12] [13] [14] | modo de escritura: "valor" ;
orientación del texto: "valor" ; |
orientación del texto: mixta;
vertical; de lado a la derecha; oblicuo; use-glyph-orientation; heredar; inicial; inicial; un set; modo de escritura: horizontal-tb;vertical-rl; vertical-lr; heredar; inicial; revertir; un set; |
Caracteres especiales | contenido: " carácter especial "; | h1: después de {
contenido: '\ 00A7';
} |
Dirección del texto | horizontal-tb;
vertical-rl; |
p.contenido1 {
modo de escritura: horizontal-tb;
} |
esquema de texto | ancho:
color: |
h1 {trazo de texto: 1px negro;} |
Salto de texto | desbordamiento de texto: clip;
desbordamiento de texto: puntos suspensivos puntos suspensivos; desbordamiento de texto: puntos suspensivos "[..]"; Valores globales:
|
.overflow-clip-clip
{text-overflow: clip clip;} .overflow-clip-ellipsis {text-overflow: clip ellipsis;} .overflow-ellipsis-ellipsis {text-overflow: ellipsis ellipsis;} |
Diseño y modelo de caja | ||
Superávit | desbordamiento-x:
desbordamiento-y: |
# box2 {desbordamiento-x: oculto; } |
Ubicación de contenedores | tamaño de la caja: | # caja1 {tamaño de la caja: caja de contenido; } |
Diseño de varias columnas |
|
#contenedor {ancho: 750px; margen: 20px automático; ancho de columna: 350px; espacio entre columnas: 25px; } |
Diseño de caja flexible |
|
caja de presentación;
orientación de caja: vertical; cuadro-alinear: centro; caja-paquete: justificar; caja flexible: 1; |
Consultas promedio |
|
pantalla @media y (color) { reglas css } |
Transiciones, transformaciones y animaciones | ||
Transiciones |
|
div {propiedad de transición: color de fondo; transición-duración: 2s; } |
Transformaciones |
|
transformar: rotar (40 grados);
transformar-origen: abajo a la izquierda; matriz (a, b, c, d, tx, ty); transformar: traducir (10px, 10px); transformar: escala (0.5); transformar: rotar (180 grados); transformar: sesgo (15 grados, 20 grados); transformar: rotar (180 grados) sesgar (20 grados, 30 grados) escala (2); |
animaciones | @fotograma clave
|
@keyframes 'pulso' {de {fondo-color: rojo; opacidad: 1,0; -transformar: escalar (1.0) rotar (0 grados); } |
Gráficos | ||
filtros | filtro: ninguno | desenfoque () | brillo () | contraste () | sombra paralela () | escala de grises () | matiz-rotar () | invertir () | opacidad () | saturado () | sepia () | URL (); | imagen {
filtro: desenfoque (5px);
} |
Máscaras |
|
mask: url(masks.svg#star) luminance; |
La inserción de código CSS en páginas web se puede realizar de tres formas diferentes:
esta solución garantiza la máxima reutilización posible del código ya que se puede llamar en cada una de las páginas web HTML deseadas.
Esta solución garantiza menos reutilización de código que la anterior ya que solo se puede utilizar dentro de la página HTML en la que se declara.
Esta solución garantiza incluso menos reutilización de código que la anterior.
Una hoja de estilo CSS está estructurada sintácticamente como una secuencia de reglas , que son pares que consisten en un selector y un bloque de declaraciones , entre corchetes. Un selector es un predicado que identifica ciertos elementos del documento HTML; una declaración, separada por un punto y coma de las demás, está compuesta a su vez por una propiedad , es decir, un trazo de estilo (como el color del texto) y un valor a asignar a este último (por ejemplo, azul). separados por dos puntos.
selector1 { propiedad1 : valor1 ; propiedad2 : valor2 ; } selector2 { propiedad3 : valor3 }A continuación se describen algunos de los principales tipos de selectores.
Selectores de tipoLos selectores de tipo aplican la regla a todos los elementos de página del tipo dado. Ejemplos:
cuerpo { [...] }o
pag { [...] } Selectores de claseLas clases aplican la regla a todos los elementos de la página que tienen la propiedad class="nome_classe". La sintaxis de CSS es la siguiente:
. nombre_clase { [...] } Selectores de identificadoresLos identificadores (comúnmente ID ) aplican la regla a ese elemento de la página que tiene la propiedad id="nome_identificatore". Los ID distinguen elementos únicos . La sintaxis de CSS es la siguiente:
# nombre_identificador { [...] } Selectores de pseudo-claseLas pseudoclases identifican elementos en función de sus propiedades.
encontrará solo el primer párrafo en el código HTML (X) a continuación.
< cuerpo > < p > Lorem ipsum </ p > < p > Lorem ipsum </ p > < p > Lorem ipsum </ p > </ cuerpo >solo se aplicará si el puntero del mouse pasa sobre un párrafo y solo por el tiempo que permanecerá allí.
Los pseudoelementos identifican solo una parte de un elemento, sin necesidad de utilizar el marcado HTML (X).
Solo identifican elementos que se encuentran en una relación particular derivada de la estructura de árbol del documento (X) HTML, como descendencia, descendencia, hermandad.
identifica sólo los elementos <span>contenidos en elementos <p>.
solo localiza <p>contenido directamente en un archivo <div>.
solo identifica al primer <p>hermano de<h1>
Selectores de atributosEl selector de atributos permite, a través de la siguiente sintaxis, identificar (X) elementos HTML en función de sus atributos.
a [ título = Ejemplo ] { [...] }Esta regla se aplica solo a los elementos <a>que tienen el atributo title="Esempio". Los selectores de atributos son muchos y permitirían un excelente control de la página, pero Internet Explorer no los soporta y por tanto su uso es muy limitado.
CSS Grids es un sistema de diseño bidimensional, lo que significa que puede manejar tanto columnas como filas, a diferencia de flexbox , que es en gran medida un sistema unidimensional. Las reglas de CSS se aplican tanto a un elemento principal (que se convierte en el contenedor de cuadrícula) como a los elementos secundarios de ese elemento (que se convierten en elementos de cuadrícula) [15] .
CSS .grid-contenedor { pantalla: rejilla; grid-template-columns: auto auto auto; color de fondo: # 2196F3; relleno: 10px; } .grid-elemento { color de fondo: rgba (255, 255, 255, 0.8); borde: 1px sólido rgba (0, 0, 0, 0.8); relleno: 20px; tamaño de fuente: 30px; alineación de texto: centro; } --------------------------------------- HTML < div class = "grid-container" > < div class = "grid-item" > 1 </ div > < div class = "grid-item" > 2 </ div > </ div >Con CSS puedes asegurarte de que el usuario, si imprime una página web, imprime solo ciertos elementos de la página y no todos. Por lo general, el menú, la imagen de fondo y los banners publicitarios se eliminan de la página impresa. Si la página web es particularmente rica en gráficos y está paginada de forma creativa y no estándar, tiende a imprimirse de forma más clásica y estándar [16] [17] . Una alternativa a CSS para la impresión son algunos complementos del navegador que permiten al usuario eliminar ciertos elementos de la página web de la impresión [18] .
Ejemplo de CSS externo para imprimir vinculado a una página web HTML:
< enlace rel = "hoja de estilo" href = "main.css" /> < enlace rel = "hoja de estilo" media = "imprimir" href = "imprimir.css" />Ejemplo de CSS externo para imprimir:
/ * main.css * / cuerpo { margen : 2 em ; color : #fff ; color de fondo : # 000 ; } / * imprimir.css * / @ medios de impresión { cuerpo { margen : 0 ; color : #000 ; color de fondo : #fff ; } }Los colores web son colores que se utilizan para mostrar páginas web en la World Wide Web y en los métodos para describir y especificar esos colores. Los colores se pueden especificar como un triplete RGB o en formato hexadecimal (un triplete hexadecimal ) o, en algunos casos, por sus nombres comunes en inglés. A menudo se utiliza una herramienta de selección de color u otro software de gráficos para generar valores de color. Un ejemplo: #0099CC(un tipo de azul que también se puede escribir Pacific Blue).
Cambiando el nombre de los coloresCSS3 le permite cambiar el nombre de los colores como desee y recuperarlos más tarde [19] :
$ color-danubio : # 668DD1 ; / * RECUPERAR * / $ color-alfa : $ color-danubio ;Sass ( S yntactically A wesome S tyle S hets) es una extensión del lenguaje CSS que le permite usar variables , crear funciones y organizar la hoja de estilo en múltiples archivos .
Less ( LESS ) es un preprocesador CSS que amplía el lenguaje CSS normal permitiendo (además de la sintaxis normal de las hojas de estilo) también el uso de funciones , operadores y variables , el anidamiento de instrucciones, la creación de "mixins" y muchos otros características que hacen que el código sea más fácil de escribir, mantener y comprender.
Las propiedades CSS son numerosas. Los más utilizados son:
Si no se especifica, una propiedad asume los valores predeterminados de cada navegador, o en segundo lugar el estilo de usuario elegido, de lo contrario puede asumir uno de los siguientes:
La cadena de herencia especifica que la propiedad debe heredar el valor de los elementos de los que desciende el elemento. La cadena automática tiene significados muy diferentes según la propiedad a la que se asigne.
Si los números están marcados con una unidad de medida, esta unidad debe expresarse (excepto en el caso de cero). No debe haber espacios entre el número y la unidad, como en el siguiente ejemplo:
p { margen : 5 px ; borde : 1 em ; relleno : 0 ; }Los colores se pueden indicar con más de un sistema. Por ejemplo, el color naranja se puede indicar con:
naranja / * color predeterminado * / rgb ( 255 , 165 , 0 ) / * formato rgb 0 a 255 * / rgb ( 100 %, 64 %, 0 %) / * puede usar porcentajes * / rgba ( 255 , 165 , 0 , 1 ) / * puede especificar el rango alfa de 0 a 1 * / hsl ( 39 , 100 %, 50 %) / * notación matiz saturación luminosidad * / hsla ( 39 , 100 %, 50 %, 1 ) / * alfa se puede especificar */ # ffa600 /*formato hexadecimal RRGGBB*/ # ffa600ff /*formato hexadecimal RRGGBBAA*/ # fa0 /*formato hexadecimal RGB aproximación del valor inicial*/ # fa0f /*formato hexadecimal RGBA aproximación del valor inicial* /La URL se indica en los formularios
url ( http : // ejemplo . it / archivo . html ) url ( "http://ejemplo.it/archivo.html" )CSS te permite indicar en la propiedad font-family más de una fuente, o una familia de fuentes (serif y sans). De esta forma el navegador utilizará el primero que encuentre instalado en el sistema operativo . La declaración utiliza esta sintaxis:
p { familia de fuentes : "Arial" , "Verdana" , serif ; } CSS para SVGPuede usar CSS para modificar los estilos de SVG (parte de HTML5) [20] . Ejemplo:
svg { color de fondo : beige ; }CSS para Lienzo HTML5
<!DOCTYPE html> < html > < head > < título > Tamaño del elemento del lienzo: 600 x 300, Tamaño de la superficie de dibujo del lienzo: 300 x 150 </ título > < estilo > cuerpo { fondo : #dddddd ; } # lienzo { margen : 20 px ; relleno : 20 px ; fondo : #ffffff ; borde : inserción delgada #aaaaaa ; ancho : 600 píxeles ; altura : 300 píxeles ; } </ estilo > </ cabeza > < cuerpo > < lienzo id = "lienzo" > Lienzo no compatible </ lienzo > </ cuerpo > </ html > Creación automática de CSSCon programas de edición de gráficos y fotografías como Photshop , es posible convertir capas en estilos CSS [21] .
Usando 3DCSS3 introdujo la propiedad "Transformación 3D" que le permite crear algunas animaciones y formas en 3D pero no puede igualar las posibilidades de WebGL [22] [23] .
La siguiente lista es de motores de renderizado porque se les asigna la tarea de formatear la página de acuerdo con las instrucciones de CSS.
Gecko ( Mozilla Firefox y Netscape Navigator ) Gecko tiene un excelente soporte para CSS 1,2 y 3 y, por lo tanto, se usa a menudo para verificar el rendimiento de las páginas web. Gecko y Mozilla Firefox son software libre . Netscape Navigator (obsoleto el 1 de marzo de 2008 [24] ) también se distribuyó bajo una licencia gratuita . Tridente ( Internet Explorer y AOL Explorer ) Internet Explorer (obsoleto desde agosto de 2020 [25] a favor de Edge ), desde la versión 9 soportaba CSS 3. Una peculiaridad de Internet Explorer eran los llamados comentarios condicionales que permitían aplicar reglas CSS solo a una determinada versión de Internet. explorador Esta función se usaba mucho cuando se suponía que un usuario todavía usaba versiones antiguas de Internet Explorer y, por lo tanto, requería con frecuencia algunas reglas CSS adicionales para la visualización correcta de la página web. [26] En muchos casos, fue necesario usar reglas de estilo CSS ad-hoc exclusivamente para Internet Explorer debido a diferencias sustanciales en la forma en que algunas versiones de Internet Explorer se desvían de los estándares, como el " box modelno estándar" que usan algunas versiones. de Internet Explorer y que difería sustancialmente de la impuesta por los estándares del World Wide Web Consortium. [27] [28] La sintaxis de los comentarios condicionales era la siguiente: <! - '' '[si IE]>' '' '' reglas CSS ad-hoc para Internet Explorer '' '' '<! [endif]' '' -> ya que <!--normalmente introducía un comentario, los navegadores distintos a Explorer 5.0 o superior no interpretaban el código. Los comentarios condicionales le permitieron especificar una hoja de estilo específica de Internet Explorer de la siguiente manera: <! - [si IE]> <link rel = "hoja de estilo" type = "text / css" href = "'' 'ad-hoc_stylesheet_for_IE.css' ''"> <! [endif] ->Trident e Internet Explorer son software propietario .
Pronto ( Ópera ) Presto ofrece un excelente soporte para CSS 1,2 y 3. Opera también ofrece una opción que permite al usuario deshabilitar las hojas de estilo o usar las suyas propias. Presto y Opera son software propietario . KHTML y WebKit ( Safari , Google Chrome y Konqueror ) KHTML es actualmente el motor que ofrece mayor soporte para CSS, ofreciendo una interpretación casi total de CSS 3. KHTML y WebKit son software libre ; Safari y Google Chrome son software propietario (mantenido por Apple y Google respectivamente ), mientras que Konqueror es software libre ( con licencia GPL , mantenida por la comunidad KDE ).Además de las diferencias de compatibilidad, cada motor de renderizado agrega algunos elementos o propiedades nuevos al CSS estándar.
Normalmente, estas propiedades comienzan con un prefijo que cambia según el navegador, por ejemplo, -webkitindicando que la propiedad es para el motor de renderizado WebKit, por ejemplo -webkit-appearance. Sin embargo, todas estas propiedades solo deben usarse cuando solo desea usar ese navegador con ese motor de representación en particular, ya que todas estas propiedades son características adicionales válidas solo para ese motor de representación en particular y no son propiedades estándar definidas por el World Wide Web Consortium.
EdgeHTML es compatible con CSS, incluido CSS3. EdgeHTML y Microsoft Edge son software propietario .
Antes de la llegada de CSS3, CSS2 creaba múltiples archivos CSS para el mismo sitio web que cargaba el archivo CSS correspondiente al dispositivo utilizado por el usuario. En HTML, se especificó la siguiente sintaxis:
<enlace rel = "hoja de estilo" type = "texto/css" href = "hoja.css" media = "pantalla" />El código anterior solo asigna la hoja de estilo a los navegadores estándar de computadoras de escritorio y portátiles. Los valores del atributo "media" son los mismos que los de la regla CSS " media queries " . Aunque todavía es posible crear múltiples hojas de estilo para diferentes medios y especificar esto en la etiqueta "link rel", dado que las consultas de medios son compatibles con todos los navegadores modernos, la mayoría de los desarrolladores las usan, ya que permiten que una sola hoja CSS adapte el HTML relacionado. página a todos los dispositivos utilizando muchas menos líneas de código [29] .
Cada solicitud del servidor por separado ( tiempo hasta el primer byte o TTFB) afecta su velocidad (al invocar imágenes, fuentes, videos, elementos JS ... en el código). Con CSS puedes aumentar considerablemente el rendimiento de una página al reducir esa cantidad de solicitudes.
Utilice CSS3 para evitar el uso de imágenes (jpg, png, ...) por ejemplo para esquinas redondeadas, sombras, degradados y transparencias.
Use CSS Sprites , haciendo una sola llamada al servidor usando una sola imagen que contiene muchas para múltiples partes de la página web (o todo el sitio web).
Comprima archivos CSS con el método " minify " para reducir el peso del archivo CSS y, por lo tanto, el ancho de banda utilizado para recuperar este archivo del servidor. Esto también se puede hacer con páginas HTML y JavaScript [30] . De esta forma, sin embargo, el código estará libre de espacios y la modificación será más compleja.
Además, hay más formas de lograr el mismo resultado con CSS. El método que debe elegir es el que le permite escribir la menor cantidad de código posible para minimizar el peso del archivo ".css". Por ejemplo:
. foo { color : # ff0000 ; } . barra { color : rgba ( 255 , 0 , 0 , 1 ); } /* EQUIVALENTE A */ . barra , ._ foo { color : rojo }No utilice demasiadas fuentes integradas ( @ font-face y Google Fonts ).
Minimice la cantidad de archivos CSS y la cantidad de archivos en general. Por ejemplo, adaptar el diseño de las páginas web a varios dispositivos y medios, no utilizando múltiples hojas de estilo para cada dispositivo sino solo una que adapte la página a todos a través de media queries . De esta forma, el servidor tendrá la llamada para una sola hoja CSS.
Reemplace JavaScript con CSS para crear información sobre herramientas , galerías de imágenes y más [9] [10] [11] . De hecho, CSS requiere menos recursos que JS.
Como se ha descrito, se pueden vincular varias hojas de estilo a cada página. Sin embargo, también es posible que el usuario elija cuáles aplicar. Para ello, primero defina las hojas de estilo permanentes, es decir, no se pueden desactivar, según la sintaxis ya vista. Luego se definen las hojas preferidas, es decir, activas cuando se carga la página, pero se pueden desactivar agregando el atributo <title>como en el siguiente ejemplo:
<enlace rel = "hoja de estilo" type = "texto/css" href = "hoja_favorita.css" title = "Ejemplo1" />En este punto, es posible especificar hojas de estilo alternativas, es decir, no activas al cargar, pero que pueden ser activadas por el usuario, como en el siguiente ejemplo:
<enlace rel = " hoja de estilo alternativa " type = "texto/css" href = "hoja_alternativa.css" title = "Ejemplo2" />Para activar y desactivar las hojas de estilo, el usuario puede utilizar el menú correspondiente de su navegador, sin embargo Internet Explorer no ofrecía esta posibilidad por lo que fue necesario crear un script JavaScript que cumpliera la función de reemplazar las hojas. El código se publicó por primera vez en A List Apart . Sin embargo, si bien este script fue fácil de implementar para los desarrolladores, requería un navegador actualizado con buen soporte DOM , además de tener JavaScript y cookies habilitados . Un sistema más complejo pero mucho más robusto podría ser un script del lado del servidor como PHP . Siempre hay un ejemplo disponible en el mismo sitio .
Los patrones son figuras modulares que se repiten sin cesar y que normalmente forman el fondo de elementos HTML como contenedores DIV, botones, fondo de página web, párrafos. Puede crearlos directamente en CSS, con imágenes o fusionando ambos métodos, es decir, creando una imagen base y repitiéndola con la regla de repetición de fondo [31] . En estos tres casos no hace falta hacer una imagen de fondo del tamaño del contenedor que pesaría mucho más.
Acid3 es una prueba con la que es posible verificar la adherencia de un navegador a ciertos estándares web, incluido CSS3 [32] .
Stylus es un lenguaje de preprocesador de hoja de estilo dinámico compilado en hojas de estilo en cascada (CSS). Su diseño está influenciado por Sass y LESS . Se considera la cuarta sintaxis de preprocesador CSS más utilizada [33] . Fue creado por TJ Hollowaychuk, ex programador de Node.js y creador del lenguaje Luna. Está escrito en JADE y Node.js.
A diferencia de CSS, que usa corchetes para abrir y cerrar bloques de declaración, se usa sangría. Además, los puntos y comas (;) se omiten opcionalmente. Entonces, el siguiente CSS:
color del cuerpo : blanco ; }se puede abreviar a:
color del cuerpo : blanco ;Además, los dos puntos (:) y las comas (,) también son opcionales; esto quiere decir que lo anterior se puede escribir de la siguiente manera:
color de cuerpo blancoStylus le permite definir variables, sin embargo, a diferencia de LESS y Sass, no usa un símbolo para definir variables. Además, la asignación de variables se realiza de forma automática separando la propiedad y las palabras clave. De esta forma, las variables son similares a las variables en Python.
mensaje = '¡Hola, mundo!' div :: antes del color del mensaje de contenido # ffffffEl compilador Stylus traduciría el ejemplo anterior a:
div :: before { content : "¡Hola, mundo!" ; color : #ffffff ; }Tanto los mixins como las funciones se definen de la misma manera, pero se aplican de diferentes maneras.
Por ejemplo:
borde-radio ( n ) -webkit-border-radio n -moz-border-radius n borde-radio nentonces, para incluirlo como un mixin:
división _ rectángulo de radio de borde ( 10px )que se compilaría en:
división _ rectángulo { -webkit -border-radius : 10 px ; -moz- borde-radio : 10 px ; borde-radio : 10 px ; }Para incluir variables en argumentos e identificadores, las variables están rodeadas por corchetes. Por ejemplo,
-webkit- { 'borde' + '-radio' }corresponde a
-webkit-border-radioCSS dinámico, o DCSS, es un término que abarca un conjunto de tecnologías que se usan juntas para crear hojas de estilo dinámicas, utilizando una combinación de cualquier lenguaje de programación del lado del servidor ( como PHP / ASP / Perl / JSP ) y CSS) [34] . La idea inicial del DCSS fue escrita en julio de 2002 por Jori Koolstra , un programador holandés [35] .
DCSS le permite trabajar con variables en CSS y con reescritura dinámica del código fuente de CSS. Muchos CMS han creado módulos complementarios, por ejemplo, Drupal .
Ejemplo:
$ persistente = [ 'bgmast' => 'bbd9ee' , / * lista * / 'fgmast' => '4d4d4d' , 'bgmenu' => 'e7e4d3' , / * menú * / 'fgmenu' => '444' , 'bgcont' => 'fff' , / * contenido * / 'fgcont' => '444' ];CSS puede generar una serie de cursores de mouse diferentes que el usuario verá al llegar a la página HTML que los contiene [36] [37] :
W3C está desarrollando algunas especificaciones CSS3 para crear diseños similares a los de revistas y semanarios, con la capacidad de ejecutar texto alrededor de imágenes sin fondo (PNG y GIF) y formas geométricas [38] [39] [40] [41] .
CSS en línea
< div id = ”circle” style = "exclusion-shape: poly (x1, y1, .., xN, yN)" > </ div > < div style = "region-thread: content; exclusions: #circle;" > </ div >CSS externo
. exclusión { wrap-flow : ambos ; posición : absoluta ; ancho : 200 píxeles ; } . región { flujo desde : artículo ; tamaño de caja : cuadro de borde ; posición : absoluta ; ancho : 200 píxeles ; altura : 200 píxeles ; relleno : 10 px ; }Comparación de logo CSS3 creado con CSS, con SVG y con HTML5 Canvas
Comparación de algunos filtros CSS3 y filtros Gimp equivalentes
Antes de CSS3, se usaban múltiples <p> para distribuir el texto en varios párrafos. Solo se puede usar un <p> con CSS3.
Comparación de múltiples fondos CSS2 y CSS3. En el primer caso, se necesitaban varias etiquetas <img>, cada una con un fondo y un índice z, en el segundo, un solo <img> con múltiples fondos
Comparación de GIMP, CSS3 y máscara SVG
Los marcos CSS son bibliotecas preparadas previamente que están destinadas a permitir un estilo más simple y compatible con los estándares de las páginas web utilizando el lenguaje de hojas de estilo en cascada. Los marcos CSS incluyen Blueprint, Bootstrap , Cascade Framework, Foundation, MDBootstrap y Materialise. Al igual que las bibliotecas de lenguajes de programación y secuencias de comandos, los marcos CSS generalmente se integran como hojas .css externas a las que se hace referencia en el HTML <head>. Proporcionan una serie de opciones listas para usar para el diseño y el diseño de páginas web. Aunque muchos de estos marcos se han publicado, algunos autores los usan principalmente para la creación rápida de prototipos o para aprender de ellos, y prefieren 'crear manualmente' CSS apropiado para cada sitio publicado sin el diseño, el mantenimiento y los gastos generales de descarga de muchas funciones no utilizadas. estilo del sitio.
A medida que aumenta el tamaño de los recursos CSS utilizados en un proyecto, un equipo de desarrollo a menudo tiene que decidir sobre una metodología de diseño común para mantenerlos organizados. Los objetivos son la facilidad de desarrollo, la facilidad de colaboración durante el desarrollo y el rendimiento de las hojas de estilo distribuidas en el navegador. Las metodologías populares incluyen OOCSS (CSS orientado a objetos), ACSS (CSS atómico), oCSS (Hoja de estilo en cascada orgánica), SMACSS (Arquitectura escalable y modular para CSS) y BEM (Bloque, elemento, modificador)