{"id":721,"date":"2024-04-22T23:08:51","date_gmt":"2024-04-23T02:08:51","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=721"},"modified":"2025-11-07T13:02:10","modified_gmt":"2025-11-07T16:02:10","slug":"heranca-no-css","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/","title":{"rendered":"Heran\u00e7a no CSS"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

A Heran\u00e7a \u00e9 um dos mecanismos mais poderosos e, ao mesmo tempo, mais sutis do CSS. Ela permite que certas propriedades de estilo aplicadas a um elemento pai sejam automaticamente transmitidas<\/strong> aos seus elementos descendentes (filhos, netos, etc.), a menos que uma regra mais espec\u00edfica os sobrescreva.<\/p>\n\n\n\n

Este recurso simplifica a cria\u00e7\u00e3o de estilos globais consistentes e reduz significativamente a quantidade de c\u00f3digo repetitivo.<\/p>\n\n\n\n

Neste artigo, vamos explorar como a Heran\u00e7a funciona, quais propriedades s\u00e3o transmitidas e como voc\u00ea pode gerenci\u00e1-la intencionalmente.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. O Conceito Fundamental da Heran\u00e7a<\/h2>\n\n\n\n

A Heran\u00e7a \u00e9 o processo pelo qual o valor computado de uma propriedade CSS em um elemento pai se torna o valor usado por seus filhos. Essa heran\u00e7a segue a \u00e1rvore de elementos do HTML, come\u00e7ando geralmente pelo <body><\/code> ou <html><\/code>.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Exemplo Cl\u00e1ssico: Propriedades de Texto<\/h3>\n\n\n\n

Quando voc\u00ea define a fonte ou a cor no elemento body<\/code>, todo o texto dentro dele herda essa defini\u00e7\u00e3o:<\/p>\n\n\n\n

CSS<\/p>\n\n\n\n

\/* Estilo aplicado no body *\/\nbody {\n  font-family: Georgia, serif; \n  color: #1a1a1a; \n}\n\/* O <h1> e o <p> automaticamente usar\u00e3o a fonte Georgia e a cor #1a1a1a *\/\n<\/code><\/pre>\n\n\n\n
HTML<\/p>\n\n\n\n
<body>\n  <h1>T\u00edtulo Principal<\/h1>\n  <p>Este par\u00e1grafo herdou a cor e a fonte do body.<\/p>\n<\/body>\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
2. Propriedades Herd\u00e1veis vs. N\u00e3o Herd\u00e1veis<\/h2>\n\n\n\n
\u00c9 crucial entender que nem todas<\/strong> as propriedades CSS s\u00e3o herd\u00e1veis. A distin\u00e7\u00e3o \u00e9 baseada em uma l\u00f3gica pr\u00e1tica:<\/p>\n\n\n\n
Categoria<\/strong><\/td>Propriedades T\u00edpicas (Herd\u00e1veis)<\/strong><\/td>L\u00f3gica<\/strong><\/td><\/tr><\/thead>
Texto\/Tipografia<\/strong><\/td>color<\/code>, font-family<\/code>, font-size<\/code>, line-height<\/code>, text-align<\/code>, list-style<\/code><\/td>Faz sentido que o texto seja consistente em um bloco.<\/td><\/tr>
Visibilidade<\/strong><\/td>visibility<\/code>, cursor<\/code><\/td>Se o pai \u00e9 invis\u00edvel, o filho geralmente tamb\u00e9m deve ser.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Categoria<\/strong><\/td>Propriedades T\u00edpicas (N\u00e3o Herd\u00e1veis)<\/strong><\/td>L\u00f3gica<\/strong><\/td><\/tr><\/thead>
Modelo de Caixa<\/strong><\/td>margin<\/code>, padding<\/code>, border<\/code><\/td>Margens e bordas devem ser definidas individualmente para cada caixa.<\/td><\/tr>
Layout<\/strong><\/td>width<\/code>, height<\/code>, display<\/code>, position<\/code>, overflow<\/code><\/td>Se o width<\/code> fosse herdado, todos os elementos teriam a mesma largura do pai, o que quebraria o layout.<\/td><\/tr>
Fundo<\/strong><\/td>background-color<\/code>, background-image<\/code><\/td>Embora o fundo do pai seja vis\u00edvel se o filho for transparente, a propriedade em si n\u00e3o \u00e9 herdada.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
3. Gerenciamento Expl\u00edcito da Heran\u00e7a<\/h2>\n\n\n\n
O CSS oferece valores-chave que permitem ao desenvolvedor controlar intencionalmente o comportamento da heran\u00e7a, mesmo para propriedades que n\u00e3o herdam por padr\u00e3o:<\/p>\n\n\n\n
Valor-Chave<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
inherit<\/code><\/strong><\/td>For\u00e7a o elemento a adotar o valor computado do seu pai, mesmo para propriedades n\u00e3o-herd\u00e1veis.<\/strong><\/td>border: inherit;<\/code> (Pegar\u00e1 a borda do pai)<\/td><\/tr>
initial<\/code><\/strong><\/td>Define a propriedade de volta ao seu valor padr\u00e3o<\/strong> original do CSS (como se nunca tivesse sido estilizada).<\/td>color: initial;<\/code> (Geralmente, cor preta)<\/td><\/tr>
unset<\/code><\/strong><\/td>Define a propriedade para seu valor herdado se for herd\u00e1vel, e para seu valor inicial se n\u00e3o for herd\u00e1vel. (Comportamento inteligente de “reset”).<\/td>margin: unset;<\/code> (Ser\u00e1 0, o valor inicial do margin<\/code>)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Exemplo pr\u00e1tico de inherit<\/code>:<\/strong><\/p>\n\n\n\n
Imagine que a propriedade border<\/code> n\u00e3o \u00e9 herd\u00e1vel, mas voc\u00ea quer que a <span><\/code> dentro do <div><\/code> tenha a mesma borda:<\/p>\n\n\n\n
CSS<\/p>\n\n\n\n
div {\n  border: 2px solid green;\n}\nspan {\n  \/* For\u00e7a a heran\u00e7a do valor da borda do pai *\/\n  border: inherit; \n}\n<\/code><\/pre>\n\n\n\n
<\/div>\n\n\n\n
4. Heran\u00e7a, Cascata e Especificidade (A Intera\u00e7\u00e3o)<\/h2>\n\n\n\n
\u00c9 importante entender a ordem de aplica\u00e7\u00e3o:<\/p>\n\n\n\n
    \n
  1. Regra de Especificidade Vencedora:<\/strong> Se houver uma regra CSS que mira especificamente o elemento filho (ex: p { color: blue; }<\/code>), essa regra sempre vence<\/strong> a heran\u00e7a.<\/li>\n\n\n\n
  2. Heran\u00e7a:<\/strong> Se n\u00e3o houver uma regra CSS que se aplique diretamente ao elemento filho, e a propriedade for herd\u00e1vel, o valor do pai \u00e9 aplicado.<\/li>\n\n\n\n
  3. Valor Inicial:<\/strong> Se a propriedade n\u00e3o for herd\u00e1vel<\/strong> e n\u00e3o houver regras CSS aplic\u00e1veis, o valor padr\u00e3o do navegador (o valor inicial) \u00e9 usado.<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n
    \n
    Regra pr\u00e1tica:<\/strong> A Heran\u00e7a s\u00f3 entra em a\u00e7\u00e3o se a Especificidade falhar<\/strong> (ou seja, se nenhuma regra CSS se aplicar diretamente ao elemento).<\/p>\n<\/blockquote>\n\n\n\n
    <\/div>\n\n\n\n
    \u2705 Conclus\u00e3o Heran\u00e7a no CSS<\/h2>\n\n\n\n
    A Heran\u00e7a no CSS \u00e9 uma ferramenta silenciosa, mas poderosa, que garante a consist\u00eancia visual em toda a sua tipografia e elementos de lista. Ao entender quais propriedades herdam e ao usar os valores inherit<\/code> e unset<\/code> intencionalmente, voc\u00ea pode escrever CSS mais limpo, eficiente e f\u00e1cil de manter, aproveitando ao m\u00e1ximo a estrutura hier\u00e1rquica do HTML.<\/p>\n\n\n\n
    Toda jornada tem um in\u00edcio, e o in\u00edcio para se tornar um desenvolvedor web \u00e9 dominar as seguintes tecnologias, que voc\u00ea encontra aqui mesmo:<\/p>\n\n\n\n
    \n
    \n
    \"HTML\"<\/a>
    HTML<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"CSS\"<\/a>
    CSS<\/figcaption><\/figure>\n<\/div>\n\n\n\n
    \n
    \"Javascript\"<\/a>
    JavaScript<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n
    E se voc\u00ea gosta do nosso conte\u00fado, n\u00e3o deixe de contribuir adquirindo os servi\u00e7os e produtos dos nossos apoiadores e empresas que somos associados:<\/p>\n\n\n\n
    \n
    \n
    \"Hospedagem<\/a><\/figure>\n<\/div>\n\n\n\n
    \n
    \"Ofertas<\/a><\/figure>\n<\/div>\n\n\n\n
    \n
    \"Amazon<\/a><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Tempo de leitura: <\/span>  4<\/span> minutos<\/span><\/span>A Heran\u00e7a \u00e9 um dos mecanismos mais poderosos e, ao mesmo tempo, mais sutis do…<\/p>\n","protected":false},"author":1,"featured_media":702,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[],"class_list":["post-721","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpcat-7-id"],"yoast_head":"\nHeran\u00e7a no CSS - BLOG THIAGO ROSSI<\/title>\n<meta name=\"description\" content=\"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Heran\u00e7a no CSS - BLOG THIAGO ROSSI\" \/>\n<meta property=\"og:description\" content=\"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/\" \/>\n<meta property=\"og:site_name\" content=\"BLOG THIAGO ROSSI\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-23T02:08:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-07T16:02:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"758\" \/>\n\t<meta property=\"og:image:height\" content=\"426\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Thiago Rossi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thiago Rossi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/\"},\"author\":{\"name\":\"Thiago Rossi\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\"},\"headline\":\"Heran\u00e7a no CSS\",\"datePublished\":\"2024-04-23T02:08:51+00:00\",\"dateModified\":\"2025-11-07T16:02:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/\"},\"wordCount\":666,\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"pt-BR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/\",\"name\":\"Heran\u00e7a no CSS - BLOG THIAGO ROSSI\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"datePublished\":\"2024-04-23T02:08:51+00:00\",\"dateModified\":\"2025-11-07T16:02:10+00:00\",\"description\":\"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/Capa-Artigos-Linux.webp\",\"width\":758,\"height\":426,\"caption\":\"CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/heranca-no-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Heran\u00e7a no CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"name\":\"THIAGO ROSSI\",\"description\":\"Mais de 20 anos de experi\u00eancia no mercado de TI!\",\"publisher\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\"},\"alternateName\":\"TR | CURSO WEB DEV\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#organization\",\"name\":\"THIAGO ROSSI\",\"alternateName\":\"TR | CURSO WEB DEV\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"contentUrl\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/04\\\/new-logo.webp\",\"width\":300,\"height\":300,\"caption\":\"THIAGO ROSSI\"},\"image\":{\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/#\\\/schema\\\/person\\\/5f28286948ec2afdeb2e044a2196cd87\",\"name\":\"Thiago Rossi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g\",\"caption\":\"Thiago Rossi\"},\"description\":\"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \\\"GDD \u2013 O Guia Definitivo\\\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.\",\"sameAs\":[\"https:\\\/\\\/thiagorossi.com.br\\\/blog\",\"https:\\\/\\\/instagram.com\\\/thiagorossix86\",\"https:\\\/\\\/linkedin.com\\\/in\\\/thiagox86\"],\"url\":\"https:\\\/\\\/thiagorossi.com.br\\\/blog\\\/author\\\/thiagorossi\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Heran\u00e7a no CSS - BLOG THIAGO ROSSI","description":"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/","og_locale":"pt_BR","og_type":"article","og_title":"Heran\u00e7a no CSS - BLOG THIAGO ROSSI","og_description":"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..","og_url":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/","og_site_name":"BLOG THIAGO ROSSI","article_published_time":"2024-04-23T02:08:51+00:00","article_modified_time":"2025-11-07T16:02:10+00:00","og_image":[{"width":758,"height":426,"url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","type":"image\/webp"}],"author":"Thiago Rossi","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Thiago Rossi","Est. tempo de leitura":"5 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#article","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/"},"author":{"name":"Thiago Rossi","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87"},"headline":"Heran\u00e7a no CSS","datePublished":"2024-04-23T02:08:51+00:00","dateModified":"2025-11-07T16:02:10+00:00","mainEntityOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/"},"wordCount":666,"publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","articleSection":["CSS"],"inLanguage":"pt-BR"},{"@type":"WebPage","@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/","url":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/","name":"Heran\u00e7a no CSS - BLOG THIAGO ROSSI","isPartOf":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#primaryimage"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","datePublished":"2024-04-23T02:08:51+00:00","dateModified":"2025-11-07T16:02:10+00:00","description":"Heran\u00e7a no CSS: Neste artigo, vamos explorar em detalhes o conceito de heran\u00e7a em CSS, como ele funciona e quais propriedades s\u00e3o herd\u00e1veis..","breadcrumb":{"@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#primaryimage","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/Capa-Artigos-Linux.webp","width":758,"height":426,"caption":"CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/thiagorossi.com.br\/blog\/heranca-no-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thiagorossi.com.br\/blog\/"},{"@type":"ListItem","position":2,"name":"Heran\u00e7a no CSS"}]},{"@type":"WebSite","@id":"https:\/\/thiagorossi.com.br\/blog\/#website","url":"https:\/\/thiagorossi.com.br\/blog\/","name":"THIAGO ROSSI","description":"Mais de 20 anos de experi\u00eancia no mercado de TI!","publisher":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#organization"},"alternateName":"TR | CURSO WEB DEV","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagorossi.com.br\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/thiagorossi.com.br\/blog\/#organization","name":"THIAGO ROSSI","alternateName":"TR | CURSO WEB DEV","url":"https:\/\/thiagorossi.com.br\/blog\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","contentUrl":"https:\/\/thiagorossi.com.br\/blog\/wp-content\/uploads\/2024\/04\/new-logo.webp","width":300,"height":300,"caption":"THIAGO ROSSI"},"image":{"@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/linkedin.com\/in\/thiagox86"]},{"@type":"Person","@id":"https:\/\/thiagorossi.com.br\/blog\/#\/schema\/person\/5f28286948ec2afdeb2e044a2196cd87","name":"Thiago Rossi","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bb28b4665f4162bab9fbef8db5a7f00597f79ab90ece9a67189bb6bce78d5786?s=96&d=retro&r=g","caption":"Thiago Rossi"},"description":"Com mais de 20 anos de jornada na tecnologia, minha trajet\u00f3ria evoluiu do ensino t\u00e9cnico \u00e0 arquitetura de sistemas complexos. Hoje, foco minha expertise no desenvolvimento de solu\u00e7\u00f5es de Intelig\u00eancia Artificial nativa e an\u00e1lise de dados p\u00fablicos, utilizando o ecossistema PHP para transformar dados brutos em transpar\u00eancia e efici\u00eancia. Como autor e desenvolvedor, acredito na democratiza\u00e7\u00e3o do conhecimento. Essa vis\u00e3o resultou em uma biblioteca de mais de 530 artigos gratuitos, cobrindo desde a base do WebDev e Infraestrutura at\u00e9 os bastidores da ind\u00fastria de Jogos e IA. No universo de Game Design, sou autor do livro \"GDD \u2013 O Guia Definitivo\" e documento ativamente meus processos atrav\u00e9s de DevLogs, unindo rigor t\u00e9cnico e criatividade em projetos desenvolvidos com GDevelop 5. Meu compromisso \u00e9 conectar engenharia de ponta com as reais oportunidades do mercado de tecnologia.","sameAs":["https:\/\/thiagorossi.com.br\/blog","https:\/\/instagram.com\/thiagorossix86","https:\/\/linkedin.com\/in\/thiagox86"],"url":"https:\/\/thiagorossi.com.br\/blog\/author\/thiagorossi\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/comments?post=721"}],"version-history":[{"count":3,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/721\/revisions"}],"predecessor-version":[{"id":4392,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/posts\/721\/revisions\/4392"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media\/702"}],"wp:attachment":[{"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/media?parent=721"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/categories?post=721"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagorossi.com.br\/blog\/wp-json\/wp\/v2\/tags?post=721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}