Css – cascading style sheets, Notas de estudo de Análise de Sistemas de Engenharia

Baixe Css – cascading style sheets e outras Notas de estudo em PDF para Análise de Sistemas de Engenharia, somente na Docsity!

CSS – CASCADING STYLE

SHEETS

FOLHAS DE ESTILO EM CASCATA

Documento onde são definidas

regras de formatação ou de estilos,

a serem aplicadas aos elementos

estruturais de marcação.

O QUE É CSS?

Qual é finalidade do CSS?

Retirar do HTML toda e qualquer declaração

que vise a formatação, na apresentação do documento.

Como por exemplo tags do tipo

, , , ....etc.

Quais as vantagens de se

usar CSS?

**- controle total sobre a apresentação do site a partir de um arquivo central;

• agilização da manutenção e design do site;
• saída para diferentes tipos de mídia a partir de uma versão única de HTML;
• redução do tempo de carga dos documentos Web;
• elaboração de documentos consistentes;
• aumento considerável na portabilidade dos documentos Web.**

COMO USAR?

Exemplo

body{color: black;}

p {text-align: center; color: red;}

h1,h2,h3,h4,h5,h6 {color: green;}

Exemplo 2

p {text-indent:10px;} é uma regra CSS

p é o seletor

{text-indent: 10px;} é a declaração CSS

text-indent - é a propriedade CSS

10px - é o valor CSS

Quais são os caracteres permitidos em

regras CSS?

São as letras de a-z, A-Z, os números de 0-9, underscore, hífen e caracteres

de escape como:

\a - Bell, \b - BackSpace dentre outros

A sintaxe CSS é sensível a

maiúsculas/minúsculas?

Não. Regras CSS não são case sensitivas, pode-se usar maiúsculas ou

minúsculas nas folhas de estilo indiferentemente. Mas somente para as

declarações específicas de CSS.

O que é seletor?

Seletor é uma entidade que identifica um elemento HTML ou define uma

classe ou pseudo classe na qual a regra de estilo será aplicada.

p {font: 12px;}

O seletor é p (elemento HTML parágrafo) e a regra CSS escrita determina que

os parágrafos terão uma fonte de tamanho 12px.

Agrupamento de seletores

Agrupamento de seletores é uma forma compacta de reunir seletores que

compartilham as mesmas regras de estilo.

p {color:#000000;}

.classeb {color: #000000;}

span {color: #000000;}

Os seletores p, .classeb e span são letras na cor preta, então podemos

agrupá-los assim:

p, .classeb, span {color: #000000;}

Seletores agrupados devem ser separados por vírgula.

Seletor tipo classe

Seletor tipo classe tem uma abrangência mais ampla. É um seletor cujo nome

você "inventa" e pode ser aplicado a qualquer elemento HTML.

.minhaclasse {color: #000000;}

seletores tipo pseudo-elementos

Pseudo-elementos são usados em CSS para adicionar efeitos especiais a um seletor ou

a parte de um seletor. Eles não são elementos HTML.

p:fist-line {font: 160%;}

h3:first-letter {color: #000000;}

pseudo-elementos são separados dos seletores por ( : ) dois-pontos.

:first-line que estiliza a primeira linha de uma frase.

:first-letter que estiliza a primeira letra de uma palavra.

p .generica:first-letter { font-style: italic; }

pseudos-elementos podem ser combinados com classes

Primeira letra dos parágrafos que pertencem a classe generica, será em itálico.

seletores tipo ID

Seletor tipo ID é um identificador individual associado a UM E SOMENTE UM elemento

HTML no documento. Não se pode ter mais de um elemento HTML com a mesma ID, ao

contrário das classes, que podem ser aplicadas a vários elementos HTML em um

mesmo documento.

A sintaxe para o seletor ID é o caractere # , seguido de um nome que você "inventa".

#menu { color: #000000; background:#FFFFFF; }

Esta é uma div estilizada pela regra CSS menu

4 maneiras de definir o CSS

Externo com Link; Externo com Import; Interno; Inline;

Externo com Link

CSS 3

Este cabeçalho tem 36 pt Este cabeçalho é azul

A margem deste parágrafo é de 50 pixels

E este é um link, verde

estilo.css

body {background-color: yellow}

h1 {font-size: 36pt;}

h2 {color: blue;}

p {margin-left: 50px;}

a {color: green;}

Inline

CSS 3

Este cabeçalho tem 36 pt e agora é vermelho

Este cabeçalho é azul

A margem deste parágrafo é de 50 pixels

Dimensões

Referem-se a medidas horizontais e verticais

Existem dois tipos de dimensões: Relativas e Absolutas.

Unidades Formato Exemplo

Absolutas in – inches (polegadas – 2,54 cm) H1 {margin: 0.5in} /* inches */

cm – centímetros H2 {line-height: 3cm} /* centímetros / mm – milímetros H3 {word-spacing: 4mm} /milímetros / pt – points (1/72 inch) H4 {font-size: 12pt} / points / pc – picas (12 pints) H4 {font-size: 1pc} / picas */

Relativas em – dimensão da fonte corrente h1 { margin: 0.5em } /* em */

ex – altura da letra „x‟ da fonte corrente h1 { margin: 1ex } /* ex / px – pixels p { font-size: 12px } / px */

Propriedades CSS

A/B

accelerator azimuth background background-attachment background-color background-image background-position background-position-x background-position-y background-repeat behavior

border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width

border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom

C

caption-side clear clip color

content counter-increment counter-reset

cue cue-after cue-before cursor

D/E

direction display

elevation empty-cells

Propriedades CSS

filter float

font font-family font-size font-size-adjust

font-stretch font-style font-variant font-weight

H/I

height ime-mode include-source

L

layer-background-color layer-background-image layout-flow layout-grid layout-grid-char layout-grid-char-spacing

layout-grid-line layout-grid-mode layout-grid-type Left letter-spacing

line-break line-height list-style list-style-image list-style-position list-style-type

F