CSS 17
8 pág.

CSS 17


DisciplinaAnálise Textual8.708 materiais291.211 seguidores
Pré-visualização2 páginas
Programação Web - CSS 
 
 
1
AUTARQUIA EDUCACIONAL DO VALE DO SÃO FRANCISCO \u2013 AEVSF 
FACULDADE DE CIÊNCIAS APLICADAS E SOCIAIS DE PETROLINA \u2013 FACAPE 
CURSO DE CIÊNCIA DA COMPUTAÇÃO 
PROFESSOR LUIS NÍCOLAS DE AMORIM TRIGO 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
APOSTILA DE PROGRAMAÇÃO WEB 
 
CSS \u2013 CASCADING STYLE SHEETS 
(FOLHAS DE ESTILO EM CASCATA) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Petrolina-PE, 2008 
 
 Programação Web - CSS 
 
 
2
INTRODUÇÃO 
 
CSS, também conhecido como folhas de estilo, é um conjunto de regras que informa a 
formatação de um documento web. Cada regra consiste em definir um rótulo para uma determinada 
tag HTML e, em seguida, alterar os seus atributos. O CSS foi criado no final de 1996 pela W3C. As 
principais vantagens do CSS são: 
\u2022 Economia de tempo; 
\u2022 Diminuição do tamanho do código; 
\u2022 Carregamento mais rápido; 
\u2022 Facilidade de manutenção e alteração; e 
\u2022 Controle de layout. 
 
COMO CRIAR 
 
O CSS tem a seguinte sintaxe: 
<ELEMENTO><.NOMEDACLASSE>{ 
ATRIBUTO_1: VALOR_1; 
ATRIBUTO_2: VALOR_2; 
...; 
ATRIBUTON: VALOR_N 
} 
\u2022 ELEMENTO \ufffd Corresponde a tag HTML ao qual o CSS será aplicado. 
\u2022 .NOMEDACLASSE \ufffd Corresponde a um nome de classe CSS que poderá ser aplicado a 
qualquer tag. 
\u2022 ELEMENTO.NOMEDACLASSE \ufffd Corresponde a uma determinada classe aplicada somente à 
tag indicada em ELEMENTO. 
\u2022 ATRIBUTO_K \ufffd Corresponde à identificação da configuração aplicada. 
\u2022 VALOR_K \ufffd Corresponde à própria configuração aplicada. 
\u2022 VALOR_K \ufffd Corresponde à própria configuração aplicada. 
\u2022 ATRIBUTO_K: VALOR_K; \ufffd Corresponde à formatação completa de 
ELEMENTO.NOMEDACLASSE. Pode atribuir várias formatações separadas por ponto-e-vírgula 
(\u201c ; \u201c), porém este não é colocado na última formatação. 
 
Por exemplo: 
<STYLE> 
P{ 
 font-family: Arial; 
 font-size: 12pt; 
 color: blue 
} 
 Programação Web - CSS 
 
 
3
P.principal{ 
 font-family: Verdana; 
 font-size: 11pt; 
 color: green 
} 
</STYLE> 
... 
 
<P CLASS=\u201dprincipal\u201d>Este parágrafo é formatado com fonte Verdana, tamanho de 
11 pontos e cor de texto verde. Este CSS é aplicado em parágrafos que contém o 
atributo CLASS igual a principal.</P> 
<P>Este outro parágrafo é formatado com fonte Arial, tamanho de 12 pontos e cor de 
texto azul. Este CSS é aplicado em parágrafos comuns, que não possuem nenhuma 
classe específica.</P> 
 
Onde o CSS é escrito? Existem três formas de estilos que são: 
\u2022 Estilo Externo 
\u2022 Estilo Incorporado 
\u2022 Estilo Inline 
 
ESTILO EXTERNO 
 No Estilo Externo, as formatações são criadas em um arquivo com extensão \u201c.css\u201d e pode 
ser chamado por qualquer documento HTML, através da tag <LINK REL=\u201dSTYLESHEET\u201d 
HREF=\u201dcaminho/até/a/pasta/do/Arquivo.css\u201d TYPE=\u201dtext/css\u201d>. 
 
ESTILO INCORPORADO 
No Estilo Incorporado, as formatações são inseridas no cabeçalho do documento HTML, mais 
especificamente, entre as tags <HEAD> e </HEAD>, que deverão ser colocados as tags <STYLE> e 
</STYLE>. 
 
ESTILO INLINE 
No Estilo Inline, as formatações são inseridas na própria tag HTML, através do atributo 
STYLE aplicada a esta tag. 
As formatações básicas a serem aplicadas nas regras CSS são: 
\u2022 Fontes 
\u2022 Atributos de texto 
\u2022 Cores 
\u2022 Blocos 
 
 
 
 
 Programação Web - CSS 
 
 
4
FONTES 
Os atributos vinculados à fonte são: 
 
font-family \ufffd Atributo que obtém os tipos de fontes, que são separados por vírgulas. 
Ex.: (font-family: fonte1, fonte2, ..., fonte-genérica). As principais fontes utilizadas são: 
 
Fonte Genérica Serif Sans-Serif Monospace 
Default do Unix Times Helvetica Courier 
Default do Mac Times Helvetica Courier 
Default do Windows \u2018Times New Roman\u2019 Arial \u2018Courier New\u2019 
 
Outros tipos de fontes são: garamond e verdana. 
 
