Pular para o conteúdo principal

Postagem mais recente:

O que é Javascript? Como usar na sua página?

O que é Javascript? Como usar na sua página? O Javascript foi criado em em 1995 por um integrante da Netscape, que futuramente virou a Mozila Firefox. Dentro do Javascript, temos objetos, arrays, variáveis, funções, eventos, animações, manipulação de html/css e entre outras muitas coisas possíveis de serem feitas, só usando essa linguagem. Para falarmos de Javascript é necessário entender o que é uma Linguagem de programação, então de forma resumida, é uma tecnologia que permite criar programas, mecanismos com funcionalidades diferentes. Client Side e Server Side No caso do Javascript, ele se dividi em lado do cliente (client-side) e lado do servidor (server-side), mas o importante para nós é entender a linguagem do lado do cliente. Então, javascript é uma linguagem web que permite dar dinamismo para sua página, funcionando em conformidade com o HTML e o CSS, permitindo a manipulação dos mesmos, ou criando outras funcionalidades próprias a partir da própria lingu...

O que é CSS? Qual sua importância para o site?




Folhas de Estilo em Cascata, ou CSS, é uma tecnologia muito interessante criada por um único propósito principal: modificar o estilo padrão do HTML da página. Embora pareça uma razão meio boba para sua existência, graças ao CSS nós temos a internet como ela é hoje, com tantas variações de estilização de sites, o que nos permite fazer coisas impressionantes usando suas propriedades.


Quando foi criado


O CSS foi desenvolvido em 1995 com o CSS1 pela W3C, grupo responsável pela distribuição do mesmo até hoje, o que permitiu uma reestruturação geral no modo de trabalhar com web deixando as coisas muito mais simples e menos limitadas de se fazer.



O que é o CSS


Mas o que de fato é o CSS? Se eu fosse definir de fato, eu diria que é a própria visualização da internet em si. Não se trabalha mais HTML sozinho, o CSS se tornou a verdadeira página, mesmo porque sozinho não faça sentido sua existência. Então, se eu fosse definir, eu diria que o HTML e o CSS são parte de algo maior: uma página de site.


Com esse pensamento, o CSS evoluiu da sua primeira versão até a versão que temos hoje que é a CSS3, permitindo muito mais coisas, como as animações e as variáveis que tem uma função importantíssima para agilizar o trabalho.


Estrutura dos CSS


Mas como é a estrutura do CSS? Bem, trabalhamos com seletores. Seletores são formas de chamar o HTML na nossa página CSS, isso pode ser feito usando classes, id, tags e ainda permite várias outras variações como chamar as tags irmãs, pais, filhas, primeiras, últimas, do meio e etc.


Com um seletor em página, lembrando que usamos “ponto” para classes e “hashtags” para id’s, nós podemos definir propriedades, que é de fato, o CSS, é uma atribuição que você dá ao seletor, permitindo que o “robozinho” do navegador entenda a nova formatação do HTML e com isso trazendo o resultado desejado.


Tudo é feito em inglês , portanto se você entende a língua torna-se muito mais fácil atribuir valor a algo, e entre essas propriedades nós podemos ter margens internas e externas, bordas de todos os lados, cores de fundo ou do próprio texto, entre outras coisas incríveis que só o CSS pode nos permitir. Isso é feito colocando “colchetes” depois do seletor e fechando após a última propriedade colocada.


O que significa Cascata em CSS


Mas, de onde vem a tal “Cascata”? Vem exatamente do sentido literal da palavra. Quando penso em cascata me vem a cabeça uma cachoeira descendo sobre as pedras, e de fato é isso que significa cascata no CSS, ou seja, se eu atribuo uma propriedade para um seletor, e logo após eu atribuo outra propriedade para esse mesmo seletor, a informação que o “robozinho” vai ler, será a última proposta, isso porque a cascata vai de cima para baixo, mas a última coisa a chegar onde ela “desemboca” é como se fosse a última gota a sair, deu pra entender? Acho que fiquei confuso também!



Animações CSS


Vamos em frente. O CSS é algo maravilhoso, isso é inegável, mas você sabia que é possível construir animações? Até hoje, para mim, essa é a parte que torna o CSS algo de outro mundo, e tem pessoas que fazem coisas absurdas com isso, construindo desenhos e os animando, tudo isso usando CSS puro.

Vamos em frente. O CSS é algo maravilhoso, isso é inegável, mas você sabia que é possível construir animações? Até hoje, para mim, essa é a parte que torna o CSS algo de outro mundo, e tem pessoas que fazem coisas absurdas com isso, construindo desenhos e os animando, tudo isso usando CSS puro.


Variáveis CSS


Mas existe algo, simples, porém muito legal no CSS3, que é a utilização de variáveis. Se você conhece outras linguagens de programação, você sabe que nós podemos armazenar informações dentro de variáveis, e agora o CSS faz o mesmo, permitindo que você defina previamente valores que vai utilizar em toda a extensão da sua página. Isso é feito utilizando a pseudo-classe “:root”, pseudo-classes merecem um artigo só para elas de tão bom que é, então, você coloca “--” e escreve o nome da variável que quer, e quando você quiser atribuir seu valor a algo, é só colocar na frente de uma propriedade.



Pseudo-Classes


Para finalizar esse artigo, que tem o propósito de dizer sua importância e como eu gosto do CSS, brincadeiras a parte, vamos falar brevemente sobre “pseudo-classes”. Já é incrível poder animar algo com o CSS, mas, agora você pode, além disso, atribuir um evento a um seletor, usando as pseudo-classes. Temos vários tipos como “:hover” (passar o mouse em cima), “:active” (quando o elemento está clicado), entre outros como “::after” “::before” e outras coisas que dão ação à nossa página. Com isso, damos dinamismo à página, permitindo aplicar estilo somente quando uma pseudo-classe é acionada e isso é feito usando os “dois pontos” em frente a um seletor, ou em alguns casos “dois pares de dois pontos” dependendo da pseudo-classe.



Por hoje é isso. Vou trazer mais artigos sobre o CSS e como ele é necessário, para falarmos de coisas específicas. Quis aqui, apenas dar um apanhado geral da sua utilização e importância. Veja também o vídeo abaixo para entender mais sobre o CSS:



Comentários