CSS significa Cascading Style Sheets.<\/p>\n
CSS economiza muito trabalho. Ele pode controlar o layout de v\u00e1rias p\u00e1ginas da web de uma s\u00f3 vez.<\/p>\n
O que \u00e9 CSS?
\nCSS (Cascading Style Sheets) \u00e9 usado para formatar o layout de uma p\u00e1gina da web.<\/p>\n
Com CSS, voc\u00ea pode controlar a cor, a fonte, o tamanho do texto, o espa\u00e7amento entre os elementos, como os elementos s\u00e3o posicionados e dispostos, quais imagens ou cores de plano de fundo ser\u00e3o usadas, diferentes telas para diferentes dispositivos e tamanhos de tela e muito mais. Mais!<\/p>\n
Usando CSS<\/strong><\/p>\n O CSS pode ser adicionado aos documentos HTML de tr\u00eas maneiras:<\/p>\n Inline – usando o style atributo dentro dos elementos HTML No entanto, neste tutorial, usaremos estilos interno e interno, porque isso \u00e9 mais f\u00e1cil de demonstrar e mais f\u00e1cil para voc\u00ea experimentar.<\/p>\n CSS embutido<\/strong><\/p>\n Um CSS embutido \u00e9 usado para aplicar um estilo exclusivo a um \u00fanico elemento HTML.<\/p>\n Um CSS embutido usa o styleatributo de um elemento HTML.<\/p>\n O exemplo a seguir define a cor do texto do <h1>elemento como azul e a cor do texto do <p>elemento como vermelho:<\/p>\n <\/p>\n CSS interno<\/strong><\/p>\n Um CSS interno \u00e9 usado para definir um estilo para uma \u00fanica p\u00e1gina HTML.<\/p>\n Um CSS interno \u00e9 definido na O exemplo a seguir define a cor do texto de TODOS os <\/p>\n <\/p>\n CSS externo<\/strong><\/p>\n Uma folha de estilos externa \u00e9 usada para definir o estilo para muitas p\u00e1ginas HTML.<\/p>\n Para usar uma folha de estilos externa, adicione um link a ela na Tem que chamar o style no head a p\u00e1gina styles.css fica assim<\/p>\n <\/p>\n Cores, fontes e tamanhos CSS<\/strong><\/p>\n Aqui, demonstraremos algumas propriedades CSS usadas com frequ\u00eancia. Voc\u00ea aprender\u00e1 mais sobre eles mais tarde.<\/p>\n A color propriedade CSS define a cor do texto a ser usada.<\/p>\n A font-family propriedade CSS define a fonte a ser usada.<\/p>\n A font-size propriedade CSS define o tamanho do texto a ser usado.<\/p>\n <\/p>\n Preenchimento CSS<\/strong><\/p>\n A padding propriedade CSS define um preenchimento (espa\u00e7o) entre o texto e a borda.<\/p>\n <\/p>\n Margem CSS<\/strong> Link para CSS externo<\/strong><\/p>\n As folhas de estilo externas podem ser referenciadas com um URL completo ou com um caminho relativo \u00e0 p\u00e1gina da web atual.<\/p>\n Exemplo Se for na mesma pasta<\/p>\n Resumo<\/strong> <\/p>\n <\/p>\n
\nDica: A palavra em cascata significa que um estilo aplicado a um elemento pai tamb\u00e9m se aplicar\u00e1 a todos os elementos filhos dentro do pai. Portanto, se voc\u00ea definir a cor do texto do corpo como “azul”, todos os t\u00edtulos, par\u00e1grafos e outros elementos de texto no corpo tamb\u00e9m ter\u00e3o a mesma cor (a menos que voc\u00ea especifique outra coisa)!<\/mark><\/p>\n
\nInterno – usando um <style><\/code>elemento na <head><\/code>se\u00e7\u00e3o
\nExterno – usando um <link><\/code> elemento para vincular a um arquivo CSS externo
\nA maneira mais comum de adicionar CSS \u00e9 manter os estilos em arquivos CSS externos.<\/p>\n<h1 style=\"color:blue;\">Cor azul<\/h1>\r\n\r\n<p style=\"color:red;\">cor vermelha.<\/p>\r\n<\/pre>\n
<\/center>\n<head><\/code>se\u00e7\u00e3o de uma p\u00e1gina HTML, dentro de um <style><\/code>elemento.<\/p>\n<h1><\/code>elementos (nessa p\u00e1gina) para azul e a cor do texto de TODOS os <p><\/code>elementos para vermelho. Al\u00e9m disso, a p\u00e1gina ser\u00e1 exibida com uma cor de fundo “p\u00f3 azul”:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {background-color: powderblue;}\r\nh1 {color: blue;}\r\np {color: red;}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>T\u00edtulo azul<\/h1>\r\n<p>Par\u00e1grafo vermelho<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
<\/center>\n<head><\/code>se\u00e7\u00e3o de cada p\u00e1gina HTML:<\/p>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <link rel=\"stylesheet\" href=\"styles.css\">\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is a heading<\/h1>\r\n<p>This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
body {\r\n background-color: powderblue;\r\n}\r\nh1 {\r\n color: blue;\r\n}\r\np {\r\n color: red;\r\n}<\/pre>\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n color: blue;\r\n font-family: verdana;\r\n font-size: 300%;\r\n}\r\np {\r\n color: red;\r\n font-family: courier;\r\n font-size: 160%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>T\u00edtulo<\/h1>\r\n<p>Par\u00e1grafo<\/p>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
<\/center>\np\u00a0{<\/span>
\nborder:<\/span>\u00a02px solid powderblue;<\/span><\/span>
\npadding:<\/span>\u00a030px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
\nA margin propriedade CSS define uma margem (espa\u00e7o) fora da borda.<\/p>\np\u00a0{<\/span>
\nborder:<\/span>\u00a02px solid powderblue;<\/span><\/span>
\nmargin:<\/span>\u00a050px;<\/span><\/span>
\n<\/span>}<\/span><\/code><\/p>\n
\nEste exemplo usa um URL completo para vincular a uma folha de estilos:<\/p>\n<link rel=\"stylesheet\" href=\"https:\/\/www.joemaster.com.br\/html\/styles.css\"><\/code><\/p>\n<link rel=\"stylesheet\" href=\"styles.css\"><\/code><\/p>\n
\nUse o style atributo HTML para estilizar em linha
\nUse o <style><\/code>elemento HTML para definir CSS interno
\nUse o <link><\/code>elemento HTML para se referir a um arquivo CSS externo
\nUse o <head><\/code>elemento HTML para armazenar os elementos <style> e <link>
\nUse a color propriedade CSS para cores de texto
\nUse a font-family propriedade CSS para fontes de texto
\nUse a font-size propriedade CSS para tamanhos de texto
\nUse a border propriedade CSS para bordas
\nUse a padding propriedade CSS para espa\u00e7o dentro da borda
\nUse a margin propriedade CSS para espa\u00e7o fora da borda<\/p>\n