Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Tutorial de CSS para o Desenvolvimento Das Aulas: Michael Marques

    Enviado por

    Diego Fernandes de Oliveira
    15 visualizações18 páginas

    Título original

    Css

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    15 visualizações18 páginas

    Tutorial de CSS para o Desenvolvimento Das Aulas: Michael Marques

    Enviado por

    Diego Fernandes de Oliveira

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 18

    Tutorial de CSS para o desenvolvimento das aulas

    Michael Marques

    Corpo do Documento

    Declarando o css no head do HTML


    Apenas insira o cdigo abaixo no head:
    <style type="text/css" media="screen"> @import url("style.css"); </style>

    <body>
    As configuraes do body so declaradas no CSS.
    body{ background-color: #e8eae8; color: #5d665b; margin: 50px; font-family: Verdana, Geneva, Arial, sans-serif; font-size: small; line-height: 180%; }

    Ttulos

    <h1>
    Ttulo principal.

    Exemplo:
    <h1>Introduo Lgica</h1>

    #content h1 { background:#bac7d3 url('barra.jpg') no-repeat center top; background-color:#d4dde4; color:#000; font: bold 24px/1.8 Arial, Helvetica, sans-serif; text-align:center; margin-bottom:1.5em; }

    <h2>
    Ttulo secundrio.

    Exemplo:
    <h2>O que lgica?</h2>
    #content h2 { background:#bac7d3 url('bg-h2.jpg') no-repeat left top; height:2.4em; border:1px solid #ccc; color:#333; font: 18px/1.6, Verdana, Arial, Helvetica, sans-serif; line-height:2.4; margin:1.0em 0; padding-left:15px; }

    <h3>
    Ttulo alm do secundrio...

    Exemplo:
    <h3>3.1.3 Estrutura final de um programa</h3>
    #content h3 { background-color:#d4dde4; height:1.6em; border:0px solid #ccc; color:#333; font-size:14px; line-height:1.4; padding-left:15px; width: 50%; }

    <h5>
    Utilizado para o ttulo Exerccios

    Exemplo:
    <h5>Exerccios</h5>
    #content h5 { background-color:#aeb2b8; height:1.6em; border:0px solid #ccc; color:#333; font-size:14px; line-height:1.4; padding-left:15px; width: 40%; }

    Dentro dos pargrafos

    <p>
    Pargrafo de texto.

    Exemplo:
    <p>Todo algoritmo apresenta uma estrutura bsica para funcionar. Ele precisa ser...</p>
    p{

    margin:1.0em 0; font-size:14px; line-height:1.4; text-align:justify; text-indent: 3em;

    <em>
    Deixa o texto em itlico. Pode ser utilizado em qualquer tag. O <em> substituto do <i> do HTML, que no mais usado.

    Exemplo:
    <em>Esse texto fica em itlico.</em>

    <strong>
    Deixa o texto em negrito. Pode ser utilizado em qualquer tag. O <strong> substituto do <b> do HTML, que no mais usado.

    Exemplo:
    <em>Esse texto fica em negrito.</em>

    <abbr>
    Cria uma tooltip, isto , uma palavra sublinhada com texto explicativo.

    Exemplo:
    <abbr title="Variveis so bla bla bla">variveis</abbr>.
    abbr[title], acronym[title] { border-bottom:1px dashed #039; cursor:help; } abbr { speak:spell-out; border:none; } acronym { speak:normal; border:none; }

    Cdigos

    <pre><code>
    Cdigo e texto puro.

    Exemplo:
    <pre><code> Programa &#60NomeDoPrograma&#62 </pre></code>

    <pre class=j><code>
    Cdigo Java.

    Exemplo:
    <pre class=j><code> public static void main(String args) { } </pre></code>

    <pre class=s><code>
    Sada do programa, isto , quando queremos representar as mensagens produzidas pelo programa.

    Exemplo:
    <pre class=s><code> O nome dele Joo. </pre></code>

    CSS utilizado no NetBeans


    Para formatar os cdigos Java exatamente com a formatao do NetBeans, deve-se seguir o seguinte procedimento:

    Fazer o cdigo no NetBeans Ir em Arquivos -> Imprimir em HTML.... Abrir a pgina gerada e visualizar o seu cdigo HTML.

    Copiar entre as tags <pre class=j><code> a parte que representa o programa.

    pre code { color:#039; } code, { color:#f60; font: 1.1em, "Courier New", courier, monospace; } pre { display:block; width:96%; overflow:auto; white-space:pre; background-color:#eff2f5; font: 11px,"Courier New", courier, monospace; line-height:1.4em; margin:2.0em 0; padding:1%; border:1px solid #ccc; padding-top: 0px;

    } pre.s{ display:block; width:96%; overflow:auto; white-space:pre; background-color:#ffffee; font: 1.1em, "Courier New", courier, monospace; line-height:1.2em; margin:2.0em 0; padding:1%; border:1px solid #ccc; padding-top: 0px; } pre.j{ display:block; width:96%; overflow:auto; white-space:pre; background-color:#ffffff; background:#ffffff url('java.jpg') no-repeat center center; font: 1.1em, "Courier New", courier, monospace; line-height:1.2em; margin:2.0em 0; padding:1%; border:1px solid #ccc; padding-top: 0px; } /* Para o cdigo NetBeans */ .java-numeric-literals {color: #780000}

    .java-keywords {color: #000099; font-family: Monospaced; font-weight: bold} .java-layer-method {font-family: Monospaced; font-weight: bold} .java-string-literal {color: #99006b} .java-block-comment {color: #3f7f5f}

    DIV's

    <div class="ex">
    Apenas deixa o texto em itlico.

    Exemplo:
    <div class="ex">Exemplo:</div>
    .ex{

    font-style: italic; margin:1.0em 0; font-size:1.1em; line-height:1.0; text-align:justify;

    <div class="nota">
    Nota de ateno ao aluno!

    Exemplo:
    <div class="nota"> Quando estudarmos o conceito de modularizao, ficar mais fcil compreender a importncia e utilizao das variveis locais e globais. </div>

    <div class="java">
    Nota de ateno para uma particularidade do Java.

    Exemplo:
    <div class="java"> O comando this mais utilizando quando... </div>

    <div class="desafio">
    Utilizamos quando queremos que o aluno faa determinado desafio.

    Exemplo:
    <div class="desafio"> Faa o mesmo algoritmo, modificando... </div>

    <div class="dica">
    Representa uma dica.

    Exemplo:
    <div class="dica"> Esse cdigo tambm pode ser representado... </div>

    <div class="livro">
    Para referenciar o material estudado com o livro-texto.

    Exemplo:
    <div class="livro"> Para aprofundar seu conhecimento, consulte o livro texto (Puga, 2003) no captulo 5, pgina 54. </div>

    <div class="erro">
    Para alertar de um erro comum de programao.

    Exemplo:
    <div class="livro"> Para aprofundar seu conhecimento, consulte o livro texto (Puga, 2003) no captulo 5, pgina 54. </div>

    A maioria dos div's so iguais, trocando apenas a imagem.


    .nota{

    display:block; width:96%; white-space:normal; background:#e8eae8 url('nota.png') no-repeat left top; font: 14px "Arial", monospace; font-family: Arial, sans-serif; line-height:1.1em; margin:2.0em 0; margin-left: 10px; padding:1%; padding-top: 15px; padding-left: 60px; font-style: italic; }

    Imagens, links e tabelas

    <img>
    As imagens so geralmente declaradas como class=center, o que deixa-as centralizadas.

    Exemplo:
    <img src="fila.png" alt="Reprentao de uma fila" class="center" />
    img.center { margin-left: auto; margin-right: auto; display: block; }

    <a>
    Links devem ser da class=links.

    Exemplo:
    <a class="links" target="_blank" href="http://www.uol.com.br">http://www.uol.com.br</a>
    a.links:link { color: #6a5e7e; } a.links:visited { color: #8066b0; }

    Tabelas
    Tabelas devem ficar dentro das div's center, pois devem ficar centralizadas. O melhor desenvolver as tabelas usando o NVU, para depois inserir o cdigo gerado no HTML da aula.

    Exemplo:
    <div class="center"> <table></table>

    </div>
    <div class="center"> table tr td{ padding:1px 8px; }

    Listas

    <ul><li>
    Lista de elementos simples.

    Exemplo:
    <ul class="circle"> <li>Se A for verdadeiro e B for verdadeiro, ento a concluso verdadeira.</li> <li>Se A for verdadeiro e B for falso, a concluso falsa pois a expresso e designa que todos os elementos so uniformes.</li> </ul>

    Outras listas
    Ainda possvel implementar listas com circulos, quadrados, imagens, listas numeradas, etc.

    Exemplo:
    <ul class="circle"> <li></li> </ul> <ul class="square"> <li></li> </ul> <ul class="image"> <li></li> </ul>
    ul{ font-size: 14px; font-family: Verdana, Geneva, Arial, sans-serif; } ul.circle { list-style-type: circle; } ul.square { list-style-type: square; }

    ul.image { list-style-image: url(link.gif); }

    Caracteres Especiais
    As vezes preciso declarar utilizar alguns caracteres especiais que no podem ser reconhecidos diretamente pelo browser. A tabela de caracteres facilmente encontrada na Internet.

    <
    representado pelo cdigo &#60

    >
    representado pelo cdigo &#62

    Exemplo:
    switch (&#60varivel&#62)

    Tutoriais CSS
    Os melhores tutoriais sobre CSS so encontrados em:

    http://www.maujor.com/ http://www.pt-br.html.net/tutorials/css/

    Você também pode gostar