Introdução ao CSS (Propriedades)

(1)

Instituto Federal de Educação, Ciência e Tecnologia

Introdução ao CSS

(Propriedades)

Prof. Henrique Neto

Técnico em

Computação Gráfica

(2)

AGENDA

 Propriedades CSS:

– Background;

– Color;

– Border;

– Font;

– List;

(3)

Seletores

 As propriedades CSS podem ser agrupadas pelos determinados

grupos, comumente empregados em estilização geral:

 Podemos identificar os seguintes seletores:

– Background;

– Color;

– Border;

– Font;

– List;

– Margin;

– Padding;

(4)

Background

 As propriedades de background (plano de fundo) são usadas para

definir os efeitos de plano de fundo para os elementos (tags);

– background-color: especifica a cor de plano de fundo de um elemento;

– background-image: especifica uma imagem para usar como plano de fundo de um elemento (por default, a imagem é repetida a fim de cobrir todo o elemento);

– background-repeat: utilizada para definir se a imagem será repetida horizontalmente, verticalmente ou não será repetida;

(5)

Background

body {

(6)

Background

body {

background-image: url("imgs/toaster.jpg");

(7)

Background

body {

(8)

Background

body {

(9)

Background

body { background-image: url("imgs/toaster.jpg");

background-repeat: no-repeat;

background-position: 100px 200px; }

100px

200px

Descoloa a imagem no plano de fundo em 100px a direita e 200px

(10)

Background

(11)

Background

background-attachment: fixed; }

Página no final (com scroll)

(12)

Background

(13)

Background

(14)

Seletores

– Background; – Color;

(15)

Color

 Definem a cor do texto inserido em qualquer elemento

HTML;

 Podem ser definidas pelo valor RGB em:

– Hexadecimal: ex: #FF0000;

– rgb(255, 0, 0);

(16)

Propriedades

– Border;

(17)

Border

 Essa propriedade permite especificar as seguintes

características referentes a borda de um elemento:

(18)

Border

 A propriedade border-style pode receber os seguintes

(19)

Border

 A propriedade border-width pode receber os seguintes

(20)

Border

 A propriedade border-color pode receber os seguintes

formatos:

– #RRGGBB

– rgb(RRGGBB)

(21)

Praticando com

Border

(22)

Praticando com

Border

 Agora, escreva o CSS (embarcado ou externo) para a

(23)

Praticando com

Border

 Agora, tente escrever o CSS (embarcado ou externo)

(24)

Propriedades

– Border; – Font;

(25)

Font

 Essa propriedade permite definir os tipos das fontes, o

tamanho e outros estilos (negrito, itálico, etc);

 Algumas propriedade mais utilizadas são:

– font-family: tipos de fontes para um elemento;

– font-style: define o estilo da fonte em normal ou

italic;

– font-weight: especifica o grau de negrito de uma fonte;

– font-size: define o tamanho do texto;

(26)

small-Font

 Exemplo font-variant:

HTML

(27)

Font

(28)

Propriedades

(29)

Text

 As seguintes propriedade podem ser utilizadas em um texto:

– text-align: usada para configurar o alinhamento horizontal de um texto

• Valores: center, left, right, justify;

– text-decoration: usada para configurar ou remover

decorações do texto . O valor none é frequentemente utilizado para remover underlines de textos.

• Valores: none, overline, line-through, underline;

– text-transform: usada para especificar letras maiúsculas e minúsculas no texto;

(30)

Text

– text-indent: usada para especificar a indentação da primeira linha de um texto:

• Valores: 2px, 10px, 20px, …;

– letter-spacing: usada para especificar o espaço entre os elementos:

(31)

Text

– word-spacing: usada para especificar o espaço entre as palavras no texto:

• Valores: 2px, 10px, 20px, …;

– direction: define o sentido de direção do texto:

(32)

Praticando com Text

 Escreva o HTML e o CSS da página a seguir, utilizando

(33)

Praticando com Text

(34)

Praticando com Text

(35)

Text

(36)

Propriedades

(37)

List

 Essa propriedade está relacionada com as listas

(enumeradas e não enumaradas);

 As possíveis propriedades são:

– list-style-type: define a aparência do marcador;

– list-style-image: define uma pequena imagem como marcador;

(38)

List

 Os valores possíveos para list-style-type são:

– disc: bolinha preenchida.

– circle: bolinha NÃO preenchida.

– square: quadradinho.

– decimal: 1, 2, 3, 4, … 98, 99, ...

– decimal-leading-zero: 01, 02, 03, …, 98, 99, …

– lower-roman e upper-roman:

• i, ii, iii, iv, v, …

(39)

List

 A propriedade list-style-image define uma imagem como um marcador:

ol {

(40)

List

 A propriedade list-style-position define a posição do marcador da lista,

alinhado ou não com algum texto.

 Os valores possíveis são:

(41)

List

(42)

Propriedades

(43)

Margin

 Pode-se ver cada elemento (tag) HTML como um “modelo em caixa“ (box

model) que ocupa uma área na página;

 Em CSS, o termo modelo de caixa é usado quando se fala em design e

layout;

 O modelo de caixa é essencialmente uma caixa que envolve todo elemento

HTML;

 Ela consiste de:

– Conteúdo;

– Padding;

– Bordas;

(44)

Margin

 Conteúdo:

– Conteúdo da caixa, onde texto e imagens ficam;

 Padding:

– Distância entre conteúdo do elemento e a sua borda;

 Borda:

(45)

Margin

(46)

Margin

(47)

Margin

 Assim, a propriedade margin define a distância do espaço

fora da borda;

 São transparentes e não possuem qualquer cor de plano de

fundo;

 Pode-se definir qualquer valor para cada um dos quatro

lados da caixa:

– margin-top;

– margin-bottom;

(48)

Margin

sintaxe completa

(49)

Praticando com Margin

 Escreva o HTML e o CSS da página a seguir, utilizando

(50)

Praticando com Margin

(51)

Width e Height

 Essas propriedades permitem controlar a altura e a largura de um elemento, respectivamente;

 Tais valores consistem em alterar a caixa de conteúdo do

elemento;

(52)

Width e Height

div {

width: 500px;

height: 100px;

border-color: green;

border-style: solid;

border-width: 3px; }

(53)

Praticando com Margin, Width e Height

(54)

Praticando com Margin, Width e Height

(55)

Praticando com Margin, Width e Height

(56)

Praticando com Margin, Width e Height

 Escreva o CSS a

seguir, utilizando as propriedades

(57)

Praticando com Margin, Width e Height

(58)

Praticando com Margin, Width e Height

 Escreva o CSS a

seguir, utilizando as propriedades

(59)

Margin

(60)

Propriedades

(61)

Padding

 Essa propriedade define uma distância entre o conteúdo

e a borda;

 Tais distâncias podem ser configuradas por:

– padding-top padding-bottom;

– padding-left padding-right;

padding-top

padding-bottom

(62)

Praticando com Padding

(63)

Praticando com Padding

 Escreva o CSS a seguir,

utilizando as propriedades

(64)

Praticando com Margin e Padding

(65)

Praticando com Margin e Padding

(66)

Praticando com Margin e Padding

 O código HTML/CSS resposta desse exercício pode ser

encontrado em:

https://sites.google.com/site/programacaowebifce/co

- jgn_torpedos_tarde.html

(67)

Padding

(68)

Algumas fontes interessantes ...



Dúvidas sobre tags?

–

http://www.w3schools.com/



Aprofundar mais os conhecimentos

• https://www.udacity.com

• https://www.udemy.com