CSS BASICO 01
CSS
BASICO – PARTE 01 – SIGNIFICADO, ORIGEM E COMANDOS
O
Cascading
Style Sheets
(CSS)
foi proposto pela primeira vez 1994, por Hakon Lie a Bert Bos que
aceitou trabalhar na criação do projeto, para melhorar a aparência
de sites, que na época
apresentava uma formatação bem simples, contando apenas com HTML.
Em
1995 o projeto foi apresentado a W3C (World Wide Web Consortium),
um consórcio internacional, liderado pelo inventor da web Tim
Berners-Lee, no qual organizações filiadas, uma equipe em tempo
integral, e o público trabalham juntos para desenvolver padrões
para a Web. A linguagem CSS foi aprovada pela W3C, que,
sob comando de Hakon Lie a Bert Bos, promoveu
o lançamento da sua primeira versão. Em pouco tempo CSS se
popularizou e passou a ser utilizada por programadores no mundo todo,
dando vazão ao surgimento de novas versões.
CSS deu mais vida e beleza a Web,
possibilitando novas formatações de texto e efeitos que não eram
possíveis apenas com HTML. Hoje a linguagem conta com milhares de
comandos.
A
seguir seguem exemplos de alguns comandos CSS:
COR E IMAGEM DE FUNDO
background:
blue; /*cor de fundo */
background-image:url(imagem.jpg);
/*imagem de fundo*/
background-repeat:
no-repeat; /*imagem de fundo que não se repete*/
background-attachment:fixed;
/*imagem de fundo fixada na tela*/
background-size:cover;
/*imagem de fundo com largura da tela*/
background-color: rgba(0, 0,
0, 0.9); /*cor de fundo transparente*/
FORMATAÇÃO DE TEXTO
color:yellow;
/*cor da fonte(texto)*/
font-size:40;
/*tamanho da fonte*/
font-family:cursive;
/*família da fonte*/
font-style:italic;
/*estilo da fonte*/
text-align:center;
/*alinhamento da fonte*/
text-decoration:none;
/*elimina sublinhado em links*/
BORDAS
border:1px
solid red; /*cria borda no elemento*/
border-radius:
10px; /*bordas arredondadas*/
POSICIONAMENTO E ALINHAMENTO
display:none;
/*deixa elemento invisivel na página*/
display:block
/*deixa elemento visível na página*/
position:absolute;
/*posiciona em relação ao elemento anterior*/
position:fixed;
/*fixa elemento na pagina*/
top:50%;
/*distância do topo em porcentagem*/
left:50%;
/*distância da margem esquerda em porcentagem*/
right:50%;
/*distância da margem direita em porcentagem*/
bottom:50%;
/*distância da margem infetior em porcentagem*/
margin-top:100;
/*distância do topo em pixels*/
margin-right:100;
/*distância da margem direita em pixels*/
margin-bottom:100;
/*distância da margem inferior em pixels*/
margin-left:100;
/*distância da margem esquerda em pixels*/
padding:10px;
/*cria margens dentro do elemento */
COMANDOS DIVERSOS
width:200px;
/*largura*/
height:200px;
/*altura*/
float:right;
/*posicionamento a esquerda ou direita*/
box-shadow:
10px 10px 10px black; /*sombreamento */
background-image:
linear-gradient(180deg, green, yellow); /*degrade*/
ATIVIDADES
1) O que significa CSS e com qual objetivo foi
criada?
2) Quais comandos CSS estilizam o fundo da página?
3) Com base no exemplo dado, quais as outras
possíveis opções para o comando text-align?
4) Cite 4 comandos para alinhamento de elementos
com CSS?
5) Qual sintaxe de comandos geraria alinhamento a
esquerda de uma elemento?
Créditos:
artigo redigido em outubro de 2016 – Professor Roni Márcio Fais
– Todos os direitos reservados a www.rmfais.com.
|