CSS incorporado – Formatando textos utilizando estilos em cascata DESENVOLVIMENTO WEB I CSS incorporado – Formatando textos utilizando estilos em cascata
O QUE É CSS? Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.
E WEB STANDARDS? Web Standards é um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
seletor { propriedade: valor; } SINTAXE BÁSICA seletor { propriedade: valor; } Seletor: genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...); Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...). Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)
EXEMPLOS USANDO TAGs COM SELETORES P { FONT-SIZE: 12PX; } BODY { COLOR: #000000; BACKGROUND: #FFFFFF; FONT-WEIGHT: BOLD; Planejar um site no quadro – organização de arquivos e esboço
ESTILO INCORPORADO Uma folha de estilo é dita incorporada ou interna, quando as regras CSS estão declaradas no próprio documento HTML.
ESTILO INCORPORADO <HEAD> <STYLE TYPE=“TEXT / CSS”> H3 { COLOR: #FF0000; } </STYLE> </HEAD>
ESTILO INCORPORADO <STYLE TYPE=“TEXT / CSS”> H3 { COLOR: #FF0000; FONT-FAMILY: COMICS; } P { FONT-FAMILY: ARIAL; COLOR: GREEN; </STYLE>
PROPRIEADEDES PARA FORMATAR FONTES color:...................cor da fonte font-family:..........tipo de fonte font-size:.............tamanho de fonte font-style:............estilo de fonte font-variant:.........fontes maiúsculas de menor altura font-weight:.........quanto mais escura a fonte é (negrito) Mostrar o site do Maujor – www.maujor.com
PROPRIEADEDES PARA FORMATAR TEXTOS color.....................cor do texto; letter-spacing........espaçamento entre letras; word-spacing.........espaçamento entre palavras; text-align..............alinhamento do texto; text-decoration......decoração do texto; text-indent............recuo do texto; text-transform.......forma das letras; direction...............direção do texto; white-space.........como o browser trata os espaços em branco;