Scribd Logo
Carica

Benvenuto in Scribd!

  • LSD CSS 101

    Caricato da

    Patrícia Jerónimo
    9 visualizzazioni48 pagine

    Titolo originale

    LSD-CSS-101

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    9 visualizzazioni48 pagine

    LSD CSS 101

    Caricato da

    Patrícia Jerónimo

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 48

    CSS 101

    O que o CSS?
    CSS signica Cascading Style Sheets e uma linguagem utilizada para descrever a aparncia e formatao do HTML.! ! Em suma, uma folha de estilos (style sheet) um cheiro que dita com que aspecto um cheiro de HTML vai car.! ! Voltando analogia da casa, o CSS diz respeito aos acabamentos, pintura e decorao da casa.

    Cascading?
    Entitulam-se cascading (em cascata) porque as regras para um mesmo elemento/selector se vo sobrepondo medida que vo sendo lidas. Ou seja, se tivermos:! ! ! p { margin:10px; }! p { margin:0; } ! Qual ser o valor nal da margem dos pargrafos?

    Ainda que os estilos ditassem que os pargrafos devessem ter, simultaneamente, margem igual a 10px e a 0px, a ordem de precedncia que dita qual o estilo com que os pargrafos acabam por car.

    Ordem de precedncia?
    De uma forma simplicada, o browser escolhe qual o estilo para um elemento da seguinte forma: 1. Procura no CSS por um selector que corresponda a um elemento. Se no tiver estilos denidos, usa as regras default do browser; Todos as regras num cheiro/bloco de CSS se sobrepem aos estilos pr-denidos do browser; O browser procura no CSS por estilos marcados com !important e aplica-os aos elementos abrangidos pelo selector; Quanto mais especco um selector, maior ser a precedncia do mesmo.! Por exemplo div > p.class mais especico que p.class que por sua vez mais especico que p; Se duas regras, que tenham a mesma precedncia de selector, forem aplicadas ao mesmo elemento, a ltima a ser carregada a que ser aplicada. Ou seja, o CSS lido do inicio para o m do documento e os estilos so escritos por cima uns dos outros.

    2.

    3.

    4.

    5.

    Ou seja

    p { margin:10px; } p { margin:0; }

    Em suma, porqu separar forma da funo?


    Existem duas boas razes para separar a forma/ formatao (CSS) do nosso contedo funcional/ estrutura(HTML): 1. Podemos aplicar a mesma formatao a vrios elementos de HTML sem ter de rescrever o cdigo vezes sem conta.! <p style=color:red></p>*10 vs p { color:red; }" Podemos aplicar a mesma formatao e aspecto a vrias pginas de HTML utilizando apenas um cheiro CSS.

    2.

    Aplicar o CSS
    Podemos aplicar o CSS a cada elemento individualmente:! ! ! ! ! <p style=color:red>! De todas as formas que podemos aplicar estilos ao nosso HTML, esta menos recomendvel de se usar.! Para a aplicarmos a todos os <p> da nossa pgina, teramos de rescrever o cdigo tantas vezes quantos <p> existissem.! Para alm disso, se fosse preciso mudar a cor de vermelho para laranja, fazer a alterao seria bestialmente moroso.

    Aplicar o CSS
    sempre prefervel ter o CSS todo agrupado num sitio. ! ! Podemos criar uma tag de <style></style> e escrever l dentro todo o nosso CSS.! As tags de <style></style> so escritas na! <head></head> da nossa pgina web.! ! A desvantagem desta abordagem, que ao escrever o CSS num cheiro HTML, essas regras s vo afectar esse cheiro em especco.

    Aplicar o CSS
    Por ltimo, a melhor e mais abrangente soluo de aplicar uma folha de estilos ao nosso HTML usar um cheiro externo. Para isso usamos a tag <link> na <head> do nosso cheiro.! ! A tag <link> precisa de 3 atributos: 1. 2. 3. Um atributo type que assume sempre o valor de text/css; Um atributo rel que deve ser sempre stylesheet; Um atributo href que deve apontar para o endereo do nosso cheiro CSS.

    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

    Sintaxe

    selector

    h1 {! " color: red;! }


    propriedade valor

    Sintaxe
    Um selector pode ser qualquer elemento HTML, como um <p>, <img> ou <div>.! ! ! S temos de tirar os <> s!! Uma propriedade um aspecto de um selector. Podemos, por exemplo, alterar propriedades como:! - color, margin, font-size, font-family, etc! ! Um valor um denio possvel para uma propriedade. Por exemplo, a propriedade color pode assumir os valores red, blue, #ff0000 ou qualquer outra cor! ! Sempre que escrevemos um par propriedade-valor (property-value) devemos fechar o mesmo usando um ponto-e-vrgula ( ; ). S assim que o browser sabe que j terminamos uma regra e comeamos uma nova.

    Um selector, muitas propriedades


    Outra vantagem do CSS o podermos especicar vrias propriedades para um selector. Se quisermos alterar a cor, font e tamanho de letra de um pargrafo s temos de escrever:! ! p {! " font-family:Verdana;! " color:red;! " font-size:18px;! }! ! muito importante no nos esquecermos de fechar cada par property-value com um ponto-e-vrgula. Sem os ponto-e-vrgula, o HTML vai acabar por no car com o aspecto desejado e pode tornar-se confuso fazer o debug do problema.

    Comentrio
    Tal como no HTML, uma boa ideia irmos comentando o nosso cdigo de CSS, para que mais tarde nos lembremos porque zemos o qu, ou para ajudar um possvel colaborador.! ! Se no HTML, os comentrios se fazem usando as tags <!-- -->, em CSS os comentrios fazem-se usando a seguinte notao: /* isto um comentrio em CSS */

    Selectores

    Qualquer elemento HTML pode ser usado como selector CSS. Podemos estilar <div>, <p>, <span>, <ul>, <header>, <section>, <li>, etc Podemos inclusivamente escolher as tags <body> e <html>.! ! Para isso basta-nos retirar os <>s. Por exemplo, se quisessemos estilar os <ul> e <li> de um documento, bastava-nos usar os selectores ul e li, respectivamente.

    Nos slides sobre HTML, abordamos o nesting. Relembrando:! !


    " " <div>! " <div>! " "

    ! ! !

    <p>Bitoque com ovo a cavalo</p>!

    E se eu quiser apanhar apenas os <p> dentro de duas divs e no todos os <p>?! Podemos selecciona-los com CSS da seguinte forma:! div div p {! " /* o css vem para aqui */! }

    Classes e IDs
    J vimos que podemos usar elementos HTML como selectores. Para alm disso, existem outros dois tipos importantes de selectores que podemos usar: Classes e IDs

    Classes
    As classes so teis quando temos uma srie de elementos que queremos que tenham o mesmo estilo.! Em vez de aplicarmos as mesmas regras a vrios selectores de elementos HTML, podemos simplesmente aplicar a mesma classe a todos esses elementos e depois denir o estilo dessa classe no nosso CSS.! ! ! ! ! As classes so atribudas aos elementos HTML usando o atributo class= no elemento.! <div class=quadrado></div>! No CSS, as classes so identicadas com um ponto (.), assim:! .quadrado {! " width:100px;! " height:100px;! }! ! Desta forma podemos pegar em elementos de diferentes tipos e aplicar-lhes o mesmo estilo.

    IDs
    Por outro lado, os IDs so indicados para quando s temos UM elemento que deve receber um determinado tipo de estilo.! ! ! ! ! Os IDs so atribudos aos elementos HTML usando o atributo id= no elemento.! <div id=unico></div>! No CSS, os IDs so identicados com um cardinal (#), assim:! #unico {! " width:100px;! " height:100px;! }! ! Isto permite-nos aplicar um estilo apenas a uma instncia de um selector, em vez de os apanhar a todos.

    Selectores Pseudo-Classes
    Os selectores de pseudo-classes (ou pseudoselectores) so usados para aceder a elementos ou estados que no fazem parte do documento HTML em si.! ! Por exemplo, fcil saber qual o selector para estilar um link, mas ento e se eu quiser denir estilos para os estados de over, clickado e/ou visitado?

    Os pseudo-selectores permitem-nos denir estilos para estes tipos de alteraes no nosso documento HTML.! ! A sintaxe de CSS para os pseudo-selectores : selector:pseudo-selector {! " propriedade: valor;! }

    Pseudo Selectores - Links


    Voltando aos links, existem alguns pseudo-selectores para os links:

    a:link - estado de um link no visitado; a:visited - estado de um link visitado; a:hover - estado de um link a que estamos a fazer mouse over;

    rst-child
    Outro pseudo-selector til, o rst-child. Usamo-lo para aplicar estilos apenas aos elementos que so os primeiros lhos dos seus pais.! ! ! Por exemplo:! li:rst-child {! " font-weight:bold;! }

    nth-child
    AVISO: Este pseudo-selector funciona em todos os browsers modernos, com a excepo do IE8 e mais antigos.

    Se quisermos seleccionar qualquer lho de um elemento, a seguir ao rst-child, podemos usar o pseudo-selector nthchild.! ! li:nth-child(n){! " text-transform:uppercase;! }! ! Em que o n corresponde posio do elemento lho.

    ! Propriedades
    (algumas)

    Cor
    Quando queremos especicar cores, podemos dar nomes especcos como red, yellow, green, purple ou podemos usar os valores hexadecimais das cores como #ff0000, #ff00ff, #cccccc.! ! Os valores hexadecimais so case-insensitive:! #FFFFFF e #ffffff so a mesma cor!

    Tamanhos: Pixels e Ems


    1 pixel um ponto no monitor do nosso dispositivo.! ! Especicar tamanhos de font (font-size) em pixeis bom quando queremos que o utilizador veja no monitor deles, exactamente aquilo que ns desenhamos no nosso. Claro que isto s vlido se os monitores tiverem dimenses semelhantes.

    Ento e se o utilizador estiver a usar um dispositivo com um monitor totalmente diferente do nosso?

    Para essas alturas, podemos usar a unidade: ems! ! A unidade em uma medida relativa.! 1em equivale ao font-size default de qualquer monitor que o utilizador possa estar a usar.! ! A vantagem desta abordagem, que em vez de dizer ao dispositivo exactamente que tamanho usar, estamos a dizer-lhe:! Olha, 1em o tamanho que costumas usar, portanto 2em ser o dobro desse tamanho, e 0.5em ser metade do mesmo.

    font-family
    Quantas fonts que o CSS conhece anal? ! Depende A maioria dos computadores conhece fonts como a Verdana, Arial, Courier e Garamond, no entanto, cada computador pode ter diferentes fonts instaladas e isso pode fazer com que a experincia visual do nosso site no .! ! As boas notcias que o CSS tem algumas fonts pr-denidas, destinadas a garantir que o utilizador v minimamente o que desejamos que eles vejam.! So elas:
    -

    serif, esta uma font serifada simples. sans-serif, uma font sem serifa, boa para ser lida em ambiente digital cursive, uma font desenhada com aspecto caligrco.

    Ainda assim no temos de escolher apenas uma das trs fonts mencionadas.! ! Podemos dizer ao CSS para testar vrias fonts, e que escolha a primeira que encontrar no nosso computador. Por exemplo:! ! p {! " font-family: Tahoma, Verdana, sans-serif;! }! ! O CSS vai tentar aplicar a Tahoma primeiro, se no a encontrar passa para a Verdana e se ainda assim o computador no a tiver instalada ento passa para a sans-serif.! ! por isso importante que a ltima font da nossa regra seja uma das trs prdenidas pelo CSS.

    Posicionamentos

    Para aprendermos a posicionar elementos numa pgina web temos primeiro de falar de duas maneiras de controlar a forma como os nossos elementos ocupam espao na pgina e se posicionam entre si.

    Display

    Para controlar a forma como os elementos ocupam espao na pgina, usamos a propriedade display.! Quatro dos valores possveis (e mais usados), so:! ! block: Este valor transforma o nosso elemento num bloco que ocupa a totalidade da largura do container onde se encontra, no permitindo que os outros elementos se posicionem ao lado dele.! ! ! inline-block: Este valor transforma o nosso elemento num bloco, mas vai permitir que outros elementos quem ao lado dele na mesma linha. (IE8+)! inline: Este valor faz com que o elemento que em linha com outros elementos. mas sem o transformar num bloco. S ocupa o espao que precisa e no a totalidade da linha.! ! none: Faz o elemento e todo o seu contedo desaparecer da pgina.

    CSS Box Model

    Todos os elementos so como pequenas caixas ou recipientes que levam o contedo (texto e/ou imagens) que especicamos.! ! O CSS Box Model , por sua vez, uma caixa que engloba os elementos HTML, e consiste em: Margin, Border, Padding e o Contedo.! ! O box model o que nos permite espaar os elementos em relao a outros elementos e dar-lhes uma border.

    Margin: Limpa uma rea em redor do elemento. A margem no tem cor de background.! ! Border: uma border que engloba o contedo e o padding.! ! Padding: Limpa uma rea em redor do contedo. O padding afectado pela cor de background do elemento.! ! Content: Diz respeito ao contedo do elemento, e onde as imagens e o texto aparecem.

    Margin e Padding
    Para especicar qual a margem e/ou padding que queremos que um qualquer elemento tenha, podemos faz-lo da seguinte forma:
    margin-top: /* valor */! margin-right: /* valor */! margin-bottom: /* valor */! margin-left: /* valor */ padding-top: /* valor */! padding-right: /* valor */! padding-bottom: /* valor */! padding-left: /* valor */

    Tambm podemos denir as margins e paddings de um elemento na mesma linha, de uma s vez. Para isso basta-nos comear na margin top e continuar no sentido dos ponteiros do relgio (do topo para a direita para o fundo para a esquerda).! Por exemplo:

    margin: 1px 2px 3px 4px;

    padding: 1px 2px 3px 4px;

    Borders
    Para denirmos o estilo da border que queremos que um elemento de HTML tenha, podemos faz-lo assim:
    border-width: 1px;! border-color: black;! border-style: solid;

    Ou podemos tambm usar uma notao curta e escrever a regra numa linha, da seguinte forma: border: 1px solid black;

    Float
    Agora que sabemos como construir os elementos individualmente, como determinamos para onde vo eles na pgina?! ! Uma das formas que podemos usar usando oats. Quando usamos um oat num elemento da pgina, estamos a dizer pgina:! - Vou dizer-te onde deves por este elemento, mas tens de o por no ow dos outros elementos.! ! ! Isto signica que se tivermos vrios elementos a utuar, eles sabem que os outros l esto e no se sobrepem.! Se pensarmos numa pgina de HTML como sendo o mar, ento os elementos sero os barcos que nele utuam, e que ocupam o seu espao, sabem onde os outros esto e se desviam uns dos outros.! ! A propriedade oat pode assumir os valores left e right.

    Clear
    Infelizmente, por vezes, misturamos elementos com oats com outros sem oats. E quando isso acontece, os elementos acabam uns em cima dos outros.! ! nessa altura que entra a propriedade clear. Pode assumir os valores, left, right e both.! ! Se dissermos a um elemento para fazer clear:left, ento ele vai imediatamente mover-se para baixo dos elementos no lado esquerdo da pgina. O mesmo vlido para o clear:right mas para o lado direito.! Se lhe dissermos clear:both, ento o elemento vai sair do caminho dos elementos que esto a utuar esquerda e direita.

    Position
    Passemos agora para mtodos de posicionamento um pouco mais complexos.! ! ! Se no especicarmos nenhum tipo de posio, ento o valor da posio, por omisso, ser static! O que isto quer dizer que o elemento vai para onde normalmente iria. Se no dissermos a um elemento para onde ir, ento ele cola-se ao documento.

    Posio absoluta

    Quando damos a um elemento uma posio absoluta, estamos a posicion-lo absolutamente em relao ao primeiro elemento pai que no tenha position:static. Se tal elemento no existir, ento o elemento com position:absolute, posiciona-se em relao ao <html>.

    Posio relativa
    A posio relativa um pouco mais linear: diz a um elemento para se mexer relativamente ao sitio onde caria se tivesse posio esttica.! ! Se dermos position:relative a um elemento, e lhe dissermos para ter uma margin-top de 10px, ele ento no se move 10px para baixo em relao a uma coisa em particular, move-se 10px para baixo em relao onde caria se tivesse position:static.

    Posio xa

    Ao darmos position:xed a um elemento, ele ca como que colado janela do browser.! ! Se zermos scroll para cima e para baixo, o elemento com posio xa ca quieto mesmo quando os outros se movem.

    Potrebbero piacerti anche