abaixo, encontramse propriedades e valores para imagens de background e para cores. Propriedade Descrição Valores Exemplo cor Ajusta a cor do texto nome da cor Trio RGB Código hex Valores RGB { color: blue } { color: #00F } { color: #0000FF } { color: RGB 0.0 0.0 1.0 } background Ajusta as imagens de background ou cores url(URL) (com ou sem repeat); nome da cor (ou transparent, ou dois nomes de cores, que serão misturadas, separados por um /); trio RGB (código hex) { background: url(image1.gif) repeat } { background: Red } { background: Red / Blue } { background: transparent } { background: #CCCCCC } background color Ajusta a cor do background nome da cor; trio RGB (código hex) { backgroundcolor: Red } { backgroundcolor: #CCCCCC } background image Ajusta a imagem de background URL { backgroundimage: url(image1.gif) } background repeat Ajusta a repetição do entelhamento das imagens de background repeat (horizontalmente e verticalmente); repeat x (horizontal); repeaty (vertical); norepeat { backgroundrepeat: repeaty } background attachment Fixa a imagem de background ou permite que ela deslize junto com a página scroll ou fixed { background: fixed } background position Ajusta a posição inicial das imagens de background (Observe que a Posição (x y) ou (x% y %); top, center, bottom left, center, right { backgroundposition: 2cm 1cm } { backgroundposition: 50% 20% } { background position: top center } { backgroundposition: top } Projeto eJovem Módulo II: CSS 56 posição default, 0,0 ou 0%,0%, é o canto superior esquerdo do elemento) { backgroundposition: bottom right } pt = pontos; in = polegadas; cm = centímetros; px = pixels; 2.8. Controle de blocos Uma “caixa” é uma propriedade de qualquer elemento de bloco no HTML: H1, P, DIV, etc, que automaticamente definem seu próprio bloco ou parágrafo. A caixa de um objeto consiste das partes seguintes: • O elemento em si (texto, imagem) • As margens internas do elemento (padding) • A borda em torno das margens internas (border) • A margem em torno da borda (margin) Todo elemento de bloco tem essas propriedades. As propriedades CSS que veremos nesta seção mostrarão como alterálas. A cor e tamanho da borda podem ser alterados assim como o fundo (como vimos na seção anterior). A margem externa é sempre transparente, mas a margem interna herda a cor de fundo do objeto. Também são alteráveis as margens internas e externas, larguras de borda, cor de borda e estilo de borda de cada um dos quatro lados de uma caixa individualmente, identificados pelos nomes top, right, bottom e left: 2.8.1. margin e padding As margens externas são definidas usando a propriedade margin, que afeta todas as margens ao mesmo tempo; ou as propriedades margintop, marginbottom, marginright e marginleft que permitem alterar as margens individualmente. Sintaxe: • margintop: comprimento | porcentagem % | auto • marginbottom: comprimento | porcentagem % | auto • marginright: comprimento | porcentagem % | auto • marginleft: comprimento | porcentagem % | auto Exemplo: margintop: 1cm; marginleft: 12pt; A propriedade margin afeta vários aspectos das margens externas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, apenas um (todas as margens iguais) ou dois (margens horizontais e verticais). Sintaxe: • margin: margintop marginright marginbottom marginleft • margin: margintop% marginright% marginbottom% marginleft% Projeto eJovem Módulo II: CSS 57 • margin: espaço_vertical espaço_horizontal • margin: margem_de_todos_os_lados Exemplos: margin: 5cm // vale para as quatro margens margin: 5cm 2cm // 5cm margs verticais, 2cm margs horizontais margin: 5cm 3cm 2cm 1cm // sent. horário: top, right, bottom, left As margens internas (padding) são definidas usando a propriedade padding (que afeta todas as margens internas ao mesmo tempo) ou as propriedades paddingtop, padding bottom, paddingright e paddingleft. Sintaxe: • paddingtop: comprimento | porcentagem % • paddingbottom: comprimento | porcentagem % • paddingright: comprimento | porcentagem % • paddingleft: comprimento | porcentagem % A propriedade padding afeta vários aspectos das margens internas de uma vez só. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores ou apenas um. Sintaxe: • padding: paddingtop paddingright paddingbottom paddingleft • padding: paddingtop% paddingright% paddingbottom% paddingleft% • padding: espaço_vertical espaço_horizontal • padding: margem_de_todos_os_lados 2.8.2. borderwidth Pode se controlar vários aspectos das bordas como a sua espessura em cada um dos quatro lados, suas cores (também cada um dos quatro lados) e estilos (idem). Isto pode ser feito de diversas maneiras. Para que as bordas apareçam é preciso primeiro que o estilo (border style) seja definido. Por exemplo: borderstyle: solid A espessura das bordas pode ser controlada através da propriedade borderwidth, afetando as espessuras de todos os lados da borda, ou individualmente através de bordertopwidth, borderbottomwidth, borderrightwidth e borderleftwidth. Sintaxe: • bordertopwidth: comprimento | thin | medium | thick • borderbottomwidth: comprimento | thin | medium | thick • borderrightwidth: comprimento | thin | medium | thick • borderleftwidth: comprimento | thin | medium | thick Exemplos: borderbottomwidth: thick; borderrightwidth: 5.5px; borderleftwidth: 0.2cm Projeto eJovem Módulo II: CSS 58 As propriedades das bordas podem ser tratadas em grupo, com borderwidth. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindose às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: • borderwidth: bordertopwidth I borderrightwidth • borderwidth: borderbottomwidth I borderleftwidth Exemplos: borderwidth: 5cm // vale para as quatro bordas borderwidth: 5cm 2cm // 5cm verticais, 2cm horizontais borderwidth: 5cm 3cm 2cm 1cm // horário: top, right, bottom, left 2.8.3. bordercolor A propriedade bordercolor é um atalho que permite que se altere a cor de uma ou de todas as quatro bordas ao redor de um elemento que também podem ser definidas individualmente através de bordertopcolor, borderbottomcolor, borderrightcolor e borderleftcolor. Sintaxe: • bordertopcolor: cor (nome ou código) • borderbottomcolor: cor (nome ou código) • borderrightcolor: cor (nome ou código) • borderleftcolor: cor (nome ou código) Exemplos: borderbottomcolor: rgb(231,45,112); borderrightcolor: 0fa97b; borderleftcolor: navy As propriedades das bordas podem ser tratadas em grupo, com bordercolor. A ordem dos fatores é importante. Podem ser incluídos todos os quatro valores, dois (referindose às bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe: • bordercolor: bordertopcolor I borderrightcolor I borderbottomcolor | border leftcolor Cada um dos borderxxxcolor acima é uma cor (RGB, hexadecimal ou nome). Podese alterar todas as bordas de uma vez, apenas as duas verticais e horizontais ou as quatro individualmente. Exemplos: bordercolor: red // red para as quatro bordas bordercolor: rgb(255, 0, 0) // red bordercolor: rgb(100%, 0, 0) // red bordercolor: red 0000ff // red verticais, 0000ff horizontais bordercolor: red blue yellow cyan // 4