Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
December 23, 2022 07:46 pm GMT

Introduo ao CSS: Bsico

O CSS uma linguagem de estilo que usada para definir como os elementos HTML so exibidos na pgina web. A sintaxe do CSS consiste em um seletor, seguido por um bloco de declarao. O seletor usado para especificar qual elemento HTML deve receber o estilo e o bloco de declarao contm uma ou mais declaraes que definem o estilo para o seletor. Por exemplo, se quisermos aplicar um estilo de fonte vermelha a todos os pargrafos em uma pgina web, ns usaramos o seletor "p" e o bloco de declarao conteria a declarao "color: red". Isso faria com que todos os pargrafos na pgina ficassem vermelhos.
seletor de imagem CSS

Aqui est um exemplo:

p {  color: red;}

O CSS oferece diversas maneiras de organizar e agrupar estilos. Uma dessas maneiras usando seletores de classe e ID. Os seletores de classe permitem que voc aplique estilos a elementos HTML que pertencem a uma determinada classe, enquanto os seletores ID permitem aplicar estilos a um elemento HTML especfico.

Para aplicar o estilo apenas a elementos HTML que tenham a classe "highlight", voc poderia usar o seletor .highlight:

.highlight {  color: red;}

Este cdigo ir aplicar a cor vermelha apenas a elementos HTML que tenham a classe "highlight".

Voc tambm pode usar um seletor de ID para aplicar o estilo apenas a um elemento HTML especfico que tenha o ID especificado. Por exemplo, para aplicar o estilo apenas a um elemento HTML com o ID "header", voc poderia usar o seletor #header:

#header {  color: red;}

Este cdigo ir aplicar a cor vermelha apenas ao elemento HTML com o ID "header".

Agora para usar as classes ou ID, deve ser aplicada a qualquer elemento HTML usando o atributo class ou ID. Aqui est um exemplo de como usar a classe em um elemento HTML:

<p class="highlight">Texto em vermelho</p>

Para ID:

<p id="highlight">Texto em vermelho</p>

Para usar seletores aninhados, voc precisar de elementos "pai" e "filho" correspondentes no HTML. Por exemplo, aqui est como o cdigo HTML para uma div com a classe "container" que contm um pargrafo poderia ser:

<div class="container">  <p>Este  um pargrafo dentro de um elemento div com a classe "container".</p></div>

E finalmente, aqui est como o cdigo HTML para um link poderia ser:

<a href="#">Este  um link.</a>

Agora falando sobre cores no CSS, podemos declarar de 3 formas:

