Ir para conteúdo
beowlf

[Resolvido]Copiar um Css de um site de noticias

Recommended Posts

Boa noite! 

estou desenvolvendo esse site http://agricolaterranova.com.br/e na parte de noticias eu estou buscando de outro site.

 

a busca das noticias está ok, mas eu não consigo estilizar o meu onde estão as noticias. eu quero que fique como do site que eu estou pegando as informacoes https://www.noticiasagricolas.com.br/noticias/.

 

eu gostaria que alguém me ajudasse para que o resultado ficasse igual o arquivo em anexo

 

Desde ja agradeço pela ajuda, meu whats caso alguem queria falar diretamente (44) 99829-3326-Fabiano

Obrigado!

 

Sem título-1.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

2 horas atrás, beowlf disse:

....caso alguem queria falar diretamente ...

A ideia do fórum é mais ampla do que passar soluções em privado. Trata-se de criar um repositório para que todos possam consultar
problemas e soluções. A solução à sua pergunta poderá ser útil a muitos colegas no futuro.
 

Criei um Fiddle online para replicar a estilização do site conforme você pretende. Consulte https://jsfiddle.net/maujor/dv7719k8/

A seguir eis os códigos usados no Fiddle:

HTML:
 

<div class="tn-noticias"> <!-- container para as notícias -->
  <!-- Dentro do container HTML igual à do site Notícias Agricolas -->
  <h3>15/05/2018</h3>
  <ul>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:34</span><div><h2>BRF está proibida de exportar para a Europa a partir desta quarta (16) (por GAZETA DO POVO)</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">20:15</span><div><h2>Coreia do Norte suspende conversa com Coreia do Sul e põe em dúvida reunião de Trump e Kim Jong-Un</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:47</span><div><h2>Governo diminuirá previsão de crescimento do PIB a cerca de 2,5%, mas elevará receitas com leilões de petróleo</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:20</span><div><h2>Milho do Paraná tem pior condição que em 2015/16, quando safra quebrou, diz Deral</h2></div>
      </a>
    </li>
    <li class="horizontal com-hora">
      <a href="#">
        <span class="hora">18:11</span><div><h2>Exportação de soja do Brasil soma 2,43 mi t na 2ª semana de maio, diz Anec</h2></div>
      </a>
    </li>
  </ul>
</div>

CSS: 

.tn-noticias {
  width: 100%;
  max-width: 522px;
  margin: 0 auto;
  font: 14px arial, sans-serif;
}

.tn-noticias h3 {
  font-size: 14px;
}

.tn-noticias ul {
  margin: 0;
  padding: 0;
}

.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}

.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}

.tn-noticias li a {
  color: #444;
  text-decoration: none;
}

.tn-noticias li a div {
  margin-left: 85px;
}

.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom dia! Maujor

desculpa pelo comentário 

Citar

....caso alguem queria falar diretamente ...

vou retirar

 

em relação ao código que você passou ficou perfeito, porem o site em que eu pego as informações não é estático, estou usando um código php para pegar essas noticias de outro site.

 

A minha duvida é acerca do código que se mantem aparamente estático e não estiliza junto com as atualizações das noticias. na imagem abaixo é o exemplo como fica na minha pagina.

 

vou colocar o link do meu site http://agricolaterranova.com.br/

vou colocar o link de onde eu pego essas informações https://www.noticiasagricolas.com.br/noticias/

 

Obrigado por seu tempo...

Atenciosamente,

Fabiano

Sem título-2.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

Boa tarde!  Maujor

 

vou anexar aqui com eu insiro a noticia no site, esse é o código em php que pega as informações que eu preciso.

<?php

//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';

//pegando todo o conteudo 
$dadosSite = file_get_contents($url);

$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);

print $var2[0];

?>

e esse é o frame que eu coloco no site

<iframe src="http://www.herbiterra.com.br/noticias.php" name="cotacao" width="200" height="327" frameborder="0" scrolling="yes"></iframe>

Agradeço desde ja 

 

Atenciosamente.

 

Fabiano

Compartilhar este post


Link para o post
Compartilhar em outros sites

@beowlf

Retire o iframe e no local da inserção das notícias insira o seguinte código:

