diff --git a/public/codes/css/cascade-inheritance/check-style-specificity/index.html b/public/codes/css/cascade-inheritance/check-style-specificity/index.html new file mode 100644 index 0000000..1b0e863 --- /dev/null +++ b/public/codes/css/cascade-inheritance/check-style-specificity/index.html @@ -0,0 +1,33 @@ + + + + + + + Document + + + +
+
+
+
+
+
+
+
+ Lorem ipsum +
+
+
+
+
+
+
+
+ + diff --git a/public/codes/css/cascade-inheritance/declaration-important/css/style.css b/public/codes/css/cascade-inheritance/declaration-important/css/style.css new file mode 100644 index 0000000..5ecef3c --- /dev/null +++ b/public/codes/css/cascade-inheritance/declaration-important/css/style.css @@ -0,0 +1,7 @@ +h1 { + color: red !important; +} + +h1 { + color: green; +} diff --git a/public/codes/css/cascade-inheritance/declaration-important/index.html b/public/codes/css/cascade-inheritance/declaration-important/index.html new file mode 100644 index 0000000..710051d --- /dev/null +++ b/public/codes/css/cascade-inheritance/declaration-important/index.html @@ -0,0 +1,12 @@ + + + + + + Important Declaration + + + +

Lorem ipsum

+ + diff --git a/public/codes/css/cascade-inheritance/declaration-normal/css/style.css b/public/codes/css/cascade-inheritance/declaration-normal/css/style.css new file mode 100644 index 0000000..de6c38b --- /dev/null +++ b/public/codes/css/cascade-inheritance/declaration-normal/css/style.css @@ -0,0 +1,7 @@ +h1 { + color: red; +} + +h1 { + color: green; +} diff --git a/public/codes/css/cascade-inheritance/declaration-normal/index.html b/public/codes/css/cascade-inheritance/declaration-normal/index.html new file mode 100644 index 0000000..1a4fa3e --- /dev/null +++ b/public/codes/css/cascade-inheritance/declaration-normal/index.html @@ -0,0 +1,12 @@ + + + + + + Normal Declaration + + + +

Lorem ipsum

+ + diff --git a/public/codes/css/cascade-inheritance/inheritance/css/style.css b/public/codes/css/cascade-inheritance/inheritance/css/style.css new file mode 100644 index 0000000..563d20e --- /dev/null +++ b/public/codes/css/cascade-inheritance/inheritance/css/style.css @@ -0,0 +1,3 @@ +body { + color: green; +} diff --git a/public/codes/css/cascade-inheritance/inheritance/index.html b/public/codes/css/cascade-inheritance/inheritance/index.html new file mode 100644 index 0000000..53bbdfb --- /dev/null +++ b/public/codes/css/cascade-inheritance/inheritance/index.html @@ -0,0 +1,13 @@ + + + + + + + Inheritance + + + +

Lorem ipsum

+ + diff --git a/public/codes/css/cascade-inheritance/reset-inheritance/css/style.css b/public/codes/css/cascade-inheritance/reset-inheritance/css/style.css new file mode 100644 index 0000000..0f01c2e --- /dev/null +++ b/public/codes/css/cascade-inheritance/reset-inheritance/css/style.css @@ -0,0 +1,7 @@ +h1 { + color: red; +} + +body { + color: green; +} diff --git a/public/codes/css/cascade-inheritance/reset-inheritance/index.html b/public/codes/css/cascade-inheritance/reset-inheritance/index.html new file mode 100644 index 0000000..53bbdfb --- /dev/null +++ b/public/codes/css/cascade-inheritance/reset-inheritance/index.html @@ -0,0 +1,13 @@ + + + + + + + Inheritance + + + +

Lorem ipsum

+ + diff --git a/public/codes/css/cascade-inheritance/source-order/css/style.css b/public/codes/css/cascade-inheritance/source-order/css/style.css new file mode 100644 index 0000000..9054080 --- /dev/null +++ b/public/codes/css/cascade-inheritance/source-order/css/style.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} \ No newline at end of file diff --git a/public/codes/css/cascade-inheritance/source-order/index.html b/public/codes/css/cascade-inheritance/source-order/index.html new file mode 100644 index 0000000..83ec39b --- /dev/null +++ b/public/codes/css/cascade-inheritance/source-order/index.html @@ -0,0 +1,22 @@ + + + + + + + Document + + + + +

Lorem ipsum

+ + \ No newline at end of file diff --git a/public/codes/css/cascade-inheritance/specificity-vs-inheritance/index.html b/public/codes/css/cascade-inheritance/specificity-vs-inheritance/index.html new file mode 100644 index 0000000..44fd4b8 --- /dev/null +++ b/public/codes/css/cascade-inheritance/specificity-vs-inheritance/index.html @@ -0,0 +1,44 @@ + + + + + + + Document + + + + + + + + + + + + + + + + + + + + + + +
Item 1Item 2Item 3Item 4
Item 1Item 2Item 3Item 4
Item 1Item 2Item 3Item 4
+ + diff --git a/public/codes/css/cascade-inheritance/specificity/css/style.css b/public/codes/css/cascade-inheritance/specificity/css/style.css new file mode 100644 index 0000000..9054080 --- /dev/null +++ b/public/codes/css/cascade-inheritance/specificity/css/style.css @@ -0,0 +1,3 @@ +h1 { + color: red; +} \ No newline at end of file diff --git a/public/codes/css/cascade-inheritance/specificity/index.html b/public/codes/css/cascade-inheritance/specificity/index.html new file mode 100644 index 0000000..eb73af3 --- /dev/null +++ b/public/codes/css/cascade-inheritance/specificity/index.html @@ -0,0 +1,22 @@ + + + + + + + Specificity + + + + +

