Siga-nos em...
Follow us on Twitter Follow us on Facebook Watch us on YouTube
Registro

Alpha Servers
Resultados 1 a 4 de 4
  1. #1

    Avatar de DarkADM
    Data de Ingresso
    Sep 2009
    Localização
    Vivo com minha mãe
    Posts
    8
    Agradecido
    0
    Agradeceu
    0
    Peso da Avaliação
    0

    Padrão Tutorial básica sobre css.

    Bom, tem muita gente que programa sites mas não sabe o que é CSS, é uma linguagem para estilos que define o layout de documentos HTML, ou PHP. Por exemplo, CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais, é muito útil pois você não precisará ficar mechendo arquivo por arquivo, para mudar, cores, marguens, tam. de fontes e etc.

    1° - Benefícios do css.

    - controle do layout de vários documentos a partir de uma simples folha de estilos;
    - maior precisão no controle do layout;
    - aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.);
    - emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.

    2° - Criando o .css e botando o script nele. (criar e configurar um script simples usando o DW ou o bloco de notas)

    Código:
    Ex 1 : body {background-color: #FF0000; margin: 0px; }
    Aqui voce estária configurando o background geral da página e a margem dela, o "body" é a página inteira,use sempre o ";" para separar as propriedades "{" para iniciar o código e "}" para fechar o código, crie um arquivo .css para botar o script (aconselho usar o DreamWeaver) entenda um pouco mais nesta imagem.



    Código:
    Ex 2 : .menuprin {background-color:#000000; padding: 0px 0px 0px 0px; }
    Aqui estamos configurando uma table que supostamente seria o menu superior do site, se você deseja usar ela somente uma vez no site utilize "#" antes do script, mas como usarei denovo, botei "." antes do script.


    3° - Integrando o que você fez no .css em seu site

    Quando o arquivo vem de fora do seu arquivo php, por exemplo.



    Neste caso o script para você botar em seu "index.php" no caso seria:

    Código:
    <html>
      <head>
        <title>Meu documento</title>
        <link rel="stylesheet" type="text/css" href="style/style.css" />
    
      </head>
      <body>
    Este link informa ao navegador para usar o arquivo CSS na renderização e apresentação do layout do documento HTML ou PHP, ou seja, com uma mudança no .css, você podera mudar em todos os arquivos do site por um único arquivo sem ter nescessidade de ficar mudando arquivo por arquivo. Veja um exemplo na imagem abaixo.



    Agora, incluindo o script na sua tabela, se lembram do ".menuprin" ??

    Código:
    <td class="menuprin"></td>
    Pronto, você agora pode manuziar essa tabela do jeito que quizer em vários arquivos modificando apenas um arquivo, espero que tenham gostado. E se eu tiver explicado algo errado me corrijam, pois é meu primeiro tutorial e também quem tiver alguma dúvida entrar em contato comigo via MP.

    Créditos

    - DarkADM, por montar e fazer a tutorial.
    - Html.net, por fornecer as imagens.

  2. #2

    Avatar de BrokeN
    Data de Ingresso
    May 2010
    Localização
    Dourados, MS
    Posts
    65
    Agradecido
    2
    Agradeceu
    2
    Peso da Avaliação
    14

    Padrão

    Uma coisa, quando for utilizar os estilos, coloque um parametro por linha...

    exemplo:

    Código:
    .menuprin {
    background-color:#000000;
    padding: 0px 0px 0px 0px;
    }
    Fica mais organizado, e de melhor entendimento!

    Igual, imagina se eu decido fazer esse mesmo modo no meu arquivo CSS, essa parte aqui ficaria muito complicado de entender:

    Código:
    #menu {
    position:relative;
    width:790px;
    height:35px;
    top:0px;
    left:5px;
    right:5px;
    background:url(../../images/back/menu.jpg) repeat-x;
    list-style:none;
    float:left;
    font-size:16px;
    line-height:35px;
    }
    Tudo em uma unica linha:
    Código:
    #menu { position:relative; width:790px; height:35px; top:0px; left:5px; right:5px; background:url(../../images/back/menu.jpg) repeat-x; list-style:none; float:left; font-size:16px; line-height:35px; }
    Então, colocar tudo em uma nova linha fica mais organizado!

  3. #3

    Avatar de FelipeSF
    Data de Ingresso
    Jun 2010
    Localização
    São Paulo
    Idade
    29
    Posts
    10
    Agradecido
    0
    Agradeceu
    0
    Peso da Avaliação
    0

    Padrão

    Bom como nosso amigo BrokeN disse... Para alguns é melhor em uma única linha, mas vai por cada um... eu já não gosto tudo em uma só linha... Não entendo nada woeiwoweiewowei...

  4. #4

    Avatar de BrokeN
    Data de Ingresso
    May 2010
    Localização
    Dourados, MS
    Posts
    65
    Agradecido
    2
    Agradeceu
    2
    Peso da Avaliação
    14

    Padrão

    @FelipeSF

    Eu uso em uma só linha quando é coisa simples, de no máximo 2 parametros, ai sim compensa utilizar 1 unica linha...

    Agora, quando é grande, nem compensa, fica mto **** de entender

 

 

Informações de Tópico

Usuários Navegando neste Tópico

Há 1 usuários navegando neste tópico. (0 registrados e 1 visitantes)

Tópicos Similares

  1. |Dúvida| Tutorial sobre Sniffer's
    Por Anonymous_jovem no fórum Pedidos
    Respostas: 0
    Último Post: 17-01-2015, 11:59 PM
  2. |Dúvida| Sobre tutorial chris05
    Por mudestroyer no fórum Dúvidas
    Respostas: 1
    Último Post: 16-02-2013, 12:25 PM
  3. [Tutorial] Segurança Basica no seu server
    Por ADM_Noturno no fórum Servers
    Respostas: 6
    Último Post: 29-09-2012, 10:28 PM
  4. |Download| Apostila Básica De Php
    Por Matcher no fórum Downloads
    Respostas: 4
    Último Post: 15-04-2012, 07:49 PM
  5. |Vídeo-aula| Sign GFX Básica
    Por John Smith no fórum Vídeo-aulas
    Respostas: 0
    Último Post: 26-07-2011, 12:49 PM

Marcadores

Permissões de Postagem

  • Você não pode iniciar novos tópicos
  • Você não pode enviar respostas
  • Você não pode enviar anexos
  • Você não pode editar suas mensagens
  •