<?php
//url do site
$url = 'https://www.noticiasagricolas.com.br/noticias/';
//pegando todo o conteudo 
$dadosSite = file_get_contents($url);
$var1 = explode('<h3>',$dadosSite);
$var2 = explode("</ul>",$var1[1]);
$var2 = str_replace("<a href=\"/noticias","<a target=\"_blank\" href=\"https://www.noticiasagricolas.com.br/noticias",$var2);
?>
<style rel="stylesheet">
.tn-noticias {
  width: 100%;
  max-width: 522px;
  font: 14px arial, sans-serif;
}
.tn-noticias h3 {
  font-size: 14px;
}
.tn-noticias ul {
  margin: 0;
  padding: 0;
}
.tn-noticias li {
  position: relative;
  overflow: hidden;
  clear: both;
  border-bottom: 1px dotted #CCC;
}
.tn-noticias li h2 {
  font-size: 14px;
  font-weight: normal;
}
.tn-noticias li a {
  color: #444;
  text-decoration: none;
}
.tn-noticias li a div {
  margin-left: 85px;
}
.tn-noticias span {
  position: absolute;
  width: 75px;
  text-align: center;
  top: 50%;
  margin-top: -6px;
  line-height: 12px;
  font-size: 12px;
  display: block;
  color: #006db4;
}
</style>
<div class="tn-noticias">
<h3>
<?php
  print utf8_encode($var2[0]);
