CRIANDO SITES COM ESTILOS CSS Cascading Style Sheets
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
CRIANDO SITES COM ESTILOSCSSCascading Style Sheets
DEFINIÇÃOCascading Style Sheets (CSS) é uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. O seu principal benefício é a separação entre o formato e o conteúdo de um documento.Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.
<LINK REL="STYLESHEET" HREF="STYLE/SCREEN.CSS" TYPE="TEXT/CSS" MEDIA="SCREEN"/>
Link com o arquivo CSS (Só precisa estar na mesma pasta do arquivo)
EXEMPLO DE CÓDIGO PARTE I/*screen.css*/body {
margin: 0;padding: 0;background: #7a2122 url('../images/body_bg.gif') repeat-x top;font-family: Helvetica, sans-serif;font-size: 62.5%;color: #333;
}
h1, h2, p, ul, li {margin: 0;padding: 0;
}
Todos estes elementos compartilham as mesmas regras.
EXEMPLO DE CÓDIGO PARTE IIp {
font-size: 1.4em;line-height: 1.4em;
}
ul {list-style-type: none;
}
a:link, a:visited {color: #333;background: #eee;
}span.amp {
font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;font-weight: normal;font-style: italic;
}
Remove os marcadores da lista não ordenada.
EXEMPLO DE CÓDIGO PARTE III#masthead {
margin: 0 auto;margin-top: 20px;width: 800px;color: #fff;
}
#masthead h1 {float: left;
}
“margin: 0 auto” centraliza o site inteiro no navegador
EXEMPLO DE CÓDIGO PARTE IV#nav {
float: right;margin: 50px 10px 0 0;font-size: 1.4em;
}
#nav li {display: inline;margin: 0 0 0 20px;
}
#nav li a {color: #fff;text-decoration: none;background: none;
}
Configurações do Navegador do Site
Nos links devemos definir a cor nos elementos em si. Os links não adotarão a cor de seus <div>s ou elementos pai.
EXEMPLO DE CÓDIGO PARTE V#wrap {
clear: both;margin: 0 auto;padding: 10px;width: 780px;background: #fff;border: 10px solid #5c0505;
}
A classe #wrap está definindo as cores da página, bordas, tamanhos e espaçamentos
EXEMPLO DE CÓDIGO PARTE VI
#header img {border: 10px solid #ccc;
}
#header h1 {font-size: 2em;margin: 10px 0 0 0;padding: 10px;text-align: center;background: url('../images/tagline_bg.gif')
repeat-x;}
Configurações do Cabeçalho da página, definindo a fonte, margem, espaçamento, alinhamento do texto e imagem (logo da empresa)
O fundo no título do cabeçalho é colocado usando o CSS
EXEMPLO DE CÓDIGO PARTE VII#content, #sidebar {
width: 360px;margin: 20px 0 20px 0;padding: 10px;
}
#content {float: right;
}
#content h2 {font-size: 2.4em;margin: 0 0 10px 0;
}
#content p {margin: 0 0 10px 0;
}
O conteúdo e a seção lateral ficam flutuantes à direita e a esquerda respectivamente, com larguras que são iguais mais ou menos 2/3 para o conteúdo e 1/3 para a seção lateral
EXEMPLO DE CÓDIGO PARTE VIII#link-list {
margin: 20px 0 0 0;font-size: 1.4em;
}
#link-list li {margin: 0 0 10px 0;
}
#sidebar {float: left;background: #eee;
}
#sidebar h2 {font-weight: bold;border-bottom: 1px solid #ccc;margin: 0 0 20px 0;padding: 5px;
}
O conteúdo e a seção lateral ficam flutuantes à direita e a esquerda respectivamente, com larguras que são iguais mais ou menos 2/3 para o conteúdo e 1/3 para a seção lateral
EXEMPLO DE CÓDIGO PARTE IX#port li {
margin: 0 10px 20px 0;float: left;border: 5px solid #ddd;
}
#footer {clear: both;background: #eee;padding: 10px;border-top: 2px solid #ddd;text-align: center;color: #777;
}
Configurações do Rodapé (footer) Tamanho, cor, espaçamento fontes, bordas
ALGUNS SIGNIFICADOS Background: Fundo (podemos definir um plano de
fundo para as páginas do site com imagens ou uma cor de acordo com o estilo do site e seu conteúdo)
Padding: preenchimento (é o espaço reservado com as medidas definidas para o preenchimento com o conteúdo)
Border: Borda (Definição das bordas do site com as suas margens)
Margin: Margem (definição das medidas do site com as suas margens laterais, inferiores e superiores)
Width: Largura (definição das larguras) Float: Flutuador (definição dos elementos que ficam
flutuantes)
CSS EMBUTIDOS NAS PÁGINAS Podemos fazer as páginas com os estilos já
embutidos, porém não é recomendado, pois como já foi comentado, imagine se o cliente desejar fazer uma alteração na cor de fundo do site inteiro, que trabalho teremos ao acessar página por página para alteração.
EXEMPLO DE CSS COM O CÓDIGO HTML<style>body { background-color: #d0e4fe;}
h1 { color: orange; text-align: center;}
p { font-family: "Times New Roman"; font-size: 20px;}</style></head><body>
<h1>My First CSS Example</h1><p>This is a paragraph.</p>
</body></html>
ALGUNS EXEMPLOS EXTRAS DE CSS
<!DOCTYPE html><html><head><style>a:link, a:visited { background-color: white; color: black; border: 2px solid green; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block;}
a:hover, a:active { background-color: green; color: white;}</style></head><body>
<!DOCTYPE html><html><head><style>div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px;}</style></head><body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
<!DOCTYPE html><html><head><style>div { background-color: lightgrey; width: 300px; padding: 25px; border: 25px solid navy; margin: 25px;}</style></head><body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.</p>
<style> div { width: 100px; height: 100px; background-color: red; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s;}/* Chrome, Safari, Opera */@-webkit-keyframes example { from {background-color: red;} to {background-color: yellow;}}
/* Standard syntax */@keyframes example { from {background-color: red;} to {background-color: yellow;}}</style></head><body>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p><div></div><p><b>Note:</b> When an animation is finished, it changes back to its original style.</p>
<style> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s;}
/* Chrome, Safari, Opera */@-webkit-keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;}}
/* Standard syntax */@keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;}}</style>
ESTILOS PARA NAVEGADORESul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1;}
li a { display: block; color: #000; padding: 8px 0 8px 16px; text-decoration: none;}
/* Change the link color on hover */li a:hover { background-color: #555; color: white;}
ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333;}
li { float: left;}
li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none;}
/* Change the link color to #111 (black) on hover */li a:hover { background-color: #111;}
FORMULÁRIOS COM ESTILOS
Parte I<!DOCTYPE html><html><style>input[type=text], select { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;}
input[type=submit] { width: 100%; background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;}input[type=submit]:hover { background-color: #45a049;}
div { border-radius: 5px; background-color: #f2f2f2; padding: 20px;
Parte II - continuação}</style><body>
<h3>Using CSS to style a HTML Form</h3>
<div> <form action="action_page.php"> <label for="fname">First Name</label> <input type="text" id="fname" name="firstname">
<label for="lname">Last Name</label> <input type="text" id="lname" name="lastname">
<label for="country">State</label> <select id="country" name="country"> <option value="australia">Australia</option> <option value="canada">Canada</option> <option value="usa">USA</option> </select> <input type="submit" value="Submit"> </form></div>
</body></html>
<!DOCTYPE html><html><head><style> input[type=text] { width: 100%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: none; background-color: #3CBC8D; color: white;}</style></head><body>
<p>Colored text fields:</p>
<form> <label for="fname">First Name</label> <input type="text" id="fname" name="fname" value="John"> <label for="fname">Last Name</label> <input type="text" id="lname" name="lname" value="Doe"></form>
</body></html>
<!DOCTYPE html><html><head><style> input[type=text] { width: 100%; box-sizing: border-box; border: 2px solid #ccc; border-radius: 4px; font-size: 16px; background-color: white; background-image: url('searchicon.png'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px;}</style></head><body>
<p>Input with icon:</p>
<form> <input type="text" name="search" placeholder="Search.."></form>
</body></html>
<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script></head><body><div class="container"> <h2>Vertical (basic) Form</h2> <form role="form"> <div class="form-group"> <label for="email">Email:</label> <input type="email" class="form-control" id="email" placeholder="Enter email"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password"> </div> <div class="checkbox"> <label><input type="checkbox"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form></div>
</body> </html>
TRANSIÇÕESdiv { width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari */ transition: width 2s;}
BIBLIOGRAFIA E SITOGRAFIAUse a Cabeça! Web Design Ethan Watrall e Jeff Siarto Alta Book Editorashttp://www.w3schools.com
Related Documents
