{"id":23903,"date":"2024-07-15T11:38:54","date_gmt":"2024-07-15T11:38:54","guid":{"rendered":"https:\/\/wedesignmarbella.com\/css-cascading-style-sheets\/"},"modified":"2026-07-08T12:03:38","modified_gmt":"2026-07-08T12:03:38","slug":"css-cascading-style-sheets","status":"publish","type":"post","link":"https:\/\/wedesignmarbella.com\/es\/css-cascading-style-sheets\/","title":{"rendered":"CSS (Cascading Style Sheets)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Las Hojas de Estilo en Cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir la presentaci\u00f3n de un documento escrito en <a href=\"https:\/\/wedesignmarbella.com\/es\/html-lenguaje-de-marcado-de-hipertexto-la-base-de-la-web\/\" data-type=\"link\" data-id=\"https:\/\/wedesignmarbella.com\/html-hypertext-markup-language-web-foundation\/\">HTML<\/a> o XML. CSS define c\u00f3mo deben mostrarse los elementos en pantalla, en papel, mediante s\u00edntesis de voz o en otros medios.  <\/p>\n\n<h2 class=\"wp-block-heading\">Aqu\u00ed tienes una descripci\u00f3n general de los conceptos y caracter\u00edsticas clave de CSS:<\/h2>\n\n<h3 class=\"wp-block-heading\">Conceptos b\u00e1sicos de CSS<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Selectores:<\/strong> SLos selectores permiten elegir los elementos a los que se aplicar\u00e1n los estilos.\n<ul class=\"wp-block-list\">\n<li><strong>Selector de tipo:<\/strong> <code>h1 { color: blue; }<\/code> (selecciona todos los elementos <code>&lt;h1&gt;<\/code>)<\/li>\n\n\n\n<li><strong>Selector de clase: <code>.className { color: blue; }<\/code><\/strong> (selecciona los elementos que tienen <code>class=\"className\"<\/code>)<\/li>\n\n\n\n<li><strong>Selector de ID: <\/strong> <code>#idName { color: blue; }<\/code> (selecciona el elemento que tiene <code>id=\"idName\"<\/code>)<\/li>\n\n\n\n<li><strong>Selector de atributo:<\/strong> <code>[type=\"text\"] { color: blue; }<\/code> (selecciona los elementos que tienen <code>type=\"text\"<\/code>)<\/li>\n\n\n\n<li><strong>Pseudoclases y pseudo-elementos:<\/strong> <code>a:hover { color: red; }<\/code>, <code>p::first-line { font-weight: bold; }<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Propiedades y valores: <\/strong>Definen los estilos que se aplicar\u00e1n a los elementos.\n<ul class=\"wp-block-list\">\n<li><code>color: red;<\/code><\/li>\n\n\n\n<li><code>font-size: 16px;<\/code><\/li>\n\n\n\n<li><code>margin: 10px;<\/code><\/li>\n\n\n\n<li><code>background-color: yellow;<\/code><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Modelo de caja (Box Model): <\/strong>Representa la estructura de un elemento en CSS.\n<ul class=\"wp-block-list\">\n<li><strong>Contenido: <\/strong>El contenido real del elemento.<\/li>\n\n\n\n<li><strong>Padding (relleno): <\/strong>Espacio entre el contenido y el borde.<\/li>\n\n\n\n<li><strong>Borde: <\/strong>Rodea el padding (si existe) y el contenido.<\/li>\n\n\n\n<li><strong>Margin (margen): <\/strong>Espacio que queda fuera del borde.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Cascada y especificidad<\/strong>\n<ul class=\"wp-block-list\">\n<li>Los estilos pueden aplicarse en cascada, lo que significa que diferentes reglas de estilo pueden afectar al mismo elemento.<\/li>\n\n\n\n<li>La especificidad determina qu\u00e9 regla de estilo tiene prioridad cuando varias reglas pueden aplicarse al mismo elemento. El orden de mayor a menor especificidad es: Estilos en l\u00ednea (inline styles). Selectores de ID. Selectores de clase. Selectores de tipo. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Herencia: <\/strong>Algunas propiedades se heredan de los elementos padres a los elementos hijos.<br\/>Por ejemplo: <code>color<\/code> se hereda. <code>margin<\/code> no se hereda. <\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\">Caracter\u00edsticas avanzadas<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Flexbox: <\/strong>Un modelo de dise\u00f1o que permite organizar elementos en un espacio unidimensional (por ejemplo, en filas o columnas).<\/p>\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n}<\/code><\/pre>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<p class=\"wp-block-paragraph\"><strong>Grid Layout: <\/strong>Un sistema de dise\u00f1o bidimensional para crear estructuras complejas utilizando filas y columnas.<\/p>\n\n<pre class=\"wp-block-code\"><code>.container {\n    display: grid;\n    grid-template-columns: repeat(3, 1fr);\n    grid-gap: 10px;\n}<\/code><\/pre>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<p class=\"wp-block-paragraph\"><strong>Media Queries: <\/strong>Se utilizan para crear dise\u00f1os adaptables (responsive design), aplicando diferentes estilos seg\u00fan el tama\u00f1o de pantalla o el dispositivo.<\/p>\n\n<pre class=\"wp-block-preformatted\">@media (max-width: 600px) {<br\/> .container {<br\/> flex-direction: column;<br\/> }<br\/>}<\/pre>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<p class=\"wp-block-paragraph\"><strong>Transiciones y animaciones: <\/strong>Permiten a\u00f1adir cambios suaves y animaciones complejas a los elementos de una p\u00e1gina web.<\/p>\n\n<pre class=\"wp-block-preformatted\">.box {<br\/>transition: transform 0.3s;<br\/>}<br\/>.box:hover {<br\/>transform: scale(1.1);<br\/>}<br\/>@keyframes example {<br\/>from {background-color: red;}<br\/>to {background-color: yellow;}<br\/>}<br\/>.animated-box {<br\/>animation: example 5s infinite;<br\/>}<\/pre>\n\n<h3 class=\"wp-block-heading\">Ejemplo<\/h3>\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed tienes un ejemplo sencillo que combina algunos de estos conceptos:<\/p>\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html&gt;<br\/>&lt;html lang=\"en\"&gt;<br\/>&lt;head&gt;<br\/>    &lt;meta charset=\"UTF-8\"&gt;<br\/>    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;<br\/>    &lt;title&gt;CSS Example&lt;\/title&gt;<br\/>    &lt;style&gt;<br\/> body {<br\/> font-family: Arial, sans-serif;<br\/> background-color: #f0f0f0;<br\/>  }<br\/> .container {<br\/> max-width: 800px;<br\/> margin: 0 auto;<br\/> padding: 20px;<br\/> background-color: white;<br\/> box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);<br\/>  }<br\/> h1 {<br\/> color: #333;<br\/>  }<br\/> p {<br\/> line-height: 1.6;<br\/>  }<br\/> .highlight {<br\/> color: red;<br\/> font-weight: bold;<br\/>  }<br\/> .box {<br\/> width: 100px;<br\/> height: 100px;<br\/> background-color: blue;<br\/> transition: transform 0.3s;<br\/>  }<br\/> .box:hover {<br\/> transform: scale(1.1);<br\/>  }<br\/>    &lt;\/style&gt;<br\/>&lt;\/head&gt;<br\/>&lt;body&gt;<br\/>    &lt;div class=\"container\"&gt;<br\/>        &lt;h1&gt;Welcome to CSS&lt;\/h1&gt;<br\/>        &lt;p&gt;This is a &lt;span class=\"highlight\"&gt;simple example&lt;\/span&gt; demonstrating basic CSS concepts.&lt;\/p&gt;<br\/>        &lt;div class=\"box\"&gt;&lt;\/div&gt;<br\/>    &lt;\/div&gt;<br\/>&lt;\/body&gt;<br\/>&lt;\/html&gt;<\/pre>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<p class=\"wp-block-paragraph\"><strong>Un ejemplo sencillo que combina varios de estos conceptos puede incluir:<\/strong><\/p>\n\n<ul class=\"wp-block-list\">\n<li>Estilos b\u00e1sicos de CSS (fuentes, colores y espaciado).<\/li>\n\n\n\n<li>Selectores de clase.<\/li>\n\n\n\n<li>Un efecto de transici\u00f3n al pasar el cursor sobre un elemento (hover).<\/li>\n<\/ul>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<p class=\"wp-block-paragraph\">CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es una herramienta fundamental y poderosa para el <a href=\"https:\/\/wedesignmarbella.com\/es\/desarrollo-web\/\">desarrollo web<\/a>, ya que permite controlar la presentaci\u00f3n visual de las p\u00e1ginas web.<br\/>Mediante CSS, los desarrolladores pueden crear dise\u00f1os atractivos y adaptables que mejoran la experiencia del usuario. Conceptos clave como los selectores, propiedades, el modelo de caja, la cascada, la especificidad y la herencia forman la base de CSS.  <\/p>\n\n<p class=\"wp-block-paragraph\">Las caracter\u00edsticas avanzadas como Flexbox, Grid Layout, media queries, transiciones y animaciones permiten crear dise\u00f1os sofisticados e interacciones din\u00e1micas.<br\/>Comprender y dominar estos conceptos permite crear p\u00e1ginas web que no solo sean funcionales, sino tambi\u00e9n visualmente atractivas en diferentes dispositivos y tama\u00f1os de pantalla. <\/p>\n\n<p class=\"wp-block-paragraph\">CSS contin\u00faa evolucionando, incorporando nuevas capacidades y mejorando <a href=\"https:\/\/wedesignmarbella.com\/the-essentials-of-web-development-a-beginners-guide\/\" data-type=\"post\" data-id=\"13578\">las pr\u00e1cticas de desarrollo web<\/a>, lo que lo convierte en una habilidad esencial para cualquier persona involucrada en<a href=\"https:\/\/wedesignmarbella.com\/es\/\" data-type=\"link\" data-id=\"https:\/\/wedesignmarbella.com\/es\/\"> la creaci\u00f3n de sitios web y aplicaciones web<\/a>.<\/p>\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-we-design-marbella wp-block-embed-we-design-marbella\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"hDKdjPLo90\"><a href=\"https:\/\/wedesignmarbella.com\/html-hypertext-markup-language-web-foundation\/\">HTML (Hypertext Markup Language): The Foundation of the Web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"\u00abHTML (Hypertext Markup Language): The Foundation of the Web\u00bb \u2014 We Design Marbella\" src=\"https:\/\/wedesignmarbella.com\/html-hypertext-markup-language-web-foundation\/embed\/#?secret=4IaG1fAsRz#?secret=hDKdjPLo90\" data-secret=\"hDKdjPLo90\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Las Hojas de Estilo en Cascada (CSS) son un lenguaje de hojas de estilo utilizado para describir la presentaci\u00f3n de un documento escrito en HTML o XML. CSS define c\u00f3mo deben mostrarse los elementos en pantalla, en papel, mediante s\u00edntesis de voz o en otros medios. Aqu\u00ed tienes una descripci\u00f3n general de los conceptos y [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":23898,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ai_generated_summary":"","footnotes":""},"categories":[253],"tags":[],"class_list":["post-23903","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-marketing"],"jetpack_featured_media_url":"https:\/\/wedesignmarbella.com\/wp-content\/uploads\/2024\/07\/CSS-Cascading-Style-Sheets.jpg","_links":{"self":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/posts\/23903","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/comments?post=23903"}],"version-history":[{"count":1,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/posts\/23903\/revisions"}],"predecessor-version":[{"id":23904,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/posts\/23903\/revisions\/23904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media\/23898"}],"wp:attachment":[{"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/media?parent=23903"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/categories?post=23903"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wedesignmarbella.com\/es\/wp-json\/wp\/v2\/tags?post=23903"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}