Compêndio códigos. {css}



Documentos relacionados
Compêndio códigos. <html>

CSS Cascading Style Sheets Folhas de Estilo em Cascata

APOSTILA DE PROGRAMAÇÃO WEB

Lista de propiedades CSS

FOLHAS DE ESTILO EM CASCATA

Aula 5 Cabeçalhos, Imagens e Links

Web Design Aula 15: Propriedades CSS

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

CSS - Background, Color e Fontes. Prof. Bruno Medeiros bruno.medeiros@sc.senai.br

Ferramentas Programáveis. Profº Ritielle Souza

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

CSS -Cascading Style Sheets - Introdução

Apostila de Introdução ao CSS

EXEMPLO. h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

CSS Cascading Style Sheets

neste tutorial, iremos abordar as folhas de estilo em cascata, mais conhecidas como cascading style sheets. por que usar css?

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO

HTML & CSS. Informática / LECA. Marco Costa. Departamento de Ciência de Computadores Faculdade de Ciências, Universidade do Porto 2005 / 06

UNIVERSIDADE PAULISTA UNIP EMENTA E CONTEÚDO PROGRAMÁTICO. I. Ementa HTML e XHTML, de estrutura e marcação utilizados na sua composição; CSS.

CSS (Style Sheets - Folhas de Estilo)

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Tecnologias para Web Design

Introdução às Folhas de Estilo

CSS Luciano Otávio de Assis CSS

CSS - Cascading Style Sheets

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

Sintaxe Básica da Linguagem CSS

Criação de Web Sites I

XHTML. <head> </head> <head> <meta http-equiv="content- Type" content="text/html; charset=utf-8" /> </head>

Erwin Alexander Uhlmann /02/08-1. Desenvolvimento de WEB I HTML Volume 2 Erwin Alexander Uhlmann

CSS - Parte 02. Prof. Marciano dos Santos Dionizio

BIBLIOGRAFIA: CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

Cascading Style Sheets

PROGRAMAÇÃO EM AMBIENTE WEB I

Apostila de CSS Nível Básico Curso de Informática OSA II

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

TABLELESS E PROJETO ESTRUTURAL

06/02/2016 PROGRAMAÇÃO EM AMBIENTE WEB I CSS UM POUCO DE HISTÓRIA

body { background-color: #FF0000; } /* cor de fundo da pagina(body) #FF0000 */

Introdução ao CSS Regras de Estilos

Folha Prática Nº5 CSS. UNIVERSIDADE DA BEIRA INTERIOR Faculdade de Engenharia Departamento de Informática. Tecnologias Internet /2012

Ele vai localizar este código, substitua então o The Beat Was Goin' Strong pelo nome do seu tumblr.

CSS Cascade Style Sheet Folhas de Estilo em Cascata

Construindo Sites com. CSS e (X)HTML. sites controlados por folhas de estilo em cascata. Maurício Samy Silva. Novatec

CSS (Cascading Style Sheet)

<!DOCTYPE html> <html lang = "pt-br"> <head> <meta charset = UTF-8"> <title> Exemplo de uso correto da semântica HTML </title> </ head >

CRIAÇÃO DE SITES (AULA 9)

Internet e Programação Web

Guia de Referência CSS Volume 1: Parâmetros Básicos Prof. Daniel Caetano

Web design & HTML. avançado

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

IFSC/Florianópolis - Prof. Herval Daminelli. De fontes De textos De margens De bordas De preenchimentos (padding) De fundos (background) De links

Construção de sitesaula4

3. Formulários e Folhas de Estilo em XHTML

CSS ETEC FRANCISCO MORATO. Professores: Kelly e Rafael

Web Design - CSS. Conteúdo. - O que é CSS? - Sintaxe CSS - Como inserir CSS em HTML - Propriedades CSS

Comandos Extras Formatações no CSS

HTML 5 + CSS APRESENTANDO O CSS ESTILOS LOCAIS

Apostila de programação para web: HTML e CSS

Guia de Referência JavaScript: Interagindo com o Navegador

Cascading Style Sheets

apostila DE html, xhtml e css

Criando conta de usuário

Web Design Aula 16: Modelo de Caixa e propriedades de Imagem

HTML: Recursos Básicos e Especiais

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

Web Design Aula 15: Conhecendo CSS

Criando estilos. Css. Cada estilo que você cria é definido como uma regra CSS. Cada regra deve-se utilizar a seguinte sintaxe:

PROGRAMAÇÃO PARA INTERNET RICA FUNDAMENTOS DO CSS PARTE I

Qual a razão do termo cascata na terminologia CSS? A forma como as regras de estilo são aplicadas obedece a 3 princípios básicos: herança,

RODRIGO C. REQUIÃO. WEBSITE VITRINE PARA A EMPRESA BUFFET GULLA.

08/11/2012. Tecnologias WEB - CSS. Professor Elisson Lobão

Cascading Style Sheets CSS

1) Criar o código HTML para construir a página representada pela imagem abaixo.

Apagar conta de usuã rio

CSS. Karen Frigo Busolin

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Introdução à Cascading Style Sheets

José Janeiro (Nº2467) Trabalho prático: HTML, CSS, Javascript. EmpregoWeb-Registo de pessoas

Unidade 5: Posicionamento com CSS E outras Técnicas Avançadas Prof. Daniel Caetano

