1 / 16

Understanding CSS: Important Concepts | Describing CSS Syntax and Usage

Discover the importance of CSS, how it separates content from design, syntax examples, ways to insert CSS, selector types, box model, and practical applications. Learn CSS with clarity and enhance your web design skills.

hansel
Download Presentation

Understanding CSS: Important Concepts | Describing CSS Syntax and Usage

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Instrutor: Tarso Nunes Aires tnaires@gmail.com CSSConceitos importantes

  2. O que é CSS? • HTML foi escrito para definir o conteúdo de um documento • Porém, tags como <font>, atributos de cores e etc. foram introduzidos ao HTML 3.2 • Isso se tornou um pesadelo para os designers • Mistura de conteúdo com apresentação • Definições e cores eram adicionados a cada página, complicando a manutenção

  3. O que é CSS? • A tecnologia CSS foi adicionada ao HTML 4.0 para resolver esses problemas • Cascade Style Sheets, ou folhas de estilos em cascata • Define como exibir elementos HTML • Permite que toda a formatação seja removida de documentos HTML, separando conteúdo de apresentação

  4. Sintaxe • Exemplo: h1 { color: blue; font-size: 12px; } • h1 é um seletor • O texto entre chaves é um conjunto de declarações • O que está antes dos dois pontos é uma propriedade • E o que está depois dos dois pontos é um valor

  5. Sintaxe • Seletores são, geralmente, o elemento HTML que queremos estilizar • Cada declaração consiste em uma propriedade e um valor • Declarações terminam com ponto-e-vírgula

  6. Inserindo CSS em uma página • Existem 3 maneiras de inserir um estilo CSS: • CSS externo <head> <link rel=“stylesheet” type=“text/css” href=“estilo.css”> </head>

  7. Inserindo CSS em uma página • Existem 3 maneiras de inserir um estilo CSS: • CSS interno <head> <style type=“text/css”> ... estilos </style> </head>

  8. Inserindo CSS em uma página • Existem 3 maneiras de inserir um estilo CSS: • CSS inline <p style=“color: red; text-align: center;”> Texto </p> • Observação: • Múltiplos estilos são aplicados em cascata • Ordem de prioridade: inline, interno, externo

  9. Comentários • Comentários em CSS situam-se entre /* e */ • Exemplo: /* Todos os parágrafos centralizados e com fonte vermelha */ p { color: red; text-align: center; }

  10. Seletor id • Utilizado para ajustar o estilo para um único elemento • Referencia o atributo id do elemento HTML • É definido com um “#” • Exemplo: #titulo { text-align: center; color: red; }

  11. Seletor class • Usado para definir um estilo para um grupo de elementos • Ajusta o mesmo estilo para elementos HTML com a mesma classe • Referencia o atributo class do elemento HTML • É definido com um “.” • Exemplo: .centralizado { text-align: center; }

  12. Seletor class • É possível também especificar que apenas elementos HTML específicos devem ser afetados por uma classe • Exemplo: /* Afeta apenas elementos <p class=“centralizado”></p> */ p.centralizado { text-align: center; }

  13. Box model • Elementos HTML podem ser considerados como caixas (boxes) • Em CSS, o termo “boxmodel” é usado quando falamos de design e layout • O boxmodel é essencialmente uma caixa que fica ao redor dos elementos HTML, e consistem em: margens, bordas, espaçamentos e conteúdo

  14. Box model

  15. Referências • Referência de CSS: • http://www.w3schools.com/css/css_reference.asp • Famílias de fontes: • http://www.w3schools.com/css/css_websafe_fonts.asp • Unidades CSS: • http://www.w3schools.com/css/css_units.asp • Cores CSS: • http://www.w3schools.com/css/css_colors.asp

  16. Prática • Aplicar estilos à aplicação AgendaJSF, desenvolvida durante o curso • Usar predominantemente estilos externos, sendo permitidos estilos internos ou inline em situações particulares

More Related