• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
curso de CSS
 

curso de CSS

on

  • 2,153 views

 

Statistics

Views

Total Views
2,153
Views on SlideShare
2,151
Embed Views
2

Actions

Likes
1
Downloads
87
Comments
0

1 Embed 2

http://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    curso de CSS curso de CSS Presentation Transcript

    • css
    • z-index:1; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: groove; border-right-style: groove; border-bottom-style: groove; border-left-style: groove;}body{ padding:50px;}#cabecalho{ height:130px; background-color:#39F; margin:0px;}#cabecalho h1 utilização de{ font-family:Verdana, Geneva, sans-serif; font-size:40px; font-weight:bold; color:#C30;} Cascading Style Sheets (CSS)#cabecalho h2{ font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#C30;}#menu ul{ float:left;}#menu ul li { h1{ display: inline; font-size:3em; padding-right:40px; }} http://www.w3schools.com/css a:link{ text-decoration:none; font-family:Verdana, Gene } demo: .campo:active { http://csszengarden.com border:double; border-bottom-color:#F } a:hover{ text-decoration:underlin } fieldset{ background-color:#FC0; width:400px; } fieldset legend{ font-size:14px; font-weight:bolder; } .caixa { font-family:Verdana, Gene font-size: 12px; text-decoration: none;
    • CSSno início era... a confusão! HTML Styles... JavaScript
    • CSSatualmente: organização em “modelos”Desenvolvidos de forma independente mas complementam-se! (X)HTML CSS JavaScript estrutura / apresentação comportamento conteúdo
    • CSSintroduçãoO HTML é usado para estruturar conteúdos. CSS é usado para formatarconteúdos estruturados.CSS veio revolucionar o mundo do web design. Os benefícios concretos douso de CSS incluem: • controle do layout de vários documentos a partir de uma simples folha de estilos; • aplicação de diferentes layouts para servir diferentes suportes (ecrã, impressora, PDA, smartphone...); • maior velocidade de carregamento; • maior acessibilidade e interoperabilidade;
    • CSSintrodução
    • CSSdefiniçõesas definições de CSS permitem-nos separar a estrutura da forma de umdocumento (X)HTML.O (X)HTML é usado para definir a estrutura através das tags mas toda aformatação (fontes, cores, imagens de fundo, molduras, links, formatação do texto,etc.) é realizada pelas definições de CSS.Um ficheiro de CSS não é mais do que um conjunto de definições várias(embebidas na head do documento ou num ficheiro externo).
    • CSSinclusão dos estilos no documento HTMLa CSS pode ser incluída num documento HTML de três formas: inline, embebidaou como ficheiro externo.
    • CSSinclusão dos estilos no documento | CSS inlineesta é a forma mais antiga, ainda do tempo da utilização das tabelas comoelemento de estrutura do HTML. Neste caso a definição é escrita juntamente como código HTML.<p style="text-align: left"> texto bla bla bla</p>
    • CSSinclusão dos estilos no documento | CSS embebidadesta forma colocamos o código dentro <head>da HEAD da página HTML a que <style type="text/css">queremos aplicar a CSS. <!--Com este método os estilos são body {aplicados só à página onde estão margin: 0; padding: 0;colocados. text-align: center; background-color: #333333;Não é uma boa solução para aplicar a }um site dado que se quisermos mudar a -->CSS temos que mudar página a página. </style> </head>
    • CSSinclusão dos estilos no documento | CSS externao ficheiro .css é criado externamente ao ficheiro nomedoficheiro.cssHTML. Só temos que fazer a ligação do <style type="text/css">CSS ao HTML com um link na head <!--<head> body {<link rel="stylesheet" type="text/css" href="…/ margin: 0;css/nomedoficheiro.css"/> padding: 0;</head> text-align: center; background-color: #333333; }Ou podemos fazer a importação do -->ficheiro CSS </style><style type="text/css"> @import url (http://...../nomedoficheiro.css)</style>
    • CSSinclusão dos estilos no documento | CSS externaqualquer destes métodos é realizado colocando a instrução de link ou importaçãona head do HTML.Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS.Isto significa que, se for preciso alterar formatação do site só temos que alterar umficheiro CSS, e não mudar todas as páginas HTML, uma a uma.Logo: • A manutenção é mais fácil; • O tamanho é reduzido; • A largura de banda é reduzida; • A flexibilidade é melhorada.A forma mais usada é a CSS externa. No entanto, é possível ter num mesmodocumento HTML as três formas, ou seja, inline, embebida e externa. É, noentanto, preciso ter em atenção a ordem de leituras dos vários estilos e aimplicação que têm uns com os outros.
    • CSSa ordem da “cascata” | leituracomo sabemos um documento HTML pode conter definições CSS inline,embebidas e externas. Ora quando coexistem num mesmo documento poderáhaver conflitos o que pode originar situações anómalas e renders estranhos dodocumento HTML.Leitura:A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte: 1. CSS existente no browser 2. CSS externa 3. CSS embebida 4. CSS inline
    • CSSa ordem da “cascata” | a cascataquando existe mais do que um estilo num documento HTML, estes funcionam emcascata numa folha de estilo virtual com a ordem acima descrita.A última regra da cascata é a que tem prioridade.A ordem de prioridade é a seguinte: 1. Inline 2. CSS embebida 3. CSS externa 4. CSS do browserIsto quer dizer que em caso de regras iguais com valores diferentes a inlinesobrepõe-se à embebida e esta à externa.É importante saber que mesmo quando existem duas declarações iguais namesma css, a última regra da lista das declarações é a que prevalece. É, também,importante a posição das folhas de estilo na head do HTML, a ultima folha CSS naordem do HTML é a que tem predominância.
    • CSSa ordem da “cascata” | a cascata | inerênciapropriedades e valores em tags parent têm inerência sobre as child tags (é comona vida real!)Quando um selector está ligado por uma relação de parentesco a outro ou estácontido nele, assume as propriedades do selector onde está contido.Se, por exemplo, declararmos no selector body a property font-family todo o textoda página HTML vai assumir esta propriedade.
    • CSSa ordem da “cascata” | a cascata | inerência por exemplosbody {font-family: Verdana, serif;}se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivosselectores. Por exemplo:h1 {font-family: Georgia, serif;}p {font-family: Tahoma, sans-serif;}Agora as tags <h1> terão a fonte Georgia e não Verdana anteriormente declaradana tag body.Mas se declararmosh1 {font-size: 12px;}a fonte seria Verdana, a font declarada na tag body.Por inerência uma tag ganha o estilo da tag pai.
    • CSSdeclaração de um estilo | os seletorestal como o HTML usa tags, o CSS usa seletores.O seletor referencia o elemento HTML que queremos formatar. A propriedade éum atributo do selector que queremos formatar e o valor está intimamenterelacionado com a formatação do elemento.Cada selector pode ter múltiplas propriedades; e cada propriedade tem valoresindependentes.body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, sans-serif;}Neste exemplo o body é o seletor; a definição é o conjunto das instruçõesescritas entre as chavetas, background, é uma propriedade de body; #eeeeee é ovalor do background nesta definição.
    • CSSdeclaração de um estilo | os seletoresa propriedade e o valor estão separados por dois pontos (:) e rodeados porchavetas ({ }).Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.Também podemos especificar mais do que uma propriedade na mesmadeclaração. Para isto, devemos separar cada propriedade e o respectivo valor comum ponto e virgula (;)p{ text-align: center; color: black; font-family: arial }
    • CSSdeclaração de um estilo | os seletoresdos tipos de seletores mais usados (não é uma lista completa) podemos referiros seguintes: • Element selectors • ID selectors • Class selectors • Group selectors • Descendent selectors • Pseudo-class selectorsEstes tipos de seletores podem ser divididos em dois géneros: tipo e autor. Oprimeiro diz respeito aos selectores que identificam os elementos de HTML, osegundo pode ser criado pelo autor da CSS.
    • CSSdeclaração de um estilo | os seletores seletor { propriedade : valor ; } declaração
    • CSSdeclaração de um estilo | os seletores | element selectors<p> <h1> <em> <span>, etc.referenciam as tags HTML que formatam.Por exemplo: o element selector corresponde à tag <h1>h1 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; color: #333333;}
    • CSSdeclaração de um estilo | os seletores | element selectorsp a:link :visited :hover h1{ { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; }} font-family:arial }
    • CSSdeclaração de um estilo | os seletores | ID selectorsdefinem-se com o sinal cardinal (#) e deve ser usado uma única vez em cadadocumento HTML. Pode, no entanto, haver mais do que um seletor com o mesmoID, mas não está conforme as especificações da W3C. O documento pode sercorrectamente rendido pelo browser, mas não será validado.Quando queremos usar vários seletores com o mesmo nome devemos usar classesem vez de ID.Os ID são muito usados para definir os elementos estruturais do documento HTML,como é o caso das DIVs.#caixa { background-color: #FF9900; margin: 0px; padding: 5px; float: left; height: 300px; width: 300px;}
    • CSSdeclaração de um estilo | os seletores | ID selectors#tituloPrinc #hiperligacao #capa{ { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; }} font-family:arial } <div id="capa"> a infografia em portugal </p>
    • CSSdeclaração de um estilo | os seletores | class selectorscom os seletores de classe podemos definir diferentes estilos para o mesmotipo de elemento num documento HTML.Por exemplo, podemos ter dois tipos de parágrafos no documento:p .right {text-align: right}p .left {text-align: left}Os atributos de classe podem ser usados localmente (inline) no documentoHTML. Os selectores de classe devem começar com um ponto e podem ter onome que quisermos. Podemos usar várias vezes a mesma classe no mesmodocumento..imagem { height: 300px; width: 300px; border: thin solid #333333; margin: 20px;}
    • CSSdeclaração de um estilo | os seletores | class selectors.tituloPrinc .hiperligacoes .capa{ { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; }} font-family:arial } <p class="tituloPrinc"> atelier de multimédia </p> ... <p class="tituloPrinc"> a infografia em portugal </p>
    • CSSdeclaração de um estilo | os seletores | group selectorsé possível agrupar selectores e com isso reduzir o código. Os selectores agrupadosdevem estar separados com vírgulas (,)h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif;}
    • CSSdeclaração de um estilo | os seletores | descendent selectorspodemos usar selectores descendentes. #lateral h1 { font-family: Verdana, Arial,É útil quando queremos formatar um Helvetica, sans-serif;determinado elemento dentro de um font-size: 0.97em;contexto específico, ou só dentro de line-height: 1;uma dada DIV. Deve existir um espaço font-weight: 900; color: #FF6600;entre os descent selectors. Neste }exemplo estaríamos a formatar os h1cujo ID fosse lateral.Já se quisermos formatar o elemento h1 h1 {para todo o documento, então font-family: Verdana, Arial, Helvetica, sans-serif;utilizariamos este exempo: font-size: 0.97em; line-height: 1; font-weight: 900; color: #FF6600; }
    • CSSdeclaração de um estilo | os seletores | pseudo-class selectorspermitem definir o aspecto das hiperligações, sendo, portanto, os seletoresrelevantes para o aspeto gráfico e manipulação da interface.Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender dainteração do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover,a:activeGeralmente, para uma interação eficaz os seletores a e :visited, têm a mesmadefinição e o :active é de pouca utilização. Portanto, são relevantes as definiçõesdos selectores a e :hover.a, :visited { a:hover { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 0.9em; background-color: #666; color: #000; } text-decoration: none;}ex. ex.http://esev.comze.com/demo/HTML/css/selectores.html http://esev.comze.com/demo/HTML/css/selectores.html
    • CSSos comentáriosos comentários CSS são uma forma prática de organizarmos código. Servem,como o próprio nome indica, para inserir texto em forma de comentário que ajudao autor a relembrar a organização e a forma das definições ou para organizar odocumento CSS em partes lógicas.São, também, extremamente úteis para partilhar código, permitindo que outrapessoa compreenda o porquê daquela organização ou definição./*isto é um comentário CSS*/
    • CSSdefinir a CSS de forma concisaQuando criamos as regras de CSS podemos compactar o código.Por exemplo esta definição:.imagem {margin-top: 20px;margin-right: 20px;margin-bottom: 20px;margin-left: 20px;border-top-width: thin;border-right-width: thin;border-bottom-width: thin;border-left-width: thin;}pode ser escrita assim:.imagem {margin: 20px;border: thin solid;}Isto permite-nos poupar tempo e permitir um render mais rápido do documento.
    • border-right F layout-grid-char-spacing -moz-border-right-colorspadding-top speak-numeral speak-punctuationCSS border-right-color layout-grid-line -moz-border-bottom-colors page border-right-style filter layout-grid-mode -moz-border-left-colors page-break-after speech-rate border-right-width float layout-grid-type -moz-opacity page-break-before stressalgumas das propriedades border-spacing font left -moz-outline page-break-inside scrollbar-arrow-color border-style font-family letter-spacing -moz-outline-color pause scrollbar-base-color border-top font-size line-break -moz-outline-style pause-after scrollbar-dark-shadow-co border-top-color font-size-adjust line-height -moz-outline-width pause-before scrollbar-face-color border-top-style font-stretch list-style -moz-user-focus pitch scrollbar-highlight-color border-top-width font-style list-style-image -moz-user-input pitch-range scrollbar-shadow-color border-width font-variant list-style-position -moz-user-modify play-during scrollbar-3d-light-color bottom font-weight list-style-type -moz-user-select position scrollbar-track-color A/B C H/I M O Q/R Taccelerator caption-side height margin orphans quotes table-layoutazimuth clear ime-mode margin-bottom outline -replace text-alignbackground clip include-source margin-left outline-color richness text-align-lastbackground-attachment color margin-right outline-style right text-decorationbackground-color content margin-top outline-width ruby-align text-indentbackground-image counter-increment marker-offset overflow ruby-overhang text-justifybackground-positionbackground-position-xbackground-position-y counter-reset cue cue-after L marks max-height max-width overflow-X overflow-Y ruby-position text-overflow text-shadow text-transform layer-background-colorbackground-repeatbehaviorborder cue-before cursor layer-background-image layout-flow min-height min-width -moz-binding P S text-autospace text-kashida-space text-underline-position layout-grid -set-link-sourceborder-bottom -moz-border-radius top D/E layout-grid-char padding sizeborder-bottom-color -moz-border-radius-topleft layout-grid-char-spacing padding-bottom speakborder-bottom-style -moz-border-radius-topright U/V layout-grid-line padding-left speak-headerborder-bottom-width -moz-border-radius-bottomrightpadding-right direction layout-grid-mode speak-numeralborder-collapse -moz-border-radius-bottomleft padding-top display layout-grid-type speak-punctuationborder-color -moz-border-top-colors unicode-bidi elevation left page speech-rateborder-left -moz-border-right-colors -use-link-source empty-cells letter-spacing page-break-after stressborder-left-color -moz-border-bottom-colors vertical-align line-break page-break-before scrollbar-arrow-colorborder-left-style -moz-border-left-colors visibility line-height page-break-inside scrollbar-base-colorborder-left-width -moz-opacity voice-family list-style pause scrollbar-dark-shadow-color Fborder-right -moz-outline volume list-style-image pause-after scrollbar-face-colorborder-right-color -moz-outline-color list-style-position pause-before scrollbar-highlight-colorborder-right-style -moz-outline-style list-style-type pitch scrollbar-shadow-color W/Zborder-right-width filter -moz-outline-width pitch-range scrollbar-3d-light-colorborder-spacing float -moz-user-focus play-during scrollbar-track-color font Mborder-style -moz-user-input position white-spaceborder-top font-family -moz-user-modify font-size widows Tborder-top-color -moz-user-select width Q/Rborder-top-style font-size-adjust marginborder-top-width font-stretch margin-bottom word-breakborder-widthbottom font-style font-variant font-weight margin-left margin-right margin-top O quotes -replace table-layout text-align text-align-last word-spacing word-wrap writing-mode orphans z-index marker-offset richness text-decoration C outline zoom marks right text-indent outline-color max-height ruby-align text-justify outline-style
    • CSSalgumas das propriedades | ex. de uma cheat sheet
    • CSSalgumas das propriedades | ex. de uma cheat sheet
    • CSSo modelo de “caixa” que existe em todos os elementos
    • CSSposicionamento
    • CSSposicionamento
    • CSSlayout das páginas | tipos de layoutexistem quatro tipos de layouts: • Fixo (fixed) • Elástico (elastic) • Liquido (liquid) • Hibrido (hybrid)
    • CSSlayout das páginas | tipos de layout | layout fixono layout fixo, as medidas são fixas, logo não existe alteração da estrutura dapágina quando se muda de resolução e ou de dimensão do monitor. http://esev.comze.com/demo/css/layout/layfixocentrado.html
    • CSSlayout das páginas | tipos de layout | layout elásticoo layout elástico, tem a aparência de umlayout fixo, mas aumentando oudiminuindo a fonte o layout acompanha oredimensionamento da fonte.É um layout flexível porque é constituídopor unidades de medida relativas e alargura é relativa à largura da fonte dobrowser utilizado.Temos sempre o mesmo número de linhase palavras se aumentarmos oudiminuirmos o layout com a janela dobrowser. http://esev.comze.com/demo/css/layout/layelasticoocentrado.html
    • CSSlayout das páginas | tipos de layout | layout líquidoo layout liquido usa colunas empercentagem.Ao redimensionar a janela do browser olayout adapta-se ao tamanho. http://esev.comze.com/demo/css/layout/layliquidocentrado.html
    • CSSlayout das páginas | tipos de layout | layout híbridoo layout hibrido, é umacombinação do elástico e doliquido.Por exemplo, podemos ter oconteúdo de uma DIV em ems(font-size: 1 em;) e o conteúdode outra em percentagem (font-size: 100%).Logo, uma DIV vai mantersempre a sua estrutura enquantoque a outra vai adaptar-se faceao redimensionamento da janelado browser. http://esev.comze.com/demo/css/layout/layhibrido.html
    • CSSposicionamentoExistem quatro tipos de posicionamento possíveis para as DIVs: • estático (static) • relativo (relative) • absoluto (absolute) • fixo (fixed)Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
    • CSSposicionamento | estáticoo posicionamento estático corresponde ao fluir normal dos elementos numdocumento HTML, ou seja, as DIVs são posicionadas de cima para baixo, daesquerda para a direita. Se uma DIV for reposicionada através de CSS, a DIVimediatamente abaixo toma o seu lugar.Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
    • CSSposicionamento | relativoo posicionamento relativo é um reposicionamento de uma dada DIV relativamente àsua posição estática, ou seja, relativamente à sua posição estática a DIV estádeslocada no eixo X tantos pixels e no eixo y outros tantos pixels.Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
    • CSSposicionamento | absolutoo posicionamento absoluto é calculado tendo em conta a janela do browser. Nestecaso as coordenadas X e Y da DIV estão em perfeita correlação com as dimensõesda janela do browser.Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
    • CSSposicionamento | fixoo posicionamento fixo permite manter uma DIV fixa na janela do browser, que nãomexe com o movimento do Scroll.Permite-nos criar efeitos como os realizados com os antigos frames.Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
    • CSSvalidação do código http://jigsaw.w3.org/css-validator/
    • CSSreferênciasBibliografia: • CSS, Criação Inovadora de Sites - FCAWebliografia: • http://www.w3schools.com/css/default.asp • http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf • http://pt-br.html.net/tutorials/css • http://www.freecsstemplates.org/css-templates (templates em html e css) • http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ • http://css-tricks.com/ (artigos e vídeos!)Exemplos (ótimos) de código fonte (layout, posicionamentos, etc.) • http://www.leonelcunha.net/formacao/
    • o futuro?
    • CSS3http://www.w3schools.com/css3/default.asp