?>
</div>

 

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Anderson.dsm
      Olá, estou criando um sistema de postagens, ao fazer a postagem eu tenho os seguintes conteudos...
       
      Título
      Descrição
      Imagem
      Publicado em: Dia/mês/ano - hora
      Publicado por: Nome
       
      Mas eu gostaria que quando eu fisse a postagem fosse assim: Dia/mês/ano há 1 minuto, e assim por diante até chegar 24:00 horas, depois disso só mostra-se isso  ->
       
      Publicado em: Dia/mês/ano há 1 dia, 2 dias, 3 dias e por diante até chegar o ano. 1 ano, 2 anos. Etc, alguém pode me explicar como fazer isso. 
       
      Sei apenas publicar para que mostre a hora e data, mas não a contagem como expliquei. Agradeço quem ajudar.
       
      Um exemplo disso que expliquei está no anexo (print) que mandei..

    • Por Vanderson Nogueira
      Salve galera
       
      Atuo forte em compra de mídias em sites como ExoClick, Traffic Junky e etc. Mas fiquei na dúvida: como funcionam esses algorítimos? 
      Alguém conhece o funcionamento. Sei que eles cobram por cliques em banners e pagam aos sites onde são colocados os banners.... igual o adsense. Pesquisando notei o nome Ad Server.
      Alguém conhece sobre esse assunto??
    • Por marcelocardoso
      AJUDA...

      Segue exemplo de carrousel.
      Feito em Jquery, CSS, e html.
      1) O mesmo funciona, porém o CSS não tem opção para aumentar o tamanho da imagem, segue código:

       
      <section class="container-fluid parallax parallax_shadow"> <div class="row"> <div id="mn_clientes" class="col-lg-12 col-md-12 col-sm-6"> <h4 class="text-left space_top10" style=""> TExto do Carrousel </h4> <div class="row"> <div class="carrousel_padrao"> <ul class="carrousel_padrao__slides"> <li class="item"><img src="../site/img.jpg"></li> <li class="item"><img src="../site/img.jpg"></li> <li class="item"><img src="../site/img.jpg"></li> </ul> <div class="carrousel_padrao__arrow carrousel_padrao__arrow--left space_top40"> <span class="fa fa-arrow-left font_24px"></span> </div> <div class="carrousel_padrao__arrow carrousel_padrao__arrow--right space_top40"> <span class="fa fa-arrow-right font_24px"></span> </div> </div> </div> </div> </div> </section> <script> $(document).ready(function() { 'use strict'; var carousel = function carousel(options) { var _carousel = { paused: false, stopped: false, options: { speed: 3000, acceleration: 5, reverse: false, selector: '.carrousel_padrao', slidesSelector: '.carrousel_padrao__slides', leftArrowSelector: '.carrousel_padrao__arrow--left', rightArrowSelector: '.carrousel_padrao__arrow--right' }, init: function init() { var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; // Copy options to this.options for (var prop in options) { if (!options.hasOwnProperty(prop)) break; this.options[prop] = options[prop]; } // Cache nodes var carousel = document.querySelector(options.selector || this.options.selector); var slides = this._slides = carousel.querySelector(this.options.slidesSelector); this._leftArrow = carousel.querySelector(this.options.leftArrowSelector); this._rightArrow = carousel.querySelector(this.options.rightArrowSelector); // Multiply speed value by the number of slides this.options.speed = this.options.speed * slides.children.length; // Set slides container width this.width = slides.offsetWidth; // Repeat elements slides.innerHTML = slides.innerHTML + slides.innerHTML + slides.innerHTML; this._registerEvents(); this._animate(); }, _registerEvents: function _registerEvents() { var _this = this; var speed = this.options.speed; var reverse = this.options.reverse; this._rightArrow.addEventListener('mouseover', function() { _this.options.speed = speed / _this.options.acceleration; _this.options.reverse = false; }); this._rightArrow.addEventListener('mouseleave', function() { _this.options.speed = speed; _this.options.reverse = reverse; }); this._leftArrow.addEventListener('mouseover', function() { _this.options.speed = speed / _this.options.acceleration; _this.options.reverse = true; }); this._leftArrow.addEventListener('mouseleave', function() { _this.options.speed = speed; _this.options.reverse = reverse; }); // Pause when cursor is over carousel this._slides.addEventListener('mouseover', this.pause.bind(this)); this._slides.addEventListener('mouseleave', this.start.bind(this)); // Pause when cursor is over carousel window.addEventListener('resize', function() { _this.width = _this._slides.offsetWidth; }); }, pause: function pause() { this.paused = true; }, start: function start() { this.paused = false; }, stop: function stop() { this.stopped = true; }, _animate: function _animate() { var _this2 = this; var slides = this._slides; var oneThird = slides.lastElementChild.getBoundingClientRect().right / 3; var framesCount = 0; var step = 0; var posX = 0; var animate = function animate() { if (!_this2.paused) { framesCount = _this2.options.speed * 60 / 1000; step = oneThird / framesCount; posX += _this2.options.reverse ? step : -step; slides.style.transform = 'translateX(' + posX + 'px)'; if (_this2.options.reverse) { if (posX >= _this2.width - oneThird) { posX = _this2.width - oneThird * 2; } } else { if (Math.abs(posX) >= oneThird * 2) { posX = -oneThird; } } }!_this2.stopped && requestAnimationFrame(animate); }; animate(); } }; _carousel.init(options); return _carousel; }; window.onload = function() { return carousel({ selector: '.carrousel_padrao' }); }; });</script> CSS:

       
      .carrousel_padrao { width: 100%; position: relative; margin-top: 20px; } .carrousel_padrao__slides { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0; padding: 0; height: auto; list-style: none; will-change: transform; } /* .carrousel_padrao .carrousel_padrao__slides > .item > img, .carrousel_padrao .carrousel_padrao__slides > .item > a > img { display: block; width: 100%; height: auto; } */ .carrousel_padrao__arrow { width: 30px; height: 30px; position: absolute; top: 70%; z-index: 1; -webkit-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); background-color: white; } .carrousel_padrao__arrow--left { left: 15px; cursor: pointer; background-color: #ff9326; border-radius: 30px; color: #ff9326; /* -webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); */ } .carrousel_padrao__arrow--right { right: 15px; cursor: pointer; background-color: #ff9326; border-radius: 30px; color: #ff9326; /* -webkit-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); -moz-box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); box-shadow: 0px 0px 8px -1px rgba(171, 171, 171, 1); */ } .carrousel_padrao__arrow--right:hover, .carrousel_padrao__arrow--left:hover { transition: 1s ease; -webkit-transition: all 100ms ease-in; -webkit-transform: scale(1.5); -ms-transition: all 100ms ease-in; -ms-transform: scale(1.5); -moz-transition: all 100ms ease-in; -moz-transform: scale(1.5); transition: all 100ms ease-in; transform: scale(1.5); } Estou com problemas no CODIGO acima, na parte que está comentado no CSS.
      Tentei inserir aquele código para acertar o tamanho da mensagem, mas não vai....
      SUGESTÕES:::????

      Obrigado.
    • Por manolegal
      Olá amigos
      Gostaria de diminuir o espaçamento entre linhas no bootstrap, porém não está funcionando.
      Tentei da seguinte forma:
      .form_cad form{ margin: 0!important; padding: 0!important;} .form_cad h3{ margin: 0!important; padding: 0!important;} .form_cad row { margin: 0!important; padding: 0!important;} .form_cad form-group{ margin: 0!important; padding: 0!important;} .form_cad input-group{ margin: 0!important; padding: 0!important;} .form_cad select{ text-align: left; margin: 0!important; padding: 0!important;} .form_cad label{ margin: 0!important; padding: 0!important;} .form_cad a{ margin: 0!important; padding: 0!important;} .form_cad button{ margin: 0!important; padding: 0!important;} Meu formulário:
      <div class="container-fluid"> div class="row-fluid"> <div class="col-md-10"> <h3 class="page-header">Meu Form</h3> <div class="row"> <form id="cadastro" class="form_cad" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>"> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label>Data Solicitação</label> <div class="form-group"> <div class='input-group date' id='cal'> <input class="form-control form_input_recebe_foco" type="text" id="data_solicitacao" name="data_solicitacao" required autofocus maxlength="10" value="" placeholder="(Obrigatório)"> <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span> </div> </div> </div> </div> <!-- /row --> <div class="row"> <div class="form-group col-md-3 col-md-offset-2"> <label for="qdade_horas">Quantidade Horas</label> <input class="form-control form_input_recebe_foco" type="text" id="qdade_horas_dec" name="qdade_horas" maxlength="5" required autocomplete="off" value=""> </div> </div> <!-- /row --> .......... O estilo css não está funcionando em relação a diminuir o espaçamento entre as linhas do formulário. O que preciso fazer?
       
    • Por uninerds
      Olá pessoal, estamos criando algumas vídeo aulas de programação em HTML5 e CSS e gostaríamos que vocês dessem críticas e sugestões do que podemos estar fazendo para melhorar
      Segue o link da playlist com 22 vídeos de HTML5
      https://www.youtube.com/playlist?list=PLi3qhjm7dbeeC5h0NDfUiRqEvE0v08Pdd
       
      1 - O que é HTML, CSS e JavaScript?
      É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas Necessários
      É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro HTML5
      Começamos a mostrar de fato como começar a programar em HTML e como fazer para validar o código
       
      4 - Hierarquia de títulos e linha horizontal
      Como fazer hierarquia de títulos e colocar linha horizontal
      Tags: h1 até h6 e hr
       
      5 - Parágrafo, quebra de linha e texto pré-formatado
      Como fazer parágrafo, quebra de linha e texto pré-formatado
      Tags: p, br e pre
       
      6 - Formatação de texto
      Como fazer formatação de texto
      Tags: b, strong, i, em, mark, small, sub, sup, ins e del
      Atributos: cite e datetime das tags ins e del
       
      7 - Citações
      Como fazer citações
      Tags: q, blockquote, cite, address, abbr e bdo
      Atributos: title da tag abbr, dir da tag bdo e cite das tags q e blockquote
       
      8 - Comentários e comentários condicionais
      Como fazer comentário e para que serve
       
      9 - Arquivo Externo
      Como fazer referência de arquivo externo no HTML
       
      10 - Links | Parte 1
      Como fazer links para abrir outros HTML, enviar e-mail, executar JavaScript e direcionar para um local específico
      Tag: a
      Atributos: href, hreflang e type
       
      11 - Links | Parte 2
      Como criar links para download, diferentes formas de abrir no navegador e vulnerabilidade do target="_blank"
      Tag: a
      Atributos: download e target
      Valores para o target: _self, _blank, _top e _parent
       
      12 - Links | Parte 3
      Como resolver vulnerabilidade do target="_blank" e o atributo rel
      Tag: a
      Atributo: rel
      Valores para o rel: alternate, author, bookmark, prev, next, external, help, license, search, tag, nofollow, noreferrer, noopener
       
      13 - Bloco e Linha
      O conceito de tag de bloco e de linha
      Tags: div e span
       
      14 - Imagem | Parte 1
      Como colocar imagem no HTML
      Tag: img
      Atributos: src, alt, width, height, crossorigin, ismap e longdesc
      Valores para o crossorigin: anonymous e use-credentials
       
      15 - Imagem | Parte 2
      Como fazer mapeamento de imagem para colocar link dentro dela
      Tags: img, map e area
      Atributo da img: usemap
      Atributo da map: name
      Atributos da area: shape, coords e alt
      Valores para o shape: circle, rect e poly
       
      16 - Imagem | Parte 3
      Como definir imagens diferentes para dispositivos com características de tela diferentes
      Tags: img, picture e source
      Atributos da img: srcset e sizes
      Atributos da source: srcset, sizes, media e type
       
      17 - Tabela | Parte 1
      Como criar tabela em HTML
      Tags: table, caption, tr, th e td
      Atributos da th: abbr, sorted e scope
      Atributos da th e da td: colspan, rowspan e headers
      Valores para o scope: col, colgroup, row e rowgroup
       
      18 - Tabela | Parte 2
      Como altarar estilo de uma coluna inteira e definir cabeçalho, corpo e rodapé da tabela
      Tags: colgroup, col, thead, tbody e tfoot
      Atributo da colgroup e col: span
       
      19 - Lista
      Como criar lista não-ordenada, ordenada e de descrição
      Tags: ul, li, ol, dl, dt e dd
      Atributos da ol: type, reversed e start
      Atributos da li quando estiver na ol: value
      Valores para o type: 1, a, A, i e I
       
      20 - Iframe
      Como colocar uma página dentro de outra em HTML
      Tag: iframe
      Atributos: src, srcdoc, width, height, name e sandbox
      Valores para o sandbox: allow-pointer-lock, allow-scripts, allow-forms, allow-top-navigation, allow-same-origin e allow-popups
       
      21 - Atributo Class
      Qual a importância do atributo class e como utilizar ele em CSS e JavaScript
       
      22 - Atributo Id
      Qual a importância do atributo id e como utilizar ele em CSS e JavaScript
       
      Segue o link da playlist com 15 vídeos de CSS
      https://www.youtube.com/playlist?list=PLi3qhjm7dbedkcSwqOrGYHD_E_0H7Nopj
       
      1 - O que é HTML, CSS e JavaScript?
      É explicado o que é HTML, CSS e JavaScript e porque é necessário conhecer estas 3 linguagens para programar para Web
       
      2 - Programas Necessários
      É mostrado os programas necessários para começar a programar (estamos fazendo as vídeo aulas no sistema operacional Xubuntu)
       
      3 - Primeiro CSS
      Como fazer a integração entre HTML e CSS
       
      4 - Cores
      Como definir cor por nome, hexadecimal, RGB, HSL, RGBA e HSLA
       
      5 - Initial e Inherit
      Como utilizar os valores initial e inherit para propriedades em CSS
       
      6 - Consulta de mídia
      Como definir estilos diferentes para tipos de dispositivos diferentes e mesmo tipo de dispositivo com características diferentes
       
      7 - Borda | Parte 1
      Como fazer bordas em CSS
      Propriedades: border, border-color, border-radius, border-style e border-width
      Valor para border-color: transparent
      Valores para border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
      Valores para border-width: medium, thin e thick
       
      8 - Borda | Parte 2
      Como alterar as propriedades da borda em cada lado
      Propriedades: border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-left, border-left-color, border-left-style, border-left-width, border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-right, border-right-color, border-right-style, border-right-width, border-top, border-top-color, border-top-style e border-top-width
       
      9 - Largura e Altura
      Como definir largura e altura em CSS e também valor mínimo e máximo para cada uma
      Propriedades: width, height, min-width, max-width, min-height e max-height
       
      10 - Margem
      Como colocar margem em CSS, centralizar conteúdo e um cuidado que deve ter ao utilizar margem
      Propriedades: margin, margin-top, margin-right, margin-bottom e margin-left
       
      11 - Preenchimento
      Como colocar preenchimento em CSS
      Propriedades: padding, padding-top, padding-right, padding-bottom e padding-left
       
      12 - Excesso
      O que fazer quando o conteúdo de uma tag é maior que a largura e/ou altura
      Propriedades: overflow, overflow-x e overflow-y
      Valores para as propriedades: visible, hidden, scroll e auto
       
      13 - Modelo de Caixa
      Qual é o conceito de modelo de caixa e porque é importante conhecer ele para montar o layout de uma página
       
      14 - Fundo
      Como alterar a cor de fundo, colocar imagem como fundo e definir a posição da mesma
      Propriedades: background, background-color, background-image, background-repeat, background-attachment e background-position
      Valores para background-repeat: repeat, repeat-x, repeat-y, no-repeat, space e round
      Valores para background-attachment: scroll, fixed e local
      Valores para background-position: left top, left center, left bottom, right top, right center, right bottom, center top, center center, center bottom
       
      15 - Contorno
      Como colocar contorno no conteúdo utilizando CSS
      Propriedades: outline, outline-color, outline-style, outline-width e outline-offset
      Valor para outline-color: invert
      Valores para outline-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset e outset
      Valores para outline-width: medium, thin e thick
       
      PS:
      - Como temos nossos serviços seculares que é como conseguimos o sustento não teremos como responder todos os comentários de imediato, mas de qualquer forma agradecemos desde já a ajuda
      - Sempre que tiver vídeo novo atualizaremos este tópico
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.