|
|
---|---|
Apresentação | Se você já possui conhecimentos em HTML5 esse tutorial servirá como uma excelente ferramenta para total customização dos seus documentos HTML, mas se você ainda não possui conhecimentos em HTML e HTML5, clique aqui para aprender e assim que terminar venha logo pra cá! |
Pré-requisitos | Conhecimentos sobre HTML e HTML5 |
O que aprender | Vamos customizar totalmente a página do exercício do Tutorial de HTML5 com CSS e CSS3 |
Conceitos | CSS (significa Cascading Style Sheets) é um simples mecanismo para adicionar estilo (cores, fontes, espaçamento, etc.) a um documento web. CSS tem uma sintaxe simples, e utiliza uma série de palavras em inglês para especificar os nomes de diferentes estilos de propriedade de uma página. CSS3 é a segunda mais nova versão das famosas Cascading Style Sheets (ou simplesmente CSS), onde se define estilos para páginas web com função do CSS3 é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros. |
História | A saga de CSS começa em 1994. Håkon Wium Lie trabalha no CERN - o berço da Web - e a Web está começando a ser usada como uma plataforma para publicação eletrônica. Uma parte crucial de uma plataforma de publicação está faltando, no entanto: Não há como estilizar documentos. Por exemplo, não há como descrever um layout semelhante a um jornal em uma página da Web. Tendo trabalhado em apresentações de jornal personalizadas no MIT Media Laboratory, Håkon viu a necessidade de uma linguagem de folha de estilo para a Web. A História completa está aqui , a paǵina foi estilizada de maneira muito legal com CSS, vale a pena o clique. |
Curiosidade | Muitas das animações que você vê hoje em dia na internet, você pode imaginar que é uma linguagem de programação, mas usa-se mais CSS, por ser mais leve e fácil! :) |
Ferramentas mínimas | Você precisa possuir um Editor de Texto. De preferência instale um que colorize o código, exemplos: Vim, Gedit, Notepad++ ou outros. |
Grade | Essa própria página já contém todos os tópicos abordados. |
Estrutura Básica | Uma instrução CSS consiste em um seletor e um bloco de declaração. Cada declaração contém uma
propriedade e um valor, separados por dois pontos : . Cada declaração
é separada por ponto e vírgula ; .![]() ![]() |
Primeiro CSS |
Existem 3 formas de você "chamar" o CSS.
Outros exemplos de conteúdo CSS de como você também pode usar:
h1 {color:red;} Você pode usar: nomes de cores, cores hexadecimais, hsl (hue, saturation, lightness) , cores rgb (red, green, blue), rgba(red, green, blue, alpha) e hsla(hue, saturation, lightness, alpha), além de outras propriedades que você já notou nos exemplos e veremos de forma mais explicada. |
seletores |
Os seletores nem sempre podem ser somente tags, ele podem ser também class, id,...
Por exemplo, se você usar na tag HTML o atributo class="" e escolher um nome para ficar entre as aspas duplas
você pode invocá-lo no CSS. Exemplo:
<p class="artigo">
Nesse caso você informou que sua tag possui o seletor class de nome artigo. E no CSS modificar esse seletor da seguinte forma (colocando um ponto . junto a ele no início da palavra:
.artigo {color: #4e9a06;}
. Logo, automaticamente, todas tags que possuir esse seletor ficaram com a propriedade informada, nesse caso, com a cor indicada.
Algumas coisas que você deve saber sobre os seletores:
* { propriedade : valor ; }
|
.class |
Seleciona e estiliza todos os elementos com id="outro"
Na tag HTML: <tag class="exemplo"> No CSS: .exemplo {propriedade: valor;} tag, pode ser diversas tags: p, a, img, h1, h6, div, label, fieldset... , bem como a propriedade e o valor referenciados, além do nome do seletor também, nesse caso exemplo mas como já foi dito, você poderia informar qualquer outro nome usando somente: letras, traços e números ou não. |
#id |
Seleciona o elemento com id="materia", ex.: Na tag HTML: <tag id="exemplo"> No CSS: #exemplo {propriedade: valor;} Se uma .class possuir o mesmo nome que uma #id não haverá problema, no entanto, no css, só funcionará se chamar com o sinal correspondente do seletor, ex.: |
elemento, elemento |
Separa por vígula os elementos que desejam que tenham a mesma alteração, pra não precisar ficar atribuindo os mesmos valores
para as mesmas propriedades, evita o repetimento do código. Exs.:
|
elemento elemento | Separadas por espaço. Seleciona que estão dentro do elemento inicial, ex.:
div p {propriedade: valor;} Todas as tags p que estiverem dentro de div, receberão tal valor para determinada
propriedade.
|
elemento>elemento |
Seleciona o "elemento pai" do elemento menor. Vamos supôr que você possui um código HTML assim:
Se você tiver isso no seu CSS div > a {propriedade:valor;} , a tag/elemento a não sofreria
modificação pela invocação que você fez no seu CSS, porque o "elemento pai" dela é o a .Pra que ela sofra modificação dentro da div, teria que ser assim: div > p > a {propriedade: valor;} , ou assim:
div a {propriedade: valor;} , nesse último caso, até os elementos a que não possuíssem o
"elemento pai" a também sofreria modificação.
|
elemento+elemento |
div+p {propriedade: valor} Seleciona todos os elementos <p> que são colocados IMEDIATAMENTE após os elementos <div>.Exemplo: Somente o <p> imediatamente após a <div> , terão o fundo vermelho: CSS: div+p {background-color: #ef2929;} HTML:
Existem outras formas de seletores e propriedades. |
font-family |
Você pode modificar o tipo da font do seletor, com a seguinte sintaxe: Sintaxe CSS: seletor {font-family: 'Primeira Família', 'Segunda Família', familia-generica;} Exemplo, usar font Impact, logo seria assim: CSS: div {font-family: Impact, Charcoal, sans-serif;} Como vai aparecer no navegador: Essa é a font ImpactEssa é a font padrão do textoObs.: Usei o termo 'Primeira Família', 'Segunda Família', familia-generica, pois o navegador tenta exibir a primeira família, se não conseguir, ele tenta a segunda família e se ambas não derem certo, ele exibe a forma genérica que é possível ser renderizada em qualquer navegador. Veja a lista completa das possibilidades de font e pra ver a saída de cada uma delas, teste no seu navegador. Usei a Impact como exemplo, pois é a minha preferida. ;) font-family: Arial Black, Gadget, sans-serif; font-family: Arial, Helvetica, sans-serif; font-family: 'Comic Sans MS', cursive, sans-serif; font-family: 'Courier New', Courier, monospace; font-family: Georgia, serif; font-family: Impact, Charcoal, sans-serif; font-family: 'Lucida Console', Monaco, monospace; font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; |
Unidades |
CSS tem várias unidades diferentes para expressar um comprimento.Muitas propriedades CSS recebem valores de "comprimento",
como largura, margem, preenchimento, tamanho da fonte, largura da borda etc. Muitos desenvolvedores Web usam muito a unidade em
e outros misturam vários tipos de unidade. Eu já prefiro usar o pixel e somente ele pra que o código fique padronizado. Exemplo de uso:p {padding: 10px;} , não pode existir espaço entre o número e a unidade:
, a menos que o valor seja 0 (zero), podendo até ser
omitido valor, caso você deseje. Unidades:
|
Vídeo | https://youtube.com/TerminalRootTV |
TODOS OS SELETORES |
|
elemento1~elemento2 | p~ul Seleciona todos os <ul> elemento que é precedido por um <p> |
[atributo] | [destino] Seleciona todos os elementos com um atributo de destino |
[atributo=valor] | [target=_blank] Seleciona todos os elementos com target="_blank" |
[atributo~=valor] | [título~=flor] Seleciona todos os elementos com um atributo title contendo a palavra "flor" |
[atributo|=valor] | [lang|=pt] Seleciona todos os elementos com um valor de atributo lang começando com "pt" |
[atributo^=valor] | a[href ^="https"] Seleciona todos os <a> elemento cujo valor de atributo href começa com "https" |
[atributo$=valor] | a[href$=".pdf"] Seleciona todos os <a> elemento cujo valor de atributo href termina com ".pdf" |
[atributo*=valor] | a[href *="terminalroot"] Seleciona todos os <a> elemento cujo valor de atributo href contém a substring "terminalroot" |
:active | a:active Seleciona o link ativo |
::after | p::after Insira algo após o conteúdo de cada <p> |
::before | p::before Insira algo antes do & nbsp; conteúdo de cada <p> |
:checked | input::checked Seleciona todas as tags <input> |
:disabled | input:disabled Seleciona todos os campos <input> desativados |
:empty | p:empty Seleciona todos os <p> elemento que não tem filhos (incluindo nós de texto) |
:enabled | input:enabled Seleciona todas as tags <input> ativadas |
:first-child | p:first-child Seleciona todos os <p> elemento que é o primeiro filho de seu pai |
::first-letter | p::first-letter Seleciona a primeira letra de todos os <p> |
::first-line | p::first-line Seleciona a primeira linha de todos os <p> |
:first-of-type | p:first-of-type Seleciona todos os <p> elemento que é o primeiro <p> elemento de seu pai |
:focus | input:focus Seleciona o elemento de entrada que tem foco |
:hover | a:hover Seleciona links no mouse sobre |
:in-range | input:in-range Seleciona elementos de entrada com um valor dentro de um intervalo especificado |
:invalid | input:invalid Seleciona todos os elementos de entrada com um valor inválido |
:lang(language) | p:lang(pt) Seleciona todos os <p> elemento com um atributo lang igual a "pt" (português) |
:last-child | p:last-child Seleciona todos os <p> elemento que é o último filho de seu pai |
:last-of-type | p:last-of-type Seleciona todos os <p> elemento que é o último <p> elemento de seu pai |
:link | a:link Seleciona todos os links não visitados |
:not(selector) | :not(p) Seleciona todos os elementos que não são <p> |
:nth-child(n) | p:nth-child(2) Seleciona todos os <p> elemento que é o segundo filho de seu pai |
nth-last-child(n) | p:nth-last-child(2) Seleciona todos os <p> elemento que é o segundo filho de seu pai, contando a partir do último filho |
:nth-last-of-type(n) | p:nth-last-of-type(2) Seleciona todos os <p> elemento que é o segundo <p> elemento de seu pai, contando a partir do último filho |
nth-of-type(n) | p:nth-of-type(2) Seleciona todos os <p> elemento que é o segundo <p> elemento de seu pai |
:only-of-type | p:only-of-type Seleciona todos os <p> elemento que é o único <p> elemento de seu pai |
:only-child | p:only-child Seleciona todos os <p> elemento que é o único filho de seu pai |
:optional | input:optional Seleciona elementos de entrada sem o atributo "required" |
:out-of-range | input:out-of-range Seleciona elementos de entrada com um valor fora de um intervalo especificado |
:read-only | input:read-only Seleciona elementos de entrada com o atributo "readonly" especificado |
:read-write | input:read-write Seleciona elementos de entrada com o atributo "readonly" NÃO especificado |
:required | input:required Seleciona os elementos de entrada com o atributo "required" especificado |
:root | :root Seleciona o elemento raiz do documento |
::selection | ::selection Seleciona a parte de um elemento que é selecionado por um usuário |
:target | #artigo:target Seleciona o elemento atual #artigo ativo (clicado em um URL contendo esse nome de âncora) |
:valid | input:valid Seleciona todos os elementos de entrada com um valor válido |
:visited | a:visited Seleciona todos os links visitados |
TODAS AS FUNÇÕES |
|
attr() td> | Retorna o valor de um atributo do elemento selecionado |
calc() td> | Permite que você execute cálculos para determinar os valores da propriedade CSS |
cubic-bezier() td> | Define uma curva de Bezier cúbica |
hsl() td> | Define as cores usando o modelo Hue-Saturation-Lightness (HSL) |
hsla() td> | Define cores usando o modelo de Hue-Saturation-Lightness-Alpha (HSLA) |
gradiente linear() td> | Define um gradiente linear como imagem de fundo. Defina pelo menos dois cores (de cima para baixo) |
gradiente radial() td> | Define um gradiente radial como a imagem de fundo. Defina pelo menos dois cores (do centro para as bordas) |
repetição-linear-gradiente() td> | Repete um gradiente linear |
repetição-radial-gradiente() td> | Repete um gradiente radial |
rgb() td> | Define cores usando o modelo Vermelho-Verde-Azul (RGB) |
rgba() td> | Define as cores usando o modelo Vermelho-Verde-Azul-Alfa (RGBA) |
var() td> | Insere o valor de uma propriedade customizada |
TODAS AS PROPRIEDADES |
|
align-content | Especifica o alinhamento entre as linhas dentro de um contêiner flexível quando os itens não usam todo o espaço disponível |
align-items | Especifica o alinhamento de itens dentro de um contêiner flexível |
align-self | Especifica o alinhamento para itens selecionados dentro de um contêiner flexível |
all | Redefine todas as propriedades (exceto unicode-bidi e direction) |
animation | Uma propriedade abreviada para todas as propriedades de animação |
animation-delay | Especifica um atraso para o início de uma animação |
animation-direction | Especifica se uma animação deve ser reproduzida para frente, para trás ou em ciclos alternativos |
animation-duration | Especifica quanto tempo uma animação deve demorar para concluir um ciclo |
animation-fill-mode | Especifica um estilo para o elemento quando a animação não está sendo reproduzida (antes de iniciar, depois de terminar ou ambos) |
animation-iteration-count | Especifica o número de vezes que uma animação deve ser reproduzida |
animation-name | Especifica um nome para a animação @keyframes |
animation-play-state | Especifica se a animação está sendo executada ou pausada |
animation-timing-function | Especifica a curva de velocidade de uma animação |
backface-visibility | Define se a face posterior de um elemento deve ou não estar visível ao se deparar com o usuário |
background | Uma propriedade abreviada para definir todas as propriedades de plano de fundo em uma declaração |
background-attachment | Define se uma imagem de plano de fundo rola com o restante da página ou é corrigida |
background-blend-mode | Especifica o modo de mesclagem de cada camada de plano de fundo (cor / imagem) |
background-clip | Define o quanto o fundo (cor ou imagem) deve se estender dentro de um elemento |
background-color | Especifica a cor de fundo de um elemento |
background-image | Especifica uma ou mais imagens de fundo para um elemento |
background-origin | Especifica a posição de origem de uma imagem de plano de fundo |
background-position | Especifica a posição de uma imagem de fundo |
background-repeat | Define se / como uma imagem de fundo será repetida |
background-size | Especifica o tamanho das imagens de fundo |
border | Uma propriedade abreviada para largura de borda, estilo de borda e cor de borda |
border-bottom | Uma propriedade abreviada para definir todas as propriedades da borda inferior em uma declaração |
border-bottom-color | Define a cor da borda inferior |
border-bottom-left-radius | Define o raio da borda do canto inferior esquerdo |
border-bottom-right-radius | Define o raio da borda do canto inferior direito |
border-bottom-style | Define o estilo da borda inferior |
border-bottom-width | Define a largura da borda inferior |
border-collapse | Define se as bordas da tabela devem ser recolhidas em uma única borda ou separadas |
border-color | Define a cor dos quatro limites |
border-image | Uma propriedade abreviada para definir todas as propriedades border-image- * |
border-image-outset | Especifica o valor pelo qual a área da imagem da borda se estende além da caixa da borda |
border-image-repeat | Especifica se a imagem da borda deve ser repetida, arredondada ou esticada |
border-image-slice | Especifica como dividir a imagem da borda |
border-image-source | Especifica o caminho para a imagem a ser usada como limite |
border-image-width | Especifica a largura da imagem da borda |
border-left | Uma propriedade abreviada para definir todas as propriedades da borda esquerda em uma declaração |
border-left-color | Define a cor da borda esquerda |
border-left-style | Define o estilo da borda esquerda |
border-left-width | Define a largura da borda esquerda |
border-radius | Uma propriedade abreviada para definir todas as quatro propriedades border - * - radius |
border-right | Uma propriedade abreviada para definir todas as propriedades da borda direita em uma declaração |
border-right-color | Define a cor da borda direita |
border-right-style | Define o estilo da borda direita |
border-right-width | Define a largura da borda direita |
border-spacing | Define a distância entre as bordas das células adjacentes |
border-style | Define o estilo das quatro fronteiras |
border-top | Uma propriedade abreviada para definir todas as propriedades da borda superior em uma declaração |
border-top-color | Define a cor da borda superior |
border-top-left-radius | Define o raio da borda do canto superior esquerdo |
border-top-right-radius | Define o raio da borda do canto superior direito |
border-top-style | Define o estilo da borda superior |
border-top-width | Define a largura da borda superior |
border-width | Define a largura das quatro bordas |
bottom | Define a posição dos elementos, da parte inferior de seu elemento pai |
box-decoration-break | Define o comportamento do plano de fundo e da borda de um elemento na quebra de página ou, para elementos in-line, na quebra de linha. |
box-shadow | Anexa uma ou mais sombras a um elemento |
box-sizing | Define como a largura e a altura de um elemento são calculadas: devem incluir preenchimento e bordas ou não |
break-after | Especifica o comportamento de quebra de página, coluna ou região após a caixa gerada |
break-before | Especifica o comportamento de quebra de página, coluna ou região antes da caixa gerada |
break-inside | Especifica o comportamento de quebra de página, coluna ou região dentro da caixa gerada |
caption-side | Especifica o posicionamento de uma legenda de tabela |
caret-color | Especifica a cor do cursor (circunflexo) em entradas, áreas de texto ou qualquer elemento que seja editável |
@charset | Especifica a codificação de caracteres usada na folha de estilo |
clear | Especifica em quais lados de um elemento elementos flutuantes não podem flutuar |
clip | Clips um elemento absolutamente posicionado |
color | Define a cor do texto |
column-count | Especifica o número de colunas que um elemento deve ser dividido em |
column-fill | Especifica como preencher colunas, balanceadas ou não |
column-gap | Especifica o intervalo entre as colunas |
column-rule | Uma propriedade abreviada para configurar todas as propriedades column-rule- * |
column-rule-color | Especifica a cor da regra entre colunas |
column-rule-style | Especifica o estilo da regra entre colunas |
column-rule-width | Especifica a largura da regra entre colunas |
column-span | Especifica quantas colunas um elemento deve abranger |
column-width | Especifica a largura da coluna |
columns | Uma propriedade abreviada para configuração de largura de coluna e contagem de colunas |
content | Usado com os pseudo-elementos: before e: after, para inserir conteúdo gerado |
counter-increment | Aumenta ou diminui o valor de um ou mais contadores CSS |
counter-reset | Cria ou redefine um ou mais contadores CSS |
cursor | Especifica o cursor do mouse a ser exibido ao apontar sobre um elemento |
direction | Especifica a direção do texto / direção da escrita |
display | Especifica como um determinado elemento HTML deve ser exibido |
empty-cells | Especifica se deve ou não exibir bordas e plano de fundo em células vazias em uma tabela |
filter | Define efeitos (por exemplo, desfoque ou mudança de cor) em um elemento antes que o elemento seja exibido |
flex | Uma propriedade abreviada para as propriedades flex-grow, flex-shrink e flex-basis |
flex-basis | Especifica o comprimento inicial de um item flexível |
flex-direction | Especifica a direção dos itens flexíveis |
flex-flow | Uma propriedade abreviada para as propriedades flex-direction e flex-wrap |
flex-grow | Especifica quanto o item crescerá em relação ao restante |
flex-shrink | Especifica como o item será reduzido em relação ao restante |
flex-wrap | Especifica se os itens flexíveis devem envolver ou não |
float | Especifica se uma caixa deve ou não flutuar |
font | Define todas as propriedades da fonte em uma declaração |
@font-face | Uma regra que permite que sites façam o download e usem fontes diferentes das fontes "web-safe" |
font-family | Especifica a família de fontes para texto |
font-feature-settings | Permite o controle sobre recursos tipográficos avançados em fontes OpenType |
@ font-feature-values | Permite que os autores usem um nome comum em font-variant-alternate para o recurso ativado de forma diferente no OpenType |
font-kerning | Controla o uso das informações de kerning (como as letras são espaçadas) |
font-language-override | Controla o uso de glifos específicos de idioma em um tipo de letra |
font-size | Especifica o tamanho da fonte do texto |
font-size-adjust | Preserva a legibilidade do texto quando ocorre um fallback de fonte |
font-stretch | Seleciona uma face normal, condensada ou expandida de uma família de fontes |
font-style | Especifica o estilo da fonte para o texto |
font-synthesis | Controla quais tipos de letra ausentes (negrito ou itálico) podem ser sintetizados pelo navegador |
font-variant | Especifica se um texto deve ou não ser exibido em uma fonte small-caps |
font-variant-alternates | Controla o uso de glifos alternativos associados a nomes alternativos definidos em @ font-feature-values |
font-variant-caps | Controla o uso de glifos alternativos para letras maiúsculas |
font-variant-east-asian | Controla o uso de glifos alternativos para scripts do Leste Asiático (por exemplo, japonês e chinês) |
font-variant-ligatures | Controla quais ligaduras e formas contextuais são usadas no conteúdo textual dos elementos aos quais se aplica |
font-variant-numeric | Controla o uso de glifos alternativos para números, frações e marcadores ordinais |
font-variant-position | Controla o uso de glifos alternativos de tamanho menor posicionados como sobrescritos ou subscritos em relação à linha de base da fonte |
font-weight | Especifica o peso de uma fonte |
grid | Uma propriedade abreviada |
grid-area | Especifica um nome para o item de grade ou essa propriedade é uma propriedade abreviada para as propriedades grid-row-start , grid-column-start , grid-row-end e grid-column-end |
grid-auto-columns | Especifica um tamanho de coluna padrão |
grid-auto-flow | Especifica como os itens inseridos automaticamente são inseridos na grade |
grid-auto-rows | Especifica um tamanho de linha padrão |
grid-column | Uma propriedade abreviada para as propriedades grid-column-start e grid-column-end |
grid-column-end | Especifica onde terminar o item da grade |
grid-column-gap | Especifica o tamanho do intervalo entre colunas |
grid-column-start | Especifica onde iniciar o item da grade |
grid-gap | Uma propriedade abreviada para as propriedades grid-row-gap e grid-column-gap |
grid-row | Uma propriedade abreviada para as propriedades grid-row-start e grid-row-end |
grid-row-end | Especifica onde terminar o item da grade |
grid-row-gap | Especifica o tamanho do intervalo entre linhas |
grid-row-start | Especifica onde iniciar o item da grade |
grid-template | Uma propriedade abreviada para as propriedades grid-template-rows , grid-template-columns e grid-areas |
grid-template-areas | Especifica como exibir colunas e linhas, usando itens de grade nomeados |
grid-template-columns | Especifica o tamanho das colunas e quantas colunas em um layout de grade |
grid-template-rows | Especifica o tamanho das linhas em um layout de grade |
hanging-punctuation | Especifica se um caractere de pontuação pode ser colocado fora da caixa de linha |
height | Define a altura de um elemento |
hyphens | Define como dividir palavras para melhorar o layout dos parágrafos |
image-rendering | Dá uma dica ao navegador sobre quais aspectos de uma imagem são mais importantes para preservar quando a imagem é dimensionada |
@import | Permite importar uma folha de estilo para outra folha de estilo |
isolation | Define se um elemento deve criar um novo conteúdo de empilhamento |
justify-content | Especifica o alinhamento entre os itens dentro de um contêiner flexível quando os itens não usam todo o espaço disponível |
@keyframes | Especifica o código da animação |
left | Especifica a posição esquerda de um elemento posicionado |
letter-spacing | Aumenta ou diminui o espaço entre os caracteres em um texto |
line-break | Especifica como/se quebrar linhas |
line-height | Define a altura da linha |
list-style | Define todas as propriedades de uma lista em uma declaração |
list-style-image | Especifica uma imagem como o marcador de item de lista |
list-style-position | Especifica a posição dos marcadores de item de lista (marcadores) |
list-style-type | Especifica o tipo de marcador de item de lista |
margin | Define todas as propriedades da margem em uma declaração |
margin-bottom | Define a margem inferior de um elemento |
margin-left | Define a margem esquerda de um elemento |
margin-right | Define a margem direita de um elemento |
margin-top | Define a margem superior de um elemento |
max-height | Define a altura máxima de um elemento |
max-width | Define a largura máxima de um elemento |
@media | Define as regras de estilo para diferentes tipos de mídia / dispositivos / tamanhos |
min-height | Define a altura mínima de um elemento |
min-width | Define a largura mínima de um elemento |
object-fit | Especifica como o conteúdo de um elemento substituído deve ser ajustado à caixa estabelecida por sua altura e largura usadas |
object-position | Especifica o alinhamento do elemento substituído dentro de sua caixa |
opacity | Define o nível de opacidade de um elemento |
order | Define a ordem do item flexível em relação ao restante |
orphans | Define o número mínimo de linhas que devem ser deixadas na parte inferior de uma página quando ocorre uma quebra de página dentro de um elemento |
outline | Define todas as propriedades de estrutura de tópicos em uma declaração |
outline-color | Define a cor de um contorno |
outline-offset | Compensa um contorno e o desenha além da borda da borda |
outline-style | Define o estilo de um contorno |
outline-width | Define a largura de um contorno |
overflow |
Especifica o que acontece se o conteúdo ultrapassar a caixa de um elemento |
overflow-wrap | Especifica se o navegador pode ou não quebrar linhas dentro de palavras para evitar estouro (quando uma cadeia é muito longa para caber em sua caixa contendo) |
overflow-x | Especifica se deve ou não recortar as arestas esquerda / direita do conteúdo, se ultrapassar a área de conteúdo do elemento |
overflow-y | Especifica se deve ou não recortar as arestas superior / inferior do conteúdo, se ultrapassar a área de conteúdo do elemento |
padding | Define todas as propriedades de preenchimento em uma declaração |
padding-bottom | Define o preenchimento inferior de um elemento |
padding-left | Define o preenchimento esquerdo de um elemento |
padding-right | Define o preenchimento correto de um elemento |
padding-top | Define o preenchimento superior de um elemento |
page-break-after | Define o comportamento de violação de página após um elemento |
page-break-before | Define o comportamento de violação de página antes de um elemento |
page-break-inside | Define o comportamento de violação de página dentro de um elemento |
perspective | Dá a um elemento posicionado em 3D alguma perspectiva |
perspective-origin | Define em qual posição o usuário está olhando para o elemento 3D |
pointer-events | Define se um elemento reage ou não a eventos de ponteiro |
position | Especifica o tipo de método de posicionamento usado para um elemento (estático, relativo, absoluto ou fixo) |
quotes | Define o tipo de aspas para citações incorporadas |
resize | Define se (e como) um elemento é redimensionável pelo usuário |
right | Especifica a posição correta de um elemento posicionado |
tab-size | Especifica a largura de um caractere de tabulação |
table-layout | Define o algoritmo usado para dispor as células, linhas e colunas da tabela |
text-align | Especifica o alinhamento horizontal do texto |
text-align-last | Descreve como a última linha de um bloco ou uma linha logo antes de uma quebra de linha forçada é alinhada quando o alinhamento de texto é "justificado" |
text-combine-upright | Especifica a combinação de vários caracteres no espaço de um único caractere |
text-decoration | Especifica a decoração adicionada ao texto |
text-decoration-color | Especifica a cor da decoração de texto |
text-decoration-line | Especifica o tipo de linha em uma decoração de texto |
text-decoration-style | Especifica o estilo da linha em uma decoração de texto |
text-indent | Especifica o recuo da primeira linha em um bloco de texto |
text-justify | Especifica o método de justificação usado quando o alinhamento de texto é "justificado" |
text-orientation | Define a orientação do texto em uma linha |
text-overflow | Especifica o que deve acontecer quando o texto ultrapassa o elemento que contém |
text-shadow | Adiciona sombra ao texto |
text-transform | Controla a capitalização do texto |
text-underline-position | Especifica a posição do sublinhado que é definido usando a propriedade de decoração de texto |
top | Especifica a posição superior de um elemento posicionado |
transform | Aplica uma transformação 2D ou 3D a um elemento |
transform-origin | Permite que você mude a posição nos elementos transformados |
transform-style | Especifica como os elementos aninhados são renderizados no espaço 3D |
transition | Uma propriedade abreviada para definir as quatro propriedades de transição |
transition-delay | Especifica quando o efeito de transição será iniciado |
transition-duration | Especifica quantos segundos ou milissegundos um efeito de transição leva para concluir |
transition-property | Especifica o nome da propriedade CSS para o qual o efeito de transição é |
transition-timing-function | Especifica a curva de velocidade do efeito de transição |
unicode-bidi | Usado junto com a propriedadedirection para definir ou retornar se o texto deve ser substituído para suportar vários idiomas no mesmo documento |
user-select | Especifica se o texto de um elemento pode ser selecionado |
vertical-align | Define o alinhamento vertical de um elemento |
visibility | Especifica se um elemento é visível ou não |
white-space | Especifica como o espaço em branco dentro de um elemento é manipulado |
widows | Define o número mínimo de linhas que devem ser deixadas no topo de uma página quando ocorre uma quebra de página dentro de um elemento |
width | Define a largura de um elemento |
word-break | Especifica como as palavras devem ser quebradas quando chegar ao final de uma linha |
word-spacing | Aumenta ou diminui o espaço entre palavras em um texto |
word-wrap | Permite que palavras longas e inquebráveis sejam quebradas e quebradas na próxima linha |
writing-mode | |
z-index | Define a ordem da pilha de um elemento posicionado |
TODOS AS APRESENTAÇÕES AUDÍVEIS | |
azimuth | Define onde o som deve vir |
cue | Define as propriedades da sugestão em uma declaração |
cue-after | Especifica um som a ser reproduzido depois de falar o conteúdo de um elemento |
cue-before | Especifica um som a ser reproduzido antes de falar o conteúdo de um elemento |
elevation | Define onde o som deve vir |
pause | Define as propriedades de pausa em uma declaração |
pause-after | Especifica uma pausa depois de falar o conteúdo de um elemento |
pause-before | Especifica uma pausa antes de falar o conteúdo de um elemento |
pitch | Especifica a voz falada |
pitch-range | Especifica a variação na voz falada.(Voz monótona ou voz animada?) |
play-during | Especifica um som a ser reproduzido enquanto fala o conteúdo de um elemento |
richness | Especifica a riqueza da voz falada.(Voz rica ou voz fina?) |
speak | Especifica se o conteúdo será renderizado auditivamente |
speak-header | Especifica como manipular cabeçalhos de tabela. Os cabeçalhos devem ser falados antes de cada célula, ou apenas antes de uma célula com um cabeçalho diferente da célula anterior |
speak-numeral | Especifica como falar números |
speak-punctuation | Especifica como falar os caracteres de pontuação |
speech-rate | Especifica a velocidade do discurso |
stress | Especifica o "estresse" na voz falada |
voice-family | Especifica a família de voz do discurso |
volume | Especifica o volume do discurso |
Bibliografia |
https://www.w3.org/CSS/ https://pt.wikipedia.org/wiki/Cascading_Style_Sheets https://pt.wikipedia.org/wiki/CSS3 http://terminalroot.sh/css |