desenvolvimento web 03 - david arty - senac
DESCRIPTION
Conceitos e exemplos sobre o desenvolvimento web. HTML5, CSS3 Curso de HTML5 e CSS3TRANSCRIPT
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Camadas Web
Java Script: adiciona comportamento dinâmico na página para modificar a sua utlização
CSS: adiciona um estilo a página. Altera a forma como será exibido o conteúdo
HTML: apresenta o conteúdo e usa url para vincular arquivos externos como imagens, vídeos, páginas, etc
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “<” e terminam com um sinal de maior “>”. Existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Tags são as “marcas” usadas para informar ao navegador como deve ser apresentado o site. As tags tem o seguinte formato: começam com um sinal de menor “<” e terminam com um sinal de maior “>”. Existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra “/”. Tudo que estiver contido entre uma tag de abertura e uma tag de fechamento será processado segundo o comando contido na tag.
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Basicamente, a estrutura das tags são dividas em: tags de abertura: <comando> tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag.
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Basicamente, a estrutura das tags são dividas em: tags de abertura: <comando> tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento contém um barra ( “/” ). Tudo que estiver contido entre a abertura e o fechamento da tag será processado segundo o comando contido na tag.
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: <br> , <input>
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
No HTML também existem algums tags onde a abertura e o fechamento se dá na mesma tag. Essas tags contém comandos que não precisam conter algum conteúdo para serem processadas, isto é, são tags de comandos isolados. Exemplos: <br> , <input>
Tags:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Quantas tags HTML eu uso?�Quantas eu devo saber?�
�
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Quantas tags HTML eu uso?�Quantas eu devo saber?�
�
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/
Onde encontrarJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
http://www.w3schools.com/ http://tableless.com.br/ http://html5doctor.com/
Onde encontrarJava Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: <div id=”azul”></div> <div class=”verde”></div>
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Id e/ou Class são usados em geral para fornecer uma identidade a uma tag com o propósito de fornecer uma referência para estilização por CSS ou captura por um script Exemplo de uso: <div id=”azul”></div> <div class=”verde”></div>
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento
ID:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
ID SÃO exclusivas: • Cada elemento pode conter apenas um ID • Cada página pode ter apenas um elemento com aquele ID *seu código não vai passar pelo validador se você usar o mesmo ID em mais de um elemento
ID:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class
Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Class NÃO são exclusivas: • Você pode usar a mesma classe para várias tags • Você pode usar várias classes para um mesmo elemento Qualquer informação de estilo que precise ser aplicada a vários elementos em uma página deve ser feita com uma class
Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão)
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
Prefira sempre nomeá-los pela sua natureza,e não pelo que ele parece. Exemplo de boas práticas: ● Os nomes das classes devem ser escritos sempre em caixa baixa. ● Os epaços devem ser representados por “underline” (.container_principal) ● Palavras compostas devem ser separadas por hífen (.verde-limão)
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
HTML- Como funciona
É bom saber que: • Classes e IDs não têm qualquer estilo por si mesmos. É preciso CSS para orientar e aplicar estilos • Podemos ter ID e Class na mesma tag • Quanto a formatação, tudo o que você possa fazer com um ID você pode fazer com uma Classe e vice-versa
ID e Class:Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual o significado de estilo em cascata?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual o significado de estilo em cascata?
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Efeito cascata é o método pelo qual é aplicada uma regra CSS em função do peso ( importância, prioridade) da regra CSS. Quando a um elemento HTML aplica-se mais de uma regra CSS, diz-se que há um conflito de regras e será aplicada aquela que tiver maior pêso (importância, prioridade) determinada pela ordem do efeito cascata fonte: maujor Herança, Especificidade e !important
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style) <html> <head> <title>Exemplo</title> </head> <body style=”background-color: #FF0000;”> <p style=”color: #FFF;”>Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style) <html> <head> <title>Exemplo</title> </head> <body style=”background-color: #FF0000;”> <p style=”color: #FFF;”>Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
seletor { propriedade: valor; }
Sintaxe CSS:
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
seletor { propriedade: valor; }
Sintaxe CSS:
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style) <html> <head> <title>Exemplo</title> </head> <body style=”background-color: #FF0000;”> <p style=”color: #FFF;”>Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• In-line (o atributo style) <html> <head> <title>Exemplo</title> </head> <body style=”background-color: #FF0000;”> <p style=”color: #FFF;”>Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Interno ( utlizando a tag style) <html> <head> <title>Exemplo</title> <style type=”text/css”> body {background-color: #FF0000;} </style> </head> <body> <p >Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Interno ( utlizando a tag style) <html> <head> <title>Exemplo</title> <style type=”text/css”> body {background-color: #FF0000;} </style> </head> <body> <p >Teste</p> </body> </html>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Importada ( utlizando um atributo @import) <style type=”text/css”> @import url(”style.css”); </style>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Importada ( utlizando um atributo @import) <style type=”text/css”> @import url(”style.css”); </style>
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Externo ( utlizando um link) <link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” />
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Aplicando CSS a um documento HTML
• Externo ( utlizando um link) <link rel=”stylesheet” type=”text/css” href=”style/style.css” media=”all” />
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual a maneira mais rápida de aprender CSS?
“Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!”
by maujor
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
CSS- Como funciona
Qual a maneira mais rápida de aprender CSS?
“Se você souber ou vier a descobrir no futuro, por favor informe para eu colocar aqui!”
by maujor
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
• heroisdati.com • maujor.com • tableless.com • pt-br.html.net • desenvolvimentoparaweb.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Referências • heroisdati.com • maujor.com • tableless.com • pt-br.html.net • desenvolvimentoparaweb.com
Java Script DINAMISMO
FORMA
CONTEÚDO
CSS
HTML
Camadas WebCamadas Web
Desenvolvimento WebDavid Arty
Camadas Web
Tableless é a forma de desenvolvimento de sites que não utiliza tabelas para dispor o conteúdo na página. Ela compreende que os códigos HTMLs devem ser usados para o propósito que foram criados, sendo que tabelas foram criadas para exibir dados
Tableless
Camadas Web
Exemplo:
Camadas Web
• Seletor: é o elemento HTML identificado por sua tag, classe, ID, etc., e para o qual a regra
será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);
• Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo:
font, color, background, etc...)
• Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo
arial, cor azul, fundo verde, etc...)
seletor { propriedade: valor; }
Camadas Web
O CSS foi uma revolução no design para web.
- controle do layout de vários documentos a partir de uma simples folha de estilos;
- controle preciso do layout;
- aplicação de diferentes layouts para diferentes mídias (tela, impressora, celular, etc.);
- avançadas técnicas de desenvolvimento
- separa a estrutura do design
- agilidade e peformace
Camadas Web
CSS - Cascading Style Sheets (folha de estilos em cascata)
Camadas Web
Algumas tags HTML: • <span> • <header> • <h1>...<h6> • <table> • <form> • <footer> • <article> • <address>
Camadas Web
Algumas tags HTML: • <html> • <head> • <body> • <title> • <a> • <img> • <p> • <div>
Camadas Web
HTML é semântica não é design
Referências