CSS | |
---|---|
Extensión | .css |
tipo MIME | texto/css |
Desarrollador | Grupo de trabajo de CSS [d] |
publicado | 17 de diciembre de 1996 |
Tipo de formato | Lenguaje de hojas de estilo |
Estándar(es) |
Nivel 1 (Recomendación) Nivel 2 (Recomendación) Nivel 2 Revisión 1 (Recomendación) |
Sitio web |
w3.org/Style/CSS/drafts.csswg.org _ |
CSS ( /siːɛsɛs/ English Cascading Style Sheets ) es un lenguaje formal para describir la apariencia de un documento ( página web ) escrito usando un lenguaje de marcas (generalmente HTML o XHTML ). También se puede aplicar a cualquier documento XML , como SVG o XUL .
Los creadores de páginas web utilizan CSS para definir colores , fuentes , estilos, posicionamiento de bloques individuales y otros aspectos de presentación de la apariencia de esas páginas web. El principal objetivo de diseño de CSS es cercar y separar la descripción de la estructura lógica de una página web (lo que se hace usando HTML u otros lenguajes de marcado ) de la descripción de la apariencia de esa página web (que ahora se hace usando el CSS formal ). idioma). Esta separación puede aumentar la accesibilidad de un documento, brindar mayor flexibilidad y control sobre su presentación y reducir la complejidad y la repetición en el contenido estructural.
Además, CSS permite que el mismo documento se presente en diferentes estilos o métodos de salida , como presentación en pantalla, presentación impresa, lectura de voz (con un navegador de voz dedicado o un lector de pantalla) o cuando se muestra en dispositivos Braille . .
Las reglas CSS se pueden ubicar tanto en el propio documento web , cuya apariencia describen, como en archivos externos que tengan la extensión .css . El formato CSS es un archivo de texto que contiene una lista de reglas CSS y sus comentarios.
Los estilos CSS se pueden incluir o incrustar en el documento web que describen de cuatro maneras:
En los dos primeros casos, se aplican estilos externos al documento , y en el segundo, se aplican estilos internos .
Para agregar CSS a un documento XML, este último debe contener un enlace especial al archivo de estilo:
<?xml-stylesheet type="text/css" href="style.css"?>En los primeros tres casos de agregar estilos CSS a un documento (ver arriba), cada regla CSS del archivo tiene dos partes principales: un selector y un bloque de declaración . El selector , ubicado en el lado izquierdo de la regla antes de "{", determina a qué partes del documento (posiblemente marcadas especialmente) se aplica la regla. El bloque de anuncios se encuentra en el lado derecho de la regla. Se coloca entre corchetes y, a su vez, consta de una o más declaraciones separadas por ";". Cada declaración es una combinación de una propiedad CSS y un valor separados por un ":". Los selectores se pueden agrupar en la misma línea separados por comas. En este caso, la propiedad se aplica a cada uno de ellos.
selector , selector { propiedad: valor ; propiedad: valor ; propiedad: valor ; }En el cuarto caso de conectar CSS a un documento (ver lista), la regla CSS, que es el valor del atributo de estilo del elemento al que se aplica, es una lista de declaraciones (" propiedad CSS : valor ") separadas por " ;".
Tipos de selectores Selector universal * { margen : 0 ; relleno : 0 _ } Selector de etiquetas p { familia de fuentes : arial , helvética , sans-serif ; } Selector de clases . nota { color : rojo ; color de fondo : amarillo fuente-peso : negrita ; } Selector de identificador # párrafo1 { margen : 0 ; } Selector de atributos a [ href = "http://www.somesite.com" ] { font-weight : bold ; } Selector de descendientes (selector de contexto) div # párrafo1 p . nota { color : azul ; } Selector de niños pág . nota > b { color : verde ; } . div { borde : 1 px rojo sólido ; relleno - izquierda : 20px } . título { tamaño de fuente : 20 px ; color de fondo : rojo } El selector de elementos hermanos h1 + p { tamaño de fuente : 24 px ; } Selector de pseudoclase a : activo { color : azul ; } Selector de pseudo-elementos p :: primera letra { tamaño de fuente : 32 px ; }Se puede asignar una clase o identificador a un elemento HTML a través de los atributos de clase o id del elemento:
<!DOCTYPE html> < html > < encabezado > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < título > Selectores de clase e ID </ título > < estilo > pág . big { familia de fuentes : arial , helvetica , sans-serif ; color : rojo _ } div # primero { color de fondo : plateado ; } </ estilo > </ cabeza > < cuerpo > < div id = "primero" > <!-- Este es un div de fondo gris diseñado por id --> </ div > < p clase = "grande" > <! -- Esto es texto rojo --> </ p > </ body > </ html >La principal diferencia entre las clases de elementos y los identificadores de elementos es que un identificador es para un solo elemento, mientras que una clase generalmente se asigna a varios elementos a la vez. Sin embargo, los navegadores modernos tienden a representar correctamente varios elementos con el mismo ID. Además, la diferencia es que pueden existir varias clases (cuando la clase de un elemento consta de varias palabras separadas por espacios). Esto no es posible para los identificadores.
Es importante tener en cuenta la siguiente diferencia entre un identificador y una clase: los identificadores se usan ampliamente en JavaScript para encontrar un elemento único en un documento.
Los nombres de las clases y los identificadores, a diferencia de los nombres de las etiquetas y sus atributos, distinguen entre mayúsculas y minúsculas.
Las propiedades de las clases y los identificadores se establecen utilizando los selectores apropiados. Además, se puede configurar como una propiedad de la clase en su conjunto (en este caso, el selector comienza con ".", por ejemplo, ".grande") o como una propiedad del propio identificador (en este caso, el selector comienza con "#", por ejemplo, "#first"), y la propiedad de algún elemento de esta clase o con este identificador.
En CSS, además de las clases definidas por el autor de la página, también existe un conjunto limitado de las denominadas pseudoclases que describen la apariencia de los hipervínculos con un determinado estado en el documento, la apariencia del elemento en el que se está enfocado, y la aparición de elementos que son los primeros hijos de otros elementos. También hay cuatro llamados pseudo-elementos en CSS : la primera letra, la primera línea, aplicando estilos especiales antes y después del elemento.
La aplicación de CSS a documentos HTML se basa en los principios de herencia y cascada . El principio de la herencia es que las propiedades CSS declaradas en elementos antecesores casi siempre son heredadas por elementos descendientes.
El principio de cascada se utiliza cuando más de una regla CSS está asociada a algún elemento HTML al mismo tiempo, es decir, cuando existe un conflicto entre los valores de estas reglas. Para resolver tales conflictos, se introducen reglas de precedencia.
Selector | a B C D | Número |
---|---|---|
lapso | 0, 0, 0, 1 | una |
div.clase | 0, 0, 1, 1 | once |
#id .clase | 0, 1, 1, 0 | 110 |
lapso div | 0, 0, 0, 2 | 2 |
.clase | 0, 0, 1, 0 | diez |
#intervalo de identificación | 0, 1, 0, 1 | 101 |
Un ejemplo de una hoja de estilo (de esta forma, puede colocarse en un archivo .css separado o enmarcarse con etiquetas <style>y colocarse en el "encabezado" de la misma página web en la que actúa):
p { familia de fuentes : arial , helvética , sans-serif ; } h2 { tamaño de fuente : 20 pt ; color : rojo _ fondo : blanco _ } . nota { color : rojo ; color de fondo : amarillo fuente-peso : negrita ; } p # párrafo1 { padding-left : 10 px ; } a : hover { decoración de texto : ninguno ; } # noticias p { color : azul ; } [ tipo = "botón" ] { color de fondo : verde ; }Aquí hay siete reglas CSS con los selectores p, h2, .note, p#paragraph1, a:hovery . #news p[type="button"]
Antes de la llegada de CSS, el estilo de la página web se hacía exclusivamente en HTML , directamente dentro del contenido de un documento. Sin embargo, con la llegada de CSS, se hizo posible separar fundamentalmente el contenido y la presentación de un documento. Debido a esta innovación, se hizo posible aplicar fácilmente un solo estilo de diseño para una gran cantidad de documentos similares, así como cambiar rápidamente este diseño.
ventajas:
Defectos:
CSS es una de una amplia gama de tecnologías respaldadas por el W3C y denominadas colectivamente como "estándares web" [2] . En la década de 1990, se hizo evidente la necesidad de estandarizar la Web, para crear algún tipo de reglas uniformes según las cuales los programadores y diseñadores web diseñarían sitios. Así aparecieron los lenguajes HTML 4.01 y XHTML , y el estándar CSS.
A principios de la década de 1990, diferentes navegadores tenían sus propios estilos para mostrar páginas web. HTML se desarrolló muy rápido y fue capaz de satisfacer todas las necesidades de diseño de información que existían en ese momento, por lo que CSS no recibió una gran aceptación en ese momento.
El término hojas de estilo en cascada fue acuñado por Haakon Lee en 1994. Junto con Bert Bos, comenzó a desarrollar CSS.
A diferencia de muchos lenguajes de estilo que existían en ese momento, CSS usa herencia de padre a hijo, por lo que un desarrollador puede definir diferentes estilos basados en estilos ya definidos.
A mediados de la década de 1990, el World Wide Web Consortium ( W3C ) comenzó a mostrar interés en CSS, y en diciembre de 1996 se emitió la recomendación CSS1.
Recomendación W3C, adoptada el 17 de diciembre de 1996 , modificada el 11 de enero de 1999 [3] . Entre las características que brinda esta recomendación:
Recomendación W3C, adoptada el 12 de mayo de 1998 [4] . Basado en CSS1 manteniendo la compatibilidad con versiones anteriores con algunas excepciones. Agregando a la funcionalidad:
El W3C ya no es compatible con CSS2 y recomienda usar CSS2.1
Nivel 2 revisión 1 (CSS2.1)Recomendación del W3C, adoptada el 7 de junio de 2011 .
CSS2.1 se basa en CSS2. Además de corregir errores, algunas partes de la especificación se han cambiado en la nueva revisión y algunas[ ¿Qué? ] y completamente eliminado. Las partes eliminadas pueden agregarse a CSS3 en el futuro.
CSS3 ( English Cascading Style Sheets 3 - hojas de estilo en cascada de la tercera generación ) es una especificación CSS desarrollada activamente . Es un lenguaje formal implementado mediante un lenguaje de marcado . La revisión más grande en comparación con CSS1, CSS2 y CSS2.1. La característica principal de CSS3 es la capacidad de crear elementos animados sin el uso de JS [5] , compatibilidad con degradados lineales y radiales, sombras, suavizado y más.
Se utiliza principalmente como un medio para describir y diseñar la apariencia de las páginas web escritas con los lenguajes de marcado HTML y XHTML , pero también se puede aplicar a cualquier documento XML , como SVG o XUL .
Versión de desarrollo (lista de todos los módulos) [6] .
A diferencia de las versiones anteriores, la especificación se divide en módulos, cuyo desarrollo y desarrollo se lleva a cabo de forma independiente. CSS3 se basa en CSS2.1, aumenta las propiedades y los valores existentes y agrega otros nuevos.
Innovaciones, comenzando con pequeños, como esquinas redondeadas de los bloques, terminando con transformación ( animación ) y, posiblemente, la introducción de variables [7] [8] .
Desarrollado por W3C desde el 29 de septiembre de 2011 [9] [10] .
Los módulos CSS4 se construyen sobre CSS3 y les agregan nuevas propiedades y valores. Todos ellos existen hasta ahora en forma de borradores (borrador de trabajo).
Por ejemplo:
Los navegadores que más admiten el estándar CSS son los navegadores que se ejecutan en los motores Gecko ( Mozilla Firefox , etc.), WebKit ( Safari , Arora , Google Chrome ) y Presto (Opera) [11] .
El antiguo navegador más utilizado [12] Internet Explorer 6 no es totalmente compatible con CSS [13] .
Lanzado siete años más tarde, Internet Explorer 7 mejoró significativamente el nivel de soporte de CSS [14] [15] , pero aún contenía una cantidad significativa de errores [16] .
Internet Explorer 8 utiliza un nuevo motor que admite completamente CSS 2.1 y admite parcialmente CSS 3 [17] .
Para probar la compatibilidad del navegador con los estándares web, incluidas varias partes del estándar CSS, se desarrolló la prueba Acid .
Los estándares CSS del W3C utilizan un modelo en el que una propiedad widthdefine el ancho del contenido del cuadro sin incluir relleno ni bordes. Las primeras versiones de Internet Explorer (4 y 5) implementaron su propio modelo donde el ancho define el espacio entre los bordes del cuadro, incluido el relleno ( padding) y los bordes ( border). Además de Internet Explorer 5, este modelo también es conocido por los navegadores Netscape 4 y Opera 7. El soporte para el modelo estándar W3C solo apareció en IE en la sexta versión.
El próximo estándar CSS3 introdujo una propiedad box-sizingcon valores content-boxpara indicar el uso del modelo estándar W3C y border-boxpara usar el modelo IE 5 para solucionar este problema.
En el navegador Mozilla , con el apoyo de esta propiedad, bajo su propio nombre "de trabajo" -moz-box-sizing, se introdujo otro valor - padding-box, creando así un tercer modelo de caja, en el que width está el tamaño del contenido y las sangrías del bloque, sin incluir el cuadro.
Las diferencias en la implementación de CSS por diferentes navegadores obligan a los desarrolladores web a buscar soluciones sobre cómo hacer que todos los navegadores representen la página de la misma manera. Los filtros CSS (también conocidos como trucos CSS) le permiten aplicar estilos de forma selectiva a diferentes elementos. Por ejemplo, se sabe que Internet Explorer 6 impone reglas que usan selectores de vista (un filtro conocido como " error html de estrella "). Para que el modelo de cuadro W3C e IE se ejecute en el modo Quirks y muestre un cuadro de 100 px de ancho con un relleno de 10 px, puede escribir un código como este: * html селектор#someblock
/* Modelo W3C: ancho de contenido de 80 px y relleno de 10 px en cada lado */ # someblock { width : 80 px ; relleno : 10px _ _ } /* La siguiente regla solo se aplicará a IE6. */ * html # algún bloque { ancho : 100 px ; relleno : 10px _ _ }Otra forma de hacer cumplir las reglas de forma selectiva para Internet Explorer son los comentarios condicionales .
Todas las versiones de Internet Explorer admitidas en 2010 eran vulnerables: cuando el navegador procesa los estilos en cascada (CSS), puede aparecer memoria no inicializada, que posteriormente se utiliza para lanzar código malicioso de forma remota en la computadora del usuario [18] .
CSS Framework (también marco de diseño web ) es una biblioteca CSS preparada previamente creada para simplificar el trabajo del diseñador de diseño, acelerar el desarrollo y eliminar la mayor cantidad posible de errores de diseño (problemas de compatibilidad entre diferentes versiones del navegador, etc.). Al igual que las bibliotecas de lenguajes de programación de secuencias de comandos, los marcos CSS, generalmente en forma de un archivo .css externo, están "conectados" al proyecto (se agregan al encabezado de la página web), lo que permite que un programador o diseñador sin experiencia en las complejidades de layout para crear correctamente un diseño html.
A menudo, al diseñar páginas, debe usar el mismo valor muchas veces: el mismo color, la misma fuente. Y si es necesario cambiar este valor, habrá que cambiarlo en muchos lugares.
Para solucionar estos problemas y acelerar el desarrollo, existen varias extensiones (preprocesadores) del lenguaje CSS. Extensiones en el sentido de que el código CSS es código válido para una extensión, pero no al revés. Para que el código "CSS extendido" se convierta en un archivo CSS normal que el navegador perciba, debe compilarlo. La compilación puede ser de varios tipos:
Ejemplos de extensiones CSS (preprocesadores):
Lenguajes de hojas de estilo ( compare , list ) | |
---|---|
Modos |
|
Estándar | |
no estándar |
|
Consorcio World Wide Web (W3C) | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Productos y estándares |
| ||||||||||||||
Organizaciones |
| ||||||||||||||
EN |
| ||||||||||||||
Conferencias |
|
Web y sitios web | |
---|---|
globalmente | |
En la zona | |
Tipos de sitios y servicios |
|
Creación y mantenimiento | |
Tipos de diseños, páginas, sitios. | |
Técnico | |
Marketing | |
sociedad y Cultura |
Hojas de estilo en cascada | |
---|---|
CSS |
|
Comparación |
|
diseño web |
|
Hojas de estilo en cascada |