CSS3

CSS3 - Cascading Style Sheets
Extensão do arquivo	.css
MIME	texto/css
Desenvolvido por	W3C
Tipo de formato	Folha de estilo
Variante de	XML
Página oficial	http://www.w3.org/TR/css3-roadmap/

CSS3, oficialmente lançada em 12/05/2011, é a mais nova versão das famosas Folhas de Estilo em Cascata, em inglês Cascading Style Sheets (ou simplesmente CSS), onde se definem estilos para páginas web, efeitos de transição, imagens, fontes entre outros. As CSS dão um estilo novo às páginas Web 2.0 em todos os aspectos de design do layout.

A principal função das CSS3 é tornar a interação entre usuários e a Web uma experiência melhorada, possibilitando o real domínio sobre o layout para os desenvolvedores. Entre outras melhorias, destacam-se o controle de opacidade, efeitos modernos de backgrounds e bordas, sombreamentos, diversos tipos de apresentação de conteúdo, transições e efeitos para criar animações de vários tipos, como um simples relógio de ponteiros.

Diferenciações

elemento
{
   -webkit-border-radius:10px;
   -moz-border-radius:10px;
   -o-border-radius:10px;
   -khtml-border-radius:10px;
}

Como pode-se ver, foram necessárias quatro linhas de código para produzir bordas arredondadas num elemento HTML. Cada prefixo da propriedade border-radius serve para uma plataforma de browsers. A -webkit, para browsers como Chrome e Safari, -moz para o Firefox, -o para Opera e -khtml para Konqueror. Obs.: há browsers que não aceitam todas as propriedades CSS3. Para testar, utilize Teste de Seletores do CSS3 .Info.

Versões do CSS

CSS não é definida da forma "padrão", baseada em versões. Optam por uma categorização de níveis (levels) de forma que, o próximo level deve (na teoria) comportar todas as definições do level anterior. Sendo assim, a CSS3, na teoria, deve conter todas as definições da CSS2.1.

Seletores CSS

Veja a lista dos seletores CSS:

Pattern	Meaning	Described in section	First defined in level	*	any element	Universal selector	2
E	an element of type E	Type selector	1
E[foo]	an E element with a "foo" attribute	Attribute selectors	2
E[foo="bar"]	an E element whose "foo" attribute value is exactly equal to "bar"	Attribute selectors	2
E[foo~="bar"]	an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"	Attribute selectors	2
E[foo^="bar"]	an E element whose "foo" attribute value begins exactly with the string "bar"	Attribute selectors	3
E[foo$="bar"]	an E element whose "foo" attribute value ends exactly with the string "bar"	Attribute selectors	3
E[foo*="bar"]	an E element whose "foo" attribute value contains the substring "bar"	Attribute selectors	3
="en"]	an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"	Attribute selectors	2
E:root	an E element, root of the document	Structural pseudo-classes	3
E:nth-child(n)	an E element, the n-th child of its parent	Structural pseudo-classes	3
E:nth-last-child(n)	an E element, the n-th child of its parent, counting from the last one	Structural pseudo-classes	3
E:nth-of-type(n)	an E element, the n-th sibling of its type	Structural pseudo-classes	3
E:nth-last-of-type(n)	an E element, the n-th sibling of its type, counting from the last one	Structural pseudo-classes	3
E:first-child	an E element, first child of its parent	Structural pseudo-classes	2
E:last-child	an E element, last child of its parent	Structural pseudo-classes	3
E:first-of-type	an E element, first sibling of its type	Structural pseudo-classes	3
E:last-of-type	an E element, last sibling of its type	Structural pseudo-classes	3
E:only-child	an E element, only child of its parent	Structural pseudo-classes	3
E:only-of-type	an E element, only sibling of its type	Structural pseudo-classes	3
E:empty	an E element that has no children (including text nodes)	Structural pseudo-classes	3
E:link E:visited	an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)	The link pseudo-classes	1
E:active E:hover E:focus	an E element during certain user actions	The user action pseudo-classes	1 and 2
E:target	an E element being the target of the referring URI	The target pseudo-class	3
E:lang(fr)	an element of type E in language "fr" (the document language specifies how language is determined)	The :lang() pseudo-class	2
E:enabled E:disabled	a user interface element E which is enabled or disabled	The UI element states pseudo-classes	3
E:checked	a user interface element E which is checked (for instance a radio-button or checkbox)	The UI element states pseudo-classes	3
E::first-line	the first formatted line of an E element	The ::first-line pseudo-element	1
E::first-letter	the first formatted letter of an E element	The ::first-letter pseudo-element	1
E::before	generated content before an E element	The ::before pseudo-element	2
E::after	generated content after an E element	The ::after pseudo-element	2
E.warning	an E element whose class is "warning" (the document language specifies how class is determined).	Class selectors	1
E#myid	an E element with ID equal to "myid".	ID selectors	1
E:not(s)	an E element that does not match simple selector s	Negation pseudo-class	3
E F	an F element descendant of an E element	Descendant combinator	1
E > F	an F element child of an E element	Child combinator	2
E + F	an F element immediately preceded by an E element	Adjacent sibling combinator	2
E ~ F	an F element preceded by an E element	General sibling combinator	3