08/08/2011 TECNOLOGIAS WEB AULA 10 PROF. RAFAEL DIAS Objetivos: Revisar os princípios de CSS Blocos e Elementos Alinhados com CSS

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

AUXILIAR EM WEB DESIGN. Ayslan Trevizan Possebom Daniela Eloise Flôr Fabiano Utiyama Luiz Fernando Braga Lopes

MODELO DE CAIXA (BOX MODEL)

<head> <title> Uso de Imagem </title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=iso " /> </head>

INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS TRABALHANDO COM DIVS. Professor Carlos Muniz

Desenvolvimento de Sites com PHP e Mysql Docente André Luiz Silva de Moraes

CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

Posicionamento e Layout com CSS

Vantagens e Desvantagens das CSS 1

Transcrição:

Compêndio códigos {css} ADVERTÊNCIA: A que se segue é apenas uma lista com as propriedades de CSS, não pretende de modo algum ser um manual. Pressupõe, portanto, que já se saiba de antemão o signi cado de cada selector/propriedade.

{CSS Externo} <link rel=stylesheet href= cheiro css type= text/css > {CSS Importado} a import URL (http://www. cheiro de css.css) {CSS Interno} selectores {propiredades} {Selectores} html h1 h2 h3 h4 h5 h6 p table tr td e outras tags Subclasses.nome h1.nome p.nome <em class=...> Identi cadores #nome <span id=...> Pseudoclasses A:link A:visited A:hover A:active Css { 9 }

{Propriedades de Body} {background-color: cor;} Cor do fundo: cor {background-image: url;} Imagem de fundo: endereço {background-repeat: repeat repeat-x repeat-y no-repeat;} Repetição da imagem de fundo: imagem repetida; repetição horizontal; repetição vertical; não repetida {background-attachment: scroll xed;} Posição da imagem de fundo quanto aos scroll: não mantém posição; mantém posição {background-position: % px top center bottom left center right;} Posição da imagem no fundo: percentagem; medida em pixel; coordenadas body {background: cor url( cheiro) repeat xed center left;} {Propriedades de Fonte} selectores podem ser h1 h2 h3 h4 h5 h6 p Subclasses Pseudoclasses {font-family: fonte;} Fonte a usar: nome da fonte ou lista de fontes {font-style: normal italic oblique;} Estilo da fonte: normal; itálico {font-variant: normal small-caps all-caps;} Maiúsculas/minúsculas {font-weight: normal bold bolder lighter 100 a 900;} Fonte negrito {font-size: % px xx-small x-small small large x-large xx-large larger smaller} Tamanho da fonte: percentagem; medida em pixel; dimensão absoluta; dimensão relativa {background-color: transparent cor;} Cor de fundo do texto: mtransparente, código da cor {color: cor;} Cor do texto: código da cor Css { 10 }

{Propriedades de Texto} {word-spacing: normal px;} Espaço entre as palavras: normal; medida em pixel {letter-spacing: normal px;} Espaço entre as letras: normal; medida em pixel {text-decoration: none underline overline line-through blink;} Decoração do texto: normal; sublinhado; linha em cima; riscado; piscar {vertical-align: baseline sub super top text-top middle bottom text-bottom %;} Alinhamento do texto em relação à imagem: base; topo; medio; em baixo {text-transform: none capitalize uppercase lowercase;} Apresentação do texto: normal; capitular; caixa alta; caixa baixa {text-align: left right center justify;} Alinhamento do texto: esquerda; direita; centro; justi cado {text-indent: % px;} Entrada de parágrafo: normal; medida em pixel {line-height: normal px %;} Entrelinhamento: normal; medida em pixel; percentagem (font: font-family font-style font-variant font-weight font-size line-height) p {font: Helvetica, Arial, sans serif normal normal normal 14px 18px;} Exemplo: p {font-family: Helvetica, Arial, sans serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; color: #8976ed; word-spacing: normal; letter-spacing: normal; text-decoration: none; vertical-align: baseline; text-transform: none; text-align: justify; text-indent: 20px; line-height: 18px;} Css { 11 }

{Propriedades de Caixa} {margin-top: auto px percentagem;} {margin-right: auto px percentagem;} {margin-bottom: auto px percentagem;} {margin-left: auto px percentagem;} Margens em cima direita em baixo esquerda: automático; percentagem; medida em pixel {padding-top: px percentagem;} {padding-right: px percentagem;} {padding-bottom: px percentagem;} {padding-left: px percentagem;} Espaço entre caixa e conteúdo em cima direita em baixo esquerda: percentagem; medida em pixel {border-top-width: thin medium thick px;} {border-right-width: thin medium thick px;} {border-bottom-width: thin medium thick px;} {border-left-width: thin medium thick px;} Espessura da cercadura em cima direita em baixo esquerda: no; médio; grosso; medida em pixel {border-style: none dotted dashed solid double groove ridge inset outset;} Estilo da cercadura: nenhuma; pontos; traçejado; linha; três dimensões {border-color: cor;} Cor da cercadura: código da cor {width: auto px percentagem;} Largura da caixa: medida em pixel {height: auto px percentagem;} Altura da caixa: medida em pixel {position: absolute;} {top: px percentagem;} {left: px percentagem;} Posicionamento absoluto da caixa em cima esquerda:medida em pixel; percentagem {margin padding border: um valor: para todas as margens dois valores: top/bottom right/left três valores: top right/left bottom quatro valores: top right bottom left;} Css { 12 }