Aula 6 e 7 - Introdução A CSS

Construo de Pginas Web I
Trabalhando com CSS (
Cascading Style Sheets Folha de Estilo em Cascata)
O CSS uma "folha de estilo" composta por camadas e utilizada para definir a
aparncia (formatao) em pginas HTML.
A sua maior vantagem efetuar a separao entre o formato e o contedo de um
documento.
Aplicao da folha de estilos no cdigo css:

Interno:
Insero da tag abaixo dentro da cabealho <head></head>:
<style type="text/css">
P{
Tag universal
}
.exemplo{
class
}
#teste{
Elemento especfico (id)
}
</style>
Externo:
Criaode um arquivo separado apenas com os estilos css e lincado na
pgina html como segue exemplo abaixo, dentro da tag de cabealho
<head></head>:
<link
rel="stylesheet"
href="teste.css"
type="text/css" />
Propriedade font-family
Prof. Jeany Laranjeira
Pgina 1 de 9

font-family: lucida, arial, sans-serif;
nome genrico (substituio do fonte pertencente ao
grupo
Grupo de fontes, para ocorrer substituio em caso do navegador no
suportar a fonte sugerida.
sans-serif: fontes normais sem serifas
Arial |Tahoma |Helvetica | VerdanaSans | Lucida | HelveticaNarrow
serif:fontes normais com serifas
Times | Times New Roman | Palatino | Bookman | New Century Schoolbook
monospace:fontes com largurafixa
Courier | Courier New | Andale Mono | Lucidatypewriter | Fixed
cursive:fontesquesimulammanuscrito
Comic Sans MS | Zapf Chancery | Coronetscript | Florence | Parkavenue
fantasy: fontes decorativas , para ttulos, etc.
Impact | Arnoldboecklin | Oldtown | Blippo | Brushstroke
Propriedade font-size
font-size: xx-small | x-small | medium | large | x-large | xx-large
Ainda possvel determinar o seu valor empxou%.
Propriedade font-style
font-style:
normal | italic | oblique
Propriedade font-weight
font-weight:
700 | 800 | 900
normal | bold | border | lighter | 100 | 200 | 300 | 400 | 500 | 600 |
Propriedadefont-variant
Pgina 2 de 9

font-variant: normal | small-caps
Propriedade font
Agrupamento das propriedades font.
Exemplo:
font: 24px small-caps oblique bold arial, sans-serif;
Propriedade color (define a cor da letra)

color: nome da cor ou cdigo hexadecimal ou cdigo rgb;
Exemplos:
color: #FFFFFF
color: White
color: rgb(255,255,255)
Propriedade text-align
text-align: left | right | center | justify
Propriedade vertical-align
Vertical-align: baseline | bottom | top | middle | text-bottom | text-top | sub |
super | %
Baseline linha de base bottom parte inferior
centro
text-bottom parte inferior do texto
sub subscrito
top parte superior
text-top parte superior texto
super sobrescrito
Propriedade text-decoration
Pgina 3 de 9
Middle

text-decoration: underline | line-through
underline sublinhado
line-through riscado
Propriedade text-transform
Text-transform: captalize | uppercase |
lowercase | none
Capitalize primeiras letras de cada palavra em maiscula

maiscula
lowercase minscula
none nenhum
uppercase letra
Propriedade text-indent (texto com recuo)

text-indent: medida em px, cm, %
Exemplo:
text-indent: 2cm;
propriedade line-height (espaamento entre linhas)

line-height: 150% ou 1.5 (1 linha e meia)
Propriedade background-color (define a cor de fundo do elemento)

Background-color: nome da cor ou cdigo hexadecimal ou cdigo rgb;
Exemplos:
background-color: #FFFFFF
background-color: White
background-color: rgb(255,255,255)
Propriedade background-image(define uma imagem de fundo)

Background-image: url(caminho da imagem) | none (nenhuma)
Pgina 4 de 9

Exemplo:
Background-image: url(paisagem.jpg)
Propriedade background-repeat(repetio da imagem)

Background-repeat: repeat | repeat-x | repeat-y | no-repeat
Repeat-x repetio horizontal
repeat sem repetio
repeat-y repetio vertical
no-
Propriedade background-attachment(relao da imagem com o contedo)

Background-attachment: scroll | fixed
Fixed imagem fixa em relao ao contedo de exibio.
Scroll imagem acompanha o rolamento da tela.
Propriedade background-position
Background-position:top | center | bottom || left | center | right
vertical
horizontal
Tambm pode ser utilizado valores em cm ou em %.
Propriedade background
Agrupamento das propriedades background.
Exemplo:
Background: red url(image.jpg) fixed repeat center;
Propriedade margin
margin-top: 10px;
Pgina 5 de 9

margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
margin: 10px 20px 10px 20px;
margin: 10px 10px; (margem espelhada)
Propriedade padding (espaamento interno do elemento)

padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding: 10px 20px 10px 20px;
padding: 10px 10px; (espaamento espelhado)
Propriedade border:
border-style: none | dotted | dashed | solid | double | groove | ridge | inset |
outset
border-color: definir a cor;
border -width: medium | thin | thick |10px (largura da borda);
border-radius: 10% | 10px | arredondamento | valor em % oupx
Outras propriedade das bordas:
border-top
border-topstyle
border-topcolor
border-topwidth
border-bottom
border-bottomstyle
border-bottomcolor
border-bottomwidth
border-left
border-left-style
border-left-color
border-left-width
border-right
border-right-style
border-right-color
border-right-width
Propriedade position
position: relative | absolute
Pgina 6 de 9

relative o padro, seu posicionamento tem relao com o posicionamento
dos demais elementos
absolute tem seu posicionamento livre de qualquer outro elemento, no
interferindo e nem sofrendo interferncia dos demais elementos.
Propriedade Left (posiciona o elemento em relao ao lado esquerdo da pgina).

left: 100px;
Propriedade right (posiciona o elemento em relao ao lado direito da pgina).

right: 100px;
Propriedade top (posiciona o elemento em relao ao topo da pgina).

top: 100px;
Propriedade bottom (posiciona o elemento em relao ao fim da pgina).

bottom: 100px;
Propriedade list-style (estilo de listas para OL, UL, DL)

list-style-image............. imagem como marcador da lista;
list-style-position..........onde o marcador da lista posicionado;
list-style-type...............tipo do marcador da lista;
list-style........................maneira abreviada para todas as propriedades;
list-style-image:
none
URL: url(caminho/marcador.gif)
Pgina 7 de 9

list-style-position:
outside: marcador fora do alinhamento do texto
inside: marcador alinhado com texto
list-style-type:
none: sem marcador
disc: crculo (bolinha cheia)
circle: circunferncia (bolinha vazia)
square: quadrado cheio
Pgina 8 de 9

Aula 6 e 7 - Introdução A CSS

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Aula 6 e 7 - Introdução A CSS

Caricato da

Copyright:

Formati disponibili

Construo de Pginas Web I

Trabalhando com CSS (

Cascading Style Sheets Folha de Estilo em Cascata)

Aplicao da folha de estilos no cdigo css:

Construo de Pginas Web I

normal | italic | oblique

Construo de Pginas Web I

Propriedade color (define a cor da letra)

top parte superior

text-top parte superior texto

Construo de Pginas Web I

Capitalize primeiras letras de cada palavra em maiscula

Propriedade text-indent (texto com recuo)

propriedade line-height (espaamento entre linhas)

Propriedade background-color (define a cor de fundo do elemento)

Propriedade background-image(define uma imagem de fundo)

Construo de Pginas Web I

Propriedade background-repeat(repetio da imagem)

repeat-y repetio vertical

Propriedade background-attachment(relao da imagem com o contedo)

Tambm pode ser utilizado valores em cm ou em %.

Construo de Pginas Web I

Propriedade padding (espaamento interno do elemento)

Construo de Pginas Web I

Propriedade Left (posiciona o elemento em relao ao lado esquerdo da pgina).

Propriedade right (posiciona o elemento em relao ao lado direito da pgina).

Propriedade top (posiciona o elemento em relao ao topo da pgina).

Propriedade bottom (posiciona o elemento em relao ao fim da pgina).

Propriedade list-style (estilo de listas para OL, UL, DL)

Prof. Jeany Laranjeira

Construo de Pginas Web I

Prof. Jeany Laranjeira

Potrebbero piacerti anche