Diferencia entre revisiones de «CSS»

[[CSS]] está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las capas o ''layouts'', los colores y las fuentes.<ref>{{Cita web|url=http://www.w3.org/standards/webdesign/htmlcss#whatcss|título=HTML & CSS - W3C|fechaacceso=21 de octubre de 2016|sitioweb=www.w3.org}}</ref> Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la especificación de características presentacionales, permitir que varios documentos [[HTML]] compartan un mismo estilo usando una sola hoja de estilos separada en un archivo <code>.css</code>, y reducir la complejidad y la repetición de código en la estructura del documento.

Las '''pseudoclases''' son usadas en los selectores CSS para permitir el formateo usando información que no está incluida en el documento. Un ejemplo de una pseudoclase muy usada es <code>:hover</code>, que identifica el contenido que está siendo apuntado por un puntero, como el cursor del ratón. Este nombre se añade al selector, de esta manera: <code>a:hover</code> o <code>#elementid:hover</code>. Una pseudoclase clasifica elementos, como <code>:link</code> o <code>:visited</code>, mientras que un pseudoelemento hace una selección de elementos parciales, como <code>::first-line</code> o <code>::first-letter</code>.

|<code>E:link</code> || un elemento E que es un enlace que no ha sido visitado (:link) o ya fue visitado (:visited) || 1

Los valores de colores son especificados por medio de una palabra clave (ej. "red"), de valores hexadecimales (ej. #FF0000, pudiéndose abreviar como #F00), valores RGB en una escala del 0 al 255 (ej. <code>rgb(255, 0, 0)</code>), valores RGBA igual que los valores RGB pero con soporte para el canal alfa de transparencias (ej. <code>rgba(255, 0, 0, 0.8)</code>), y valores [[HSL]] o [[HSLA]] (ej. <code>hsl(000, 100%, 50%)</code>, <code>hsla(000, 100%, 50%, 80%)</code>).

La hoja de estilos con la máxima prioridad controla la visualización del contenido. Las declaraciones no establecidas en la fuente con máxima prioridad son sobreeescritassobrescritas, como las hojas de estilos del agente de usuario. Este proceso es llamado ''cascading'', o cascada.<ref>{{cita web|editorial=[[W3C]]|url=https://www.w3.org/TR/2016/WD-CSS22-20160412/cascade.html#cascade|título=The cascade|fecha=12 de abril de 2016|idioma=en}}</ref>

Una de las metas de CSS es permitir a los usuarios un mayor control sobre la presentación. Algunas personas que encuentran a los encabezados rojos en itálicas difíciles de leer pueden aplicar una hoja de estilos diferente. Dependiendo del navegador y del sitio web, un usuario puede escoger entre varias hojas de estilo provistas por los diseñadores, o pueden remover todas las hojas de estilos añadidas y ver el sitio usando los estilos por defecto del navegador, o pueden sobreescribirsobrescribir solo el estilo de los encabezados rojos en itálica sin alterar otros atributos.

En este ejemplo, la declaración en el atributo <code>style</code> sobreescribesobrescribe la declaración del elemento <code>&lt;style></code> porque tiene un especificidad más alta.

La herencia es una característica clave en CSS; basada en la relación ancestro-descendiente para operar. La herencia es el mecanismo por el cual las propiedades no solo se aplican a un solo elemento, sino también a sus descendientes. La herencia se basa en el árbol del documento, el cual es la jerarquía de los elementos XHTML en una página basada en el anidamiento. Los elementos descendientes pueden heredar los valores de las propiedades CSS de un elemento ancestro. En general, los elementos descendientes heredan las propiedades relacionadas al texto, pero las propiedades relacionadas con la caja no. Las propiedades que pueden ser heredadas son el color, fuente, espaciado, el peso de la línea, propiedades de lista, alineación del texto, identado, visibilidad, espaciado de espacios and y espaciado entre palabras. Las propiedades que no pueden ser heredadas son el fondo, bordes, visualización, posicionamiento, tamaño, márgenes, tamaño mínimo y máximo, ''outline'', desbordamiento, relleno, posición, alineación vertical y z-index.<ref>{{cita web|editorial=[[W3C]]|url=https://www.w3.org/TR/2016/WD-CSS22-20160412/cascade.html#inheritance|título=Inheritance|fecha=12 de abril de 2016|idioma=en}}</ref>

: Fuerza al elemento a no fluir alrededor de los elementos que flotan a la izquierda (<code>clear: left</code>), a la derecha (<code>clear: right</code>) o a ambos lados (<code>clear: both</code>).

Las hojas de estilo han existido de una forma u otra desde los comienzos del Standard Generalized Markup Language ([[SGML]]) en la década de los 80s80, y CSS fue desarrollado para proveer hojas de estilos para la web.<ref name=css-phd>{{cita web|título=Cascading Style Sheets|url=http://people.opera.com/howcome/2006/phd/|editorial=University of Oslo|fechaacceso=3 de septiembre de 2014|enlaceautor=Håkon Wium Lie|urlarchivo=https://web.archive.org/web/20141004215348/http://people.opera.com/howcome/2006/phd/|fechaarchivo=4 de octubre de 2014}}</ref> Un requerimiento para un lenguaje de hoja de estilos web era que las hojas de estilo vinieran en diferentes estilos en la web. Por lo tanto, los lenguajes de hojas de estilos existentes como [[Document Style Semantics and Specification Language|DSSSL]] y [[Formatting Output Specification Instance|FOSI]] no fueron adecuados. CSS, por otro lado, permite al documento ser influido por múltiples hojas de estilo por medio de los estilos en «cascada».<ref name=css-phd/>

Mejorar las capacidades de la presentación en la web fue un tema de interés para muchos en las comunidades web, y 9 diferentes lenguajes de hojas de estilos fueron propuestos en la lista de correo www-style.<ref name=css-phd/> De esas nueve propuestas, dos influenciaron profundamente en lo que sería CSS: Cascading HTML Style Sheets<ref name=chss-proposal /> y Stream-based Style Sheet Proposal (SSP).<ref name="WWW3"/><ref name=ssp>{{cita web|título=Stream-based Style sheet Proposal|url=http://www.w3.org/People/Bos/stylesheets.html|fechaacceso=3 de septiembre de 2014|enlaceautor=Bert Bos|nombre=Bert|apellido=Bos|fecha=31 de marzo de 1995}}</ref> Dos navegadores fueron usados para pruebas para las propuestas iniciales; Lie trabajó con [[Yves Lafon]] para implementar CSS en el navegador [[Arena (navegador)|Arena]] creado por [[Dave Raggett]].<ref>{{cita web|título=Libwww Hackers|url=http://www.w3.org/Library/Collaborators.html|editorial=World Wide Web Consortium|fechaacceso=6 de junio de 2010|enlaceautor=Henrik Frystyk Nielsen|nombre=Henrik Frystyk|apellido=Nielsen|fecha=7 de junio de 2002}}</ref><ref>{{cita web|url=http://www.w3.org/People/Lafon/|título=Yves Lafon|fechaacceso=17 de junio de 2010|editorial=World Wide Web Consortium}}</ref><ref>{{cita web|url=http://www.w3.org/People/domain?domain=Technology+and+Society|título=The W3C Team: Technology and Society|editorial=World Wide Web Consortium|fechaacceso=22 de enero de 2011|fecha=18 de julio de 2008}}</ref> [[Bert Bos]] implementó su propia propuesta SSP en el navegador [[Argo (navegador web)|Argo]].<ref name="WWW3"/> Desde entonces, Lie y Bos trabajaron juntos para desarrollar el estándar CSS. La 'H' se eliminó del nombre porque estas hojas de estilo pueden ser aplicadas a otros lenguajes de marcado además de HTML.<ref name="chapter20"/>

En 2005 el grupo de trabajo de CSS decidió mejorar los requerimentosrequerimientos de los estándares de forma más estricta. Esto significó que los estándares ya publicados como CSS&nbsp;2.1, CSS3 Selectors y CSS3 Text fueron retrocedidos del estado "Recomendaciones candidatas" a "Borrador de trabajo".

* Las funcionalidades propias de las capas (<ttcode>&lt;div></ttcode>) como de posicionamiento relativo/absoluto/fijo, niveles (<ttcode>z-index</ttcode>), etcétera.

Cada navegador web usautiliza un [[motor de renderizado]] para renderizarvisualizar páginas web, y el soporte de CSS no es exactamente igual en ninguno detodos los motores de renderizado. YaDado que los navegadores no aplican el CSS correctamentede manera uniforme, se ha desarrollado muchas técnicas de programación han sido desarrolladasespecíficas para ser aplicadas por un navegador específicoen particular (comúnmente conocida esta práctica como ''CSS hacks'' o [[Filtros CSS|CSS filters]]). La adopción de nuevas funcionalidades en CSS son obstaculizadas por la ausencia de soporte en los navegadores mayoritariosmás populares. Por ejemplo, [[Internet Explorer]] ha sido lento para añadir el soporte para algunas características de CSS3, lo cualque ha dificultado la adopción de estas características, y ha dañado la reputación del navegador entre los desarrolladores.<ref name="popupie">{{cita web|url=http://www.danielclemente.com/navega/popup.html|título=Pop-up para usuarios de IE|fechaacceso=12 de noviembre de 2017|nombre=Daniel|apellido=Clemente Laboreo|sitio web=http://www.danielclemente.com}}</ref><ref>{{Cita publicación|url=https://www.smashingmagazine.com/2010/04/css3-solutions-for-internet-explorer/|title=CSS3 Solutions for Internet Explorer – Smashing Magazine|date=28 de abril de 2010|newspaper=Smashing Magazine|language=en-US|access-date=12 de octubre de 2016}}</ref> Para asegurargarantizar una experiencia consistente para sus usuarios, los desarrolladores web ena ocasionesmenudo prueban sus sitios en múltiples navegadores, sistemas operativos y versiones de navegadores., lo que Incrementandoincrementa el tiempo de desarrollo y la complejidad. VariasSe ha desarrollado varias herramientas, como [[BrowserStack]] han sido construidas, para reducir la complejidad delen el mantenimiento de las páginas web.

Además de las ya mencionadas herramientas de prueba mencionadas, muchos sitios web mantienen listas del soporte de navegadores para las propiedades específicas de CSS, incluyendo recursos como [http://caniuse.com/ CanIUse] y [[Mozilla Developer Network]]. Además, CSS3 definendefine muchas [[Media query|queriesconsultas]], entre las cuales se proveeincluye la directiva <code>@supports</code> que permite a los desarrolladores especificar navegadoresdirectamente conen soporteel paraCSS algunaqué funciónnavegadores enadmiten específicouna directamentefunción en el CSSespecífica.<ref>{{Cita web|url=https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/|title=Using Feature Queries in CSS ★ Mozilla Hacks – the Web developer blog|website=hacks.mozilla.org|access-date=12 de octubre de 2016}}</ref> El código CSS que no es soportadocompatible porcon versiones antiguas de un navegador, esgeneralmente provistose algunasproporciona veces por medio demediante [[polyfill]]s en JavaScript. Estos métodos añaden complejidad a los proyectos de desarrollo, y, en consecuencia, las compañías frecuentemente definen una lista de las diferentes versiones de navegadores que son soportadascompatibles y las que no sonlo soportadasson.

Como los sitios web adoptan nuevas normas del código que son incompatibles con los navegadores más antiguos, a estos navegadores se les quitarestringe el acceso a muchos de los recursos en la web, (a veces intencionalmente)de manera intencional. Muchos de los sitios más populares en Internet no solo sontienen visualmenteun feosaspecto visual deficiente en los navegadores antiguos debido a causa de la mala compatibilidad con CSS, sino que notampoco funcionan en absoluto, en gran parte debido a la evolución de JavaScript y otras tecnologías web.<ref>{{Cita news|url=https://arstechnica.com/information-technology/2014/04/looking-at-the-web-with-internet-explorer-6-one-last-time/|title=Looking at the Web with Internet Explorer 6, one last time|newspaper=Ars Technica|access-date=12 de octubre de 2016}}</ref>

== FrameworkFrameworks de CSS ==

Los ''frameworks'' de CSS son bibliotecas preparadas para permitirsimplificar lay simplificación, ymejorar el mayor cumplimiento de los estándares en el diseño de páginas web usandomediante el uso del lenguaje CSS. Algunos de los frameworks de CSS más comunes son [[Foundation (framework)|Foundation]], [[Blueprint (framework)|Blueprint]], [[Bootstrap (framework)|Bootstrap]], [[Cascade Framework]] y [[Materialize]]. Como ocurre en la programación decon bibliotecas en los [[Lenguaje de script|lenguajes de script]], los frameworks de CSS sonse usualmentesuelen incorporadosincorporar como hojas de estilo CSS externas referenciadas cona través la etiqueta <code><link></code>. Esto proveeofrece una gran cantidad denumerosas opciones listas para el [[Diseño web|diseño]] y la maquetación de una página web. Aunque muchos frameworks ya han sido publicados, algunos diseñadores laslos usanemplean mayormenteprincipalmente para desarrollar prototipos rápidos, o porcon motivosfines de aprendizaje, ymientras que prefieren construir a manocrear su propio código CSS de forma manual.<ref>{{cita libro|last=Cederholm|first=Dan|title=Handcrafted CSS: More Bulletproof Web Design|year=2009|publisher=New Riders|isbn=978-0-321-64338-4|url=https://books.google.com/books?id=UgrUeIwsS60C&pg=PA114|author2=Ethan Marcotte|accessdate=19 de junio de 2010|page=114}}</ref>

* [[:en:Comparison of layout engines (CSS)|Comparación de la presentación CSS en diferentes motores]] (Wikipedia en inglés)