Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br COLÉGIO DA IMACULADA CURSO TÉCNICO EM INFORMÁTICA CSS Prof. Tales Kunz Cabral talescabral@colegiodaimaculada.com.br 3º Módulo
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 http://maujor.com/tutorial/intrtut.php )
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
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á.
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>
Tipos de inserção Folha de Estilos Interna: As regras são declaradas dentro do documento HTML. Declarada na seção <HEAD>.
Tipos de inserção Folha de Estilos Interna: As regras são declaradas dentro do documento HTML. Declarada na seção <HEAD>.
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>
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.
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: http://imasters.uol.com.br/cssinterativo/iback.php
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: www.maujor.com blank -- new window self -- self parent -- what was in self before self loaded top -- all frames in browser window
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.
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.
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.
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.
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.
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
Layouts para site CSS Existem vários locais pela web onde se encontra layouts css, alguns são: http://layouts.ironmyers.com/950_pixel_Layouts/ (layouts prontos) http://www.cssportal.com/generators/layout.htm (interativo)