Scribd Logo
Unggah

Selamat datang di Scribd!

  • Folhas de Estilos WEB

    Diunggah oleh

    Rafael Rezende Costa
    16 tayangan7 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    16 tayangan7 halaman

    Folhas de Estilos WEB

    Diunggah oleh

    Rafael Rezende Costa

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 7

    CSSCascadingStyleSheets

    FolhasdeEstilosemCascata UNIBANIntroduoTecnologiaWeb2008 ProfElizabeteMunzlinger

    ndice
    21 O que CSS? ...................................................................................................... 2 Por que usar estas formataes ? ................................................................................. 2 Estilos de Uso ............................................................................................................. 2 Modo de Uso............................................................................................................... 3 Propriedades............................................................................................................... 4 a)PropriedadesdeFormataodeTexto ..................................................................... 4 b)PropriedadesdeFormataodePargrafos.............................................................. 4 c)PropriedadesdeFormataodeCores,FundoeMargensdaPgina ............................. 4 d)PropriedadesdeFormataodeListas..................................................................... 5 e)PropriedadesdeFormataodeTabelas .................................................................. 5

    21OqueCSS?

    Folhas de Estilos em Cascata (Cascating Style Sheets) uma linguagem de estilo utilizada para definir a apresentao de documentos escritos em linguagem de marcao, como HTML ou XML.

    Porqueusarestasformataes?
    Seu principal benefcio prover a separao entre o formato e o contedo de um documento. Ao invs de colocar a formatao dentro do documento, o desenvolvedor cria um link (ligao) para uma pgina que contm os estilos, procedendo de forma idntica para todas as pginas de um portal. Quando quiser alterar a aparncia do portal basta portanto modificar apenas um arquivo.

    EstilosdeUso

    Seu principal benefcio prover a separao entre o formato e o contedo de um documento. 1. Estilo InLine: Os estilos in-line (na linha) so utilizados na prpria tag, sendo criados elemento a elemento, com seu prprio estilo. Essa forma de trabalho se assemelha muito aos atributos de formatao que os elementos oferecem. Trabalhando com estilos in-line, no somos capazes de desfrutar de sua capacidade de reaproveitamento de cdigo e padronizao de estilos. Para utilizarmos o estilo in-line, devemos usar o atributo style. Exemplo: <p style="font-family: arial; color: red"> Exemplo de estilo in-line</p>

    2. Estilo Incorporado: quando se definem todos os estilos que sero apresentados na pgina, logo no incio dela, criando-se uma rea ou folha de estilos padro para toda a pgina. Esta prtica muito melhor que utilizar estilos in-line, mas limita-se apenas a uma pgina. Os estilos incorporados podem ser utilizados em toda a pgina, mas no podem ser compartilhados com outras pginas. Esta seo definida no incio da pgina vai dentro do elemento HEAD. Exemplo: <html> <head> <title>Programando em HTML 4.0 e CSS 1</ title> <style type="text/css"> P {font-family: arial; color: red} </style> </head> <body> Texto simples fora do pargrafo e <p>Texto com pargrafo utilizando estilo incorporado</p> </body> </html>

    3.EstiloVinculado: Tambm conhecido como pgina de estilos, quando se cria uma pgina unicamente de estilos, definindo todos os que voc pode determinar em seu site. Ento, basta vincular sua pginas pgina de estilos, e todas seguiro o mesmo padro. A pgina de estilos uma execelente prtica de desenvolvimento HTML, facilitando o desenvolvimento e a manuteno dos sites. 2

    P { font-family: arial; color:red } Arquivo HTML: <html> <head> <title>Programando em HTML 4.0 e CSS 1</title> <link rel="stylesheet" href="estilo1.css" type="text/css"> </head> <body> Texto simples fora do pargrafo e <p>Texto com pargrafo utilizando estilo incorporado</p> </body> </html>

    Exemplo: Arquivo CSS:

    MododeUso

    Sempre seguimos a sintaxe para definir as propriedades para os elementos: Seletor {propriedade: valor} Seletor: um elemento HTML (ou tag) como B, A, TABLE, TD, P, etc. Propriedade: o nome da propriedade a ser alterada. Alguns exemplos so color, fontcolor, width, etc. Valor: o contedo atribudo propriedade. Exemplo de pargrafo com fonte vermelha: p { color: #ff0000 } Exemplo de corpo com fundo preto e fonte tipo Tahoma: body { color: #000000; Font-Family: Tahoma }

    Propriedades
    a)PropriedadesdeFormataodeTexto FontFamily Define uma lista de fontes e sua prioridade para apresentao de um elemento em uma pgina. Se a primeira fonte da lista no estiver instalada na mquina do usurio, dever ser usada a segunda e assim por diante at ser encontrada uma fonte instalada Define as variantes normal ou small-caps. Uma fonte small-caps aquela que usa letras maisculas de tamanhos reduzidos Define a escolha da fonte em normal, italic ou obliqe. Define quo negrito ou "pesada" deve ser renderizada a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam nmeros de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte Define o tamanho da fonte. O tamanho pode ser definido em px (pixels), pt (pontos), cm (centmetros) mm (milmetros) e in (polegadas). Adiciona "efeitos" ou "decorao" em textos. Pode receber os valores underline, overline ou line-through. Controla a capitalizao (tornar maiscula) do texto. Aceita os valores capitalize, uppercase ou lowercase independentemente de como o texto foi escrito no cdigo HTML.

    FontVariant FontStyle FontWeight

    FontSize TextDecoration TextTransform

    b)PropriedadesdeFormataodePargrafos TextAlign TextIndent LineHeight Define o alinhamento dos texto. Pode receber os valores left, right, center ou justify Define um recuo primeira linha de um pargrafo Define o espaamento entre linhas

    c)PropriedadesdeFormataodeCores,FundoeMargensdaPgina Color BackgroundColor BackgroundImage BackgroundRepeat Define a cor do primeiro plano de um elemento. Aceita valores em cdigo hexadecimal (#FFFFFF), cdigo rgb (rgb(255,235,0)) ou nome da cor (red, blue, green...etc ). Define a cor do fundo de um elemento. Aceita valores em cdigo hexadecimal (#FFFFFF), cdigo rgb (rgb(255,235,0)) ou nome da cor (red, blue, green...etc ). Define uma imagem de fundo. Controla o comportamento de repetio da imagem de fundo. Pode assumir os valores: repeat-x (a imagem se repete na horizontal), repeat-y(a imagem se repete na vertical), repeat (a imagem se repete na tanto na horizontal como na vertical) ou no-repeat (a imagem no se repete). Define se a imagem ser fixa ou se ir rolar juntamente com o elemento que a contm. Pode assumir os valores scroll (a imagem rola 4

    Background Attachment

    BackgroundPosition

    MarginTop MarginBottom MarginRight MarginLeft

    com a pgina) ou fixed (a imagem fica fixa). Por padro uma imagem de fundo posicionada no canto superior esquerdo da tela. A propriedade background-position permite alterar este posicionamento padro e colocar a imagem em qualquer lugar na tela. Existem vrias maneiras de definir o posicionamento da imagem na tela definindo valores para background-position. Todas elas se utilizam de um sistema de coordenadas. Por exemplo, os valores '100px 200px' posiciona a imagem a 100px do topo e a 200px do lado esquerdo da janela do navegador. As coordenadas podem ser expressas em percentagem da largura da janela, em unidades fixas (pixels, centmetros, etc.) ou pode-se usar as palavras top, bottom, center, left e right. Define a margem superior Define a margem inferior. Define a margem direita. Define a margem esquerda.

    d)PropriedadesdeFormataodeListas ListStyleImage ListStylePosition ListStyleType Especifica uma imagem como marcador da lista. Pode assumir os valores: none ou url(caminho/marcador.gif) Especifica onde o marcador da lista ser posicionado. Pode assumir os valores: outside (marcador fora do alinhamento do texto) ou inside (marcador alinhado com texto). Define o tipo do marcador da lista. Pode assumir os valores: none (sem marcador), disc (bolinha cheia), circle (bolinha vazia), square (quadrado cheio), decimal (nmeros 1, 2, 3, 4, ...) decimal-leading (zero), lower-roman (romano minsculo i, ii, iii, iv, ...), upper-roman (romano maisculo I, II, III, IV, ...), lower-alpha (letra minscula a, b, c, d, ...), upper-alpha (letra maiscula A, B, C, D, ...), lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha.

    e)PropriedadesdeFormataodeTabelas BorderColor Define a cor da borda. Aceita valores em cdigo hexadecimal (#FFFFFF), cdigo rgb (rgb(255,235,0)) ou nome da cor (red, blue, green...etc ). Define a espessura da borda. Aceita os valores: thin (borda fina), mdium (borda mdia), thick (borda grossa) ou length( uma medida reconhecida pelas CSS - px, pt, em, cm, ...) Define o estilo da borda. Aceita os valores: none (nenhuma borda ), hidden (equivalente a none), dotted (borda pontilhada), dashed (borda tracejada), solid (borda contnua), doubl (borda dupla), groove (borda entalhada) , ridge (borda em ressalto), inset (borda em baixo relevo) ou outset (borda em alto relevo) 5

    BorderWhidth BorderStyle

    Anda mungkin juga menyukai