html e css o que usar?

Front-end

06/08/2014

estou com uma duvida basica, quando e como devemos utilizar as propriedades das tags html quando se tem o css ou existem todas? espero ter sido claro.
Fabricio Alves

Fabricio Alves

Curtidas 0

Melhor post

William

William

07/08/2014

Primeiro vamos organizar sua dúvida, segue artigo do colega Rafael Ribeiro listando as tags que foram descontinuadas com a chegada do HTML5:
https://www.devmedia.com.br/html-5-tags-continuadas-x-tags-descontinuadas/23618

Agora que já sabemos quais tags podem ser usadas posso afirmar para você que o CSS atinge em 100% os efeitos de estilização e posicionamento das tags HTML, você só precisa se aprofundar nos conhecimentos em CSS.

Vale lembrar que, com a chegada do HTML5 (mesmo ainda na fase de especificação) existem novas tags que dão semântica ao nosso código HTML então não é aconselhável usar <div> para tudo na página.
GOSTEI 1

Mais Respostas

Thiago Palmeira

Thiago Palmeira

06/08/2014

Olá, tem como esclarecer melhor?
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

tentar explicar melhor, alguns atributos do html podem deixar de ser usados com o uso do css, eu quero saber se são todos que existem no utilizando css.

na div, posso fazer a referencia com o auxilio do css?


<div align="center">
		<img src="http://videos.web-03.net/artigos/Higor_Medeiros/Organizacao_Projetos/Organizacao_Projetos1.jpg">
	</div>


COMPLETO


<html>
<head>		
<title>HTML BASICO</title>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html;charset=utf-8">

<link rel="stylesheet" href="../css/format.css" type="text/css">

<head>
	<body>
		<p>TEXTO RETIRADO DA INTERNT - Como os Projetos são organizados</p>
		<hr>
		<p>1. Introdução</p>

<p>Diferentes organizações possuem diferentes formas de organizar os seus projetos. Algumas empresas podem se organizar por projetos e oferecer autonomia a um gerente de projeto, outras preferem se organizar funcionalmente. Um projeto também pode ser dividido em fases na qual envolve um foco diferente para cada uma das fases. Todo projeto também possui um ciclo de vida e partes interessadas na execução de um projeto. Esses conceitos serão mais detalhados e analisados no restante do artigo.</p>
	<div align="center">
		<img src="http://videos.web-03.net/artigos/Higor_Medeiros/Organizacao_Projetos/Organizacao_Projetos1.jpg">
	</div>
	<p>Figura 1: Organização de projetos</p>

		<p>2. Fases de um Projeto</p>

<p>Uma fase é uma divisão do projeto onde um controle adicional é necessário sobre uma entrega importante. O inicio e o término de uma fase devem ser efetuados formalmente, assim como ocorre com um projeto. Cada fase tem um foco diferente e envolve diferentes organizações e conjuntos de habilidades. Portanto, cada fase tem um objetivo e deve retornar um resultado bem claro que determina se realmente chegamos ao final da fase.

As fases muitas vezes são sequenciais e, neste caso, geram uma entrega para a fase seguinte. As fases podem ser sobrepostas, ou seja, as fases podem ter inicio antes do termino da anterior ou podem ser iterativas em que apenas uma fase está planejada a qualquer momento e o planejamento da próxima fase é feita à medida que o trabalho avança.
</p>

	</body>	
</html>
GOSTEI 0
Franzé Peixoto

Franzé Peixoto

06/08/2014

se não tiver todas tem as principais para descongestionar seu arquivo .html, o uso do css é fundamental.
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

otimo, por partes, acho que a duvida não deve ser só, principalmente para quem está começando ou para alguem que não está atualizado, sobre o html 5 apareceu novas "implementações" e são essas que me deixam na duvida se existe ou não no css, acrescentando não tenho certeza se o css 3 acompanha ou é desenvolvido em conjunto com o html 5. acho que é só, qualquer duvida que aparecer estarei tirando duvidas. obrigado.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/08/2014

confesso que tambem tenho um pouco de duvida quanto a isso mas o William passou uma dica bem interessante, conhecer as tags descontinuadas.
GOSTEI 0
Thiago Palmeira

Thiago Palmeira

06/08/2014

otimo, por partes, acho que a duvida não deve ser só, principalmente para quem está começando ou para alguem que não está atualizado, sobre o html 5 apareceu novas "implementações" e são essas que me deixam na duvida se existe ou não no css, acrescentando não tenho certeza se o css 3 acompanha ou é desenvolvido em conjunto com o html 5. acho que é só, qualquer duvida que aparecer estarei tirando duvidas. obrigado.


