1) O documento discute o CSS (Cascading Style Sheets), que é utilizado para estilizar páginas web. Foi desenvolvido para remover tags de estilização do HTML e permitir a criação de padrões de estilos.
2) São descritas três formas de aplicar estilos CSS a uma página: internamente, por meio de um arquivo externo ou diretamente em um elemento.
3) O modelo de caixa (box model) é explicado, constituído por conteúdo, preenchimento, borda e margem.
CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos HTML ou XML. CSS permite separar o formato e o conteúdo de um documento e fornece controle sobre fontes, cores, layout e outras propriedades visuais. O documento explica como CSS controla propriedades como fontes, cores, margens, posicionamento de imagens e mais, permitindo maior precisão e sofisticação no layout de websites.
O documento resume a história da World Wide Web e dos padrões web como HTML, XHTML e CSS. Explica as diferenças entre HTML e XHTML e os benefícios da semântica e validação. Também discute como vincular folhas de estilo e melhorar a acessibilidade.
O documento fornece uma introdução sobre formatação de texto em HTML, incluindo tags como <pre> para manter formatação, <blockquote> para citações e <address> para endereços. Também discute tags para ênfase, citações, códigos e outras formatações.
O documento apresenta uma introdução sobre JavaScript, explicando porque estudar a linguagem. Apresenta algumas de suas características como ser interpretada, executada no lado do cliente e ser dinamicamente tipada. Explica também sobre tipos de dados como strings, números e booleanos.
Ionic Framework - Configuração do ambiente e a criação da primeira APPFabio Godoy
Um passo a passo detalhado sobre a configuração do ambiente, tratando possíveis erros, sobre como desenvolver aplicativos híbridos utilizando o Ionic Framework
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
1. O documento descreve as principais propriedades e conceitos do CSS, incluindo como definir estilos, cores, fontes, bordas, margens, preenchimentos e posicionamento;
2. São apresentados exemplos de sintaxe CSS para cada propriedade, mostrando como aplicá-las corretamente;
3. O CSS permite separar a apresentação da estrutura e conteúdo em páginas web, tornando o design independente do HTML.
CSS (Cascading Style Sheets) é uma linguagem de estilo utilizada para definir a apresentação de documentos HTML ou XML. CSS permite separar o formato e o conteúdo de um documento e fornece controle sobre fontes, cores, layout e outras propriedades visuais. O documento explica como CSS controla propriedades como fontes, cores, margens, posicionamento de imagens e mais, permitindo maior precisão e sofisticação no layout de websites.
O documento resume a história da World Wide Web e dos padrões web como HTML, XHTML e CSS. Explica as diferenças entre HTML e XHTML e os benefícios da semântica e validação. Também discute como vincular folhas de estilo e melhorar a acessibilidade.
O documento fornece uma introdução sobre formatação de texto em HTML, incluindo tags como <pre> para manter formatação, <blockquote> para citações e <address> para endereços. Também discute tags para ênfase, citações, códigos e outras formatações.
O documento apresenta uma introdução sobre JavaScript, explicando porque estudar a linguagem. Apresenta algumas de suas características como ser interpretada, executada no lado do cliente e ser dinamicamente tipada. Explica também sobre tipos de dados como strings, números e booleanos.
Ionic Framework - Configuração do ambiente e a criação da primeira APPFabio Godoy
Um passo a passo detalhado sobre a configuração do ambiente, tratando possíveis erros, sobre como desenvolver aplicativos híbridos utilizando o Ionic Framework
Curso de css3 unidade 1 - introdução ao cssLéo Dias
O documento resume os principais pontos sobre CSS: 1) CSS é uma linguagem de formatação para definir o estilo de páginas web, separando conteúdo da formatação; 2) Apresenta os tipos de seletores como classe, ID e filho que permitem aplicar estilos específicos; 3) Discutem propriedades comuns como cor, fonte e tamanho que controlam a aparência.
Fundamentos e Desenvolvimento de Interface Web com HTML5 & CSS3 Cristofer Sousa
Este documento apresenta um workshop sobre fundamentos de interfaces e desenvolvimento web. O workshop é dividido em 15 módulos que cobrem tópicos como HTML, CSS, semântica, estrutura básica de páginas, formatação de texto, imagens, links, listas e posicionamento. O objetivo é ensinar as bases de HTML5 e CSS3 para criação de sites e páginas web.
1. O documento descreve as principais propriedades e conceitos do CSS, incluindo como definir estilos, cores, fontes, bordas, margens, preenchimentos e posicionamento;
2. São apresentados exemplos de sintaxe CSS para cada propriedade, mostrando como aplicá-las corretamente;
3. O CSS permite separar a apresentação da estrutura e conteúdo em páginas web, tornando o design independente do HTML.
O documento descreve as principais propriedades e conceitos de CSS, incluindo: 1) CSS é usado para definir a formatação e estilo de elementos HTML; 2) CSS permite separar a estrutura do conteúdo da página da sua apresentação visual; 3) As regras CSS são compostas por seletores e declarações que definem os estilos dos elementos selecionados.
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?
O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
O documento discute conceitos de CSS como incorporação em HTML, seletores, propriedades e boas práticas. Aborda tags como <link> e <style> para adicionar folhas de estilo, e o uso de IDs, classes e estilos inline. Também menciona validação CSS e problemas de compatibilidade entre navegadores.
O documento discute conceitos e propriedades do CSS para formatação de páginas web, incluindo:
1) O uso de CSS para estilizar elementos HTML e controlar cores, fontes e layout;
2) Propriedades CSS como cor, fonte, tamanho e estilo para formatação de texto;
3) Criação de divs e uso de IDs e classes para estilização de seções.
O documento discute o uso de elementos <div> e <span> em HTML para agrupar conteúdo. Explica que <div> é um contêiner de bloco genérico e <span> é um contêiner em linha genérico que podem ser usados para agrupar seções quando não há uma tag semântica apropriada. Também fornece exemplos de como estruturar uma página web usando <div> para criar cabeçalhos, rodapés, menus e seções de conteúdo.
O documento apresenta uma aula sobre CSS ministrada pelo professor Mauro Jansen. A aula aborda os conceitos básicos de CSS, incluindo estrutura, elementos, propriedades e seletores CSS.
O documento discute o desenvolvimento de sites, incluindo:
1) O uso de CSS para controlar a formatação e estilo de páginas web sem usar HTML;
2) Propriedades CSS como cores, fontes, tamanhos e posicionamento;
3) Exemplos de código CSS para estilizar elementos HTML como cabeçalhos, parágrafos e divisões.
Aula02 Desenvolvimento em Ambiente Web - CSS 3Messias Batista
O documento apresenta os detalhes de uma disciplina de desenvolvimento web, incluindo: (1) a agenda abordará CSS, seletores, cores e propriedades de texto; (2) o projeto valerá 3 pontos e a avaliação escrita 7 pontos; (3) o escopo do projeto inclui criar uma página web usando HTML e CSS.
"Como é feito um website?" "Será que eu consigo?"
Calma! Criar um site é mais tranquilo do que você imagina!
E, para isso, o co:lab apresenta o curso Seu primeiro website, onde você conhecerá conceitos básicos e dará seus primeiros passos na construção de websites utilizando as linguagens HTML e CSS.
O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para estilizar elementos HTML, 2) Regras CSS contêm seletores e declarações, 3) Existem diferentes maneiras de inserir CSS em uma página, e 4) O modelo de caixa CSS descreve como os elementos são renderizados.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
O documento explica os conceitos básicos de CSS, incluindo sua função de estilizar elementos HTML, a sintaxe CSS com seletores, propriedades e valores, e como aplicar folhas de estilo externas, internas e inline em documentos HTML.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
O documento discute o CSS (Cascading Style Sheets), que é usado para definir a aparência de páginas web. CSS permite definir estilos personalizados como cor, tamanho e estilo para elementos de forma a separar a apresentação do conteúdo. Existem três formas de aplicar estilos CSS: localmente no elemento, incorporado no documento ou externamente em um arquivo separado.
Mais conteúdo relacionado
Semelhante a Uma breve introdução a css e bootstrap
O documento descreve as principais propriedades e conceitos de CSS, incluindo: 1) CSS é usado para definir a formatação e estilo de elementos HTML; 2) CSS permite separar a estrutura do conteúdo da página da sua apresentação visual; 3) As regras CSS são compostas por seletores e declarações que definem os estilos dos elementos selecionados.
As Folhas de Estilos (CSS) permitem formatar documentos HTML de maneira separada do conteúdo, definindo propriedades como fontes, cores, tamanhos e espaçamentos. CSS é usado para aplicar estilos de forma flexível a elementos HTML em diferentes meios como tela, impressão ou leitura.
Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?
O documento fornece uma introdução sobre CSS, explicando que CSS não é uma linguagem de programação e sim de folhas de estilo. Ele descreve a anatomia básica de uma regra CSS, incluindo seletores, declarações, propriedades e valores de propriedade. O documento também discute como modificar fontes, textos, layouts e resetar estilos padrão dos navegadores.
O documento resume os principais conceitos de CSS (Cascading Style Sheets), incluindo sua história, propósito, tipos de vinculação de folhas de estilo, sintaxe básica de regras CSS e diferentes seletores como classe e ID.
O documento discute conceitos de CSS como incorporação em HTML, seletores, propriedades e boas práticas. Aborda tags como <link> e <style> para adicionar folhas de estilo, e o uso de IDs, classes e estilos inline. Também menciona validação CSS e problemas de compatibilidade entre navegadores.
O documento discute conceitos e propriedades do CSS para formatação de páginas web, incluindo:
1) O uso de CSS para estilizar elementos HTML e controlar cores, fontes e layout;
2) Propriedades CSS como cor, fonte, tamanho e estilo para formatação de texto;
3) Criação de divs e uso de IDs e classes para estilização de seções.
O documento discute o uso de elementos <div> e <span> em HTML para agrupar conteúdo. Explica que <div> é um contêiner de bloco genérico e <span> é um contêiner em linha genérico que podem ser usados para agrupar seções quando não há uma tag semântica apropriada. Também fornece exemplos de como estruturar uma página web usando <div> para criar cabeçalhos, rodapés, menus e seções de conteúdo.
O documento apresenta uma aula sobre CSS ministrada pelo professor Mauro Jansen. A aula aborda os conceitos básicos de CSS, incluindo estrutura, elementos, propriedades e seletores CSS.
O documento discute o desenvolvimento de sites, incluindo:
1) O uso de CSS para controlar a formatação e estilo de páginas web sem usar HTML;
2) Propriedades CSS como cores, fontes, tamanhos e posicionamento;
3) Exemplos de código CSS para estilizar elementos HTML como cabeçalhos, parágrafos e divisões.
Aula02 Desenvolvimento em Ambiente Web - CSS 3Messias Batista
O documento apresenta os detalhes de uma disciplina de desenvolvimento web, incluindo: (1) a agenda abordará CSS, seletores, cores e propriedades de texto; (2) o projeto valerá 3 pontos e a avaliação escrita 7 pontos; (3) o escopo do projeto inclui criar uma página web usando HTML e CSS.
"Como é feito um website?" "Será que eu consigo?"
Calma! Criar um site é mais tranquilo do que você imagina!
E, para isso, o co:lab apresenta o curso Seu primeiro website, onde você conhecerá conceitos básicos e dará seus primeiros passos na construção de websites utilizando as linguagens HTML e CSS.
O documento resume os principais conceitos de CSS, incluindo: 1) CSS é usado para estilizar elementos HTML, 2) Regras CSS contêm seletores e declarações, 3) Existem diferentes maneiras de inserir CSS em uma página, e 4) O modelo de caixa CSS descreve como os elementos são renderizados.
O documento discute a linguagem HTML5, incluindo suas principais características e como criar um site simples usando HTML e CSS. O documento fornece instruções passo a passo sobre estrutura básica de HTML, elementos semânticos do HTML5, estilização com CSS e desafio de criar um site de artista com imagem, lista de músicas e links.
Nesta palestra, vamos abordar um tema muito comum e de fácil aprendizagem. Todo desenvolvedor que trabalhe com internet hoje em dia, precisa aprender a tornar a linguagem de marcação CSS (Cascading Style Sheets) utilizada para definir a apresentação dos documentos HTML em uma linguagem completamente nova e poderosa, capaz de oferecer grande produtividade. Vamos explorar diferentes frameworks como SASS e LESS e suas vantagens e desvantagens.
O documento explica os conceitos básicos de CSS, incluindo sua função de estilizar elementos HTML, a sintaxe CSS com seletores, propriedades e valores, e como aplicar folhas de estilo externas, internas e inline em documentos HTML.
O documento discute Cascading Style Sheets (CSS), que definem a aparência de páginas web. CSS permite aplicar estilos personalizados a elementos de forma flexível. Existem três formas de aplicar estilos: local (inline), incorporado (embedded) e externo (linked). A ordem de precedência é local > incorporado > externo.
O documento discute o CSS (Cascading Style Sheets), que é usado para definir a aparência de páginas web. CSS permite definir estilos personalizados como cor, tamanho e estilo para elementos de forma a separar a apresentação do conteúdo. Existem três formas de aplicar estilos CSS: localmente no elemento, incorporado no documento ou externamente em um arquivo separado.
Semelhante a Uma breve introdução a css e bootstrap (20)
2. CSS?
CSS é utilizado na estilização de páginas.
Foi desenvolvido no intuito de tirar a grande quantidade de tags que eram utilizadas no HTML
para estilização, assim pode se montar padrões de estilos.
Håkon Wium Lie e Bert Bos.
MATHEUSSOARES-IFCE–CAMPUSCRATO
3. Adicionando CSS a página
Existem 3 formas de aplicar um estilo a sua página, sendo elas:
◦ Dentro da próprio documento com a tag <style>
◦ Arquivo .css externo, através da tag <link>
◦ Dentro de um elemento com o atributo style.
MATHEUSSOARES-IFCE–CAMPUSCRATO
8. Content
Content “Conteúdo” é o “núcleo” da
caixa, onde fica concentrado o que
será apresentado, como a tradução já
diz.
MATHEUSSOARES-IFCE–CAMPUSCRATO
10. Border
Border “Borda” é como o próprio
nome já diz, a borda do elemento,
pode ser modificada e ter estilos
diferentes.
MATHEUSSOARES-IFCE–CAMPUSCRATO
11. Margin
Margin “Margem” é a camada mais
externa da box server para criar os
espaços ao redor do elemento em si.
MATHEUSSOARES-IFCE–CAMPUSCRATO
12. Seletores
Os seletores servem para selecionar elementos do HTML.
Exemplo de seletores:
MATHEUSSOARES-IFCE–CAMPUSCRATO
Tipo Exemplo Descrição
elemento body {} Seleciona todo elemento
body
.class .top {} Seleciona um elemento
com class “top”
#id #paragrafoTal {} Seleciona um elemento
com id “paragrafoTal”
Elemento, elemento div, p {} Seleciona todos os
elementos div e p.
Elemento elemento div p {} Seleciona os elementos p
dentro dos elementos div
13. Classes
Classes são elementos que tem como
atributo o class=“”, são utilizadas junto
ao css quando queremos adicionar
estilos a um certo grupo de
elementos:
MATHEUSSOARES-IFCE–CAMPUSCRATO
14. Id’s
Ids é o atributo id=“” é utilizando
quando queremos que um elemento
tenha uma identificação única.
MATHEUSSOARES-IFCE–CAMPUSCRATO
18. Pseudo Elementos
Pseudos elementos são utilizados quando precisamos de elementos de “mentira”, quando
adicionamos elementos com nenhum valor, para criarmos detalhes, então ao invés de adicionar
tags vazias no nosso html, usamos os pseudo elementos.
Ex:
◦ Adicionar uma tag <p> vazia apenas para acrescentar detalhes.
Ao invés de sempre utilizarmos tags sem necessidades, utilizamos os pseudo elementos:
p::before { content: “ –”; }
MATHEUSSOARES-IFCE–CAMPUSCRATO
19. Pseudo Elementos
Alguns pseudos elemento:
◦ ::after
◦ ::before
◦ ::first-line
◦ ::first-letter
◦ ::selection
MATHEUSSOARES-IFCE–CAMPUSCRATO
20. Pseudo Classes
Pseudo classes são utilizadas quando queremos adicionar estados especiais para algum seletor.
Obs. São Classes que já são reservadas da linguagem.
◦ :hover
◦ :active
◦ :visited
◦ :focus
Lembrando que: Classes utilizam apenas “:” após a declaração do elemento e pseudo elementos utilizam “::”
para diferenciar.
MATHEUSSOARES-IFCE–CAMPUSCRATO
21. Questão rápida
Qual declaração seria certa para selecionar apenas as tags <p> no documento?
a) p {}
b) .p {}
c) #p{}
d) div, p {}
MATHEUSSOARES-IFCE–CAMPUSCRATO
22. Propriedades
Vamos utilizar as propriedades para modificar os elementos da box-model.
1. Padding
2. Margin
3. Border
4. Content
MATHEUSSOARES-IFCE–CAMPUSCRATO
24. Content
O content apenas trabalha com os pseudos elementos: [::before] e [::after]
Para modificarmos o content:
MATHEUSSOARES-IFCE–CAMPUSCRATO
h1::before{
content: “- ”;
}
28. Margin
Para modificarmos o padding basta escolhermos o seletor que queremos e então:
MATHEUSSOARES-IFCE–CAMPUSCRATO
h1{
margin: 0;
}
29. Praticando
Vamos criar uma div com um id único e com bordas de 3px sólidas , que tenha um espaçamento
interno de 20px e uma margem de 5px, e no interior desta div tenhamos um conteúdo com link
e que logo afrente deste link tenha seu respectivo endereço.
Obs. CSS interno.
MATHEUSSOARES-IFCE–CAMPUSCRATO
30. Lembrando
que...
Cada uma das propriedades do box
tem especificação de orientação
(direita, esquerda, cima e baixo) por
exemplo:
MATHEUSSOARES-IFCE–CAMPUSCRATO
32. Problemática
Imagine que você controla um site, e este site que faz um sistema de cadastro com vários inputs
de tipos diferentes (radio, submit, text...) e, que queremos selecionar apenas os inputs que
sejam do tipo texto.
33. Problemática
Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de
tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do
tipo texto.
Soluções:
34. Problemática
Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de
tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
35. Problemática
Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de
tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
36. Problemática
Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de
tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
oUtilizar Seletores Complexos
37. Problemática
Imagine que você controla um site em que faz um sistema de cadastro com vários inputs de
tipos diferentes, radio, submit, text... E que queremos selecionar apenas os inputs que sejam do
tipo texto.
Soluções:
oBuscar em todo o documento HTML e adicionar uma classe para cada um.
oUtilizar Seletores Complexos
39. Cores
Os elementos do Documento HTML podem ser estilizado através de cores.
Essas cores podem ser definidas por nomes: “blue”, “red” “green”
◦ Hexadecimais: #FF0000
◦ RGB: (255, 0 ,0)
◦ RGBA: (255,0,0,0.5)
MATHEUSSOARES-IFCE–CAMPUSCRATO
40. Float
É utilizado para definir onde um certo elemento irá “Flutuar”.
Utilização:
◦ Float: right;
◦ Float: center:
◦ Float: left;
MATHEUSSOARES-IFCE–CAMPUSCRATO
46. Altura e Largura
Para alterar a largura e altura de um box, utilizamos as propriedades:
Height e Width.
Height: Altura.
Width: Largura
Podem ser dimensionados em ‘px’, ‘pt’, ‘em’ ou em porcentagens.
MATHEUSSOARES-IFCE–CAMPUSCRATO
47. Estilo de lista
Propriedade Descrição
List-style Define tudo em apenas uma declaração
List-style-image Especifica a imagem para marcar cada item
List-style-position Define se o marcador será dentro ou fora do box-
contente
List-style-type Define o tipo de marcador da lista
48. Formatação de Textos
Propriedade Descrição
Color Configura a cor do texto
Direction Especifica a direção do texto
Letter-spacing Modifica o espaçamento entre letras
Line-heigh Configura a altura da linha
Text-align Faz o alinhamento horizontal de acordo com valor
“left | right | center”
Word-spacing Configura o espaçamento entre as palavras
Text-decoration Especifica uma decoração para o texto
MATHEUSSOARES-IFCE–CAMPUSCRATO
49. Estilização das fontes
Propriedades Descrição
Font-Family Define a família da fonte
Font-size Define o tamanho da fonte
Font-style Define o estilo da fonte
Font-variant Define a variação da fonte
50. Estilo de fonte
p {
font-style: normal;
}
p {
font-style: italic;
}
p {
font-style: oblique;
}
51. background
Propriedade Descrição
Backgroud-color Define a cor do fundo
Background-repeat Define como a imagem vai se repetir no fundo
Background-attachment Define como a imagem irá ser apresentada
Background-position Define onde é colocada a imagem de fundo
MATHEUSSOARES-IFCE–CAMPUSCRATO
52. Herança
O CSS que é estilo cascata, por motivos de herança de propriedades, quando se dar um valor a
um certo seletor, os seus “filhos” receberão a mesma propriedade valorada.
MATHEUSSOARES-IFCE–CAMPUSCRATO
53. Especificidade
No CSS é possível selecionar um elemento de varias formas, por exemplo:
MATHEUSSOARES-IFCE–CAMPUSCRATO
54. Especificidade
Cada elemento de seleção tem uma certa pontuação
◦ nome de elemento: 1
◦ pseudo elemento: 1
◦ id: 100
◦ Classes Pseudo-Classes: 10
MATHEUSSOARES-IFCE–CAMPUSCRATO
55. Interface de Login
Agora iremos desenvolver como exemplo uma interface de login.
MATHEUSSOARES-IFCE–CAMPUSCRATO
59. Bootstrap
Estilo visual base pra maioria das tags
Ícones
Grids prontos pra uso
Componentes CSS
Plugins JavaScript
Tudo responsivo e mobile-first
70. Ambiente de trabalho pronto
Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
71. Ambiente de trabalho pronto
Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
◦ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
72. Ambiente de trabalho pronto
Vamos criar um documento HTML e adicionar algumas tags para utilizarmos o bootstrap.
◦ <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
◦ UTILIZEM ESSAS META TAGS!!
73. Grids
Grids é uma das grandes “sacadas” do bootstrap, pois ele oferece um sistema de criação de
designers responsivos com poucos código.
Grid que traduzindo significa grade, então utilizaremos Linhas e Colunas para construir nossos
Layouts.