Propriedades CSS

Veja a lista das propriedades CSS:

Name	Values	Initial value	Applies to	Inherited?	Percentages	Media	background-attachment	scroll | fixed | inherit	scroll		no		visual
background-color	<color> | inherit	transparent		no		visual
background-image	<uri> | none | inherit	none		no		visual
background-position	[ [ <percentage> | <length> | left | center | right ] [ <percentage> |<length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit	0% 0%		no	refer to the size of the box itself	visual
background-repeat	repeat | repeat-x | repeat-y | no-repeat | inherit	repeat		no		visual
background	[‘background-color’ || ‘background-image’ || ‘background-repeat’ ||‘background-attachment’ || background-position] | inherit	see individual properties		no	allowed on ‘background-position’	visual
border-collapse	collapse | separate | inherit	separate	‘table’ and ‘inline-table’ elements	yes		visual
border-color	[ <color> ]{1,4} | inherit	see individual properties		no		visual
border-spacing	<length> <length>? | inherit	0	‘table’ and ‘inline-table’ elements	yes		visual
border-style	<border-style>{1,4} | inherit	see individual properties		no		visual
border-topborder-rightborder-bottomborder-left	[ <border-width> || <border-style> || border-top-color ] | inherit	see individual properties		no		visual
border-top-colorborder-right-colorborder-bottom-colorborder-left-color	<color> | inherit	the value of the ‘color’ property		no		visual
border-top-styleborder-right-styleborder-bottom-styleborder-left-style	<border-style> | inherit	none		no		visual
border-top-widthborder-right-widthborder-bottom-widthborder-left-width	<border-width> | inherit	medium		no		visual
border-width	<border-width>{1,4} | inherit	see individual properties		no		visual
border	[ <border-width> || <border-style> || border-top-color ] | inherit	see individual properties		no		visual
bottom	<length> | <percentage> | auto | inherit	auto	positioned elements	no	refer to height of containing block	visual
caption-side	top | bottom | inherit	top	‘table-caption’ elements	yes		visual
clear	none | left | right | both | inherit	none	block-level elements	no		visual
clip	<shape> | auto | inherit	auto	absolutely positioned elements	no		visual
color	<color> | inherit	depends on user agent		yes		visual
content	normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit	normal	:before and :after pseudo-elements	no		all
counter-increment	[ <identifier> <integer>? ]+ | none | inherit	none		no		all
counter-reset	[ <identifier> <integer>? ]+ | none | inherit	none		no		all
cursor	[ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help | progress ] ] | inherit	auto		yes		visual,interactive
direction	ltr | rtl | inherit	ltr	all elements, but see prose	yes		visual
display	inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none |inherit	inline		no		all
empty-cells	show | hide | inherit	show	‘table-cell’ elements	yes		visual
float	left | right | none | inherit	none	all, but see 9.7	no		visual
font-family	[ [ <family-name> | <generic-family> ] [, <family-name>| <generic-family> ]* ] | inherit	depends on user agent		yes		visual
font-size	<absolute-size> | <relative-size> | <length> | <percentage> | inherit	medium		yes	refer to inherited font size	visual
font-style	normal | italic | oblique | inherit	normal		yes		visual
font-variant	normal | small-caps | inherit	normal		yes		visual
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit	normal		yes		visual
font	[ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]? ‘font-size’ [ /‘line-height’ ]? font-family ] | caption | icon | menu | message-box | small-caption | status-bar | inherit	see individual properties		yes	see individual properties	visual
height	<length> | <percentage> | auto | inherit	auto	all elements but non-replaced inline elements, table columns, and column groups	no	see prose	visual
left	<length> | <percentage> | auto | inherit	auto	positioned elements	no	refer to width of containing block	visual
letter-spacing	normal | <length> | inherit	normal		yes		visual
line-height	normal | <number> | <length> | <percentage> | inherit	normal		yes	refer to the font size of the element itself	visual
list-style-image	<uri> | none | inherit	none	elements with ‘display: list-item’	yes		visual
list-style-position	inside | outside | inherit	outside	elements with ‘display: list-item’	yes		visual
list-style-type	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit	disc	elements with ‘display: list-item’	yes		visual
list-style	[ ‘list-style-type’ || ‘list-style-position’ || list-style-image ] | inherit	see individual properties	elements with ‘display: list-item’	yes		visual
margin-rightmargin-left	<margin-width> | inherit	0	all elements except elements with table display types other than table-caption, table and inline-table	no	refer to width of containing block	visual
margin-topmargin-bottom	<margin-width> | inherit	0	all elements except elements with table display types other than table-caption, table and inline-table	no	refer to width of containing block	visual
margin	<margin-width>{1,4} | inherit	see individual properties	all elements except elements with table display types other than table-caption, table and inline-table	no	refer to width of containing block	visual
max-height	<length> | <percentage> | none | inherit	none	all elements but non-replaced inline elements, table columns, and column groups	no	see prose	visual
max-width	<length> | <percentage> | none | inherit	none	all elements but non-replaced inline elements, table rows, and row groups	no	refer to width of containing block	visual
min-height	<length> | <percentage> | inherit	0	all elements but non-replaced inline elements, table columns, and column groups	no	see prose	visual
min-width	<length> | <percentage> | inherit	0	all elements but non-replaced inline elements, table rows, and row groups	no	refer to width of containing block	visual
opacity	<number> | inherit	1	all	no		visual
orphans	<integer> | inherit	2	block container elements	yes		visual,paged
outline-color	<color> | invert | inherit	invert		no		visual,interactive
outline-style	<border-style> | inherit	none		no		visual,interactive
outline-width	<border-width> | inherit	medium		no		visual,interactive
outline	[ ‘outline-color’ || ‘outline-style’ || outline-width ] | inherit	see individual properties		no		visual,interactive
overflow	visible | hidden | scroll | auto | inherit	visible	block containers	no		visual
padding-toppadding-rightpadding-bottompadding-left	<padding-width> | inherit	0	all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column	no	refer to width of containing block	visual
padding	<padding-width>{1,4} | inherit	see individual properties	all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column	no	refer to width of containing block	visual
page-break-after	auto | always | avoid | left | right | inherit	auto	block-level elements (but see text)	no		visual,paged
page-break-before	auto | always | avoid | left | right | inherit	auto	block-level elements (but see text)	no		visual,paged
page-break-inside	avoid | auto | inherit	auto	block-level elements (but see text)	no		visual,paged
position	static | relative | absolute | fixed | inherit	static		no		visual
quotes	[<string> <string>]+ | none | inherit	depends on user agent		yes		visual
right	<length> | <percentage> | auto | inherit	auto	positioned elements	no	refer to width of containing block	visual
table-layout	auto | fixed | inherit	auto	‘table’ and ‘inline-table’ elements	no		visual
text-align	left | right | center | justify | inherit	a nameless value that acts as ‘left’ if ‘direction’ is ‘ltr’, ‘right’ if ‘direction’ is ‘rtl’	block containers	yes		visual
text-decoration	none | [ underline || overline || line-through || blink ] | inherit	none		no (see prose)		visual
text-indent	<length> | <percentage> | inherit	0	block containers	yes	refer to width of containing block	visual
text-transform	capitalize | uppercase | lowercase | none | inherit	none		yes		visual
top	<length> | <percentage> | auto | inherit	auto	positioned elements	no	refer to height of containing block	visual
unicode-bidi	normal | embed | bidi-override | inherit	normal	all elements, but see prose	no		visual
vertical-align	baseline | sub | super | top | text-top | middle | bottom | text-bottom |<percentage> | <length> | inherit	baseline	inline-level and ‘table-cell’ elements	no	refer to the ‘line-height’ of the element itself	visual
visibility	visible | hidden | collapse | inherit	visible		yes		visual
white-space	normal | pre | nowrap | pre-wrap | pre-line | inherit	normal		yes		visual
widows	<integer> | inherit	2	block container elements	yes		visual,paged
width	<length> | <percentage> | auto | inherit	auto	all elements but non-replaced inline elements, table rows, and row groups	no	refer to width of containing block	visual
word-spacing	normal | <length> | inherit	normal		yes		visual
z-index	auto | <integer> | inherit	auto	positioned elements	no		visual

Novidades do CSS3

O CSS3 é extremamente capaz de construir animações que impressionam o mais avançado desenvolvedor web, tanto em 2 como em 3 dimensões. Os mais comuns são os efeitos de rotação, movimento e transição.

Ver também

• CSS
• HTML
• Padrões web
• Tableless
• Flash
• JavaScript

Ligações externas

• Wikilivros

• «CSS3 .Info - All you ever needed to know about CSS3» (em inglês) 
• «W3C Introduction to CSS3» (em inglês) 
• «W3C CSS Validation Service» (em inglês) 
• «W3Schools CSS Tutorial» (em inglês) 
• «Maujor - tutoriais css» 
• «Surfin's Safari - The Webkit Blog» (em inglês)