{"id":1441,"date":"2024-05-22T18:00:21","date_gmt":"2024-05-22T18:00:21","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1441"},"modified":"2024-05-22T18:00:21","modified_gmt":"2024-05-22T18:00:21","slug":"css-introduccion","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-introduccion\/","title":{"rendered":"CSS: Introducci\u00f3n"},"content":{"rendered":"
\n

\u00a1Veamos los conceptos b\u00e1sicos de CSS!<\/span><\/h3>\n<\/header>\n
Hasta ahora hemos trabajado solo con HTML.<\/p>\n

HTML es genial y todo, hasta que queremos personalizar c\u00f3mo se ve una p\u00e1gina.<\/p>\n

Ah\u00ed es cuando usamos CSS.<\/p>\n

CSS es un est\u00e1ndar web y significa Hojas de Estilo en Cascada.<\/p>\n

Aqu\u00ed tienes un ejemplo de CSS para estilar una etiqueta de p\u00e1rrafo:<\/p>\n

p {\r\n\u00a0 color: red;\r\n}<\/pre>\n
Esta regla CSS establece que todos los p\u00e1rrafos se muestren en rojo en lugar de negro, que es el color predeterminado.<\/p>\n
Un conjunto de reglas CSS tiene una parte llamada selector, y la otra parte llamada bloque de declaraciones.<\/p>\n
La declaraci\u00f3n contiene varias declaraciones, cada una compuesta por una propiedad y un valor.<\/p>\n
En este ejemplo, p es el selector. Aplica las siguientes reglas a todos los elementos que utilizan la etiqueta p en la p\u00e1gina. Y color: red; es la \u00fanica declaraci\u00f3n contenida en el bloque de declaraciones.<\/p>\n
Puedes colocar este CSS en una etiqueta de estilo en el encabezado de un documento HTML:<\/p>\n
<style>\r\n\u00a0 p {\r\n\u00a0 \u00a0 color: red;\r\n\u00a0 }\r\n<\/style><\/pre>\n
Y esto se aplicar\u00e1.<\/p>\n
O puedes ponerlo en un archivo style.css separado y luego cargarlo en el encabezado HTML:<\/p>\n
<link href=\"style.css\" rel=\"stylesheet\" \/><\/pre>\n
Esto es m\u00e1s com\u00fan cuando tienes mucho CSS, que es lo que normalmente sucede. El CSS en el encabezado del documento HTML funciona hasta cierto nivel, luego es demasiado doloroso de manejar.<\/p>\n
Otra forma, \u00fatil para \u00abarreglos r\u00e1pidos\u00bb, es usar el atributo style en un elemento HTML:<\/p>\n
<p style=\"color: red\">test<\/p><\/pre>\n
 <\/p>\n
Se pueden listar varios CSS uno despu\u00e9s del otro:<\/p>\n
p {\r\n\u00a0 color: red;\r\n}\r\n\r\na {\r\n\u00a0 color: blue;\r\n}<\/pre>\n
Un selector puede apuntar a uno o m\u00e1s elementos:<\/p>\n
p, a {\r\n\u00a0 color: red;\r\n}<\/pre>\n
Los espacios son irrelevantes en CSS. Esto significa que podr\u00edas escribir el CSS anterior como:<\/p>\n
p,a {\r\n\u00a0 color: red;}\r\np,a { \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0color: red;\r\n}<\/pre>\n
Y a\u00fan as\u00ed funcionar\u00eda.<\/p>\n
Es importante que cada declaraci\u00f3n termine con un punto y coma ;.<\/p>\n
De lo contrario, podr\u00edas tener dolores de cabeza ya que el navegador no puede interpretar el CSS.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"
\u00a1Veamos los conceptos b\u00e1sicos de CSS! Hasta ahora hemos trabajado solo con HTML. HTML es…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[181,178],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1441"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1441"}],"version-history":[{"count":1,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1441\/revisions"}],"predecessor-version":[{"id":1442,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1441\/revisions\/1442"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}