CSS   Cascading Style Sheets 12
41 pág.

CSS Cascading Style Sheets 12


DisciplinaAnálise Textual8.708 materiais291.211 seguidores
Pré-visualização2 páginas
CSS \u2013 CASCADING STYLE SHEETS
Ivanethe Carvalho Rocha
CSS \u2013 Cascading Style Sheets
\uf097 HTML e CSS são 
linguagens que utilizamos 
para criar páginas Web.
\uf097 Os servidores Web 
armazenam e servem 
páginas, que são criadas 
com HTML e CSS. 
\uf097 HTML é a abreviação para 
HyperText Markup 
Language (Linguagem 
Marcação de Texto) e é 
usada para estruturar a 
página Web.
CSS \u2013 Cascading Style Sheets
\uf097 CSS é a abreviação de 
Cascading Style Sheets \u2013 Folhas 
de Estilo em Cascata e são 
utilizadas para controlar a 
apresentação do documento 
HTML.
\uf097 As CSS podem ser adicionadas 
à pagina Web HTML colocando-
se suas regras dentro do 
elemento <style>. O elemento 
<style> deve estar 
obrigatoriamente sempre dentro 
do elemento <head>.
\uf097 Você especifica as 
características do estilo dos 
elementos em seu HTML 
utilizando as CSS.
1. <html>
2. <head>
3. <title>Bar Use a Cabeça</title>
4. <style type=&quot;text/css&quot;>
5. body {
6. font-family: sans-serif;
7. }
8. h1, h2 {
9. color: red;
10. }
11. h2 {
12. font-family: times-new-roman;
13. }
14. h1 {
15. border-bottom: 1px solid red;
16. }
17. p {
18. color: blue;
19. }
20. </style>
21. </head>
22. <body>
23. <h1>Bem-vindo ao Novo e 
Melhorado Bar Use a Cabeça </h1>
24. <img src=&quot;images/drinks.gif&quot; 
alt=&quot;Drinks&quot; />
25. <p>
26. Junte-se a nós em qualquer noite 
dessas para beber 
27. <a 
href=&quot;bebidas/elixir.html&quot;>elixires</a
> refrescantes, 
28. ter um bom papo e talvez 
algumas partidas de 
29. <em>Dance Dance
Revolution</em>. 
30. O acesso wireless está sempre 
disponível; 
31. TSPSW (Traga Seu Próprio 
Servidor Web).
32. </p>
33. <h2>Como chegar</h2>
34. <p>
35. Você nos encontrará bem no 
centro 
36. da cidade de Weblândia. Se 
precisar de ajuda para nos localizar,
37. verifique nossas 
38. <a 
href=\u201csobre\instrucoes.html&quot;>instruç
ões detalhadas</a>. 
39. Junte-se a nós!
40. </p>
41. </body>
42. </html>
CSS \u2013 Cascading Style Sheets
\uf097 Analisando o arquivo exemplo
\uf097 1- Na linha 4 temos adição de 
uma nova tag: a abertura do 
elemento <style>. Na linha 20 
a tag de fechamento 
correspondente.
\uf097 2 \u2013 Ainda na linha 4 o 
elemento tem um 
type=\u201ctext/css\u201d
\uf097 3 \u2013 Na linha 5 temos o que 
chamamos de regras que se 
aplicará às propriedades para 
o elemento body.
\uf097 4 - Adicionamos propriedades 
das linhas, 5 a 20, que 
afetarão o estilo de 
apresentação deste elemento.
CSS \u2013 Cascading Style Sheets
\uf097 Estrutura de regras
\uf097 Um estilo consiste de uma ou mais 
regras que descrevem como os 
elementos das página são 
apresentados.
\uf097 Cada regra tem duas partes 
fundamentais: o seletor e a 
declaração do bloco.
\uf097 Assim temos:
CSS \u2013 Cascading Style Sheets
\uf097 Exemplos de tags, que 
posso ter no meu documento 
HTML ?
\uf097 Com adiciono propriedades 
de estilo a estas tags que 
compõe meu documento 
HTML ?
tag {
Propriedades
}
CSS \u2013 Cascading Style Sheets
\uf097 Suponhamos que 
desejamos aplicar um 
determinada estilo a um 
parágrafo. Qual seria a 
declaração dentro meu 
style?
\uf097 E que dentro deste estilo 
para este parágrafo deseja-
se aplicar uma determinada 
cor ao texto?
CSS \u2013 Cascading Style Sheets
\uf097 Agrupando estilos 
\uf097 Os títulos são conhecidos 
pelas tags <hX>, onde X é 
nível do seu título.
\uf097 Suponhamos temos dois 
títulos h1 e h2.
H1{
font-family: sans-serif
color: gray
}
H2{
font-family: sans-serif
color: gray
}
CSS \u2013 Cascading Style Sheets
\uf097 Agrupando estilos 
Como os títulos tem estilos
exatamente iguais podemos
organizá-los da seguinte
forma:
H1,H2{
font-family: sans-serif
color: gray
}
CSS \u2013 Cascading Style Sheets
\uf097 Agrupando estilos
\uf097 Suponhamos a seguinte 
situação: para o titulo H1, 
desejamos adicionar uma 
nova propriedade presente 
somente no titulo H1?
H1{
\uf096 Border-bottom: 1px solid black
}
CSS \u2013 Cascading Style Sheets
\uf097 Criando arquivo CSS 
externo
\uf097 Todas as regras adicionadas no 
próprio arquivo HTML serão 
adicionadas diretamente em um 
arquivo de extensão \u201c.css\u201d.
\uf097 No arquivo HTML fazemos a 
ligação (link) com o arquivo 
\u201ccss\u201d criado.
CSS \u2013 Cascading Style Sheets
1.h1, h2 {
2. color: red;
3. }
4. h2 {
5. font-family: times-new-
roman;
6. }
7. h1 {
8. border-bottom: 1px solid
red;
9. }
10. p {
11. color: blue;
12. }
O arquivo \u201cCSS\u201d
CSS \u2013 Cascading Style Sheets
\uf097 Alterando o arquivo HTML
\uf097 Inicialmente adicionamos 
uma nova tag:
link que terá a seguinte 
estrutura:
<link type = \u201ctext/css\u201d rel = 
\u201cstylesheet\u201d
href= \u201cbar.css\u201d>
\uf097 As tags para o elemento 
\u201cstyle\u201d não serão mais 
necessárias no arquivo 
HTML.
CSS \u2013 Cascading Style Sheets
\uf097 Analisando:
<link type = \u201ctext/css\u201d rel = 
\u201cstylesheet\u201d
href= \u201cbar.css\u201d>
Onde: 
\uf097 link : o elemento link é usando
para criar um link(ligação) com as
informações externas;
\uf097 Type: indica o tipo de informação
a ser ligada externamente, neste
caso folhas de estilo CSS;
\uf097 Rel: este atributo especifica o
relacionamento entre o arquivo
HTML e para onde o link está
sendo criado. Neste caso estamos
criando um link para uma folha de
estilo;
\uf097 Href: informamos o local onde a
folha de estilo pode ser localizada.
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Inicialmente analisemos a 
estrutura do nosso arquivo 
HTML.
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Analisando a figura quem 
será modificado?
HTML
HEAD
TITLE
BODY
H1 P P
aimg a em
H2 P
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 Dentro da nossa estrutura temos os 
elementos p e dentro deles temos 
outros elementos.
\uf097 No primeiro parágrafo temos uma 
imagem, no segundo os elementos 
<a> e <em>, e no terceiro outro 
elemento <a>.
\uf097 Dizemos que esses elementos são 
filhos dos elementos <p>, acima 
deles. 
\uf097 Isso implica que algumas regras 
aplicadas a estes parágrafos 
afetará quem estiver abaixo deles 
na árvore.
\uf097 Lembrando que somente algumas 
regras são herdadas, no exemplo, 
temos o font-family e color.
\uf097 E o que acontece com elemento 
img ? 
CSS \u2013 Cascading Style Sheets
\uf097 Herança em CSS
\uf097 O que aconteceria se 
aplicássemos a regra para 
a propriedade de font-family 
no elemento body ?
\uf097 Como ficaria o novo arquivo 
css? 
CSS \u2013 Cascading Style Sheets
1.body {
2. font-family: times-new-
roman;
3.}
4.h1, h2 {
5. color: red;
6. }
7. h1 {
8. border-bottom: 1px solid
red;
9. }
10. p {
11. color: blue;
12. }
CSS \u2013 Cascading Style Sheets
\uf097 Ignorando heranças em CSS
\uf097 Como posso fazer com que 
elemento filho não herde as 
propriedades do pai?
\uf097 Em CSS podemos fazer com 
que as propriedades dos 
pais sejam ignoradas pelos 
filhos adicionando regras 
mais especificas. 
\uf097 Estas regras especificas são 
adicionadas criando a 
mesma regra para o 
elemento desejado.
CSS \u2013 Cascading Style Sheets
\uf097 Ignorando heranças em CSS \u2013
Arquivo modificado
\uf097 body{
\uf097 font-family: verdana;
\uf097 color: blue;
\uf097 }
\uf097 h2 {
\uf097 color: red;
\uf097 }
\uf097 h2 {
\uf097 font-family: times-new-roman;
\uf097 }
\uf097 h1 {
\uf097 border-bottom: 1px solid black;
\uf097 }
\uf097 p {
\uf097 color: yellow;
\uf097 font-family: sans-serif;
\uf097 }
CSS \u2013 Cascading Style Sheets
\uf097 Algumas propriedades
\uf097 Text-align: controla a 
propriedade para alinhar o 
texto.
\u25e6 Ex: p {text-align : left | center | 
right | justify}
CSS \u2013 Cascading Style Sheets
\uf097 Color: usada para definir a 
cor da fonte dos elementos 
de texto.
\uf097 Algumas maneira de 
especificar cores:
\uf097 Especificar pelo nome:
\u25e6 Ex: p { color: silver}
\uf097 Especificar em termos das 
cores básicas
\u25e6 Ex: p { color: rgb(80%,40%,0%)}
\u25e6 p { color: rgb(204,102,0}
\uf097 Especificar em hexadecimal
\u25e6 p {color: #cc6600}
\uf097 Background-color: controla a 
cor de fundo de um elemento. 
Utiliza os mesmos valores 
para color.
CSS \u2013 Cascading Style Sheets
\uf097 Font-size: controla o 
tamanho do texto.
\u25e6 Especificando fontes em 
pixles
\uf096 p {font-size: 14px}
\u25e6 Especificando em 
porcentagem
\uf096 p {font-size: 150%}
\u25e6 Usando um fator de escala 
\u201cem\u201d
\uf096 p {font-size: