Sítios Web I

CSS {border, display, list, cursor, background}

ProfºEduardo Pezutti

http://maverick.td.utfpr.edu.br/slides/sw1 link

CSS

Cascading Style Sheets

A propriedade border

As propriedades para as bordas, definem as características (os valores na regra CSS) das quatro bordas de um elemento HTML.

  • border-width:................ espessura da borda
  • border-style:................ estilo da borda
  • border-color:................ cor da borda
  • -------------------------------------------------
  • border-top-width:............ espessura da borda superior
  • border-top-style:............ estilo da borda superior
  • border-top-color:............ cor da borda superior

Lembrando que também se aplica a outline

  • border-right-width:.......... espessura da borda direita
  • border-right-style:.......... estilo da borda direita
  • border-right-color:.......... cor da borda direita
  • -------------------------------------------------
  • border-bottom-width:......... espessura da borda inferior
  • border-bottom-style:......... estilo da borda inferior
  • border-bottom-color:......... cor da borda inferior
  • border-left-width:...........espessura da borda esquerda
  • border-left-style:...........estilo da borda esquerda
  • border-left-color:...........cor da borda esquerda
  • -------------------------------------------------
  • border-top:.....maneira abreviada para todas as propriedades da borda superior
  • border-right:...maneira abreviada para todas as propriedades da borda direita
  • border-bottom:..maneira abreviada para todas as propriedades da borda inferior
  • border-left:....maneira abreviada para todas as propriedades da borda esquerda
  • border:.........maneira abreviada para todas as quatro bordas

Valores para border

  • style:
    1. none: nenhuma borda
    2. hidden: equivalente a none
    3. dotted: borda pontilhada
    4. dashed: borda tracejada
    5. solid: borda contínua
    6. double: borda dupla
    7. groove: borda entalhada
    8. ridge: borda em ressalto
    9. inset: borda em baixo relevo
    10. outset: borda em alto relevo
  • color:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green...etc
  • width:
    1. thin: borda fina
    2. medium: borda média
    3. thick: borda grossa
    4. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
<html>
  <head>
    <style type="text/css">
    h3 {
      border-width: medium;
      border-style: solid;
      border-color: #00f;
    }
    p {
      border-width: 6px;
      border-style: dashed;
      border-color: #f00;
    }
    </style>
  </head>
  <body>
    <h3>Borda média, contínua e azul</h3>
    <p>Borda 6px, tracejada e vermelha</p>
  </body>
</html>

display

Normalmente usado ou o inline ou block

grande lista

Propriedade list

  • list-style-image............. imagem como marcador da lista;
  • list-style-position..........onde o marcador da lista é posicionado;
  • list-style-type...............tipo do marcador da lista;
  • list-style........................maneira abreviada para todas as propriedades;
  • list-style-image:
    1. none
    2. URL: url(caminho/marcador.gif)
  • list-style-position:
    1. outside: marcador fora do alinhamento do texto
    2. inside: marcador alinhado com texto
  • list-style-type:
    1. none: sem marcador
    2. disc: círculo (bola cheia)
    3. circle: circunferência (bola vazia)
    4. square: quadrado cheio
    5. decimal: números 1, 2, 3, 4, ...
    6. decimal-leading-zero
  • list-style-type:
    1. lower-roman: romano minúsculo i, ii, iii, iv, ...
    2. upper-roman: romano maiúsculo I, II, III, IV, ...
    3. lower-alpha: letra minúscula a, b, c, d, ...
    4. upper-alpha: letra maiúscula A, B, C, D, ...
    5. lower-greek
    6. lower-latin
    7. upper-latin
    8. hebrew
    9. armenian
    10. georgian
    11. cjk-ideographic
    12. hiragana
    13. katakana
    14. hiragana-iroha
    15. katakana-iroha

Propriedades do cursor

  • url
  • auto
  • crosshair
  • default
  • pointer
  • move
  • e-resize
  • ne-resize
  • nw-resize
  • n-resize
  • se-resize
  • sw-resize
  • s-resize
  • w-resize
  • text
  • wait
  • help

Propriedade background

  • background-color............... cor do fundo;
  • background-image............. imagem de fundo;
  • background-repeat............. maneira como a imagem de fundo é posicionada;
  • background-attachment.......se a imagem de fundo "rola" ou não com a tela;
  • background-position............como e onde a imagem de fundo é posicionada;
  • background........................maneira abreviada para todas as propriedades;
▼
  • background-color:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green...etc
    4. transparente: transparent
  • background-image:
    1. URL: url(caminho/imagem.gif | .png | .jpg);
  • background-repeat:
    1. não repete: no-repeat
    2. repete vertical e horizontal: repeat
    3. repete vertical: repeat-y
    4. repete horizontal: repeat-x
  • background-attachment:
    1. imagem fixa na tela: fixed
    2. imagem "rola" com a tela: scroll
  • background-position:
    1. x-pos y-pos
    2. x-% y-%
    3. top left
    4. top center
    5. top right
    6. center left
    7. center center
    8. center right
    9. bottom left
    10. bottom center
    11. bottom right

ProfºEduardo Pezutti

epsantos@utfpr.edu.br link