Upload
alcides-queiroz
View
6.336
Download
9
Embed Size (px)
DESCRIPTION
Slides do meu Workshop sobre HTML5 e CSS3. Nele abordo HTML do zero, com todos os recursos pré-HTML5 e as exploro as novas e fascinantes características da última versão desta linguagem. Também exponho o CSS e seus mais poderosos recursos até a sua última versão, o CSS3.
Citation preview
+
ALCIDES QUEIROZ
Do zero e do jeito certo
@alcidesqueiroz
@[email protected]/alcidesqueiroz
@[email protected]/alcidesqueirozalcidesqueiroz.com
@[email protected]/alcidesqueirozalcidesqueiroz.com (???)
Do zero?
Do jeito certo?
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1957 - ARPA surge
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1957 - ARPA surge
1969 - O primeiro e-mail é transmitido em rede
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1957 - ARPA surge
1969 - O primeiro e-mail é transmitido em rede
1969 - A ARPANET entra em funcionamento
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
197* - ARPANET em Universidades
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
197* - ARPANET em Universidades1971 - Vinton Cerf cunha o termo Internet1973 – Primeira conexão entre continentes1977 - Criação do TCP/IP1979 - Criada a USENET
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1981 - Lançado o IBM PC
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
1983 - TCP/IP é adotado
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
1981 - Lançado o IBM PC
1983 - É criada a MILNET
1983 - TCP/IP é adotado
1984 - ARPANET possui 1000 servidores
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
DNS, BBS, IRC, USENET, e-mail,TCP/IP ...
APRESENTAÇÃO
BREVE HISTÓRICO (Internet)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
A motivação
A linguagem HTML
O protocolo HTTP
URI
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1980 - TBL cria o ENQUIRE
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1980 - TBL cria o ENQUIRE
1989 - TBL e Robert Cailliau realizam a primeira comunicação bem sucedida entre um cliente HTTP e um servidor na Internet
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
APRESENTAÇÃO
BREVE HISTÓRICO (Web)
1990 - Surge o HTML
1993 - Primeiro servidor HTTP
1993 - Primeira página da Web
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Criada por Tim Berners-Lee e Robert Cailliau em 1989
Criada por Tim Berners-Lee e Robert Cailliau em 1989
O piloto foi realizado no CERN
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Linguagem de marcação dehipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Linguagem de Marcação??
É um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos.
Linguagem de Marcação??
Ex:
Olá, meu nome é João, sou filho de Marta e moro em Fortaleza.
Linguagem de Marcação??
Ex:
Olá, meu nome é <nome>João</nome>, sou filho de <nome>Marta</nome> e moro em <cidade>Fortaleza </cidade>.
Linguagem de Marcação??
Linguagem de Programação !=
Linguagem de Marcação
Linguagem de Marcação??
if (idade == 18) { for (var i = 0; i < 10; i++){ alert(“Essa é uma mensagem \ sem sentido”);
}}
Linguagem de Marcação??
Linguagem de marcação dehipertexto
APRESENTAÇÃO
BREVE HISTÓRICO (HTML)
Hipertexto??
Termo cunhado por Ted Nelson em 1965
Hipertexto??
Termo cunhado por Ted Nelson em 1965
Texto não necessariamente
linear
Hipertexto??
Hipermídia??
Termo de autoria também atribuída a Ted Nelson
Hipermídia??
Termo de autoria também atribuída a Ted Nelson
É o hipertexto que não está limitado a conter apenas texto, podendo possuir imagens, vídeos, sons, etc.
Hipermídia??
Continuando...
Linguagem de marcação dehipertexto
Derivada da SGML e HyTime
APRESENTAÇÃO
BREVE HISTÓRICO
APRESENTAÇÃO
TAGS
Instruções que marcam e adicionam semântica ao hipertexto.
APRESENTAÇÃO
ATRIBUTOS
Propriedades de um elemento
HTML
APRESENTAÇÃO
SEMÂNTICA NA WEB
As tags do HTML carregam um significado.
APRESENTAÇÃO
WEB STANDARDS
Normas criadas pelo W3C, a serem ser implementadas pelos browsers do mercado e seguidas pela comunidade de desenvolvimento.
MÃOS NO SUBLIME TEXT!
MÃOS NO SUBLIME TEXT!
OU NÃO...
AS TAGS DO HTML (ATÉ 4.01)
AS TAGS DO HTML (ATÉ 4.01)
<html>
Representa um documento HTML
AS TAGS DO HTML (ATÉ 4.01)
<html> - atributo lang
<html lang=”pt-br”>
Usado para que os user-agents saibam qual é a linguagem principal do documento.
AS TAGS DO HTML (ATÉ 4.01)
<head>
Contém meta-dados a respeito do documento
AS TAGS DO HTML (ATÉ 4.01)
<title>
Representa o título da página, que constará na barra de título do navegador.
AS TAGS DO HTML (ATÉ 4.01)
<title>
<title>Don't panic!</title>
AS TAGS DO HTML (ATÉ 4.01)
<body>
Representa o corpo da página.
AS TAGS DO HTML (ATÉ 4.01)
<body>
<body>
Godfather é o melhor filme da história.
</body>
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
Representam cabeçalhos de diferentes níveis de importância no documento
AS TAGS DO HTML (ATÉ 4.01)
<h1> a <h6> (Headings)
<h1>A Linguagem Ruby</h1><h2>Introdução</h2><h3>História</h3>
AS TAGS DO HTML (ATÉ 4.01)
<a>
Representa um link para outro recurso na web, ou para um trecho específico desse recurso.
AS TAGS DO HTML (ATÉ 4.01)
<a>
<a href=”sobre.html”>Sobre a empresa</a><a href=”mailto:[email protected]”>e-mail</a><a href=”http://google.com”> Google</a>
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo href
<a href=”localizacao”>Especifica a localização do recurso
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo name
<a name=”rodape”></a>Nomeia um ponto específico de um documento para que possa ser referenciado por outros links.
<a href=”#rodape”>Rodapé</a>
AS TAGS DO HTML (ATÉ 4.01)
<a> - atributo name
Dica:
atributo name se tornou obsoleto no HTML5
AS TAGS DO HTML (ATÉ 4.01)
<img>
Representa uma imagem
AS TAGS DO HTML (ATÉ 4.01)
<img> - atributo src
<img src =”logo.png”/>
Representa o caminho (absoluto ou relativo) para a imagem
AS TAGS DO HTML (ATÉ 4.01)
<p>
Representa um parágrafo
AS TAGS DO HTML (ATÉ 4.01)
<p>
<p>Exemplo de um parágrafo qualquer, este texto não deve fazer sentido algum.
</p>
Let's Code!
gist.github.com/alcidesqueiroz
AS TAGS DO HTML (ATÉ 4.01)
<table>
Tag usada para apresentar dados em formato tabular.
AS TAGS DO HTML (ATÉ 4.01)
<tr>
Representa uma linha de uma tabela.
AS TAGS DO HTML (ATÉ 4.01)
<td>
Representa uma célula de uma tabela.
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo colspan
Número de colunas pelo qual a célula irá se expandir
AS TAGS DO HTML (ATÉ 4.01)
<td> - atributo rowspan
Número de linhas pelo qual a célula irá se expandir
AS TAGS DO HTML (ATÉ 4.01)
<table>, <tr> e <td><table> <tr> <td>Código</td> <td>Descrição Produto</td> </tr> <tr> <td>0001</td> <td>Camisa Polo</td> </td></table>
Let's Code!
AS TAGS DO HTML (ATÉ 4.01)
<form>
Representa um formulário.
AS TAGS DO HTML (ATÉ 4.01)
<form> - atributos
action<form action=”enviar.aspx”>
Representa a URL do recurso que irá receber os dados do formulário e que realizará o processamento desejado
AS TAGS DO HTML (ATÉ 4.01)
<form> - atributos
method<form action=”enviar.aspx” method=”get”>
Representa o método HTTP que será usado para envio do formulário
Método GET
Para submeter o formulário, os valores de seus campos são concatenados à URL.
Método GET
Ex:
http://teste.com/processa?nome=joao&idade=32&sexo=m
Método POST (default)
Os dados do formulário são enviados nos headers das solitações HTTP
AS TAGS DO HTML (ATÉ 4.01)
<input>
Representa um campo de um formulário.
AS TAGS DO HTML (ATÉ 4.01)
<input> - atributos
type button, checkbox, file, hidden, image, password, radio, reset, submit, text
AS TAGS DO HTML (ATÉ 4.01)
<select>
Representa uma caixa de seleção.
AS TAGS DO HTML (ATÉ 4.01)
<option>
Representa uma opção de um select.
AS TAGS DO HTML (ATÉ 4.01)
<option> - atributo value
O valor da opção. É o que será submetido ao servidor.
AS TAGS DO HTML (ATÉ 4.01)
<textarea>
Representa uma caixa de texto multilinha.
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo rows
Número de linhas
AS TAGS DO HTML (ATÉ 4.01)
<textarea> - atributo cols
Número de colunas
AS TAGS DO HTML (ATÉ 4.01)
<button>
Representa um botão.
AS TAGS DO HTML (ATÉ 4.01)
<label>
Representa um rótulo.
AS TAGS DO HTML (ATÉ 4.01)
<label> - atributo for
Especifica o ID do campo ao qual a label está associada.
Let's Code!
AS TAGS DO HTML (ATÉ 4.01)
<div> e <span>
Representam uma divisão em um site.
AS TAGS DO HTML (ATÉ 4.01)
<hr>
Representa uma linha horizontal.
AS TAGS DO HTML (ATÉ 4.01)
<ol>
Representa uma lista ordenada.
AS TAGS DO HTML (ATÉ 4.01)
<li>
Representa um item de lista.
AS TAGS DO HTML (ATÉ 4.01)
<ul>
Representa uma lista não ordenada.
Let's Code!
AS TAGS DO HTML (ATÉ 4.01)
<strong>
Dá ênfase a algo
AS TAGS DO HTML (ATÉ 4.01)
<iframe>
Representa uma página “embutida” em outra. [Inline Frame]
AS TAGS DO HTML (ATÉ 4.01)
<iframe> - atributo src
Localização da página
AS TAGS DO HTML (ATÉ 4.01)
<link>
Define um relacionamento entre um documento e um recurso externo.
AS TAGS DO HTML (ATÉ 4.01)
<link>
Suporte real apenas para folhas de estilo e favicons.
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo href
Especifica a localização do recurso externo
AS TAGS DO HTML (ATÉ 4.01)
<link> - atributo rel
Especifica o tipo de relacionamento
AS TAGS DO HTML (ATÉ 4.01)
<script>
Código em um linguagem de script (por padrão JavaScript), ou URI para arquivo de script externo.
AS TAGS DO HTML (ATÉ 4.01)
<script> - atributo src
Especifica a localização do script
AS TAGS DO HTML (ATÉ 4.01)
<meta>
Representa um meta-dado sobre o documento.
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Nome do meta-dado
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo name
Valores possíveis:
author, description, keywords, reply-to
AS TAGS DO HTML (ATÉ 4.01)
<meta> - atributo content
Valor do meta-dado
AS TAGS DO HTML (ATÉ 4.01)
<pre>
Texto pré-formatado. Preserva espaços e quebras de linha e é exibido em fonte mono-espaçada.
AS TAGS DO HTML (ATÉ 4.01)
<style>
Trecho de código CSS.
SENDO MAIS SEMÂNTICO
SENDO MAIS SEMÂNTICO
<abbr>
Define siglas e abreviações.
SENDO MAIS SEMÂNTICO
<address>
Define um endereço
SENDO MAIS SEMÂNTICO
<blockquote>
Define uma citação
SENDO MAIS SEMÂNTICO
<caption>
Legenda para tabelas. Por padrão centralizada.
SENDO MAIS SEMÂNTICO
<code>
Trecho de código
SENDO MAIS SEMÂNTICO
<code>
<code>Código Inline</code><pre> <code> Código multilinha </code></pre>
SENDO MAIS SEMÂNTICO
<del>
Texto que foi deletado de um documento
SENDO MAIS SEMÂNTICO
<ins>
Texto que foi inserido em um documento.
Geralmente sublinhado.
SENDO MAIS SEMÂNTICO
<fieldset>
Agrupa campos relacionados de um formulário
SENDO MAIS SEMÂNTICO
<legend>
Adiciona uma legenda a um fieldset
SENDO MAIS SEMÂNTICO
<samp>
Exemplo de saída de código
SENDO MAIS SEMÂNTICO
<tfoot>
Rodapé de uma tabela
SENDO MAIS SEMÂNTICO
<thead>
Cabeçalho de uma tabela
SENDO MAIS SEMÂNTICO
<th>
Célula-título de uma tabela
USAR COM BOM-SENSO
<br>
Na dúvida, não use.
USAR COM BOM-SENSO
<b>
Prefira usar a tag <strong>
USAR COM BOM-SENSO
<i>
Prefira usar a tag <em>
Let's Code!
COMENTÁRIOS EM HTML
<!-- Um comentário -->
DOCTYPE
<!DOCTYPE html>
Define a versão do html na qual o documento foi escrito, fazendo com que o navegador renderize uma página corretamente
CSS
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS1
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial
BREVE HISTÓRICO
1994 - Proposto por Håkon Wium Lie1996 - W3C lança recomendação oficial do CSS11996 - IE3 lança suporte parcial
1998 - W3C lança recomendação do CSS2
A LINGUAGEM
SEPARAÇÃO DE RESPONSABILIDADES
A LINGUAGEM
SEPARAÇÃO DE RESPONSABILIDADES
A LINGUAGEM
FOLHA DE ESTILO
A LINGUAGEM
FOLHA DE ESTILO EM CASCATA
A LINGUAGEM
COMPATIBILIDADE CROSSBROWSER
A LINGUAGEM
PROPRIEDADES
A LINGUAGEM
REGRAS
A LINGUAGEM
SELETORES
A LINGUAGEM
PSEUDO-ELEMENTOS
A LINGUAGEM
PSEUDO-CLASSES
SELETORES DO CSS(ATÉ O 2)
* [Universal]
SELETORES DO CSS(ATÉ O 2)
E > F[filhos]
SELETORES DO CSS(ATÉ O 2)
E:first-child [pseudo-classe first-child]
SELETORES DO CSS(ATÉ O 2)
E:link E:visited[pseudo-classes de link]
SELETORES DO CSS(ATÉ O 2)
E:active E:hover E:focus[pseudo-classes dinâmicas]
SELETORES DO CSS(ATÉ O 2)
E + F [adjacentes]
SELETORES DO CSS(ATÉ O 2)
E[foo] [possui atributo]
SELETORES DO CSS(ATÉ O 2)
E[foo="warning"] [possui atributo igual a]
SELETORES DO CSS(ATÉ O 2)
E[foo~="warning"] [possui atributo que contém (independente de possuir espaços)]
SELETORES DO CSS(ATÉ O 2)
DIV.classe
SELETORES DO CSS(ATÉ O 2)
E#id [id]
COMENTÁRIOS EM CSS(ATÉ O 2)
/*Este é um comentário*/
PROPRIEDADES DO CSS(ATÉ O 2)
background
PROPRIEDADES DO CSS(ATÉ O 2)
background-color
PROPRIEDADES DO CSS(ATÉ O 2)
background-image
PROPRIEDADES DO CSS(ATÉ O 2)
background-repeat
PROPRIEDADES DO CSS(ATÉ O 2)
border
PROPRIEDADES DO CSS(ATÉ O 2)
height
PROPRIEDADES DO CSS(ATÉ O 2)
width
PROPRIEDADES DO CSS(ATÉ O 2)
max-height
PROPRIEDADES DO CSS(ATÉ O 2)
max-width
PROPRIEDADES DO CSS(ATÉ O 2)
min-height
PROPRIEDADES DO CSS(ATÉ O 2)
min-width
PROPRIEDADES DO CSS(ATÉ O 2)
font-family
PROPRIEDADES DO CSS(ATÉ O 2)
font-size
PROPRIEDADES DO CSS(ATÉ O 2)
font-style
PROPRIEDADES DO CSS(ATÉ O 2)
font-weight
PROPRIEDADES DO CSS(ATÉ O 2)
list-style-type
square, circle, bullet, none
PROPRIEDADES DO CSS(ATÉ O 2)
margin
PROPRIEDADES DO CSS(ATÉ O 2)
padding
PROPRIEDADES DO CSS(ATÉ O 2)
cursor
PROPRIEDADES DO CSS(ATÉ O 2)
display
none, inline, block, inline-block
PROPRIEDADES DO CSS(ATÉ O 2)
overflow
visible, hidden, scroll, auto
PROPRIEDADES DO CSS(ATÉ O 2)
position
PROPRIEDADES DO CSS(ATÉ O 2)
bottom
PROPRIEDADES DO CSS(ATÉ O 2)
right
PROPRIEDADES DO CSS(ATÉ O 2)
left
PROPRIEDADES DO CSS(ATÉ O 2)
top
PROPRIEDADES DO CSS(ATÉ O 2)
z-index
PROPRIEDADES DO CSS(ATÉ O 2)
color
PROPRIEDADES DO CSS(ATÉ O 2)
letter-spacing
PROPRIEDADES DO CSS(ATÉ O 2)
line-height
PROPRIEDADES DO CSS(ATÉ O 2)
text-align
PROPRIEDADES DO CSS(ATÉ O 2)
text-decoration
underline, overline, line-through, none
PROPRIEDADES DO CSS(ATÉ O 2)
text-indent
PROPRIEDADES DO CSS(ATÉ O 2)
text-transform
uppercase, capitalize, lowercase
PROPRIEDADES DO CSS(ATÉ O 2)
vertical-align
PROPRIEDADES DO CSS(ATÉ O 2)
word-spacing
PROPRIEDADES DO CSS(ATÉ O 2)
float
HTML5
UM NOVO FOCO
HTML5
MAIS SEMÂNTICA
HTML5
NOVIDADES
AS TAGS DO HTML5
<canvas>
AS TAGS DO HTML5
<details>
AS TAGS DO HTML5
<summary>
Título de uma seção details
AS TAGS DO HTML5
<header>
Título de uma section. Pode conter headings, hgroups (removido da especificação em abril/13), content tables, logos, search form
AS TAGS DO HTML5
<section>
Agrupa items que possuam relação entre si, e cujo agrupamento não seja meramente para fins de posicionamento
AS TAGS DO HTML5
<footer>
Rodapé, geralmente último elemento do documento
AS TAGS DO HTML5
<article>
Conteúdo agrupado, importante e passível de utilização em feeds
AS TAGS DO HTML5
<figure>
Uma figura, que possivelmente possuirá legenda
AS TAGS DO HTML5
<figcaption>
Legenda de uma figura
AS TAGS DO HTML5
<datalist>
<input list="times"><datalist id="times"> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"></datalist>
AS TAGS DO HTML5
<datalist> - fallbackDigite seu time: <input list="times"><datalist id="times"> <label>Ou escolha na lista a seguir</label> <select> <option value="Ceará"> <option value="Fortaleza"> <option value="Uniclinic"> </select></datalist>
AS TAGS DO HTML5
<mark>
Efetua highlight de um texto e denota que o mesmo possui maior destaque
AS TAGS DO HTML5
<meter>
Medidor em formato de barra
AS TAGS DO HTML5
<meter> - atributo min
AS TAGS DO HTML5
<meter> - atributo max
AS TAGS DO HTML5
<meter> - atributo value
AS TAGS DO HTML5
<nav>
Um tipo de section, que agrupa links de navegação
AS TAGS DO HTML5
<aside>
Citação, sidebars, anúncios publicitários, grupos de navegação
AS TAGS DO HTML5
<output>
Representa o resultado de um cálculo
AS TAGS DO HTML5
<output>
<form >
<input id="a" type="text"> +<input id="b" type="text"> =<output for="a b"></output>
</form>
AS TAGS DO HTML5
<progress>
Barra de progresso, geralmente usada para representar o progresso de uma determinada tarefa
AS TAGS DO HTML5
<time>
Representa uma data, hora ou ambos
AS TAGS DO HTML5
<time> - atributo datetime
TAGS DEPRECADAS
<acronym>
TAGS DEPRECADAS
<applet>
TAGS DEPRECADAS
<basefont>
TAGS DEPRECADAS
<big>
TAGS DEPRECADAS
<center>
TAGS DEPRECADAS
<font>
TAGS DEPRECADAS
<frame>
TAGS DEPRECADAS
<frameset>
TAGS DEPRECADAS
<noframes>
TAGS DEPRECADAS
<strike>
TAGS DEPRECADAS
<tt>
CSS3 - Seletores
element1~element2 [sequenciais]
CSS3 - Seletores
[attribute^=value]
Inicia exatamente com a string value
CSS3 - Seletores
[attribute$=value]
Termina exatamente com a string value
CSS3 - Seletores
[attribute*=value]
Contém a string value
CSS3 - Seletores
:first-of-type
CSS3 - Seletores
:last-of-type
CSS3 - Seletores
:only-of-type
CSS3 - Seletores
:only-child
CSS3 - Seletores
:nth-child(n)
CSS3 - Seletores
:nth-last-child(n)
CSS3 - Seletores
:nth-of-type(n)
CSS3 - Seletores
:nth-last-of-type(n)
CSS3 - Seletores
:last-child
CSS3 - Seletores
:root
CSS3 - Seletores
:empty (sem filhos, nem ao menos text-nodes)
CSS3 - Seletores
:enabled
CSS3 - Seletores
:disabled
CSS3 - Seletores
:checked
CSS3 - Seletores
:not(selector)
CSS3 - Seletores
::selection
padding-box, content-box, border-box, text
CSS3 - Propriedades
background-clip
CSS3 - Propriedades
background-position
left top, left center, left bottom, 50% 50%, 10px 200px
CSS3 - Propriedades
background-origin
padding-box, content-box, border-box
CSS3 - Propriedades
background-size
width height
Ex:
200px200px auto
50% 50%contain e cover
CSS3 - Propriedades
border-radius
border-radius: 12px;
border-top-left-radius: 25px;
CSS3 - Propriedades
box-decoration-break
slice clone
CSS3 - Propriedades
box-shadow
box-shadow: hr vr blur color;
CSS3 - Propriedades
overflow-x
visible, hidden, scroll, auto
CSS3 - Propriedades
overflow-y
visible, hidden, scroll, auto
CSS3 - Propriedades
Rotate (CSS Transformations)
transform: rotate(90deg)
CSS3 - Propriedades
opacity
opacity: 0.5;
CSS3 - Propriedades
text-shadow
text-shadow: hr vr blur color;
CSS3 - Propriedades
transition
transition: background-color 800ms ease;
linear, ease, ease-in, ease-out
Pré-processadores CSS
Sass, LESS, Stylus