{"id":131,"date":"2024-05-21T08:50:02","date_gmt":"2024-05-21T06:50:02","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=131"},"modified":"2024-05-21T08:50:04","modified_gmt":"2024-05-21T06:50:04","slug":"16-estilos-css","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/16-estilos-css\/","title":{"rendered":"16. Estilos CSS"},"content":{"rendered":"\n

Qu\u00e9 es CSS<\/h2>\n\n\n\n

Las hojas de estilo en cascada<\/strong> (CSS<\/strong>) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web.<\/p>\n\n\n\n

Con CSS<\/strong>, puede controlar el color, la fuente, el tama\u00f1o del texto, el espaciado entre elementos, c\u00f3mo se colocan y distribuyen los elementos, qu\u00e9 im\u00e1genes de fondo o colores de fondo se utilizar\u00e1n, diferentes pantallas para diferentes dispositivos y tama\u00f1os de pantalla, y \u00a1mucho m\u00e1s!.<\/p>\n\n\n\n\n\n\n\n

\n

Sugerencia<\/strong>: La palabra en cascada significa que un estilo aplicado a un elemento principal tambi\u00e9n se aplicar\u00e1 a todos los elementos secundarios dentro del elemento principal. Por lo tanto, si establece el color del cuerpo del texto en \u00abazul\u00bb, todos los encabezados, p\u00e1rrafos y otros elementos de texto dentro del cuerpo tambi\u00e9n obtendr\u00e1n el mismo color (a menos que especifique algo m\u00e1s).<\/p>\n<\/blockquote>\n\n\n\n

Usar CSS<\/h2>\n\n\n\n

CSS<\/strong> se puede agregar a documentos HTML<\/strong> de 3 maneras:<\/p>\n\n\n\n

    \n
  • En l\u00ednea<\/strong>: mediante el uso del atributo style<\/em><\/strong> dentro de los elementos HTML.<\/strong><\/li>\n\n\n\n
  • Interno<\/strong>: mediante el uso de un elemento <style><\/em><\/strong> en la secci\u00f3n <head>.<\/em><\/strong><\/li>\n\n\n\n
  • Externo<\/strong>: mediante el uso de un elemento <link><\/em><\/strong> para vincular a un archivo CSS externo<\/strong>.<\/li>\n<\/ul>\n\n\n\n

    La forma m\u00e1s com\u00fan de agregar CSS<\/strong> es mantener los estilos en archivos CSS externos<\/strong>.<\/p>\n\n\n\n

    Estilos en l\u00ednea<\/h2>\n\n\n\n

    Se utiliza un CSS<\/strong> en l\u00ednea<\/strong> para aplicar un estilo \u00fanico a un \u00fanico elemento HTML<\/strong>. CSS<\/strong> en l\u00ednea usa el atributo style<\/em><\/strong> de un elemento HTML<\/strong>. El siguiente ejemplo establece el color del texto del elemento <h1><\/em><\/strong> en azul y el color del texto del elemento <p><\/em><\/strong> en rojo:<\/p>\n\n\n\n

    Ejm<\/strong><\/p>\n\n\n\n

    <h1 style=\"color:blue;\">A Blue Heading<\/h1>\n<p style=\"color:red;\">A red paragraph.<\/p><\/pre>\n\n\n\n
    CSS interno<\/h2>\n\n\n\n
    Se utiliza un CSS interno<\/strong> para definir un estilo para una sola p\u00e1gina HTML<\/strong>. Un CSS<\/strong> interno<\/strong> se define en la secci\u00f3n <head><\/em><\/strong> de una p\u00e1gina HTML<\/strong>, dentro de un elemento <style><\/em><\/strong>. El siguiente ejemplo establece el color del texto de TODOS los elementos <h1><\/em><\/strong> (en esa p\u00e1gina) en azul y el color del texto de TODOS los elementos <p><\/em><\/strong> en rojo. Adem\u00e1s, la p\u00e1gina se mostrar\u00e1 con un color de fondo \u00abpowderblue\u00bb.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<head>\n<style>\nbody {background-color: powderblue;}\nh1   {color: blue;}\np    {color: red;}\n<\/style>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    CSS esterno<\/h2>\n\n\n\n
    Se utiliza una hoja de estilo externa<\/strong> para definir el estilo de muchas p\u00e1ginas HTML<\/strong>. Para usar una hoja de estilo externa, agrega un enlace en la secci\u00f3n <head><\/em><\/strong> de cada p\u00e1gina HTML<\/strong>.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<head>\n  <link rel=\"stylesheet\" href=\"styles.css\"><\/strong>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    La hoja de estilo externa<\/strong> se puede escribir en cualquier editor de texto. El archivo no debe contener ning\u00fan c\u00f3digo HTML<\/strong> y debe guardarse con una extensi\u00f3n .css<\/em><\/strong>. As\u00ed es como se ve el archivo styles.css<\/em>:<\/p>\n\n\n\n
    body {\n  background-color: powderblue;\n}\nh1 {\n  color: blue;\n}\np {\n  color: red;\n}<\/pre>\n\n\n\n
    \n
    Sugerencia<\/strong>: con una hoja de estilo externa<\/strong>, puedes cambiar la apariencia de un sitio web completo, \u00a1cambiando un archivo!<\/p>\n<\/blockquote>\n\n\n\n
    Tama\u00f1os, fuentes y colores con CSS<\/h2>\n\n\n\n
    Aqu\u00ed, demostraremos algunas propiedades CSS<\/strong> de uso com\u00fan. Aprender\u00e1s m\u00e1s sobre ellos m\u00e1s adelante. La propiedad CSS color<\/em> <\/strong>define el color del texto que se utilizar\u00e1. La propiedad CSS font-family<\/em><\/strong> define la fuente que se utilizar\u00e1. La propiedad CSS font-size<\/em><\/strong> define el tama\u00f1o del texto que se utilizar\u00e1.<\/p>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    <!DOCTYPE html>\n<html>\n<head>\n<style>\nh1 {\n  color: blue;\n  font-family: verdana;\n  font-size: 300%;\n}\np {\n  color: red;\n  font-family: courier;\n  font-size: 160%;\n}\n<\/style>\n<\/head>\n<body>\n\n<h1>This is a heading<\/h1>\n<p>This is a paragraph.<\/p>\n\n<\/body>\n<\/html><\/pre>\n\n\n\n
    La propiedad CSS border<\/h2>\n\n\n\n
    La propiedad CSS border<\/em><\/strong> define un borde alrededor de un elemento HTML<\/strong>.<\/p>\n\n\n\n
    \n
    Sugerencia<\/strong>: puedes definir un borde para casi todos los elementos HTML<\/strong>.<\/p>\n<\/blockquote>\n\n\n\n
    Ejm<\/strong><\/p>\n\n\n\n
    p {\n  border: 2px solid powderblue;\n}<\/pre>\n\n\n\n
    La propiedad CSS padding<\/h2>\n\n\n\n
    La propiedad de CSS padding<\/em> <\/strong>define un relleno (espacio) entre el texto y el borde.<\/p>\n\n\n\n
    p {\n  border: 2px solid powderblue;\n  padding: 30px;\n}<\/pre>\n\n\n\n
    La propiedad CSS margin<\/h2>\n\n\n\n
    La propiedad de CSS margin<\/em><\/strong> define un margen (espacio) fuera del borde.<\/p>\n\n\n\n
    p {\n  border: 2px solid powderblue;\n  margin: 50px;\n}<\/pre>\n\n\n\n
    Enlace a CSS externo<\/h2>\n\n\n\n
    Las hojas de estilo externas se pueden referenciar con una URL completa o con una ruta relativa a la p\u00e1gina web actual.<\/p>\n\n\n\n
    Ejm con ruta absoluta en URL<\/strong><\/p>\n\n\n\n
    <link rel=\"stylesheet\" href=\"https:\/\/www.sutilweb.eu\/html\/styles.css\"><\/pre>\n\n\n\n
    Ejm con ruta relativa en URL en distinta carpeta<\/strong><\/p>\n\n\n\n
    <link rel=\"stylesheet\" href=\"\/html\/styles.css\"><\/pre>\n\n\n\n
    Ejm con ruta relativa en URL en la misma carpeta<\/strong><\/p>\n\n\n\n
    <link rel=\"stylesheet\" href=\"styles.css\"><\/pre>\n","protected":false},"excerpt":{"rendered":"
    Qu\u00e9 es CSS Las hojas de estilo en cascada (CSS) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web. Con CSS, puede controlar el color, la fuente, el tama\u00f1o del texto, el espaciado entre elementos, c\u00f3mo se colocan y distribuyen los elementos, qu\u00e9 im\u00e1genes de fondo o colores de fondo se utilizar\u00e1n, diferentes pantallas […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-131","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu\u00e9 es CSS Las hojas de estilo en cascada (CSS) se utilizan para formatear el dise\u00f1o de una p\u00e1gina web. Con CSS, puede controlar el color, la fuente, el tama\u00f1o del texto, el espaciado entre elementos, c\u00f3mo se colocan y distribuyen los elementos, qu\u00e9 im\u00e1genes de fondo o colores de fondo se utilizar\u00e1n, diferentes pantallas…","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=131"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions"}],"predecessor-version":[{"id":132,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/131\/revisions\/132"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=131"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}