CSS3: Sintaxe para Iniciantes

O CSS é uma das principais linguagens de marcação usadas no desenvolvimento de páginas web modernas.

[{"selector":"#anim-df551f9e-f3f8-4038-9d6c-2d4e87aa2e68 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-3.552713678800501e-15%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-c521051f-1975-43bd-bdd9-044aa529b5b7","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6a307f4c-a2a5-45c3-aaf1-5905c41e497a","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

O que é CSS3

[{"selector":"#anim-2a9972e3-5e5e-4674-b81a-101979bd806b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-7.812499744007886%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-0a2f4068-fad1-4f9c-a0d5-3466170e1271","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0587bb6e-55a0-4bd8-aa2d-98746d6198af","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e57f67ca-4fcc-43e7-ab15-57b17d6545d9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d8ba6d2b-550d-4b3a-9ce9-6c31de071076","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-640aee49-d307-4448-aa7d-dd75e9efbde4","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-b4b50329-b919-44e1-82bb-ff6db7bd5165","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Por que é Importante?

[{"selector":"#anim-8cd4a122-b20d-4c8b-b653-e294c21c291c [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-31.249999886225726%, 0, 0)","translate3d(0%, 0, 0)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"both"}] [{"selector":"#anim-38eeb75c-d490-439d-bd92-becec3cd2c52","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-25ff6608-7821-4eb2-ab10-c3a10d5cefb9","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-737177e3-cced-401b-a127-2861fa91a4eb","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7defa7e1-5841-43b8-9803-9039c6013fc1","keyframes":{"transform":["translate3d(-115.18988%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Entendendo a Sintaxe do CSS3

[{"selector":"#anim-58c324d6-792b-4874-bc9b-c637c24d2563","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9f660776-6a0a-4eaa-82d4-f741ea368945","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-86d7ad62-e82d-48c9-891b-33f5e8ce8fea","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0ed79f35-2df3-4c03-b502-a7292fa1891b","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c11b1d14-81b9-47f5-a34e-fab0fddd476e [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(5.367725772514394%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-ea10123e-7f3c-4b48-9017-d59dcf76dbbc","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c0422974-b6be-45b9-b3cd-50888cd52bdf","keyframes":{"transform":["translate3d(0px, 188.26111%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Seletor

[{"selector":"#anim-bae6d559-3c14-4dbf-82ec-bcfb0842637b [data-leaf-element=\"true\"]","keyframes":{"transform":["translate3d(-12.019230771026034%, 0, 0) translate(-25%, 0%) scale(1.5)","translate3d(0%, 0, 0) translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"fill":"forwards"}] [{"selector":"#anim-6971cc70-c8a0-4217-b16b-7855bd48a362","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-dd26d11d-aa2f-42bf-aab1-05b69219116b","keyframes":{"transform":["translate3d(0px, -755.84766%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-4dfabfea-445f-4398-8a4e-3596c00bb662","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7deb13cf-afa3-4037-bf7a-0832104be205","keyframes":{"transform":["translate3d(0px, 392.02599%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ed91a107-5cf2-4d54-ad92-aa7ccc62d9f5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2213ed07-1548-4cca-8b68-ec3434d4c258","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Seletor de tipo Seletor de classe Seletor de ID Seletor de atributo

Declaração

[{"selector":"#anim-1cff21f2-d2eb-4757-9bb9-1e31063bb053 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-5.0961538340818855%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-042c2e9b-d5d2-476e-80f1-4e60b21ff95c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bbbd1b17-4e93-45f1-a8dd-7571add410b8","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-7e81277c-9d83-4678-b275-22c7ecaaa942","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-d835e35b-ba4f-4c8b-acb1-c8b303e50f6f","keyframes":{"transform":["translate3d(-115.14196%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-f8010fd6-4b9f-40b2-a528-5f968b68fe39","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6aa4c2fe-f92a-400e-a590-988487e901f7","keyframes":{"transform":["translate3d(115.14195%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6cb08490-09e0-4320-a026-df913b198c5c","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6b239ef6-861a-4d84-93e3-00afeb8ad241","keyframes":{"transform":["translate3d(0px, -198.99559%, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}]

Aprenda mais sobre a Sintaxe do CSS3

[{"selector":"#anim-a87fd7c7-f586-4db0-a657-904855a2b7e5 [data-leaf-element=\"true\"]","keyframes":{"transform":["translate(-15.360605247050813%, 0%) scale(1.5)","translate(0%, 0%) scale(1)"]},"delay":0,"duration":2000,"easing":"cubic-bezier(.3,0,.55,1)","fill":"forwards"}] [{"selector":"#anim-cee774cf-fcc9-4478-a3d8-b083b80138fe","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-42228e80-5d83-4658-a4c6-8e5502bbd096","keyframes":{"transform":["translate3d(114.82649%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1802e9ae-2db3-412d-8647-5e393fb7fdc5","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c792c14d-290d-4667-a056-17dbd8b59f97","keyframes":{"transform":["translate3d(-115.50632%, 0px, 0)","translate3d(0px, 0px, 0)"]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] Clique aqui!

CSS3: Sintaxe para Iniciantes

O CSS é uma das principais linguagens de marcação usadas no desenvolvimento de páginas web modernas.

O que é CSS3

O CSS (Cascading Style Sheets) é uma linguagem de marcação usada em conjunto com o HTML e o JavaScript para criar sites modernos.

Por que é Importante?

Ele permite que os desenvolvedores controlem a aparência e o layout de um site, incluindo cores, fontes, espaçamento, tamanhos e muito mais.

Entendendo a Sintaxe do CSS3

A sintaxe do CSS3 é relativamente simples e consiste em duas partes principais: o seletor e a declaração.

Seletor

Existem vários tipos de seletor que você pode usar no CSS3, incluindo:

Declaração

A declaração é composta por uma propriedade e um valor, separados por dois pontos. Por exemplo:

color: red;

Aprenda mais sobre a Sintaxe do CSS3

Confira mais sobre o assunto em nosso artigo clicando logo abaixo!