criando sites com estilos

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>

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

http://www.w3schools.com/

http://www.w3schools.com/

criando sites com estilos

Technology