Estude fácil! Tem muito documento disponível na Docsity
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Prepare-se para as provas
Estude fácil! Tem muito documento disponível na Docsity
Prepare-se para as provas com trabalhos de outros alunos como você, aqui na Docsity
Encontra documentos específicos para os exames da tua universidade
Prepare-se com as videoaulas e exercícios resolvidos criados a partir da grade da sua Universidade
Responda perguntas de provas passadas e avalie sua preparação.
Ganhe pontos para baixar
Ganhe pontos ajudando outros esrudantes ou compre um plano Premium
Aprenda as regras básicas do css, um conjunto de regras que define a formatação de documentos web. Saiba como criar, aplicar e combinar estilos, além de conhecer as diferentes formas de escrever css. Este documento também aborda as principais vantagens de usar css, como economia de tempo, redução do tamanho do código e melhor controle de layout.
Tipologia: Notas de estudo
1 / 8
Esta página não é visível na pré-visualização
Não perca as partes importantes!
Petrolina-PE, 2008
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:
O CSS tem a seguinte sintaxe: <.NOMEDACLASSE>{ ATRIBUTO_1: VALOR_1; ATRIBUTO_2: VALOR_2; ...; ATRIBUTON: VALOR_N }
Por exemplo:
** FONTES
Os atributos vinculados à fonte são:
font-family 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 ‘Times New Roman’ Arial ‘Courier New’
Outros tipos de fontes são: garamond e verdana.
font-size 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 Atributo que altera a inclinação do texto. Os principais valores são: normal, italic ou obliqüe. Ex.: font-style: italic
font-weight 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 Atributo que transforma em maiúscula e minúscula.
text-decoration Atributo que trabalha com linhas no textos.
text-align Atributo que alinha horizontalmente um texto.
vertical-align Atributo que alinha verticalmente tabela ou imagem.
line-height Atributo que indica o espaço entre as linhas do texto.
CORES
Os atributos vinculados à cores são:
color Atributo que indica a cor do texto.
background-color Atributo que indica a cor de fundo do texto.
background-image Atributo que indica a imagem de fundo.
background-repeat Atributo que indica se a imagem de fundo deve ser repetida ou não.
PADDING
Semelhante ao “ margin ”, o “ padding ” 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: W padding-left: Z
BORDER-WIDTH
Afeta a espessura da borda. border-width: X // Vale para as quatro border-width: X Y // Vertical; Horizontal border-width: X Y W Z // Sentido horário: top; right; bottom; left Podendo ser também: border-top-width: X // px | thin | medium | thick border-right-width: Y // px | thin | medium | thick border-bottom-width: W // px | thin | medium | thick border-left-width: Z // px | thin | medium | thick
BORDER-COLOR Afeta a cor da borda. border-color: X // nome | RGB | Hexadecimal border-color: X Y // nome | RGB | Hexadecimal border-color: X Y W Z // nome | RGB | Hexadecimal
Aplica-se as mesmas regras nos atributos anteriores: um, dois ou quatro valores. border-top-color: X border-right-color: Y border-bottom-color: W border-left-color: Z
BORDER-STYLE
Afeta o estilo da borda. border-style: X // none | dotted | dashed | solid | double | groove | ridge | inset | outset
Para simplificar, pode-se adotar a seguinte regra para as bordas: border: X Y X // Sendo X, Y e Z valores do border-width, border-color e // border-style, e não necessários sempre nesta mesma ordem.
WIDTH E HEIGHT Afeta a largura e a altura do bloco, respectivamente. width: X // largura em px ou % height: X // altura em px ou %
FLOAT
Posiciona o bloco a direita ou esquerda e faz com que o texto ao redor flutue em sua volta. float: X // Sendo X igual a ‘left’ ou ‘right’.
POSICIONAMENTO Posiciona o bloco ou outro elemento na tela. position: X // absolute | relative top: X // px | % left: X // px | %
O valor “ absolute ” posiciona no canto superior esquerdo da tela. Já o “ relative ”, refere-se à posição anterior do elemento.
EFEITOS DE LINKS
A:active{} // é um link ativo no documento A:hover{} // é quando o mouse passa por cima de um link A:link{} // é um link A:visited{} // é quando um link já foi visitado
EXERCÍCIO
Crie um documento HTML que utilize todas as regras.
