Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Capitulo 2 - Cascade Sheet Styles

    Enviado por

    Alexandre Lourenço
    6 visualizações18 páginas
    Este documento apresenta os conceitos básicos de folhas de estilos CSS, incluindo como criar seletores de classes e IDs, definir propriedades de texto, hiperligações e fundos, e vincular folhas de estilos externas a páginas HTML.

    Descrição original:

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PPTX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Este documento apresenta os conceitos básicos de folhas de estilos CSS, incluindo como criar seletores de classes e IDs, definir propriedades de texto, hiperligações e fundos, e vincular folhas de estilos externas a páginas HTML.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    6 visualizações18 páginas

    Capitulo 2 - Cascade Sheet Styles

    Enviado por

    Alexandre Lourenço
    Este documento apresenta os conceitos básicos de folhas de estilos CSS, incluindo como criar seletores de classes e IDs, definir propriedades de texto, hiperligações e fundos, e vincular folhas de estilos externas a páginas HTML.

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PPTX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    Sistemas de

    Informação

    CAPITULO 1 10º Ano


    Curso Profissional
    Técnico de Multimédia

    CSS – Cascade
    Sheet Styles Prof. Alexandre Lourenço
    Objectivos
     criar documentos utilizando estilos;
    Selector de classes

    .selector_classe {propriedade: valor;}


    Estilos
    <html>
    <head>
    <style type="text/css">
    p{color:green}
    </style>
    </head>
    <body>
    <p> Texto com a cor verde definido pelo estilo</p>
    </body>
    </html>
    Estilos
    <html>
    <head>
    <style type="text/css">
    p{color:green}
    </style>
    </head>
    <body>
    <p style="color:red">
    Estilos: Qual é a cor deste texto?
    <p> Estilos: Qual é a cor deste texto?</p>
    </body>
    </html>
    Estilos: tipo de letra
    Folha de estilos
    h3 {
    border-style: dotted;
    background-color: #00FF00;
    border-width: 1px;
    color: #FF0000;
    word-spacing: 1cm;
    text-align: center;
    text-decoration : overline;
    }
    Folha de estilos - Formatação de texto
    p{
    font-size: 12px;
    font-family: times;
    margin-left: 10%;
    text-indent: 1cm
    text-transform : capitalize;
    }
    Folha de estilos css
    i{
    text-transform: uppercase;
    }

    b{
    text-decoration: underline;
    color: #00FF00;
    }
    Estilos: fundos
    Outro exemplo estilos css
    body{background-image:url(“imagem.gif");
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center}

    p{color:red; font-size:18pt}

    P:first-letter {color:#ff0000; font-size:xx-large}

    .class1 {font: 14pt Arial}


    .class2 {font: 18pt Verdana}
    Hiperligações
    a.ligacao:link{color:green}
    a.ligacao:visited{color:red}
    a.ligacao:hover{color:yellow}

    a{
    text-decoration: none;
    }
    Definição personalizadas
    .red{font-family: Arial; color:red}

    #inst{color:yellow}
    ul{list-style-type: circle}
    Criação de uma folha de estilos
     Ficheiro com o formato css

     Exemplo:
     Criar o ficheiro estilos.css e colocar no seu
    conteúdo:
    .a1{background-color:green}
    .a2{background-color:red}
    Ligação de uma folha de estilos a uma página HTML
    <html>
    <head>
    <link rel="stylesheet" type="text/css“
    href="estilo.css" />
    </head>
    <body>
    (….)
    </body>
    </html>
    <table>
    Utilização de classes
    <th>Numero </th><th>Nome</th>
    <tr class="a1">
    <td>1</td>
    <td>Ana</td>
    </tr>
    <tr class ="a2" >
    <td>2</td>
    <td>Pedro</td>
    </tr>
    <tr class="a1">
    <td>3</td>
    <td>Luis</td>
    </tr>
    <tr class="a2">
    <td>4</td>
    <td>maria</td>
    </tr>
    </table>
    Importar folha de estilos
    @import “estilos.css";
    p{color:green}

    Você também pode gostar