Análise de Sistemas
Banco de Dados
Computação Gráfica
Diversos
Internet
Lógica
Programação
Redes
Computação
Informática Básica
FrameWorks
Matemática
Cadastre-se
CSS BASICO - PARTE 01 - SIGNIFICADO, ORIGEM E COMANDOS


MAGAZINE LUIZA


CLUBE DE AUTORES


CLUBE DE AUTORES


CLUBE DE AUTORES


AMAZON

PHP-GENERATOR

CSS BASICO - PARTE 01 - SIGNIFICADO, ORIGEM E COMANDOS

Se queremos progredir, não devemos repetir a história, mas fazer uma história nova. (Mahatma Gandhi)

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.



WebMaster: PROFESSOR RONI MARCIO FAIS
Formação: Bacharel em Ciência da Computação e Especialista em Administração, Supervisão e Orientação Educacional
E-mail: rmfais@yahoo.com.br


Artigos



Criação de APP online