{"id":7120,"date":"2019-05-02T00:17:01","date_gmt":"2019-05-02T04:17:01","guid":{"rendered":"https:\/\/extassisnetwork.com\/tutoriales\/?p=7120"},"modified":"2019-05-26T19:08:00","modified_gmt":"2019-05-26T23:08:00","slug":"que-es-css","status":"publish","type":"post","link":"https:\/\/extassisnetwork.com\/tutoriales\/que-es-css\/","title":{"rendered":"\u00bfQu\u00e9 Es CSS?"},"content":{"rendered":"

CSS<\/strong>\u00a0(en ingl\u00e9s Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como\u00a0HTML. CSS separa el contenido de la representaci\u00f3n visual del sitio.<\/p>\n

CSS fue desarrollado por\u00a0W3C<\/strong>\u00a0(World Wide Web Consortium<\/a>) en 1996 por una raz\u00f3n muy sencilla. HTML no fue dise\u00f1ado para tener etiquetas que ayuden a formatear la p\u00e1gina. Est\u00e1 hecho solo para escribir el marcado para el sitio.<\/p>\n

Se incluyeron etiquetas como\u00a0<font><\/strong>\u00a0en HTML versi\u00f3n 3.2, y esto les caus\u00f3 muchos problemas a los desarrolladores. Dado que los sitios web ten\u00edan diferentes fuentes, fondos de colores y estilos, el proceso de reescribir el c\u00f3digo fue largo, doloroso y costoso. Por lo tanto, CSS fue creado por W3C para resolver este problema.<\/p>\n

La relaci\u00f3n entre HTML y CSS es muy fuerte. Dado que HTML es un lenguaje de marcado (es decir, constituye la base de un sitio) y CSS enfatiza el estilo (toda la parte est\u00e9tica de un sitio web), van de la mano.<\/p>\n

CSS no es t\u00e9cnicamente una necesidad, pero no querr\u00e1s tener un sitio que solo tenga HTML, ya que se ver\u00eda completamente desnudo.<\/p>\n

<\/h2>\n

Ventajas de CSS<\/span><\/h2>\n

La diferencia entre un sitio web que implementa CSS y uno que no, es enorme y definitivamente se nota.<\/p>\n

Quiz\u00e1s hayas visto alg\u00fan sitio web que no se puede cargar por completo y tiene un fondo blanco con la mayor parte del texto en azul y negro. Eso significa que la parte CSS del sitio no se carg\u00f3 correctamente o no existe.<\/p>\n

As\u00ed es como se ve un sitio con solo HTML, y creo que estar\u00e1s de acuerdo conmigo en que no luce muy bien.<\/p>\n

Antes de CSS, todo el estilo deb\u00eda incluirse en el marcado HTML. Esto significa que hab\u00eda que describir por separado todos los fondos, los colores de fuente, las alineaciones, etc.<\/p>\n

CSS permite estilizar todo en un archivo diferente, creando el estilo all\u00ed y despu\u00e9s integrando el archivo CSS sobre el marcado HTML. Esto hace que el marcado HTML sea mucho m\u00e1s limpio y f\u00e1cil de mantener.<\/p>\n

En resumen, con CSS no tienes que describir repetidamente c\u00f3mo se ven los elementos individuales. Esto ahorra tiempo, hace el c\u00f3digo m\u00e1s corto y menos propenso a errores.<\/p>\n

CSS te permite tener m\u00faltiples estilos en una p\u00e1gina HTML, y esto hace que las posibilidades de personalizaci\u00f3n sean casi infinitas. Hoy en d\u00eda, esto se est\u00e1 volviendo una necesidad m\u00e1s que algo b\u00e1sico.<\/p>\n

C\u00f3mo funciona CSS<\/span><\/h2>\n

CSS utiliza una sintaxis simple basada en el ingl\u00e9s con un conjunto de reglas que la gobiernan. Como mencionamos anteriormente, HTML no fue hecho con la intenci\u00f3n de utilizar elementos de estilo, sino solo para el marcado de la p\u00e1gina. Fue creado simplemente para describir el contenido. Por ejemplo:\u00a0<p>Esto es un p\u00e1rrafo.<\/p><\/strong>.<\/p>\n

Pero, \u00bfc\u00f3mo le aplicas un estilo al p\u00e1rrafo? La estructura de sintaxis CSS es bastante simple. Cuenta con un selector y un bloque de declaraci\u00f3n. Primero seleccionas un elemento y luego declaras lo que quieres hacer con \u00e9l. Bastante sencillo, \u00bfverdad?<\/p>\n

Sin embargo, hay reglas que debes recordar. Las reglas de la estructura son bastante simples, as\u00ed que no te preocupes.<\/p>\n

El selector apunta al elemento HTML que deseas estilizar. El bloque de declaraci\u00f3n contiene una o m\u00e1s declaraciones separadas por punto y coma.<\/p>\n

Cada declaraci\u00f3n incluye un nombre de propiedad CSS y un valor, separados por dos puntos. Una declaraci\u00f3n CSS siempre termina con un punto y coma, y \u200b\u200blos bloques de declaraci\u00f3n est\u00e1n rodeados por llaves.<\/p>\n

Veamos un ejemplo:<\/p>\n

Todos los elementos\u00a0<p><\/strong>\u00a0aparecer\u00e1n en color azul y en negrita.<\/p>\n

\n\t\t\t\t
<style>\r\np {\r\n color: blue;\r\n text-weight: bold;\r\n}\r\n<style><\/pre>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n
 <\/p>\n
En otro ejemplo, todos los elementos\u00a0<p><\/strong>\u00a0estar\u00e1n alineados en el centro, tendr\u00e1n un ancho de 16x y ser\u00e1n color rosa.<\/p>\n
\n\t\t\t\t
<style>\r\np {\r\n   text-align: center;\r\n   font-size: 16px;\r\n   color: pink;\r\n  \r\n}\r\n<\/style><\/pre>\n\t\t\t\t
<\/div>\n\t\t\t<\/div>\n
 <\/p>\n
Ahora pasemos a hablar de los diferentes estilos de CSS, que son Inline, Externo e Interno.<\/p>\n
3 estilos de implementaci\u00f3n de CSS<\/span><\/h2>\n
Haremos una revisi\u00f3n breve de cada estilo, y para obtener una explicaci\u00f3n detallada de cada m\u00e9todo, habr\u00e1 un enlace debajo de la descripci\u00f3n.<\/p>\n
Empecemos hablando del estilo\u00a0Interno<\/strong>. Los estilos CSS hechos de esta manera se cargan cada vez que se actualiza un sitio web, lo que puede aumentar el tiempo de carga. Adem\u00e1s, no podr\u00e1s usar el mismo estilo CSS en varias p\u00e1ginas, ya que est\u00e1 contenido en una sola p\u00e1gina. Sin embargo, esto tambi\u00e9n tiene sus beneficios. Tener todo en una p\u00e1gina facilita compartir la plantilla para una vista previa.<\/p>\n
El m\u00e9todo\u00a0Externo<\/strong>\u00a0podr\u00eda ser el m\u00e1s conveniente. Todo se hace externamente en un archivo\u00a0.css<\/strong>. Esto significa que puedes hacer todo el estilizado en un archivo separado y aplicar el CSS a cualquier p\u00e1gina que quieras. El estilo\u00a0Externo<\/strong>\u00a0tambi\u00e9n puede mejorar los tiempos de carga.<\/p>\n
Por \u00faltimo, hablemos del estilo\u00a0Inline<\/strong>\u00a0de CSS. Inline trabaja con elementos espec\u00edficos que tienen la etiqueta <style>. Cada componente tiene que ser estilizado, por lo que podr\u00eda no ser la mejor forma, ni la m\u00e1s r\u00e1pida para manejar CSS. Pero puede ser \u00fatil, por ejemplo, si quieres cambiar un solo elemento, tener una vista previa r\u00e1pida de los cambios o tal vez no tengas acceso a los archivos CSS.<\/p>\n
 <\/p>\n
Esperamos que este art\u00edculo te haya resultado \u00fatil y, si tienes alguna pregunta, no dudes en contactarnos.<\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
CSS\u00a0(en ingl\u00e9s Cascading Style Sheets) es lo que se denomina lenguaje de hojas de estilo en cascada y se usa para estilizar elementos escritos en un lenguaje de marcado como\u00a0HTML. CSS separa el contenido de la representaci\u00f3n visual del sitio. CSS fue desarrollado por\u00a0W3C\u00a0(World Wide Web Consortium) en 1996 por una raz\u00f3n muy sencilla. HTML […]<\/p>\n","protected":false},"author":2,"featured_media":7129,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[45],"tags":[206],"class_list":{"0":"post-7120","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-general","8":"tag-css"},"_links":{"self":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts\/7120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/comments?post=7120"}],"version-history":[{"count":0,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/posts\/7120\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/media\/7129"}],"wp:attachment":[{"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/media?parent=7120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/categories?post=7120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/extassisnetwork.com\/tutoriales\/wp-json\/wp\/v2\/tags?post=7120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}