
Curso Online de CSS Noções Fundamentais
Noções fundamentais para iniciar os estudos em CSS
Continue lendo
- Aqui você não precisa esperar o prazo de compensação do pagamento para começar a aprender. Inicie agora mesmo e pague depois.
- O curso é todo feito pela Internet. Assim você pode acessar de qualquer lugar, 24 horas por dia, 7 dias por semana.
- Se não gostar do curso você tem 7 dias para solicitar (através da pagina de contato) o cancelamento ou a devolução do valor investido.*
- Adquira certificado ou apostila impressos e receba em casa. Os certificados são impressos em papel de gramatura diferente e com marca d'água.**
** Material opcional, vendido separadamente.
Modelo de certificados (imagem ilustrativa):


-
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS)
Professor: Pablo Fortes
-
Style Sheets
CSS
Style Sheets
Descrição de regras de estilo que indicam ao browser como apresentar os diversos elementos de um documento HTML (idêntico aos tipos de parágrafos do MSWORD).
Vêm substituir os atributos de formatação dos elementos HTML.
Ex:
Forma de separar a apresentação do documento da sua estrutura.
A maioria das propriedades das style sheets podem ser utilizadas em qualquer Elemento HTML. -
Documento HTML sem regras de estilo
CSS
Formatação sem CSS Example
Heading1
Heading2
Documento HTML sem regras de estilo
-
Documento HTML com regras de estilo
CSS
Documento HTML com regras de estilo
Formatacao com CSS
h1 {
color: red; margin-left: 10%
}
h2 {
color: orange; margin-left: 5%
}
Heading1
Heading2
-
CSS – Noções fundamentais
CSS
CSS – Noções fundamentais
Todo o mecanismo de CSS – Cascading Style Sheets é baseado em regras e Style Sheets.
Regra – Definição dos aspectos de estilo de um ou mais elementos.
Style Sheet - Conjunto de uma ou mais regras a aplicar a um documento HTML.Exº: Style Sheet com uma única regra
h1 { color: red } -
Definição de Regras de estilo
CSS
Definição de Regras de estilo
Cada regra de estilo é constituída por duas partes:
Selector – É a ligação entre o documento HTML e o estilo a ser definido. Identifica o(s) elemento(s) a que a regra se aplica (normalmente o nome de um elemento HTML, ex: body, p, h1, etc.).
Bloco de Declarações
Um bloco de declarações é delimitado por ‘{ }’ e é constituído por declarações, separadas por ‘;’.
Declaração – Define a propriedade de estilo a aplicar aos elementos identificados pelo selector. Uma declaração é constituída por duas partes, separadas por ‘:’ :
Propriedade – nome do efeito/característica a aplicar.
Valor – Valor a aplicar à propriedade. -
Agrupar regras selectores
CSS
Agrupar regras selectores
É possível agrupar regras com declarações iguais, para diferentes selectores numa única regra:
h1 { font-weight: bold }
h2 { font-weight: bold }
h3 { font-weight: bold }Equivalente a
h1,h2,h3 { font-weight: bold }
Um selector pode ter mais que uma declaração:
h1 { color: red }
h1 { text-align: center }Escrevendo várias regras para o mesmo selector
h1 { color: red;
text-align: center;
}Agrupando várias declarações para o mesmo selector, separadas por ‘;’
-
Associar Style Sheets a documentos HTML
CSS
Associar Style Sheets a documentos HTML
Uma Style Sheet afecta as características do documento HTML a que está associada. Esta associação pode ser efectuada de 4 formas:
Associar a style sheet externa ao documento - através do elemento dentro do elemento .
Associar a style sheet local ao documento - através do elemento dentro do elemento .
Associar uma regra da style sheet a um elemento em particular (regras inline) - através do atributo style.
Importação de uma Style Sheet – através da clausula @import das CSS (não utilizada na disciplina). -
Associação de uma Style Sheet externa (1)
CSS
Associação de uma Style Sheet externa (1)
Uma Style Sheet externa, pode ser associada a uma página HTML através do elemento .
A utilização de Style Sheets externas é recomendada quando o mesmo estilo é aplicado a uma grande quantidade de páginas (ex: um site).
Utilizando esta técnica, a alteração do aspecto de um site inteiro, consegue-se modificando apenas um único ficheiro.body { margin: 0px } td.leftborder { background-color: lightgrey; width: 15% } td.topborder { background-color: red; height: 15% } td.qqm { } a { color: black } .modeltitle { font-family: arial, " times new roman mt extra bold " } table.maintable { height: 100%; width: 100% }
style.css
-
Associação e uma Style Sheet externa (2)
CSS
Associação e uma Style Sheet externa (2)
No elemento pode ser definido o parâmetro “media” que define o(s) meio(s) de vizualização ao qual a style sheet deve ser aplicada.
Possibilita, por exemplo, a existência de regras de estilo diferentes para apresentação em ecrã e impressão.Valores possíveis para media:
all, aural, braille, embossed, handheld, print, projection, screen, tty, tv -
Definição local – Elemento <style>
CSS
Bach's home page
body { background-color: silver }
h1 { color: red }
Bach's home page
Johann Sebastian Bach was a prolific composer. Among his works are:
- the Goldberg Variations
- the Brandenburg Concertos
- the Christmas Oratorio
Historical perspective
Bach composed in what has been referred to as the Baroque period.
Definição local – Elemento
Estes estilos apenas podem ser aplicados a elementos da página onde foram definidos.
Pagamento único

Cursos Relacionados
-
Noções Fundamentais da diferença entre hidratação e Nutrição
Compreenda a diferença entre os conceitos de hidratação e nutrição; e conheça alguns dos principais ativos. Receba ainda, sugestões de fo...
R$ 23,004h
-
Dominando HTML e CSS
O curso online Dominando HTML e CSS foi criado com exemplos práticos para facilitar o aprendizado do aluno. O autor levou em consideração...
R$ 23,0011h
5+
-
INTRODUÇÃO A HTML E CSS
Aprenda a usar HTML e CSS para criar páginas web. HTML é a linguagem de marcação com a qual você envolve o conteúdo, para instruir os nav...
R$ 23,0014h
Encontre-nos no Facebook
Capítulos
- Cascading Style Sheets (CSS)
- Style Sheets
- Documento HTML sem regras de estilo
- Documento HTML com regras de estilo
- CSS – Noções fundamentais
- Definição de Regras de estilo
- Agrupar regras selectores
- Associar Style Sheets a documentos HTML
- Associação de uma Style Sheet externa (1)
- Associação e uma Style Sheet externa (2)
- Definição local – Elemento <style>
- Regras inline
- Estrutura em árvore e herança
- Herança de propriedades de estilo
- Propriedades não herdadas
- Selectores
- Selectores de tipo
- Selectores de atributos
- Selectores com o atributo class
- Selectores com o atributo id
- Selectores contextuais
- Combinar selectores
- Declarações – Propriedades
- Declarações – Valores
- Valores - Dimensões
- Valores - Percentagens
- Valores - URIs
- Valores - Cores
- CSS Box Model
- Margem, paddding e border - Exemplo
- O elemento <SPAN>
- Inline Boxes
- O elemento <DIV>
- Block Boxes
- Esquemas de posicionamento
- Posicionamento Flutuante
- Posicionamento flutuante – exemplo (1)
- Posicionamento flutuante – exemplo (2)
- Posicionamento
- Posicionamento absoluto
- Posicionamento absoluto - exemplo
- Posicionamento relativo
- Posicionamento relativo - exemplo
- Posicionamento – exemplo completo (1)
- Posicionamento – exemplo completo (2)