CSS interativo
Criei este script para demonstrar de forma interativa como funciona os estilos em cascata na prática. A aplicação está divida em três partes:
- O formulário da esquerda, que controla as propriedades de texto e caixa do exemplo e o título contido dentro dela.
- No lado direito, uma caixa exibindo o código atualizado em tempo real conforme o usuário faz suas mudanças.
- O elemento de exemplo em si (#i), inicialmente configurado numa caixa bege com texto marrom, e no interior, o título (h4).
Veja também: As vantagens do CSS Zen Garden:Golden Leaves
- #i{
- width:300px;
- font:normal normal 11px 'verdana';
- background:#FDE8CD;
- margin:0 0 0 0;
- padding:0;
- color:#996633;
- text-align:left;
- border:1px solid #996633;
- }
- #i h4{
- font:11px 'trebuchet ms';
- background-image: none;
- margin:0;
- border-bottom:3px solid #996633;
- }
Lorem ipsum dolor sit amet
Ut dictum mattis libero. Duis quis arcu vel elit ultrices ornare. Donec neque dui, auctor eget, aliquet quis, tempus id, sem. Fusce sapien.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio enim, molestie non, pretium ut, fringilla vel, libero. Nam adipiscing ultricies nisl.
Sed ornare.Vivamus sodales congue ligula. Nunc purus nulla, consectetuer non, sollicitudin a, tincidunt non, arcu. Nam purus urna, consequat eu, mattis scelerisque, facilisis eu, leo.
Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer libero diam, eleifend et, vestibulum non, scelerisque ut, ipsum.