{"id":1477,"date":"2018-07-04T11:27:59","date_gmt":"2018-07-04T16:27:59","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=1477"},"modified":"2018-08-28T14:23:17","modified_gmt":"2018-08-28T19:23:17","slug":"css-en-1-minutos-introduccion","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/css-en-1-minutos-introduccion\/","title":{"rendered":"CSS en 1 minuto: introducci\u00f3n a las hojas de estilo en cascada"},"content":{"rendered":"

\u00bfQu\u00e9 es CSS? \u00bfCu\u00e1l es su sintaxis? \u00bfC\u00f3mo dar estilos a un HTML? \u00bfC\u00f3mo se escriben comentarios en CSS? Mira a continuaci\u00f3n un ejemplo en 1 minuto.<\/strong><\/em><\/p>\n

<\/p>\n

\u00bfQu\u00e9 es CSS?<\/h2>\n

Cascading Styles Sheets<\/strong> son hojas de estilo en cascada que nos permiten cambiar el dise\u00f1o de una p\u00e1gina HTML. Los archivos HTML est\u00e1n constituidos por etiquetas, a \u00e9sas etiquetas se les da un estilo (color, tama\u00f1o, ubicaci\u00f3n, etc) a trav\u00e9s de las hojas de estilo.\u00a0Si deseas informaci\u00f3n sobre las etiquetas HTML lee el siguiente art\u00edculo:\u00a0HTML5 en 5 minutos: Etiquetas esenciales<\/a><\/span><\/p>\n

Sintaxis de CSS<\/h2>\n

Un archivo .css tiene un conjunto de las siguientes declaraciones<\/p>\n

elemento{\r\n\r\n   propiedad: valor;\r\n\r\n}<\/pre>\n
Donde elemento<\/em> es cualquier elemento HTML (como P, H1, DIV, TABLE, etc).<\/p>\n
Propiedad<\/em> se refiere a cualquier propiedad de estilo como color, color de fondo, familia de la fuente, grosor del borde, etc.<\/p>\n
Valor<\/em> es el valor de la propiedad, por ejemplo, si estamos trabajando con el color, el valor podr\u00eda ser RED, o #FF0000, etc.<\/p>\n
\"estilos<\/a>
El estilo es importante<\/p><\/div>\n
C\u00f3mo dar estilos a un HTML<\/h2>\n
La forma m\u00e1s extendida de dar estilos a un HTML es a trav\u00e9s de la etiqueta\u00a0<\/span><\/p>\n
<LINK REL= \u201cstylesheet\u201d HREF=\u201choja_de_estilo.css\u201d><\/p>\n
\u00c9sta etiqueta se coloca en la secci\u00f3n <HEAD> del HTML al que se quiera dar estilo, y el archivo \u201choja_de_estilo\u201d puede estar en cualquier ubicaci\u00f3n, por ejemplo, en el mismo directorio que el HTML, o dentro de un subdirectorio.<\/p>\n
Ejemplo de un archivo HTML enlazado con una hoja de estilos<\/h2>\n
El archivo HTML es el siguiente, solo contiene las etiquetas esenciales de la cabecera, el link de enlace a la hoja de estilos y una etiqueta header a la que le daremos estilo<\/p>\n
<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n\t<meta charset=\"utf-8\">\r\n\t<title>Curso en linea<\/title>\r\n\t<link rel=\"stylesheet\"  href=\"estilo.css\">\r\n<\/head>\r\n<body>\r\n\t<header><\/header>\r\n<\/body>\r\n<\/html><\/pre>\n
Y el archivo .css con el que daremos estilo \u00fanicamente a la etiqueta header ser\u00e1 el siguiente<\/p>\n
header{\r\n\twidth: 100%;\r\n\theight: 80px;\r\n\tbackground: #1A232F;\r\n}<\/pre>\n
Le estamos diciendo que a la etiqueta header<\/em> tendr\u00e1 un ancho del 100%, una altura de 80 pixeles y un color de fondo oscuro, puedes variar cualquiera de estos valores. El resultado ser\u00e1 como el siguiente.<\/p>\n
\"Archivo<\/a>
Archivo HTML con estilos<\/p><\/div>\n
Como observaci\u00f3n te comento que para escribir comentarios dentro de un archivo css se utilizan los s\u00edmbolos \/* y *\/, todo lo que est\u00e9 dentro de esos s\u00edmbolos no se considerar\u00e1 c\u00f3digo sino simples comentarios.<\/p>\n
En ejemplos posteriores estaremos utilizando el m\u00e9todo aqu\u00ed empleado para enlazar un archivo HTML con hojas de estilo. Contin\u00faa el curso, estaremos viendo entre otros temas, el uso de Normalize, los prefijos, los selectores id, de clase, adyacente, hermanos, medidas relativas, absolutas, porcentuales, etc.<\/p>\n
Recurso web sugerido<\/strong>: Palettr<\/a> es un generador de paletas de colores, \u00a0\u00fanicamente le das un concepto o tema y te sugiere los colores a utilizar.<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00bfQu\u00e9 es CSS? \u00bfCu\u00e1l es su sintaxis? \u00bfC\u00f3mo dar estilos a un HTML? \u00bfC\u00f3mo se escriben comentarios en CSS? Mira a continuaci\u00f3n un ejemplo en 1 minuto.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[233,161,48],"class_list":["post-1477","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-css","tag-diseno-web","tag-programacion-web"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=1477"}],"version-history":[{"count":9,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1477\/revisions"}],"predecessor-version":[{"id":1519,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/1477\/revisions\/1519"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=1477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=1477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=1477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}