Top Banner
CSS Cascading Style Sheet
38

Css cascading style sheet

Feb 15, 2017

Download

Education

Morvana Bonin
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
  • CSSCascading Style Sheet

  • CSS

    a abreviatura para Cascading Style Sheets. Folha de Estilos em Cascata

  • uma "folha de estilo" composta por camadas e utilizada para definir a apresentao (aparncia) em pginas da internet

  • O que eu posso fazer com CSS?

  • Sendo uma linguagem para estilos que define o layout de documentos HTML, possvel com CSS controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamento e muito mais.

  • Qual a diferena entre CSS e HTML?

  • HTML usado para estruturar contedos.

  • CSS usado para formatar contedos estruturados.

  • Por que o CSS foi criado?

  • Com a evoluo dos recursos de programao as pginas da internet estavam adotando cada vez mais estilos e variaes para deix-las mais elegantes e atrativas para os usurios. Com isto, foram criadas novas tags e atributos de estilo para o HTML e em resumo ele passou a exercer tanto a funo de estruturar o contedo quanto de estiliza-lo.

  • Entretanto, isto comeou a trazer um problema para os desenvolvedores, pois no havia uma forma de definir, por exemplo, um padro para todos os cabealhos ou contedos em diversas pginas.

  • A partir destas complicaes, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separao do contedo e formato de um documento (na linguagem de formatao utilizada) de sua apresentao, incluindo elementos como cores, formatos de fontes e layout.

  • Esta separao proporcionou uma maior flexibilidade e controle na especificao de como as caractersticas sero exibidas, bem como permitindo que as mesmas marcaes de uma pgina sejam apresentadas em diferentes estilos

  • Como funciona CSS?

  • A regra CSS e sua sintaxe

    Uma regra CSS uma declarao que segue uma sintaxe prpria e que define como ser aplicado estilo a um ou mais elementos HTML. Um conjunto de regras CSS formam uma Folha de Estilos.

  • Uma regra CSS, na sua forma mais elementar, compe-se de trs partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

    seletor { propriedade: valor; }

  • seletor { propriedade: valor; }

    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 vlida (por exemplo: , , , .minhaclasse, etc...);

    o atributo do elemento HTML ao qual ser aplicada a regra (por exemplo: font, color, background, etc...).

    a caracterstica especfica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

  • Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. O ponto-e-vrgula facultativo no caso de propriedade nica e tambm aps a declarao da ltima propriedade quando houver mais de uma.

  • No entanto de boa tcnica usar-se sempre o ponto-e-vrgula aps cada regra para uma propriedade.

  • Para maior legibilidade das folhas de estilo, de boa prtica usar linhas distintas para escrever cada uma das declaraes propriedade e seu valor , como mostrado a seguir.

  • Agrupamento de SeletoresUma regra CSS quando vlida para vrios seletores, estes podem ser agrupados. Separe cada seletor com uma vrgula. No exemplo abaixo agrupamos todos os elementos cabealho. A cor de todos os cabealhos ser verde.

  • Inserindo CSSExiste 3 mtodos que podemos usar para inserir estilos CSS em uma pgina.

  • Mtodo 1: Atributo styleUtilizando o atributo style, podemos aplicar estilos a um elemento especfico. Exemplo:

    Este o mtodo que deve ser menos utilizado, pois mistura o cdigo CSS com o HTML e dificulta a manuteno do site e por ir contra a diviso de um pgina em camadas.

  • Mtodo 2: TAG styleCom este mtodo, aplicamos estilos apenas na pgina onde o elemento est inserido. Para isso, utiliza-se a tag style. Exemplo:

    Todos os elementos style devem ficar dentro do elemento head de uma pgina. Os estilos em uma tag style tem precedncia sobre os estilos em um arquivo externo.

  • Mtodo 3: Arquivo externo CSSEste o mtodo que apresenta maior versatilidade. Um arquivo externo CSS pode ser ligado a quantas pginas desejarmos, desta forma deixando a manuteno de um site muito mais fcil (apenas um arquivo CSS pode controlar o visual de um site inteiro). Para este mtodo, utilizamos o elemento link, da seguinte forma:

  • A tag link uma tag que auto-fecha, assim como br e meta. O atributo href indica o endereo do arquivo CSS (hiper-referncia), neste exemplo um arquivo chamado "arquivo.css" dentro de uma pasta "css". O atributo rel determina a relao deste "link" com a pgina, aqui sendo stylesheet ou folha de estilos. Se estivssemos utilizando a sintaxe XHTML, tambm necessrio o atributo type com o valor text/css.

  • Classes e IDs

    Para possibilitar uma organizao melhor da pgina e da seleo de elementos por CSS, podemos utilizar classes e/ou ids para identificar tags.

  • Uma id, como o nome diz, uma identificao nica: s pode ser utilizada uma vez no documento inteiro. Normalmente utilizada para identificar elementos estruturais da pgina.

  • Uma classe reutilizvel: pode se repetir na pgina e tambm combinar-se com outras (podemos pr mais de uma classe em um elemento).

  • Ao escolher nomes para classes no use nomes que lembrem a apresentao. Prefira nomes que lembrem a estrutura. Para o exemplo mostrado nomear as classes .cor-preta e .cor-azul uma pssima escolha. Se no futuro voc resolver alterar a cor dos elementos azuis para verde vai ficar com uma regra CSS sem sentido.

  • Voc pode inserir comentrios nas CSS para explicar seu cdigo, e principalmente ajud-lo a relembrar de como voc estruturou e qual a finalidade de partes importantes do cdigo. O comentrio introduzido no cdigo, ser ignorado pelo navegador. Um comentrio nas CSS comea com o "/*", e termina com " */". Veja o exemplo abaixo:

  • Divs e Spans

    Os elementos e so usados para agrupar e estruturar um documento e so freqentemente usados em conjunto com os atributos class e id.

  • Os elementos div e span foram criados com o HTML 4 com a finalidade de fornecer um mecanismo genrico para agrupar e prover estrutura aos documentos. O elemento div um container nvel de bloco e span um elemento inline. Uma id e/ou class em geral usada para fornecer uma identidade a uma div ou span com o propsito de fornecer uma referncia para estilizao por CSS ou captura por um script.

  • O elemento um elemento neutro e que no adiciona qualquer tipo de semntica ao documento. Contudo, pode ser usado pelas CSS para adicionar efeitos visuais a partes especficas do texto no seu documento.

  • Enquanto usado dentro de um elemento nvel de bloco, usado para agrupar um ou mais elementos nvel de bloco.

  • Concluso

    Como tudo na vida, aprender bem HTML e CSS vem de prtica, ou seja, quanto mais praticar, melhor voc vai ficando e ganhando conhecimentos sobre as linguagens. H vrios sites e tutoriais que podem auxiliar e te ajudar com exemplos e dicas, tudo depende de voc.

    Ento agora mos na massa e praticar! =)

  • Bibliografia e referncias

    Tecmundo - O que CSS?HTML.net - Tutorial CSSMaujor - A regra CSS e sua sintaxe, Div ManiaHTML e CSS na prtica - Inserindo CSS, Sintaxe e Seletores CSS

    http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htmhttp://pt-br.html.net/tutorials/css/lesson2.phphttp://www.maujor.com/tutorial/sintaxetut.phphttp://www.maujor.com/tutorial/divmania.phphttp://www.maujor.com/tutorial/divmania.phphttp://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/1/inserindo-csshttp://guilhermemuller.com.br/pt/elearning/html_css_basico/licao/2/sintaxe-seletores-css