Curso de Introdução ao CSS - telecom.uff.br · mudar o documento html e tamb em utilizar a mesma...
Transcript of Curso de Introdução ao CSS - telecom.uff.br · mudar o documento html e tamb em utilizar a mesma...
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Curso de Introducao ao CSS
Grupo PET-Tele
Universidade Federal Fluminense
13 de dezembro de 2012
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
1 Introducao
2 Formatacao e estilosCores e fundosFontes e textosLinks
3 Identificando e agrupando elementos
4 Box modelFormatando o Boxmodel
5 Posicionamento
6 Web Standards
7 Sites recomendados
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Informacoes principais
Quando o HTML surgiu, seu objetivo era especialmente aestruturacao de informacoes na pagina. Com a expansao da web sefez necessaria uma melhor apresentacao desse conteudo atraves deformatacoes. Nesse momento foram desenvolvidas algumas tags(apresentadas no curso anterior) que caracterizavam os textos.Posteriormente, para melhor formatar esse documento, foidesenvolvido o CSS.
CSS:Cascading Style Sheets - Folhas de estilo em cascata
Para a utilizacao do CSS e necessario conhecimento em HTML.
O surgimento do CSS tem como objetivo a estilizacao dapagina.
Serve para o controle do layout de varios documentos a partirde uma simples folhas de estilos.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Utilizacao do CSS
O CSS pode ser aplicado a um documento html de tres formasdiferentes :
Metodo 1:In-lineUtilizando o atributo style do HTML e possvel caracterizar apagina:
Metodo 2: InternoCria-se uma tag style dentro da tag head no documento html edentro desta colocam-se os codigos css:
body {background-color: red;}
Metodo 3: ExternoCria-se um link dentro do documento html que chame odocumento css. Esse link tambem deve ser colocado dentro datag head.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Atencao
Dica
Recomenda-se a utilizacao do terceiro metodo, pois atravesdele pode-se mudar a estilizacao de toda uma pagina semmudar o documento html e tambem utilizar a mesma folha deestilos para varios documentos html.
Criando o documento css:
- Tambem utilizaremos um editor de textos onde seraocolocados os codigos css.
- Salve o documento da forma: nome do documento.css
- Nao esqueca de colocar na tag link do documento html odiretorio certo para o documento css.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Regra CSS e sintaxe
Regra CSS : Define como sera aplicado o estilo a um ou maiselementos HTML.seletor{propriedade:valor}
Seletor: E o elemento HTML identificado por sua tag, poruma classe ou por uma id.
Propriedade : E o atributo do elemento HTML ao qualsera aplicada a regra.
Valor: E a caracterstica especfica a ser assumida pelapropriedade.
Dica
Usar sempre ponto e vrgula apos cada regra para umapropriedade.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Exemplo:
Criando um documento de estilizacao basico em CSS:body{background-color: #FFCCFF;}h3 {font-family: Comic Sans MS;}p {text-align: right;color: #000000;}Como se pode observar nao e necessario um codigo de iniciacaonem nada. Simplesmente se coloca as formatacoes em css.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Cores
Formatacao e estilos:
Cores:
Imagine que desejamos que todos os Cabecalhos principaistenham a cor vermelha e que todos os rodapes sejam azuis.Os elementos que marcam essas caractersticas em html saorespectivamente as tags e .Em CSS, para formatar isto temos a propriedade color:
h1{color:red}h6{color:blue}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Cores
As cores podem ser especificadas de tres formas diferentes:
Codigo rgb: rgb(255,255,0)
Codigo hexadecimal : #000000
Nome da cor: red, green, blue...
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
Fundos:
Propriedades que mudam o plano de fundo:
background-colorE a propriedade utilizada para dar cor ao plano de fundo.Podemos utiliza-la para tags como body e h1-h6.Ex.:body {background-color: #FFCC66;}h1 {color: #990000; background-color: #FC9804;}background-imageE utilizada para definir a imagem de fundo. Normalmente estapropriedade e utilizada na tag body.Ex.:body {background-color: #FFCC66;background-image: url(imagens/fundo.jpg); }
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
background-repeatEla controla o comportamento da imagem de fundo.Podemos atribuir varios valores para essa propriedade:
- repeat-x : Imagem se repete na horizontal.- repeat-y : Imagem se repete na vertical.- repeat : Imagem se repete tanto na vertical quanto na
horizontal.- no-repeat: A imagem nao se repete.
Ex.:body {background-color: #FFCC66;background-image: url(meufundo.png);background-repeat: no-repeat;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fundos
background-attachmentDefine se a imagem e fixa ou se ira rolar junto com oelemento que a contem.
- scroll: A imagem rola com a pagina.- fixed : A imagem e fixa.
background-positionAltera a posicao padrao da imagem e a coloca emqualquer lugar na tela.Essa propriedade pode possuir osseguintes valores:
- 2cm 2cm : Colocar as medidas em centmetros.- top right : Coloca a imagem no canto superior da pagina.- 50% 25% : Coloca a imagem centrada na horizontal e
25% abaixo da pagina.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fontes
Para formatar os textos escritos no documento html utilizamosas seguintes propriedades CSS:
font-familyE utilizada para definir uma lista de fontes e suasprioridade para apresentacao de um elemento da pagina.Seus valores podem ser definidos por:
- Nome da famlia de fontes(nome da fonte): verdana,arial, etc.
- Nome da famlia generica : serif, sans-serif, cursive.
Ex.: h1 {font-family: arial, verdana, sans-serif;}font-style
- normal : Deixa a fonte sem nenhuma caracterstica a mais.- italic : Coloca a fonte em italico.- oblique: Coloca a fonte oblqua.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Fontes
Font-variantModifica as letras em caixa-alta.
- Normal : Fonte normal.- small-caps: Transforma em maiusculas de menor altura.
Font-weight
- Normal : Fonte normal.- bold : Fonte em negrito.
Font-sizeModifica o tamanho da fonte.
- xx-small ou x-small ou small.- medium .- xx-large ou x-large ou large.- px, pt, cm, em : medidas conhecidas pelo CSS.- %.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Textos
Da mesma forma que e possvel caracterizar as cores e fundospodemos formatar o texto da pagina. Para isto devem serutilizados as seguintes propriedades:
Text-ident : Permite aplicar um recuo a primeira linha deum paragrafo.Ex.: p {text-indent: 30px;}Text-align : Se refere ao alinhamento do texto em relacaoa pagina.
- left : Coloca o texto do lado esquerdo.- right: Coloca o texto do lado direito.- centred: Coloca o texto no centro.- justify: Extende o texto contido em uma linha de uma
margem a outra.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Textos
Text-decoration: Permite adicionar efeitos oudecoracoes.
- underline: Sublinha o texto.- overline : Corta o texto com uma linha.- line-through: Coloca uma linha sobre o texto.
Letter-spacing: Controla o espacamento entre oscaracteres de um texto.
Text-transform: Controla a capitalizacao (tornarmaiuscula) do texto.
- capitalize: Primeira letra de cada palavra se tornamaiuscula.
- uppercase: Converte todas as letras em maiusculas.- lowercase: Converte todas as letras em minusculas.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Links
E possvel aplicar as mesmas formatacoes para links. Adiferenca e que podemos fazer isto de maneira diferenciadapara o estado do link: ativo, visitado, nao visitado.Para isto utilizamos pseudo-classes.Permite estilizar levando em conta condicoes diferentes oueventos para definir uma propriedade de estilos para uma taghtml.
Links nao visitados:Utiliza-se a pseudo-classe link.Ex.: a:link{color:blue;}Links visitados:Utiliza-se a pseudo-classe visited.Ex.: a:visited{color:blue;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Links
Links ativos:Utiliza-se a pseudo-classe active.Ex.: a:active{color:red;}Pseudo-classe hover.Caracteriza o link quando passamos o mouse sobre o link.Ex.: a:hover{color:orange; font-style:italic;}Link sem sublinhadoEx.: a{ text-decoration: none; }
Dica
As formatacoes utilizadas (color, letter-spacing, font-weight,...) podem serutilizadas nas pseudo-classes.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Class e Id
Muitas vezes podemos ter varios cabecalhos principais e um emespecial precisa de um tratamento diferente em CSS. Ou um certogrupo de links merece um tratamento diferente dos outros.
Para diferencia-los ou mesmo em outras situacoes onde e preciso
separar textos que usam a mesma tag e possvel utilizar os seguintes
atributos.
ClassPodemos identificar um certo grupo dando a ele o nomede uma classe.Ex.:BrasilArgentinaBrasliaBuenos AiresE o CSS teria especificamente para cada classe:h1.pais{color:blue;}h1.capital{color:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Class e Id
Qualquer cabecalho com a classe pais tera a cor azul e o que tiver a
classe capital sera da cor vermelha.
IdPara dar uma identificacao a um unico elemento.Ex.:EngenhariaEnfermagemArquiteturaE o CSS teria para um id:#curso1{font-weight:bold;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
As vezes, torna-se necessario, para a organizacao do documento, criargrupos ou selecionar elementos. Para fazer isto utilizamos asseguintes tag no HTML:
Ele nao adiciona nenhuma semantica ao documento. Mas,atraves dele, e possvel adicionar efeitos visuais a um texto peloCSS.Ex.:Documento HTML:
Dormir cedo e acordar cedo faz o homemsaudavel,ricoe sabio.
Na folha de estilos:span.benefit {color:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
Enquanto o span e utilizado dentro de um bloco o div e usadopara agrupar um ou mais elementos de um bloco.Ex.:Documento HTML:
Guns N RosesRed Hot Chili Peppers
Maria RitaAdriana Calcanhoto
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
span e div
Na folha de estilos:#rock {background:blue;}#mpb {background:red;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
O Box model em CSS:
- E atraves deles que se escreve as caixas geradas peloselementos html.
- Pode-se tambem detalhar ajustes de margens, bordas,padding e conteudo para cada elemento.
Esquematizacao do box model:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
Exemplo: Article 1:
All human beings are born freeand equal in dignity and rights.They are endowed with reason and conscienceand should act towards one another in a
spirit of brotherhood
Para os dois elementos (
e ) temos o box model:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Margin
Margin:E a distancia entre os lados de elementos vizinhos, ou seja,as bordas de um documento.Ex.: Bordas do Body:body { margin-top: 100px;margin-right: 40px;margin-bottom: 10px;margin-left: 70px;}De modo geral:body { margin: 100px 40px 10px 70px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Box model
A margem e a distancia que separa uma caixa da outra.
A borda e a linha decorativa em volta da caixa.
A distancia entre a borda e o conteudo,e opreenchimento (padding).
Por fim, mas principal, temos o conteudo que e o que vaiser exibido.
Sabendo o que e cada caixa, e possvel administrar as medidasnecessarias.Todas essas outras boxes seguem o mesmo padrao do marginpara definicao nas medidas.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Bordas
E possivel caracterizar as bordas do Box-model:
Border-widthDefine a expessura da borda e possui como valores:
- thin- medium- thick
Ela tambem pode ser definida num valor numerico empixels.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Bordas
Border-colorDefine a cor das bordas
Border-styleDefine o tipo de borda e tem como alguns valores:
- dotted- solid- doble- dashed
Tente fazer um cabecalho que contanha uma borda de cada cor.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Float
A seguir, vamos apresentar uma propriedade que pode facilitar oposicionamento de imagens juntamente a textos: O float.Atraves dele um elemento pode ser flutuado para a direita ouesquerda, ou seja, desloca a box model e seu conteudo.Para isso, devera ser feito no documento HTML um agrupamento(div).Ex.:Documento HTML:
causas naturales et antecedentes,idciro etiam nostrarum voluntatum...
Folha de estilos:#picture {float:left;width: 100px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Float
Dessa forma, o texto descrito em HTML colocado logo depoisde voce ter usado a tag da imagem se ajusta na tela ao ladodesta.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento
O posicionamento em CSS diz a exata posicao de um elementoem uma pagina.
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento absoluto
Posicionamento absolutoUm elemento posicionado absolutamente nao cria nenhumespao vazio apos ser selecionado.Suas propriedades sao top, left, bottom, right.Ex.:#box1{position:absolute;top: 50px;left: 50px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Posicionamento relativo
Posicionamento relativoO posicionamento para a posicao relativa e calculada combase na posicao original do elemento no documento.Nessa forma, o elemento ocupa um espaco vazio apos serposicionado.Suas propriedades sao as mesmas do posicionamentoabsoluto.Ex.:#dog1 {position:relative;left: 350px;bottom: 150px;}
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Exerccio
Criar um documento CSS que permita produzir a seguintepagina:
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Web Standards
World Wide Web Consortium (W3C)O Consorcio World Wide Web (W3C) e uma comunidadeinternacional que desenvolve padroes com o objetivo degarantir o crescimento da web. Missao do W3C: conduzira Web ao seu potencial maximo.
ValidacaoO W3C desenvolveu um validador que faz uma verificacaoda folha de estilos e retorna um relatorio com os eventuaiserros e avisos caso sua CSS nao valide.A validacao pode ser feita no seguinte site:http://jigsaw.w3.org/css-validator/
-
Curso deIntroducao ao
CSS
GrupoPET-Tele
Introducao
Formatacao eestilos
Cores e fundos
Fontes e textos
Links
Identificando eagrupandoelementos
Box model
Formatando oBoxmodel
Posicionamento
WebStandards
Sitesrecomendados
Recomendacoes
Recomendamos os sites listados abaixo para consulta e maioresaprendizados:
http://www.maujor.com/index.php
http://pt-br.html.net/tutorials/css/
http://www.w3schools.com/css/
IntroduoFormatao e estilosCores e fundosFontes e textosLinks
Identificando e agrupando elementosBox modelFormatando o Boxmodel
PosicionamentoWeb StandardsSites recomendados