cascading style sheets css cascading style...
TRANSCRIPT
![Page 1: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/1.jpg)
cssCascadingStyle Sheets
CSSCASCADING
STYLE SHEETS
![Page 2: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/2.jpg)
Oque é o CSS
• Cascading Style Sheets - Folhas de Estilo em Cascata• Não é uma linguagem de programação, é uma linguagem de estilo.• Define a apresentação de documentos HTML.• Separação entre o formato e o conteúdo de um documento.
![Page 3: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/3.jpg)
Oque é CSS
• Existem duas características essenciais que devem ser levadas em consideração na montagem das páginas web:• sua estrutura - a divisão do conteúdo em blocos de textos através da criação das tabelas, dos marcadores, listas etc; A estrutura é controlada pelos marcadores ou seletores HTML (<body>,<h1>, <p>, <ol>, <li>, etc).• sua apresentação - a criação de efeitos visuais no texto pela definição das características das letras usadas, o realce de blocos similares de texto, etc.
![Page 4: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/4.jpg)
Histórico
• A CSS tem várias versões, a CSS 1 tornou-se uma recomendação pelo W3C no final de 1996 e contém propriedades básicas, a CSS 2 aprimorou isso e adicionou conceitos avançados.• O W3C começou antes do início deste milênio o trabalho da CCS 3. O nível 3 ainda está em desenvolvimento e incluiu facilidades como bordasarredondadas, sombras, duas imagens como background de um mesmo objeto, múltiplas colunas de texto, fontes personalizadas, etc...
![Page 5: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/5.jpg)
Utilizando CSS
• Incorporado ao documento• Importado ao documento• inline (diretamente na tag HTML)
![Page 6: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/6.jpg)
Utilizando CSS > Estilo Incorporado • Uma definição deste tipo deve ser usada quando não existeum padrão comum aos vários documentos de um site - ouentão o site é composto de um único documento.<html>
<head><title></title><style type="text/css">
h1 { text-align: center; color: blue }P { font-family: serif }
</style></head><body>
<h1>Página sem formatação de estilos</h1><p>Texto texto texto texto.</p>
</body></html>
![Page 7: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/7.jpg)
Utilizando CSS > Estilo importado
• A definição é feita num arquivo separado eimportado na página.<html>
<head><title></title><link rel=“stylesheet” href=“formatar.css” type=“text/css”/></head>
...
![Page 8: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/8.jpg)
Utilizando CSS > Estilo Inline
• A definição da CSS é feita diretamente na tag HTMLcom o uso do atributo style.<html>
<head><title></title></head><body>
<h1>Página com formatação de estilos</h1><p style=“font-family:verdana”>Ao longo do texto, as<em>palavras chaves</em> estarão realçadas.</p>
</body></html>
![Page 9: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/9.jpg)
Prioridade
• Sempre o mais próximo do elemento.• 3º Arquivo importado• 2º Incorporado• 1º inline
![Page 10: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/10.jpg)
Seletores
• Para estilizar um determinado elemento da página utilizando CSS, é necessário ter umamaneira de selecionar esse elemento.• Na CSS a parte de uma regra de estilo que seleciona elementos da página é chamada de seletor.• Formato de um seletor:seletor {propriedade-css: valor;}
![Page 11: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/11.jpg)
Seletores > Sintaxe
• Propriedades com valores múltiplos• Definição de estilo:body{
background: white;color: maroon;font-family: helvetica, sans-serif;
}• Estão especificadas 2 famílias de fontes a serem usadas: ahelvetica e a sans-serif. Neste caso, os valores possíveis parauma mesma propriedade devem estar separados por vírgula
![Page 12: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/12.jpg)
E a sintaxe correta é:• Escrever o seletor e a seguir a declaração;• A declaração deve estar entre { } (chaves);• Na declaração, separar a propriedade e o valor por : (dois pontos);• É permitido usar espaços em branco em qualquer quantidade entre cadaum dos caracteres da regra;• É permitido agrupar declarações em uma mesma regra e neste caso asdeclarações deverão ser separadas por ; (ponto-e-vírgula) podendo todaselas estar em uma mesma linha ou em linhas distintas. É facultativo o usode ; (ponto-e-vírgula) após a última declaração na regra;• É indiferente o uso de maiúsculas e minúsculas em uma regra CSS, contudoas classes e ID's devem seguir a mesma grafia constante da marcação.
![Page 13: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/13.jpg)
Tipos de Seletores
• Seletores de tipos/seletores de classes associadas• Seletores de ID (usam a tag ID)• Seletores de classes não-associadas (usam a tagclass)
![Page 14: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/14.jpg)
Seletores de Tipo
• Seletores de tipos/seletores de classes associadas:p {color: black}h1 {font-weight: bold;background-color: red;}
• Seleciona elementos da página pelo tipo da tagutilizada
![Page 15: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/15.jpg)
Seletores de Tipo• Exemplo
• CSS: em {color: blue}
• HTML:
<body>
<p>This is some <em>text</em></p>
<p>This is some text</p>
<ul>
<li>List item</li>
<li>List item</li>
<li>List <em>item</em></li>
</ul>
</body>
![Page 16: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/16.jpg)
Seletores de ID
• Exemplo:• CSS: #introducao {font-style: italic; }• HTML:
<p id=“introducao”>This is some text</p>• Seleciona elementos da página utilizando o atributo ID.• #: Identifica que é um seletor de ID.
![Page 17: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/17.jpg)
Seletores de classes não associadas
• Seletores de classes não-associadas:.texto-vermelho {color: red;}
• Seleciona elementos da página usando o valor do atributo class utilizado nas tag.• . (ponto): Identifica que é um seletor de classes não -associadas.
![Page 18: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/18.jpg)
Seletores de classes não associadas• Exemplo
• CSS: .big { font-size: 110%; font-weight: bold; }• HTML:<body> <p class="big">This is some <em>text</em></p> <p>This is some text</p> <ul> <li class="big">List item</li> <li>List item</li> <li>List <em>item</em></li> </ul></body>• É possível usar diferentes configurações para uma mesma classe:li.big {color: red}p.big {color: blue}
![Page 19: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/19.jpg)
Seletores Descendentes• Permite definir a formatação para um elemento interno
a outro.
• CSS: p em { color:red }
• HTML:
<body>
<h1>Heading <em>here</em></h1>
<p>Lorem ipsum dolor <em>sit</em> amet.</p>
</body>
• Somente afeta o elemento em interno a um parágrafo.
• IMPORTANTE: A formatação independe da quantidade
de níveis.
![Page 20: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/20.jpg)
Seletores Filhos
• Define-se que a formatação deve respeitar a hierarquia.• Apenas um nível após (filho).• CSS: div > em { color: pink }• HTML:<h1>Heading <em>text</em></h1>
<div>This is some <em>text</em><p>This is a paragraph of <em>text</em></p></div>
• Somente afeta o elemento em interno a um parágrafo.• A formatação é somente para elementos do primeironível.
![Page 21: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/21.jpg)
Seletores Universal
• Seleciona todos os elementos do documento.• CSS: * { color: red }• HTML:
<h1>Heading <em>text</em></h1><div>This is some <em>text</em><p>This is a paragraph of <em>text</em></p></div>
• Aplicará a regra CSS a todos os elementos dodocumento.
![Page 22: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/22.jpg)
Vale Apena Visitar
• Outros seletores:• http://www.w3schools.com/cssref/css_selectors.asp• Efeitos/Estilos prontos em CSS3• http://www.css3maker.com/• http://www.css3.info• http://css3generator.com• http://www.colorzilla.com/gradient-editor/
![Page 23: Cascading Style Sheets CSS CASCADING STYLE SHEETSvsm.com.br/grupodeestudos/wp-content/uploads/2013/11/Apresenta… · Oque é o CSS • Cascading Style Sheets - Folhas de Estilo em](https://reader034.vdocuments.mx/reader034/viewer/2022051107/5ffcc4f2acd820575f174154/html5/thumbnails/23.jpg)
Fonte
http://www.maujor.com/tutorial/abreviacss.php