Sintaxe Básica do CSS3

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

[{"selector":"#anim-1bff9651-f6cf-479c-b8ec-3f960836b895 [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-428d20e4-29a0-4bce-aef8-222aac37d8f8","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-8691e8fd-a268-4d04-b14b-8f68df2fa3a3","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-6a202a37-3d20-45e9-b429-f382ae6bc447 [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-bc60cbed-4dac-4475-a737-09ec0ab85ae9","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6cbe5cc5-6178-4dec-8df3-d51fad1c519d","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-959116f3-6e8c-4d1d-a37f-b3b4505fbf93","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-3668fe69-bf5e-43c9-94dc-99bed3861c7b","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-2d7e0bcf-247e-4205-b285-769b4841cdf1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-0e97af9b-c6fd-46d2-9c52-88ead792824d","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-195fc30f-559f-467c-a973-4ecf541f7fad [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-0ae4e492-70d8-4e53-97f2-279a1934d0db","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-2429ed99-1867-4a20-947e-571a0cc41247","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-4b6f7807-67c8-435f-8a6b-b32c727747de","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-38ba2adb-8732-46b2-804d-4f316a639cef","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-428d5008-6e42-4240-8692-2b48ce35ec56","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-07dcc0e6-8c55-4dba-8e57-e3ee4ae5a7a0","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-80a88f26-4060-48ce-9863-846ed4bf6ce3","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ca3a7afb-73dd-4c98-af87-b63c9c08838d","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-d11b1b38-74b6-4b7e-a939-a0f537a22a96 [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-0663a277-46f1-47d4-b88f-d4c852f4c8c2","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-6df1b032-b0ed-45bc-8a37-6f348f740bf0","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-1ae24ac7-77c0-40b7-9f54-9788e38da0b3 [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-6cfdce62-7734-4d36-8758-e70374fa517e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ba14604e-6942-4114-97b6-29e41279612c","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-802efb2b-67a1-4456-b22e-d2b4c80382ea","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-c70ed0fb-3293-40e1-95d1-d78eae10be86","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-77283063-b8d3-49e9-85a9-de79bcbe8541","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-50073e56-8499-4c96-ba79-9bfcd6713ac9","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-8b9dc1e6-d317-476f-a117-0bd1ad3ccee5 [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-38a39798-e952-4432-b211-acc4b59bfa7e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-ab7e130a-c837-4ca8-89da-b480b4bd76b8","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-f81a83c7-e2a3-41b2-96b1-b3879f26fd7e","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-9dde564d-c420-42c0-821f-3808e301bb9c","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-d8ada30d-604e-46cb-bdfb-c978d04109f6","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-bad90400-e536-4c90-8ac0-d3ebc10445ec","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-c6b18c12-dd56-4a48-92e8-9d0738d78f2a","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-e97cb7f3-d6c9-4685-bb89-44734b4666fc","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-2f20fe5a-1a80-40cb-a078-822989b841c6 [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-04ae472a-e413-4cb9-a823-895e052c9a47","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-1f9bd5bc-eeba-4d29-9627-a534ad45d9e0","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-cfb9f3d0-f025-454b-851f-d34c934a8dc1","keyframes":{"opacity":[0,1]},"delay":0,"duration":600,"easing":"cubic-bezier(0.2, 0.6, 0.0, 1)","fill":"both"}] [{"selector":"#anim-a791fc59-62f9-4f68-baea-6fd7cf596f0b","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!

Sintaxe Básica do CSS3

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!