p {   color: blue; /* cor azul */}button {  color: #ff0000; /* hexadecimal */}div {  color: rgb(0, 255, 0); /* RGB */}

Esse trecho de cdigo CSS contm trs declaraes que aplicam a cor a elementos HTML diferentes.

A primeira declarao, "p { color: blue; }", aplica a cor azul a todos os elementos p (pargrafos) na pgina. A cor especificada usando o nome da cor, "blue", que um dos nomes de cores predefinidos pelo CSS.

A segunda declarao, "button { color: #ff0000; }", aplica a cor vermelha a todos os elementos button (botes) na pgina. A cor especificada usando um cdigo hexadecimal, que uma representao numrica da cor. Os cdigos hexadecimais comeam com um smbolo de hashtag (#) e so seguidos por trs pares de dgitos hexadecimais que representam os valores de vermelho, verde e azul (RGB) da cor.

A terceira declarao, "div { color: rgb(0, 255, 0); }", aplica a cor verde a todos os elementos div (divises). A cor especificada usando uma combinao de valores RGB (vermelho, verde e azul), que so usados para representar cores na web. O valor RGB (0, 255, 0) representa a cor verde.

Sobre Margin, Padding e Bordas

No CSS, as margens, o padding e as bordas so propriedades usadas para controlar o espaamento e a aparncia dos elementos HTML.

As margens so o espaamento externo em volta de um elemento, ou seja, o espao entre o elemento e os elementos adjacentes. Elas podem ser controladas usando as propriedades margin-top, margin-right, margin-bottom e margin-left.

O padding o espaamento interno em volta do contedo de um elemento, ou seja, o espao entre o contedo e a borda do elemento. Ele pode ser controlado usando as propriedades padding-top, padding-right, padding-bottom e padding-left.

As bordas so linhas que circundam um elemento e podem ser controladas usando as propriedades border-width, border-style e border-color.

Essas propriedades permitem controlar o espaamento e a aparncia dos elementos de forma precisa e criar layouts mais atraentes e intuitivos.

margin, padding e border no css

/* Definindo margens */p {  margin-top: 10px;  margin-right: 20px;  margin-bottom: 30px;  margin-left: 40px;}/* Definindo padding */div {  padding-top: 10px;  padding-right: 20px;  padding-bottom: 30px;  padding-left: 40px;}/* Definindo bordas */button {  border-width: 2px;  border-style: solid;  border-color: blue;}

Neste exemplo, as margens so definidas para um elemento p (pargrafo). A margem superior definida como 10 pixels, a margem direita definida como 20 pixels, a margem inferior definida como 30 pixels e a margem esquerda definida como 40 pixels. Isso cria um espaamento externo em volta do elemento p.

No segundo exemplo, o padding definido para um elemento div (diviso). O padding superior definido como 10 pixels, o padding direito definido como 20 pixels, o padding inferior definido como 30 pixels e o padding esquerdo definido como 40 pixels. Isso cria um espaamento interno em volta do contedo do elemento div.

No terceiro exemplo, as bordas so definidas para um elemento button (boto). A largura da borda definida como 2 pixels, o estilo da borda definido como "solid" (slido) e a cor da borda definida como azul. Isso cria uma borda azul slida em volta do elemento button.

Posicionando elementos na pgina

No CSS, existem vrias maneiras de controlar a posio de um elemento na pgina. As principais propriedades de posicionamento so:

position: define se um elemento posicionado de forma esttica (o padro), relativa, absoluta ou fixa.
top, right, bottom, left: usadas para posicionar um elemento em relao ao seu elemento pai, se a propriedade position for definida como relativa, absoluta ou fixa.
float:
faz com que um elemento flutue esquerda ou direita, permitindo que outros elementos ocorram ao seu redor.
display: define como um elemento exibido, por exemplo, como um bloco, uma linha ou uma tabela.

Aqui esto alguns exemplos de cdigo que mostram como usar as propriedades de posicionamento:

/* Posicionamento relativo */p {  position: relative;  top: 20px;  left: 30px;}/* Posicionamento absoluto */div {  position: absolute;  top: 10px;  right: 20px;  bottom: 30px;  left: 40px;}/* Flutuao  esquerda */img {  float: left;}/* Exibio como bloco */button {  display: block;}

Neste exemplo, a propriedade position definida como relativa para um elemento p (pargrafo). Isso significa que o elemento posicionado de forma relativa ao seu posicionamento normal, ou seja, ele deslocado 20 pixels para cima e 30 pixels para a esquerda em relao ao seu posicionamento normal.

No segundo exemplo, a propriedade position definida como absoluta para um elemento div (diviso). Isso significa que o elemento posicionado de forma absoluta em relao ao elemento pai, ou seja, ele posicionado 10 pixels a partir do topo, 20 pixels a partir da direita, 30 pixels a partir da parte inferior e 40 pixels a partir da esquerda do elemento pai.

No terceiro exemplo, a propriedade float definida como left para um elemento img (imagem). Isso faz com que a imagem flutue esquerda, permitindo que outros elementos ocorram ao seu redor.

No quarto exemplo, a propriedade display definida como block para um elemento button (boto). Isso faz com que o boto seja exibido como um bloco, ocupando toda a largura disponvel.

Se voc acha que minha ajuda foi til, por favor, considere me ajudar com um valor simblico. Qualquer valor ser muito apreciado e me ajudar a continuar oferecendo ajuda, e-mail pix : [email protected]

Se isso te ajudou de alguma forma, me ajude a tomar um caf


Original Link: https://dev.to/weverton/introducao-ao-css-basico-3344

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To