Herança e Cascata

Herança

Inheritance value

/codes/css/cascade-inheritance/inheritance/index.html

<h1>Lorem ipsum</h1>

/codes/css/cascade-inheritance/inheritance/index.html

<h1>Lorem ipsum</h1>

/codes/css/cascade-inheritance/inheritance/css/style.css

body {
  color: green;
}

/codes/css/cascade-inheritance/inheritance/css/style.css

body {
  color: green;
}

Reset Inheritance

reset-inheritance

/codes/css/cascade-inheritance/reset-inheritance/index.html

<h1>Lorem ipsum</h1>

/codes/css/cascade-inheritance/reset-inheritance/index.html

<h1>Lorem ipsum</h1>

/codes/css/cascade-inheritance/reset-inheritance/css/style.css

h1 {
  color: red;
}
 
body {
  color: green;
}

/codes/css/cascade-inheritance/reset-inheritance/css/style.css

h1 {
  color: red;
}
 
body {
  color: green;
}

Cascata

How CSS works | MDN

Document Object Model (DOM)

CSS Object Model (CSSOM)

Render-tree

Importance

What is the color of <h1> Element?

/codes/css/cascade-inheritance/declaration-important/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Important Declaration</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Lorem ipsum</h1>
  </body>
</html>

/codes/css/cascade-inheritance/declaration-important/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Important Declaration</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>
  <body>
    <h1>Lorem ipsum</h1>
  </body>
</html>

Normal Declaration

/codes/css/cascade-inheritance/declaration-normal/css/style.css

h1 {
  color: red;
}
 
h1 {
  color: green;
}

/codes/css/cascade-inheritance/declaration-normal/css/style.css

h1 {
  color: red;
}
 
h1 {
  color: green;
}

declaration-normal

Important Declaration

/codes/css/cascade-inheritance/declaration-important/css/style.css

h1 {
  color: red !important;
}
 
h1 {
  color: green;
}

/codes/css/cascade-inheritance/declaration-important/css/style.css

h1 {
  color: red !important;
}
 
h1 {
  color: green;
}

declaration-important

important css

Fonte: CSS Resets are broken

Style sheet (User Agent, Author, User)

User Agent Style Sheet

Author Style Sheet

style=""
<style>
<link>

User Style Sheet

Stylus Plugin
Gallery: 1, 2
- HIFPB Dark

Importance order

Declaration	Style sheets	Importance degree
	User Agent	1
Normal	User	2
Normal	Author	3
Important	Author	4
Important	User	5

Specificity

Specificity Value: NNNN

Number	Selector
Thousands	style attribute
Hundreds	ID selector
Tens	class selector, attribute selector, pseudo-class
Ones	element selector, pseudo-element

Example

/codes/css/cascade-inheritance/specificity/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Specificity</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      h1 {
        color: blue;
      }
 
      #title {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1 id="title" style="color: green">Lorem ipsum</h1>
  </body>
</html>

/codes/css/cascade-inheritance/specificity/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Specificity</title>
    <link rel="stylesheet" href="css/style.css" />
    <style>
      h1 {
        color: blue;
      }
 
      #title {
        color: orange;
      }
    </style>
  </head>
  <body>
    <h1 id="title" style="color: green">Lorem ipsum</h1>
  </body>
</html>

/codes/css/cascade-inheritance/specificity/css/style.css

h1 {
  color: red;
}

/codes/css/cascade-inheritance/specificity/css/style.css

h1 {
  color: red;
}

Specificity

Style	Selector	Thousands	Hundreds	Ones	Total
color: green	`style`	1	0	0	(1, 0, 0, 0)
color: orange	`#title`	0	1	0	(0, 1, 0, 0)
color: blue	`h1`	0	0	1	(0, 0, 0, 1)
color: red	`h1`	0	0	1	(0, 0, 0, 1)

CSS Question

What is the color of <h1> Element?

Is it possible to inspect specificity?

If you disable the color green and orange, what is the <h1> color?

https://i.imgflip.com/2a3ggp.jpg

Preview

specificity

Source order

What is the color of <h1> Element?

Does inheritance work?

source-order

/codes/css/cascade-inheritance/source-order/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    h1 {
      color: blue;
    }
 
    body {
      color: orange;
    }
  </style>
</head>
<body>
  <h1>Lorem ipsum</h1>
</body>
</html>

/codes/css/cascade-inheritance/source-order/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <style>
    h1 {
      color: blue;
    }
 
    body {
      color: orange;
    }
  </style>
</head>
<body>
  <h1>Lorem ipsum</h1>
</body>
</html>

/codes/css/cascade-inheritance/source-order/css/style.css

h1 {
  color: red;
}

/codes/css/cascade-inheritance/source-order/css/style.css

h1 {
  color: red;
}

Referências

Cascade, specificity, and inheritance | MDN

Editar esta página