Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br
COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA CSS Prof. Tales Kunz Cabral 3º Módulo
2
CSS (Cascading Style Sheets)
Imagine a situação: O problema: São 180 páginas do site; São 17:50h e querem no ar até as 18h30min. E se tivessem solicitado a alteração do fundo também? “teremos uma reunião aqui na empresa, na segunda-feira às 08:00h com um potencial comprador e é nossa intenção fazer uma apresentação dos nossos produtos através do site que você criou e gerencia. Seguindo uma sugestão do nosso departamento de marketing precisamos mudar a cor de todos os títulos no site de verde para vermelho, pois que esta é a cor principal da marca do nosso comprador e com isso pretendemos fixar uma cumplicidade subliminar. Isto é bem simples de fazer, não é? Afinal é só mudar a cor! Dá para você 'botar no ar' até às 18:30h ? Quero dar uma olhadinha antes de encerrar o expediente neste sábado. OK? “ (texto adaptado de )
3
Prioridade das regras de CSS
estilo externo (importado ou linkado). estilo incorporado (definido na seção head do documento); estilo inline (dentro de um elemento HTML); estilo do navegador (original). Prioridade: Inline CSS incorporada CSS externa CSS do browser
4
Prioridade das regras de CSS
Uma regra escrita no atributo Style sempre sobreescreverá qualquer outra regra. Uma regra dentro de um #id será sempre mais forte que uma fora de um #id. Uma regra de .classe será sempre mais específica que uma regra somente de seletores de tag (p, div, etc..) E por último, se duas regras tiverem a mesma força, a que for declarada por último é a que valerá.
5
Tipos de inserção Folha de Estilos Inline: Exemplo:
As regras são declaradas dentro da própria tag. Desvantagem por se misturar ao documento HTML. Exemplo: <p style="color:#000000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p>
6
Tipos de inserção Folha de Estilos Interna:
As regras são declaradas dentro do documento HTML. Declarada na seção <HEAD>.
7
Tipos de inserção Folha de Estilos Interna:
As regras são declaradas dentro do documento HTML. Declarada na seção <HEAD>.
8
Tipos de inserção Exemplo: <head> <style type="text/css">
<!–- body { background: #000000; url("imagens/minhaimagem.gif"); } h3 { color: #FF0000; p { margin-left: 15px; padding:1.5em; } --> </style> </head>
9
Tipos de inserção Folha de Estilos Externa:
A folha de estilo é um arquivo separado do arquivo html e que tem a extensão .css É ideal para ser aplicada a várias páginas. O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da tag <head> do documento.
10
Tipos de inserção Exemplo do documento HTML: Exemplos do arquivo CSS:
<head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> fonte fonte seletor {font-style: normal;} seletor {font-weight: bold;} seletor {font-size: 14px;} seletor {font-family: Arial, Sans-Serif;} seletor {font-style: italic;} seletor {font-weight: bold;} seletor {font-size: 24px;} seletor {font-family: Times New Roman, Serif;} seletor {background-color: #0022ff;} seletor {background-image: url(w3c.png);} seletor {background-position: center top;} seletor {background-repeat: no-repeat;} seletor {background-attachment: scroll;} fundo Fonte:
11
Exercício Crie um documento HTML com uma tabela, alguns textos nos formatos de H1 a H6, e um exemplo de link: Renomeie o arquivo para index.html ou index.htm. Insira no HTML um link para o estilo “estilo1.css” que será externo ao mesmo. O css será passado pelo professor. Acrescente algum outro estilo CSS ao arquivo “estilo1.css” . Utilize algum estilo encontrado no site: blank -- new window self -- self parent -- what was in self before self loaded top -- all frames in browser window
12
Alguns estilos Em fontes: Propriedades básicas:
color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc Alguns estilos font-family: nome da família de fontes : define-se pelo nome da fonte, p. ex:"verdana", "helvetica", "arial", etc. nome da família genérica: define-se pelo nome genérico, p. ex:"serif", "sans-serif", "cursive", etc. Em fontes: Propriedades básicas: font-size: xx-small x-small small medium large x-large xx-large smaller larger length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % color: cor da fonte font-family: tipo de fonte font-size: tamanho de fonte font-style: estilo de fonte font-variant: fontes maiúsculas de menor altura font-weight: quanto mais escura a fonte é (negrito) font-style: normal: fonte normal na vertical italic: fonte inclinada oblique:fonte obliqua font-variant: normal: fonte normal small-caps: transforma em maiúsculas de menor altura font-weight: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 Algumas tags que suportam: H1..H6, P, BODY, TABLE, DIV, A.
13
Alguns estilos Em textos: Propriedades básicas:
color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc letter-spacing: normal: é o espaçamento default lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos word-spacing: text-align: left: alinha o texto a esquerda right: alinha o texto a direita center: alinha o texto no centro justify: força o texto a ocupar toda a extensão da linha da esquerda a direita text-decoration: none: nenhuma decoração underline: coloca sublinhado no texto overline: coloca um sobrelinhado no texto line-through: coloca uma linha em cima do texto blink: faz o texto piscar Alguns estilos Em textos: Propriedades básicas: text-indent: lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) % : porcentagem da largura do elemento pai text-transform: none: texto normal capitalize: todas as primeiras letras do texto em maiúsculas uppercase: todas as letras do texto em maiúsculas lowercase: todas as letras do texto em minúsculas direction: ltr: texto escrito da esquerda para a direita rtl: texto escrito da direita para a esquerda color cor do texto; letter-spacing espaçamento entre letras; word-spacing espaçamento entre palavras; text-align alinhamento do texto; text-decoration......decoração do texto; text-indent recuo do texto; text-transform forma das letras; direction direção do texto; Algumas tags que suportam: H1..H6, P, BODY, TABLE, DIV, A.
14
Alguns estilos Em margens: Propriedades básicas:
auto: valor default da margem length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) %: porcentagem da largura do elemento pai Alguns estilos Em margens: Propriedades básicas: margin-top define a margem superior; margin-right define a margem direita; margin-bottom define a margem inferior; margin-left define a margem esquerda; Algumas tags que suportam: H1..H6, P, BODY, TABLE, DIV, A.
15
Alguns estilos Em bordas: Propriedades básicas:
color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc style: none: nenhuma borda hidden: equivalente a none dotted: borda pontilhada dashed: borda tracejada solid: borda contínua double: borda dupla groove: borda entalhada ridge: borda em ressalto inset: borda em baixo relevo outset: borda em alto relevo width: thin: borda fina medium: borda média thick: borda grossa length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) Alguns estilos Em bordas: Propriedades básicas: 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 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 Algumas tags que suportam: TABLE, TD, P, H1..H6.
16
Alguns estilos Em fundo: Propriedades básicas:
background-color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc transparente: transparent background-image: URL: url(caminho/imagem.gif) background-repeat: não repete: no-repeat repete vertical e horizontal: repeat repete vertical: repeat-y repete horizontal: repeat-x background-attachment: imagem fixa na tela: fixed imagem "rola" com a tela: scroll background-position: x-pos y-pos x-% y-% top left top center top right center left center center center right bottom left bottom center bottom right Alguns estilos Em fundo: Propriedades básicas: 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; Algumas tags que suportam: BODY, TABLE, TD, DIV.
17
Alguns estilos Em macadores: Propriedades básicas:
list-style-image: none URL: url(caminho/marcador.gif) list-style-position: outside: marcador fora do alinhamento do texto inside: marcador alinhado com texto list-style-type: none: sem marcador disc: círculo (bolinha cheia) circle: circunferência (bolinha vazia) square: quadrado cheio decimal: números 1, 2, 3, 4, ... decimal-leading-zero lower-roman: romano minúsculo i, ii, iii, iv, ... upper-roman: romano maiúsculo I, II, III, IV, ... lower-alpha: letra minúscula a, b, c, d, ... upper-alpha: letra maiúscula A, B, C, D, ... lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha Alguns estilos Em macadores: Propriedades básicas: 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; Algumas tags que suportam: UL, OL
18
Layouts para site CSS Existem vários locais pela web onde se encontra layouts css, alguns são: (layouts prontos) (interativo)
Apresentações semelhantes
