Como criar Estilos de páginas para o modelo de HTML5 e CSS3 site
Com um quadro HTML no lugar, você pode começar a trabalhar na CSS para criar estilos de página em seu site. A melhor maneira de incorporar CSS3 é seguindo estes passos:
Comece com o diagrama de modelo de página.
Ele deve ter todas as informações que você precisa.
Teste o seu CSS em um navegador.
Começar com uma implementação CSS simples que garante que você tenha os nomes certos para todos os elementos da página. Em seguida, modificar cada elemento de acordo com seu documento de design, testando como você vai.
Implementar o CSS a partir do seu diagrama.
Você deve ser implementação o desenho que você já criou, não desenho a página. (Isso já aconteceu no processo de diagramação.)
Salve o design.
Para projetos de várias páginas, CSS externa em um arquivo separado é definitivamente o caminho a percorrer. Como você trabalha, salvar a CSS no modo normal assim que o navegador será capaz de lê-lo.
Testar e ajustar.
As coisas nunca são bastante o que parecem com CSS porque os navegadores não conformidade com as normas de forma igual. Você precisa testar e ajustar em outros navegadores. Se os usuários com tecnologias mais antigas são uma preocupação, você pode ter que usar uma folha de estilo secundário para versões mais antigas do IE. Você também pode querer fazer uma versão móvel.
Repita o procedimento para outros modelos.
Repita esse processo para cada um dos outros modelos que você identificou no seu diagrama site.
O resultado deste processo deve ser um número de arquivos CSS que você pode facilmente reutilizar em seu site.
Aqui está o código CSS para a página principal:
body {background-color: # 000000-} h1 {text-align: center-font-family: sans-serif-color: white-text-shadow: 0 0 10px preto -} # tudo {background-color: white-fronteira : 1px solid black-width: 800px; margin-top: 2em-margin-left: auto-margin-right: auto-min-height: 600px;} # título {background-color: # A11204-background-image: url ( "cbBackground.png") - color: # FFFFFF-height: 100px; font-size: 2em-padding-left: 1em-border-bottom: 3px black-margin-top sólido: -1.5em -} # {Menu do fundo image: url ( "cbBackground.png") - background-color: # A11204-color: # FFFFFF-float: left; width: 100px; min-height: 500px;} # Menu li {list-style-type: none; margin-left: -2em-margin-right: .5em-text-align: center -} # menu a {color: # FFFFFF-display: block-border: # A11204 3px início-text-decoration: none;} Menu # . a: hover {border: # A11204 3px inset -} conteúdo {border: 3px dupla # A11204-margin: 1em-margin-left: 110px; padding-left: 1em-padding-bottom: 1em-padding-right: 1em- border-radius: 5px; box-shadow:. 5px 5px 5px cinza -} h2 conteúdo {background-color: # A11204-background-image: url ( "cbBackground.png") - color: # FFFFFF-text-align: right ;} # rodapé {color: # FFFFFF-background-color: # 000000-border: 1px solid # A11204-float: left; clear: both-width: 100% -text-align: center,}