Fabricio, você consegue sim inserir com HTML5 e CSS3

Ex:

Defina um elemento "li" dentro de uma div e depois recupere no css apontando o id da "li" com a div e crie o atributo background indicando o local da imagem...
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

Defina um elemento "li" dentro de uma div e depois recupere no css apontando o id da "li" com a div e crie o atributo background indicando o local da imagem...



<html>
<head>
	<title>HTML 5 e CSS</title>
	<link rel="stylesheet" href="../css/formatar.css" type="text/css">
</head>
	<body>
	
		<div id="divBody">
			<li id="liadd">
			</li>
		</div>
	
	</body>
</html>


até está certo?

CSS não sei de quase nada. tentei fazer algo.


body{
	background-color:#F0FFFF;
	background-image:url(../img/voto.jpg);
}

div{
	background-image:url(../img/voto.jpg);
}

.liadd{
	background-image:url(../img/voto.jpg);
}
GOSTEI 0
Thiago Palmeira

Thiago Palmeira

06/08/2014

Funcionou?
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

pior que não. eu não sei bem o css.
GOSTEI 0
Thiago Palmeira

Thiago Palmeira

06/08/2014

Mas a ideia é essa....tenta fazer esse teste :)
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

está correto o que postei? pois ja tentei e só piora, kkkk
GOSTEI 0
Thiago Palmeira

Thiago Palmeira

06/08/2014

Sim..
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/08/2014

Fabricio, tenho um exemplo aqui, mas a unica configuração nas imagens é com relação ao tamanho no css, olha aqui:

CSS


img{
	width:250px;
	height:250px;
	border:5	
}

img.pequeno{
	width:250px;
	height:250px;
	border:5
}

img.pequeno01{
	width:300px;
	height:300px;
	border:7
}
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

Marcelo, obrigado, mas não consegui pegar uma imagem com o css.
GOSTEI 0
Raphael Souza

Raphael Souza

06/08/2014

Defina um elemento "li" dentro de uma div e depois recupere no css apontando o id da "li" com a div e crie o atributo background indicando o local da imagem...



<html>
<head>
	<title>HTML 5 e CSS</title>
	<link rel="stylesheet" href="../css/formatar.css" type="text/css">
</head>
	<body>
	
		<div id="divBody">
			<li id="liadd">
			</li>
		</div>
	
	</body>
</html>


até está certo?

CSS não sei de quase nada. tentei fazer algo.


body{
	background-color:#F0FFFF;
	background-image:url(../img/voto.jpg);
}

div{
	background-image:url(../img/voto.jpg);
}

.liadd{
	background-image:url(../img/voto.jpg);
}


Algumas dicas simples que podem ser aproveitadas no seu modelo:


1) Importante saber os tipo de seletores antes de mais nada. Citarei alguns:

1.1) Selecionando um elemento pela classe: .classe_desejada (veja o uso o ponto antes do nome da classe)
1.2) Selecionando um elemento pelo ID: #id_desejado (veja o uso do "#" antes do id)
1.3) Selecionando todos os elementos de um tipo: body, p, ul, li....(usa-se a tag HTML como seletor)
1.4) Um exemplo avançado, onde quero pegar todos os inputs do sistema que são do tipo text: input[type='text']

2) Esclarecimentos sobre ID e class:

2.1) De acordo com as boas práticas sugeridas pela W3C, uma página pode ter somente um ID, independente do tipo de elemento. No entanto, eu posso sim ter #id_teste e outro #id_teste. A página renderizará normalmente. Porém, vc estará utilizando uma má prática e isto certamente ocasionará problemas com a integração do HTML, CSS e JS/jQuery.
2.2) Caso seja necessário reutilizar uma marcação na mesma página HTML, usa-se o atributo de classe. Assim não haverá problemas na integração das tecnologias acima.

Sabendo disso, vamos ao que importa:

3) O CSS até está certo, porém, veja como aplicou o background-image da DIV em comparação com os tipos de seletores descritos acima. Logo, TODAS as DIVs do seu sistema terão esse estilo de background-image. Para evitar esse "problema", utilize o id que você colocou na DIV e faça as modificações por meio desse atributo. Ficaria da seguinte forma:

#divBody {background-image:url('caminha_da_sua_imagem');}


3.1) Veja que coloquei o endereço da imagem entre aspas (simples ou duplas). Também é uma boa prática.
3.2) Dessa forma, somente o elemento com o atributo divBody será atacado pela CSS.

