Entrar Ainda não tem acesso?
4
respostas

Em qual ordem devo seguir p/ escrever os códigos no css?

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Um pouquinho de posicionamento e atividade Um pouquinho de posicionamento

por Ross Mesquita
| 8.4k xp | 1 posts

Olá pessoal,

Volta e meia me deparo com a seguinte dúvida: "Em qual parte do código devo colocar o item X que quero alterar no CSS?" Pois no html tem a propria estruturação que ajuda (body, main etc). Além disso, notei que nos videos existe um arquivo css separado p/ bio e site, diferente do material que vcs disponibilizam ao longo das aulas (perdi o meu, pois acabei precisando trocar de HD e não fiz backup), aonde consta apenas um (site.css). Pelo que tenho visto é tipo trocar seis por meia duzia, mas fico pensando se em situações fora dessa, isso faz alguma diferença. Tem algum metodo mais aconselhado, ou ainda, padronizado?

Obrigado!

4 respostas
por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

Eu te aconselho a usar um CSS para cada pagina que você tenha, e (se é que entendi bem) os elementos não precisam estar em uma ordem dentro de body mais eles tem que estar dentro de body contudo você consegue pegar qualquer elemento dentro do seu CSS utilizando uma class ou id e até mesmo tag mais não pode se esquece de declarar o arquivo CSS no seu head ex.:

/*   ARQUIVO.CSS   */
body {
    background-color: lightblue;
}

h1 {
    color: white;
    text-align: center;
}

p {
    font-family: verdana;
    font-size: 20px;
}
/* <<<<FIM DO CSS>>>> */

<!--  ARQUIVO.HTML  -->
<!DOCTYPE html>
<html>
   <head>
    <!-- O href recebe o nome do arquivo css -->
     <link rel="stylesheet" type="text/css" href="arquivo.css">
   </head>
   <body>
       <h1 id="titulo">CSS Examplo</h1>

       <p class="texto">Um parágrafo para exemplo</p>
   </body>
</html>
<!--  <<<FIM DO HTML>>>  -->

espero ter ajudado. ;)

por jefferson cândido romeiro
| 247.7k xp | 2 posts

Olá Ross,

O último capítulo do curso explica que é recomendado ter um arquivo CSS principal, com elementos que serão usados por todas as páginas (ex: rodapé, página de navegação, h1, body... etc), e separar em arquivos CSS distintos elementos que só são usados por uma determinada página, como por exemplo os elementos blockquote e cite na página bio.html (criando um arquivo bio.css) e os elementos article e leia-mais na página blog.html (criando um arquivo blog.css). A ideia é descomplicar a estrutura do CSS não deixando tudo em um arquivo só, facilitando até mesmo a manutenção do código.

Dessa forma, a chamada para o blog.html buscaria a formatação geral que é usada em todas as páginas e os elementos específicos do blog:

<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/blog.css">

E a mesma coisa aconteceria com o bio.html:

<link rel="stylesheet" href="css/site.css">
<link rel="stylesheet" href="css/bio.css">

Espero ter conseguido responder sua dúvida. Boa sorte e bons estudos!

por Gabriel Pereira
| 111.5k xp | 71 posts

Olá Ross, tudo bem?

O Jefferson já disse tudo, realmente o ideal seria criar um CSS Padrão, digamos assim, onde ele vai conter basicamente o layout do seu site, que vai estar presente em todas as páginas, então a edição do header, main, footer por exemplo, são edições que vai ser igual em todas as páginas, então você cria um CSS apenas para eles. É interessante ter um CSS para cada página específica, por que cada página do seu site vai ter uma peculiaridade que apenas aquela página vai ter, então é interessante separar o CSS, para caso você precise fazer alguma manutenção, fique mais fácil de achar os elementos.

Agora, eu costumo usar bastante comentários no meu CSS para separar partes e me ajudar a compreender o que os elementos irão fazer. E para facilitar a leitura eu separo igual o HTML, então começo no header e desço até o footer, fica mais ou menos assim:

/*HEADER*/
nav ul{ 
    background:rgba(105,105,105, 0.6);
    border-radius: 7px;
    border-left: 10px solid #004080;
    list-style: none;
    display: inline-block;
    position: fixed;
}

.icon {
    display: inline-block;
    float: right;
    padding: 0 8px;
    margin-top: 6px;
    opacity: .7;

}
/*FIM HEADER*/

/*MAIN*/
h1 {
    font-size: 3em;
    color: red;

}

p {
    text-align: justify
    font-size: .5em;
    color: #ccc;
}
/*FIM MAIN*/

/*ASIDE*/
code here...
/*FIM ASIDE*/

/*FOOTER*/
.footer { 
    padding:8px 0;
    min-width: 100%;
    background-color: black;
    position: fixed;
    bottom: 0;
}
footer p {
    font-size: 1em;
    text-align: center;
}
/*FIM FOOTER*/

PS: Esse CSS Não faz sentido

Bom enfim, eu costumo organizar assim meu CSS para melhor leitura minha, além de fazer um CSS Padrão e outros para cada página.

Espero ter ajudado e bons estudos!

por Jeferson Natanael
| 192.9k xp | 98 posts
Analista de Sistema

Espero ter ajudado e bons estudos. :)