HTML Lista Ordenada - Sobre Formatação

19 de abril de 2020

Boa tarde a todos!

Estou iniciando em HTML e fazendo alguns exercícios aqui, desde já aviso que são simples pois como disse estou no início e nunca tive contato com esse assunto, então estudando listas ordenadas surgiu uma dúvida. Tenho que fazer algo assim exatamente como está abaixo:

1. TÍTULOS

a. Texto 1

b. Texto 2

c. Texto 3

O resultado do meu código fica exatamente como abaixo:

1.TÍTULOS

a. Texto 1

b. Texto 2

c. Texto 3

A dúvida é sobre formatação, como fazer a palavra TÍTULO ficar no canto superior esquerdo e as opções mais no meio? Estou fazendo e as opções ficam embaixo do título.

Segue meu código para análise abaixo.

<!DOCTYPE html>

<html>

<head>
	<title>Meu site</title>
	<meta charset="utf-8">
</head>

<body>

	<ol>
		<li>TÍTULOS</li>
	</ol>
			
	<ol type ="a" start="a">
		<li>Texto 1</li>
		<li>Texto 2</li>
		<li>Texto 3</li>
	</ol>
</body>

Desde já agradeço a atenção galera!

DiF · 19 de abril de 2020

@MppS Basicamente você só colocou a estrutura. Você deve usar o CSS para estilizar.

Adicione um padding-left ao elemento ol na qual você quer empurrar para frente.

ol.itens{
  padding-left: 120px;
}

<ol>
	<li>TÍTULOS</li>
</ol>
			
<ol class="itens" type ="a" start="a">
	<li>Texto 1</li>
	<li>Texto 2</li>
	<li>Texto 3</li>
</ol>

Veja funcionando: https://jsfiddle.net/dife/7y5xrcej/4/

19 de abril de 2020

@DiF Olá, tudo bem?

Primeiramente obrigada pelo esclarecimento, deu para entender, ainda não cheguei na parte de CSS mas eu entendi o que explicou, obrigada. Mas me diz uma coisa, a única forma de formatar da forma como eu queria é somente com CSS? Em HTML não existe uma propriedade para isso?

DiF · 19 de abril de 2020

@MppS

16 minutos atrás, MppS disse:

a única forma de formatar da forma como eu queria é somente com CSS? Em HTML não existe uma propriedade para isso?

Sim é isso mesmo. A única forma de formatar algo no html é por meio de CSS.

HTML e CSS andando praticamente lado a lado. Não sei como é seu curso, ou se você está estudando por conta própria, mas esses dois devem ser estudados juntos.

Imagine a seguinte analogia:

O HTML é o esqueleto do corpo, CSS é a pele e aparência.. Sem nossa pele, seriamos apenas o esqueleto sem aparência.

Por isso ambos são juntos.

Você pode usar o CSS de duas formas: Incorporada, como é o exemplo que dei acima no outro post, e inline, que é colocando com a tag style no próprio elemento.

Por recomendação, evite de usar a forma inline, pois o grau de precedência é maior. Ou seja, se tiver uma regra css incorporada para o elemento, colocando a regra diretamente no elemento, passa ela a ser considerada, ao invés da outra.

Não posso entrar em detalhes nisso, porque teria que explicar o valor de Especificidade dos elementos..

Posso deixar um link de leitura se quiser: https://medium.com/emanuelg-blog/entendendo-a-precedência-de-estilo-em-css-especificidade-herança-e-efeito-cascata-a437c4929173

19 de abril de 2020

@DiF Muitíssimo obrigada pela explicação, dúvida resolvida, estou estudando por conta própria, fazendo um curso online de desenvolvimento web, o tópico de CSS é o próximo do curso.

Obrigada pela recomendação e pelo link de leitura, vou ler sim.

Ótima semana a ti! Valeu