Layout (CSS)<\/p>\n
N\u00e3o seria \u00f3timo se voc\u00ea pudesse dar \u00e0 sua p\u00e1gina o layout que ela merece?<\/p>\n
Claro! mas como fa\u00e7o isto?<\/p>\n
Para o layout da sua p\u00e1gina use Cascading Style Sheets (CSS) – Folhas de Estilo em Cascata. Nesta li\u00e7\u00e3o voc\u00ea ter\u00e1 uma breve introdu\u00e7\u00e3o \u00e0s CSS. Depois voc\u00ea poder\u00e1 aprender CSS desde o in\u00edcio no nosso tutorial CSS. Assim, considere esta parte apenas um aperitivo.<\/p>\n
CSS \u00e9 a melhor metade do HTML. Codificando, n\u00e3o h\u00e1 melhor parceria: HTML \u00e9 respons\u00e1vel pelo trabalho pesado (a estrutura), enquanto CSS d\u00e1 o toque de eleg\u00e2ncia (layout).<\/p>\n
Como mostrado anteriormente, CSS pode ser adicionado com uso do atributo style. Por exemplo, voc\u00ea pode definir o tipo e o tamanho da fonte em um par\u00e1grafo:<\/p>\n
Exemplo 1:<\/p>\n
\n<p style=\"font-size:20px;\"<\/strong>>Este par\u00e1grafo em tamanho de fonte igual a 20px<\/p>\n<p style=\"font-family:courier;\"<\/strong>>Este par\u00e1grafo em fonte Courier<\/p>\n<p style=\"font-size:20px; font-family:courier\"<\/strong>>Este par\u00e1grafo em fonte Courier e tamanho 20px<\/p>\n<\/code>\n <\/pre>\nSer\u00e1 renderizado no navegador assim:<\/p>\n
Este par\u00e1grafo em tamanho de fonte igual a 20px<\/p>\n
Este par\u00e1grafo em fonte Courier<\/p>\n
Este par\u00e1grafo em fonte Courier e tamanho 20px<\/p>\n
No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no \u00faltimo par\u00e1grafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e v\u00edrgula.<\/p>\n
Est\u00e1 parecendo que h\u00e1 uma grande quantidade de trabalho a executar<\/p>\n
Uma das funcionalidades mais inteligentes das CSS \u00e9 a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada tag, voc\u00ea pode dizer ao navegador como deve ser o layout de todos os textos em uma p\u00e1gina:<\/p>\n
Exemplo 2:<\/p>\n
\n<html>\n \n <head>\n <title>Minha primeira p\u00e1gina CSS<\/title>\t\n \n <style type=\"text\/css\">\n\t h1 {font-size: 30px; font-family: arial}\n\t h2 {font-size: 15px; font-family: courier}\n\t p {font-size: 8px; font-family: times new roman}\n <\/style><\/strong>\n \n <\/head>\n \n <body>\n <h1>Minha primeira p\u00e1gina CSS<\/h1>\n <h2>Bem vindo \u00e0 minha primeira p\u00e1gina CSS<\/h2>\n <p>Aqui voc\u00ea ver\u00e1 como funciona CSS<\/p>\n <\/body>\n \n<\/html>\n<\/code><\/pre>\nNo exemplo acima inserimos as CSS na se\u00e7\u00e3o head do documento, assim ela se aplica \u00e0 p\u00e1gina inteira . Para fazer isto use a tag <style type=”text\/css”> que informa ao navegador que voc\u00ea est\u00e1 digitando CSS.<\/p>\n
No exemplo, todos os cabe\u00e7alhos da p\u00e1gina ser\u00e3o em fonte Arial e tamanho 30px. Todos os subt\u00edtulos ser\u00e3o em fonte Courier tamanho 15. E, todos os textos dos par\u00e1grafos ser\u00e3o em fonte Times New Roman tamanho 8.<\/p>\n
Uma outra op\u00e7\u00e3o \u00e9 a de digitar as CSS em um documento separado. Com as CSS em um documento separado voc\u00ea pode gerenciar o layout de muitas p\u00e1ginas ao mesmo tempo. Muito inteligente, pois voc\u00ea pode mudar de uma s\u00f3 vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de p\u00e1ginas. N\u00f3s n\u00e3o nos aprofundaremos em CSS agora, mas voc\u00ea pode aprender tudo, no futuro, em nosso tutorial CSS.<\/p>\n
O que mais posso fazer com CSS?<\/p>\n
CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, voc\u00ea pode adicionar cores e fundos. A seguir alguns exemplos para voc\u00ea praticar:<\/p>\n
\n<p style=\"color:green;\"<\/strong>>Texto verde<\/p>\n \n<h1 style=\"background-color: blue;\"<\/strong>>Cabe\u00e7alho com fundo azul<\/h1>\n \n<body style=\"background-image: url('http:\/\/www.html.net\/logo.png');\"<\/strong>>\n<\/code>\n <\/pre>\nCSS n\u00e3o \u00e9 nada mais do que cores e tipos de fontes?<\/p>\n
Al\u00e9m de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configura\u00e7\u00e3o e a apresenta\u00e7\u00e3o da p\u00e1gina (margens, flutua\u00e7\u00f5es, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS voc\u00ea ser\u00e1 capaz de criar layouts elegantes e precisos.<\/p>\n
Exemplo 3:<\/p>\n
\n<p style=\"padding:25px;border:1px solid red;\"<\/strong>>Eu amo CSS<\/p>\n<\/code>\n <\/pre>\nSer\u00e1 renderizado no navegador assim:<\/p>\n
Eu amo CSS<\/p>\n
Com a propriedade float um elemento poder\u00e1 “flutuar” \u00e0 esquerda ou \u00e0 direita. O exemplo seguinte ilustra este princ\u00edpio:<\/p>\n
Exemplo 4:<\/p>\n
\n<img src=\"bill.jpg\" alt=\"Bill Gates\" style= \"float:left;\"<\/strong> \/>\n \n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, \n\tsed diam nonummy nibh euismod tincidunt ut laoreet dolore\n\tmagna aliquam erat volutpat. Ut wisi enim ad minim veniam, \n\tquis nostrud exerci tation ullamcorper suscipit \n\tlobortis nisl ut aliquip ex ea commodo consequat...<\/p>\n<\/code>\n <\/pre>\n\n<img src=\"https:\/\/www.turbosite.com.br\/mkt\/tutorial\/html\/turbosite_logo.png\" alt=\"TURBOSITE\" style= \"float:left;\"<\/strong> \/>\n \n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, \n\tsed diam nonummy nibh euismod tincidunt ut laoreet dolore\n\tmagna aliquam erat volutpat. Ut wisi enim ad minim veniam, \n\tquis nostrud exerci tation ullamcorper suscipit \n\tlobortis nisl ut aliquip ex ea commodo consequat...<\/p>\n<\/code>\n <\/pre>\nSer\u00e1 renderizado no navegador assim:<\/p>\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…<\/p>\n
No exemplo mostrado, um elemento (a imagem) flutua \u00e0 esquerda e o outro elemento (o texto) preenche o espa\u00e7o deixado \u00e0 direita.<\/p>\n
Com a propriedade position, voc\u00ea pode posicionar um elemento em qualquer lugar da p\u00e1gina, com precis\u00e3o:<\/p>\n
Exemplo 5:<\/p>\n
<img src=\"https:\/\/www.turbosite.com.br\/mkt\/tutorial\/html\/turbosite_logo.png\" alt=\"TURBOSITE\" style=\"position:absolute;bottom:50px;right:10px;\"<\/strong> \/>\n <\/pre>\nNo exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Voc\u00ea pode colocar em qualquer lugar na p\u00e1gina. Tente voc\u00ea mesmo. F\u00e1cil e legal, eh?<\/p>\n
Legal sim. Mas, f\u00e1cil?<\/p>\n
Voc\u00ea n\u00e3o aprende CSS em 10 minutos. E como foi dito acima, nesta parte voc\u00ea teve apenas uma breve introdu\u00e7\u00e3o \u00e0s CSS. <\/p>\n","protected":false},"excerpt":{"rendered":"
Layout (CSS)
\nN\u00e3o seria \u00f3timo se voc\u00ea pudesse dar \u00e0 sua p\u00e1gina o layout que ela merece?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1980","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1980","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1980"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1980\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1980"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1980"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1980"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}