Lorem ipsum

+ + diff --git a/public/codes/css/style-hifpb-dark/README.md b/public/codes/css/style-hifpb-dark/README.md new file mode 100644 index 0000000..f5206c1 --- /dev/null +++ b/public/codes/css/style-hifpb-dark/README.md @@ -0,0 +1,5 @@ +# HIFPB Dark + +![](hifpb.png) + +This is a dark theme for the [HIFPB website](https://joaopessoa.ifpb.edu.br/horario). It is based on the [HIFPB Dark](https://userstyles.world/style/15330/hifpb-dark) style. diff --git a/public/codes/css/style-hifpb-dark/hifpb.png b/public/codes/css/style-hifpb-dark/hifpb.png new file mode 100644 index 0000000..a5a5af2 Binary files /dev/null and b/public/codes/css/style-hifpb-dark/hifpb.png differ diff --git a/public/codes/css/style-hifpb-dark/style.css b/public/codes/css/style-hifpb-dark/style.css new file mode 100644 index 0000000..12b3459 --- /dev/null +++ b/public/codes/css/style-hifpb-dark/style.css @@ -0,0 +1,61 @@ +/* ==UserStyle== +@name ? - mar. de 2024 +@namespace github.com/openstyles/stylus +@version 1.0.0 +@description A new userstyle +@author Me +==/UserStyle== */ +@-moz-document url-prefix("https://joaopessoa.ifpb.edu.br/horario/") +{ + body, + .content-wrapper, + .card, + .callout, + .nav-link.active, + .page-link, + [class*='bg-'], + [class*='alert-'] { + background-color: #000 !important; + color: #fff; + } + + [class*='bg-'].color-palette.small-box { + border: 1px solid #fff !important; + } + + .callout img { + object-fit: cover; + object-position: top left; + width: 5rem; + height: 6rem; + } + + .callout.callout-success { + border: none; + } + + .nav-tabs .nav-link { + border-bottom: none; + } + + .callout .table td { + border-top: none; + } + + .page-item.active .page-link { + border-color: #fff; + } + + .table-hover tbody tr:hover { + background-color: #3a3a3a; + color: #fff; + } + + a { + color: #fff !important; + } + + a.active { + border-top-color: #fff !important; + } +} diff --git a/src/consts.ts b/src/consts.ts index dd4a39f..98713d5 100644 --- a/src/consts.ts +++ b/src/consts.ts @@ -35,7 +35,7 @@ export const CONTENT_SLUGS = [ 'markup/markup-language', 'html/introduction-html', 'css/introduction-css', - // 'css/cascade-inheritance', + 'css/cascade-inheritance', 'css/text-style', 'css/web-fonts', 'css/icons', diff --git a/src/content/classnotes/css/cascade-inheritance/index.mdx b/src/content/classnotes/css/cascade-inheritance/index.mdx index 98f5906..fcc6f7f 100644 --- a/src/content/classnotes/css/cascade-inheritance/index.mdx +++ b/src/content/classnotes/css/cascade-inheritance/index.mdx @@ -2,4 +2,142 @@ title: Herança e Cascata --- -https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance +import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro'; +import CodePreview from '../../../../components/CodePreview.astro'; +import HtmlPreview from '../../../../components/HtmlPreview.astro'; + +## Herança + +Inheritance value + + + +Reset Inheritance + + + +## Cascata + +[How CSS works \| MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works) + + + +[Document Object Model (DOM)](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model#document_object_model_dom) + + + +[CSS Object Model (CSSOM)](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model#css_object_model_cssom) + + + +[Render-tree](https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction) + + + +### Importance + +> What is the color of `

` Element? + + + +Normal Declaration + + + + + +Important Declaration + + + + + +![important css](https://scene-si.org/images/2015-09-18-css-resets-are-broken/important.jpg) + +Fonte: [CSS Resets are broken](https://scene-si.org/2015/09/18/css-resets-are-broken/) + +#### Style sheet (User Agent, Author, User) + +User Agent Style Sheet + +- [Firefox (Gecko)](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) +- [Safari (WebKit)](https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css) +- [Chrome (Blink)](https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css) +- [Microsoft Edge (EdgeHTML)](https://gist.github.com/jonathantneal/abc52743caa0a019d359ec4ba2ce965b) +- Reset CSS ([revert.css](https://github.com/sw4/revert.css), [normalize.css](https://necolas.github.io/normalize.css/)) + +Author Style Sheet + +- `style=""` +- `