4) Com relação ao LI, de imediato observa-se que você utilizou um ID para marcar esse elemento, mas no CSS você marcou com o ponto antes do nome, o que significa que passou para o CSS marcar uma class e não um ID.
4.1) Geralmente este atributo é usado para menus ou cenários onde coloca-se informações "agrupadas", digamos assim. Comumente essas informações tem a mesma formatação. Levando em consideração a informação do item 2, se há a necessidade de repetir uma marcação para mais de um elemento na mesma página, deve-se usar o atributo class ao invés do ID a fim de não ocasionar problema na integração HTML, CSS, JS. Logo, eu substituiria o ID de sua LI e colocaria um class com o mesmo nome já utilizado. Na prática, apague a parte id e escreva class no lugar. Automaticamente o CSS já estará corrigido tb.

Acho que é só. Qualquer coisa grita =)
GOSTEI 0
Raphael Souza

Raphael Souza

06/08/2014

Defina um elemento "li" dentro de uma div e depois recupere no css apontando o id da "li" com a div e crie o atributo background indicando o local da imagem...



<html>
<head>
	<title>HTML 5 e CSS</title>
	<link rel="stylesheet" href="../css/formatar.css" type="text/css">
</head>
	<body>
	
		<div id="divBody">
			<li id="liadd">
			</li>
		</div>
	
	</body>
</html>


até está certo?

CSS não sei de quase nada. tentei fazer algo.


body{
	background-color:#F0FFFF;
	background-image:url(../img/voto.jpg);
}

div{
	background-image:url(../img/voto.jpg);
}

.liadd{
	background-image:url(../img/voto.jpg);
}


Algumas dicas simples que podem ser aproveitadas no seu modelo:


1) Importante saber os tipo de seletores antes de mais nada. Citarei alguns:

1.1) Selecionando um elemento pela classe: .classe_desejada (veja o uso do ponto antes do nome da classe)
1.2) Selecionando um elemento pelo ID: #id_desejado (veja o uso do "#" antes do nome do id)
1.3) Selecionando todos os elementos de um tipo: body, p, ul, li....(usa-se a tag HTML como seletor)
1.4) Um exemplo avançado, onde quero pegar todos os inputs do sistema que são do tipo text: input[type='text']

2) Esclarecimentos sobre ID e class:

2.1) De acordo com as boas práticas sugeridas pela W3C, uma página pode ter somente um ID, independente do tipo de elemento. No entanto, eu posso sim ter #id_teste e outro #id_teste. A página renderizará normalmente. Porém, vc estará utilizando uma má prática e isto certamente ocasionará problemas com a integração do HTML, CSS e JS/jQuery.
2.2) Caso seja necessário reutilizar uma marcação na mesma página HTML, usa-se o atributo de classe. Assim não haverá problemas na integração das tecnologias acima.

Sabendo disso, vamos ao que importa:

3) O CSS até está certo, porém, veja como aplicou o background-image da DIV em comparação com os tipos de seletores descritos acima. Logo, TODAS as DIVs do seu sistema terão esse estilo de background-image. Para evitar esse "problema", utilize o id que você colocou na DIV e faça as modificações por meio desse atributo. Ficaria da seguinte forma:

#divBody {background-image:url('caminha_da_sua_imagem');}


3.1) Veja que coloquei o endereço da imagem entre aspas (simples ou duplas). Também é uma boa prática.
3.2) Dessa forma, somente o elemento com o atributo divBody será atacado pela CSS.

4) Com relação ao LI, de imediato observa-se que você utilizou um ID para marcar esse elemento, mas no CSS você marcou com o ponto antes do nome, o que significa que passou para o CSS marcar uma class e não um ID.
4.1) Geralmente este atributo é usado para menus ou cenários onde coloca-se informações "agrupadas", digamos assim. Comumente essas informações tem a mesma formatação. Levando em consideração a informação do item 2, se há a necessidade de repetir uma marcação para mais de um elemento na mesma página, deve-se usar o atributo class ao invés do ID a fim de não ocasionar problema na integração HTML, CSS, JS. Logo, eu substituiria o ID de sua LI e colocaria um class com o mesmo nome já utilizado. Na prática, apague a parte id e escreva class no lugar. Automaticamente o CSS já estará corrigido tb.

Acho que é só. Qualquer coisa grita =)
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

vou ler com calma mais tarde, li por cima e continua sem aparecer a imagem, mas como disse vou ler com calma.
GOSTEI 0
Fabricio Alves

Fabricio Alves

06/08/2014

Realmente fiquei totalmente perdido, tentei colocando o id na div e no li, mas não deu em nada, aparece somente o ponto do li. sem sucesso, me desculpa.
GOSTEI 0
POSTAR