font-size \ufffd Atributo que obtém o tamanho da fonte. Os valores contêm as seguintes medidas 
principais: pt (pontos) e px (pixel). Também tem valores dos tipos: xx-small, x-small, small, medium, 
large, x-large e xx-large., que correspondem aos valores do atributo SIZE da tag FONT. 
 
font-style \ufffd Atributo que altera a inclinação do texto. Os principais valores são: normal, italic ou 
obliqüe. 
Ex.: font-style: italic 
 
font-weight \ufffd Atributo que altera o peso do texto. Os principais valores são: normal e bold. 
Ex.: font-weight: bold 
 
 
ATRIBUTOS DE TEXTOS 
Os atributos vinculados ao texto são: 
 
text-transform \ufffd Atributo que transforma em maiúscula e minúscula. 
\u2022 text-transform: capitalize \ufffd 1ª letra em maiúscula. 
\u2022 text-transform: uppercase \ufffd Todas em maiúscula. 
\u2022 text-transform: lowercase \ufffd Todas em minúscula. 
\u2022 text-transform: none \ufffd não sofre alterações (default). 
 
text-decoration \ufffd Atributo que trabalha com linhas no textos. 
\u2022 text-decoration: underline \ufffd por baixo do texto. 
\u2022 text-decoration: overline \ufffd por cima do texto. 
\u2022 text-decoration: none \ufffd sem sublinhado. 
 Programação Web - CSS 
 
 
5
 
text-align \ufffd Atributo que alinha horizontalmente um texto. 
\u2022 text-align: left \ufffd alinhado à esquerda. 
\u2022 text-align: right \ufffd alinhado à direita. 
\u2022 text-align: center \ufffd centralizado. 
\u2022 text-align: justify \ufffd justificado. 
 
vertical-align \ufffd Atributo que alinha verticalmente tabela ou imagem. 
\u2022 vertical-align: baseline \ufffd default () 
\u2022 vertical-align: top \ufffd top. 
\u2022 vertical-align: middle \ufffd meio. 
\u2022 vertical-align: bottom \ufffd inferior. 
 
line-height\ufffd Atributo que indica o espaço entre as linhas do texto. 
\u2022 line-height: 150% \ufffd porcentagem (espaço um e meio) 
\u2022 line-height: 2 \ufffd valor absoluto (espaço duplo) 
\u2022 line-height: 25px \ufffd espaço em pixels. 
 
CORES 
Os atributos vinculados à cores são: 
 
color \ufffd Atributo que indica a cor do texto. 
\u2022 color: green \ufffd nome da cor em inglês. 
\u2022 color: #00FF00 \ufffd código hexadecimal. 
\u2022 color: rgb(0,255,0) \ufffd sistema RGB. 
 
background-color \ufffd Atributo que indica a cor de fundo do texto. 
\u2022 background-color: blue \ufffd nome da cor em inglês. 
\u2022 background-color: #0000FF \ufffd código hexadecimal. 
\u2022 background-color: rgb(0,0,255) \ufffd sistema RGB. 
 
background-image \ufffd Atributo que indica a imagem de fundo. 
\u2022 background-image: url(\u2018caminho_do_arquivo_da_imagem\u2019) 
 
background-repeat \ufffd Atributo que indica se a imagem de fundo deve ser repetida ou não. 
\u2022 background-repeat: repeat \ufffd imagem repete horizontal e verticalmente. 
\u2022 background-repeat: no-repeat \ufffd imagem não repete horizontal e verticalmente. 
\u2022 background-repeat: repeat-x \ufffd imagem só repete horizontalmente. 
\u2022 background-repeat: repeat-y \ufffd imagem só repete verticalmente. 
 Programação Web - CSS 
 
 
6
 
BLOCOS 
As tags HTML <DIV>...</DIV> são \u201ccaixas\u201d que podem ser utilizadas para formatar um bloco 
de conteúdo, como parágrafos, imagens, etc. Os atributos seguintes podem ser aplicados às tags que 
são delimitadoras, como <P>...</P>, <TABLE>...</TABLE>, etc. 
Utilizando estas caixas, em parceria com o CSS, novos layouts poderão ser desenvolvidos 
sem tantas restrições quando se utiliza tabela. Uma caixa é formada pelas seguintes partes: 
\u2022 Conteúdo (texto, imagem, etc.); 
\u2022 Margem interna (padding); 
\u2022 Borda (border); e 
\u2022 Margem externa (margin). 
 
 
 
MARGIN 
Afeta todas as margens externas ao mesmo tempo. Ela pode ter o(s) seu(s) valor(es), 
principalmente, em porcentagem ou em pixels. Existem três formas de atribuir os valores de \u201cmargin\u201d: 
margin: X // Vale para as quatro margens 
margin: X Y // Vertical; Horizontal 
margin: X Y W Z // Sentido horário: top; right; bottom; left 
 
Este atributo pode ser dividido em atributos específicos. 
margin-top: X 
margin-right: Y 
margin-bottom: W 
margin-left: Z 
 
As principais unidades dos valores deste atributo são px (pixel) e % (porcentagem). 
 
 
 
 
 
 
 Programação Web - CSS 
 
 
7
PADDING 
 Semelhante ao \u201cmargin\u201d, o \u201cpadding\u201d afeta as margens internas. 
padding: X // Vale para as quatro margens 
padding: X Y // Vertical; Horizontal 
padding: X Y W Z // Sentido horário: top; right; bottom; left 
Podendo ser também: 
padding-top: X 
padding-right: Y 
padding-bottom: