📰 post - Adding the "Fundamentos do CSS" certificate

_collections/_certificates_br/2024-11-21T22-21.md

@@ -0,0 +1,88 @@
+---
+layout: certificate
+type: course
+code: "jlZ6JRgf8kmHhn0rYX9Kfg"
+authority: dio
+certificate:
+    name: "Fundamentos do CSS"
+    workload: "0000-00-00T03:00:00"
+competencies: [
+    css3,
+    visual-studio-code,
+    live-server,
+    google-chrome
+]
+date: "2024-11-21T22:21:00"
+---
+
+## Introdução ao CSS
+
+O que é CSS? Cascading Style Sheet (CSS) é um mecanismo para adicionar estilos a um documento CSS.
+Determina como deve ser o layout e como os elementos devem ser
+CSS é uma linguagem de estilos
+CSS não é uma linguagem de programação
+CSS não é uma linguagem de marcação
+
+O que somos capazes de criar com CSS
+- Layouts e estilização de páginas Web
+- Animações
+- Formas geométricas
+- Filtros
+- Contadores
+
+formas de declaração. é definido por um par de "pripriedade:valor;"
+Existem 3 formas de atribuir estilos no HTML.
+- css inline: no próprio código de um elemento na sua propriedade style. (Essa forma não é muito recomendada para manutenção, pois dificulta criar padronizações do site; já que deve modificar em cada elemento). Ele possui a maior prioridade
+- css interno: colocado dentro do código na parte do head do html. Ele é aplicado para todos os elementos da página html. Possui mais potencial para padronização de estilos, já que eplica estilo para todos os elementos de uma página. Ele possui uma prioridade intermediária
+- css externo: é uma arquivo .css que é chamado dentro do head do html. Ele é mais utilizado atualmente pois ele aplica os estilos em todo o site, não apenas em uma página específica. Ele possui a maior abrangência de aplicação dos estílos, porém ele possui a menor prioridade dos estílos.
+
+Como depurar o ducumento CSS? A depuração é o processo de monitorar todo o código por meio de uma ferramenta. E existe o DevTools nos navegadores. O DevTools é possível modificar html e css no próprio navegador para um ambiente de teste rápido. É possível saber o valor de todos os atributos que são aplicados pelo navegador. É possível adicionar várias dimenções de tela para testar a responsividade do site.
+
+## Seletores
+
+Seletor vai definir em quais elementos vamos aplicas as propriedades CSS
+- **Seletor por tipo/tags**: é um seletor que representa um elemento html já existente como <h1>, <div> e <a>.
+- **Seletor de id**: É uma forma de identificar um elemento, vai funcionar como se fosse uma impressão digital de um elemento. Ele deve ser único.
+- **Seletor de classes**: É uma forma de identificar um grupo de elementos. A diferença para o id é que ele pode ter várias vezes na página html. Pode ser definido para um grupo de elemento. É possivel utilizar mais de uma classe em um mesmo elemento.
+- **Seletor Universal**: Ele vai selecionar tudo de uma página, e é representado por `*{}`, ele nçao vai ter um nome. Ele cerve para aplicar estilos padrões para todos os elementos, como font, tamanho da fonte.
+- **Seletor de Atributos**: Ele seleciona elementos que possui um atributo definido no html
+
+## Combinadores
+
+Combinar propriedades de vários seletores, agrupando por meio de uma vírgula. Isso aumenta a reutilização do código CSS. colocar em um único bloco de código CSS para vávios seletores.
+
+Outra forma de conbilnar seletores, é por meio do ponto (.). Ele vai aplicar estilos em elemento que possuem os dois seletores obrigatoriamente. É como se ele fosse um operador and onde ele aplica para elementos com os dois seletores existindo ao memso tempo.
+
+Combinadores é algo que vai especificar qual que é o timpo de relação entre dois seletores. Uma classe e id, 
+Ele possui a seguintes estrutura [seletor, combinador, seletor]. Existem vários tipos:
+- **Combinadores Descedentes**: combinadores que fai ser um filho de outro elemento. É separado por espaço ( ).
+- **Combinadores Filhos**: É separado pelo sinal de maior (>). Ele vai aplicar apenas para os elementos filhos de outro elemento.
+- **Combinadores Irmãos Adjacentes**: É separado pelo sinal de mais (+). Selecionar elementos diretamente depois ao elemento atual a linha de identação.
+- **Combinadores Irmãos**: É separado pelo sinal til (~). Seleciona todos os irãos, sem ser diretamente depois ou não. todos os elementos irmaões.
+
+## Propriedades de espaçamento e dimensionamento
+
+`widht` define a largura de um elemento.
+`height` definen a altura de um elemento.
+Essas propriedades possuem alguns tipos de valores como: (1) px, o valor em pixels; (2) auto, definir uma largura automática do elemento; (3) initial, definir a proprieade padrão, valor inicial; (4) inhirit, defini o valor da propriedade pelo valor do elemento pai;
+
+`max-widht` define a largura máxima de um elemento.
+`min-widht` define a largura mínima de um elemento.
+`max-height` define a altura máxima de um elemento.
+`min-height` define a altura mínima de um elemento.
+
+`margin` define o espaçamento em volta dos elementos. Quando coloca um únivo valor ele aplica em todos os lados de um elemento. Quando colocamos 2 valores, o primeiro é referente a cima e baixo; o segundo valor referente as laterais. Quando colocamos 3 valors, o primeiro é referente a cima; o segundo para as laterais; e o terceiro para baixo. Quando colocamos 4 valores, o primeiro é referente a cima; o segundo para direita; o terceiro para baixo; e quarto para o da esquerda.
+`margin-top` define o espaçamento superior de um elemento.
+`margin-left` define o espaçamento esquerda de um elemento.
+`margin-right` define o espaçamento direita de um elemento.
+`margin-bottom` define o espaçamento inferior de um elemento.
+
+`padding` define o espaçamento interno dos elementos. Quando coloca um únivo valor ele aplica em todos os lados de um elemento. Quando colocamos 2 valores, o primeiro é referente a cima e baixo; o segundo valor referente as laterais. Quando colocamos 3 valors, o primeiro é referente a cima; o segundo para as laterais; e o terceiro para baixo. Quando colocamos 4 valores, o primeiro é referente a cima; o segundo para direita; o terceiro para baixo; e quarto para o da esquerda.
+`padding-top` define o espaçamento interno superior de um elemento.
+`padding-left` define o espaçamento interno esquerda de um elemento.
+`padding-right` define o espaçamento interno direita de um elemento.
+`padding-bottom` define o espaçamento interno inferior de um elemento.
+
+`box-sizing` possui dois valors
+    `content-box` vai somar o valor dos espaçamentos mais o valor da dimensão do elemento.
+    `border-box` vai somando os espaçamentos e a dimensão vai ser igual ao valor definido no CSS.

_collections/_certificates_us/2024-11-21T22-21.md

@@ -0,0 +1,16 @@
+---
+layout: certificate
+type: course
+code: "jlZ6JRgf8kmHhn0rYX9Kfg"
+authority: dio
+certificate:
+    name: "CSS Fundamentals"
+    workload: "0000-00-00T03:00:00"
+competencies: [
+    css3,
+    visual-studio-code,
+    live-server,
+    google-chrome
+]
+date: "2024-11-21T22:21:00"
+---