Perguntas com a tag [css]
Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
8,527
perguntas
81
votos
4
respostas
10mil
visitas
É possível fazer um tooltip com CSS puro?
É possível fazer um tooltip com CSS puro? Ou seja, sem jQuery, sem Javascript, mas somente com CSS.
Por exemplo, quero fazer isso baseando no seguinte elemento:
<a href="#" data-tooltip="Meu ...
76
votos
18
respostas
195mil
visitas
Qual a melhor forma de centralizar um elemento vertical e horizontalmente?
Qual a melhor forma (por "melhor" eu quero dizer: com maior compatibilidade possível entre browsers e o mais simples possível) de posicionar um elemento no centro da página, vertical e horizontalmente ...
65
votos
3
respostas
2mil
visitas
Por que não é recomendado usar "_" (underscore) em HTML/CSS?
Já vi gente recomendando nunca usar _ (underscore) em HTML e CSS. Ao invés disso, deveríamos dar preferência para -.
Exemplo:
// Errado
<div id="minha_div" class="minha_classe"></div>
//...
60
votos
2
respostas
4mil
visitas
O que é DOM, Render Tree e Node?
Sou iniciante no JS e procuro entender a teoria, só que todos os artigos que encontro sobre DOM são demasiadamente "científicos".
Não haveria uma forma mais simples de explicar isso para um "leigo"?
59
votos
3
respostas
48mil
visitas
Qual é a diferença entre SASS e SCSS
Tenho lido sobre SASS há algum tempo e ele fornece um poderoso conjunto de funcionalidades para o CSS como variáveis, mixins e afins.
E ao mesmo tempo vejo o termo SCSS. Qual a diferença entre ambos? ...
58
votos
2
respostas
45mil
visitas
Para que serve a declaração "!important"?
Para que serve a declaração !important no CSS?
body {
font-size: 12.5px !important;
}
53
votos
2
respostas
46mil
visitas
Quando usar position absolute ou relative em CSS?
Sei que um elemento dentro com posição absolute não respeita os limites da div pai e que relative respeita, e teoricamente se posiciona em relação a si.
Minhas duvidas basicamente são:
Um elemento ...
50
votos
5
respostas
71mil
visitas
Qual a diferença entre display:none e visibility:hidden?
Sei que ambos escondem o elemento, mas existe na prática alguma diferença entre:
#foo{
display:none;
}
e
#foo {
visibility:hidden;
}
46
votos
3
respostas
5mil
visitas
Como descobrir se uma cor hexadecimal é escura ou clara?
Tenho uma listagem de status que é exibida e cada status tem uma cor atribuída. Essas cores estão salvas no meu banco de dados em formato hexadecimal.
Exemplo:
#add555
Eu estou com um pequeno ...
46
votos
5
respostas
81mil
visitas
Como fixar um "menu horizontal" no topo da janela ao rolar a página?
Tenho um layout com uma barra de navegação horizontal na parte superior do site, ele está com margin-top:100px, quando rolar a página o menu deve ser fixado no topo da janela mas com margin-top:0.
...
45
votos
5
respostas
111mil
visitas
Como imprimir o conteúdo dentro de uma div HTML?
Tenho uma página e nela o conteúdo que quero imprimir.
Criei um comando em JavaScript, porém esse comando faz imprimir a página inteira.
Existe alguma forma de ser impresso apenas o conteúdo de uma ...
41
votos
2
respostas
1mil
visitas
<br> está obsoleto?
Com o advento dos layouts responsivos/adaptativo/fluidos está cada vez menos comum o uso do <br> para definir espaçamentos no layout. O uso dele não é recomendado nesses layouts modernos ou é só ...
40
votos
8
respostas
537mil
visitas
Reduzir o tamanho de uma imagem e manter a proporção com CSS
Se tenho uma imagem horizontal (320x205),
<div class="container">
<img src="imagem.jpg" width="320" height="205" />
</div>
e coloco a regra CSS .container img { max-width: ...
40
votos
6
respostas
23mil
visitas
Como centralizar verticalmente o conteúdo de um elemento?
Estou tentando centralizar verticalmente o conteúdo de um elemento que tem position: absolute.
Consegui fazer o conteúdo se posicionar da metade para baixo do container, no entanto, da metade para ...
39
votos
3
respostas
15mil
visitas
É recomendado utilizar a unidade "em" ao invés de "px" para fontes?
Vejo que alguns sites ao definir o font-size utilizam a unidade em, em uma breve pesquisa eu li que é recomendado usar em em fontes por ser melhor do que a unidade px.
Afinal, qual seria a unidade ...
39
votos
4
respostas
57mil
visitas
Como aplicar readonly em um select?
Creio que a maioria aqui conhece a diferença entre readonly e disabled.
Select Readonly
O readonly não se aplica corretamente para o select
<select name="field" readonly="readonly">
&...
39
votos
1
resposta
6mil
visitas
Qual seletor CSS tem prioridade?
Tenho o seguinte código HTML e CSS:
#element p{color:blue;}
.element p{color:red;}
div p{color:pink;}
div.element p{color:yellow;}
div[name="element"] p{color:purple;}
div p:...
39
votos
1
resposta
1mil
visitas
Qual a diferença entre os seletores "element element" e "element > element"?
Estava olhando o código do Twitter Bootstrap, e encontrei este CSS:
.table-condensed > tfoot > tr > td {
/* ... */
}
Em sentido de funcionamento, qual seria a diferença de colocar apenas ...
38
votos
8
respostas
66mil
visitas
Input type="password" com o olho de mostrar senha
Preciso colocar um <input type="password"> com aquele olho do revelar senha, porém tem que funcionar da seguinte maneira:
Usuário clica no olho e ao soltar esconde os caracteres novamente.
...
37
votos
2
respostas
86mil
visitas
Como deixar imagem responsiva
Estou trabalhando em um site com característica responsiva e nele tenho uma página de promoções e gostaria que as imagens acompanhassem a mudança de tamanho do navegador, o tamanho máximo da largura ...
36
votos
3
respostas
17mil
visitas
Como fazer uma barra de progresso que vá de 0 a 100% somente com CSS?
Estou desenvolvendo uma página onde tem uma barra de progresso e preciso fazer que ela inicie do 0 e vá ao 100%.
Porém preciso fazer somente com CSS e, além disso, necessito que quando ela chegar ao ...
36
votos
7
respostas
40mil
visitas
Qual a diferença entre padding e margin no CSS?
Pelo que percebo vejo um recuo em relação a outro elemento quando definidas as propriedades left, top, right e bottom.
Existe diferença entre margin e padding no CSS?
Uma resposta com exemplos(...
35
votos
3
respostas
165mil
visitas
Como centralizar horizontalmente uma div dentro de outra?
Como eu posso centralizar horizontalmente uma div que está dentro de outra div utilizando apenas CSS?
No caso, podemos assumir que div externa outer tem a largura de 100%.
<div id="outer">
...
34
votos
5
respostas
7mil
visitas
Como aplicar !important do CSS via jQuery?
Estou tentando aplicar um estilo ao meu elemento e definir a importância dele, desta maneira:
$('div').css('height','50px!important');
Porém, não funciona, qual seria a maneira correta?
30
votos
4
respostas
82mil
visitas
Como estilizar um input do tipo "file"?
Tenho essa estrutura:
<section id="cadastro" class="cadastroVersao pg-i">
<div class="titulo">
<h1><i class="icon-clientes"></i>Cadastro de versão</h1&...
30
votos
4
respostas
3mil
visitas
É necessário adicionar prefixos em algumas propriedades do CSS?
Em muitos códigos são adicionados os prefixos de compatibilidade dos navegadores em atributos do CSS. Exemplo:
.exemplo {
-webkit-background-size: 50% 50%;
-moz-background-size: 50% 50%;
-o-...
29
votos
10
respostas
62mil
visitas
O que devo usar no CSS, id ou class?
Comecei a praticar html e css e surgiram algumas dúvidas:
Quando for criar um estilo para um elemento HTML o que devo usar no CSS, class ou id?
Qual é o critério de vocês para escolher o que usar no ...
29
votos
10
respostas
85mil
visitas
Como fazer um <div> ocupar toda a largura da página mas deixar uma lacuna de alguns pixels de cada lado em CSS?
Estou tentando fazer um cabeçalho que deveria preencher toda a largura da página, mas deixando uma lacuna de 5px em cada lado. Por exemplo:
| ::::::::::::::: |
| ::::::::::::::: |
Nesse caso os ...
29
votos
2
respostas
2mil
visitas
O que significa o sinal de + no CSS?
Por exemplo:
.input__field--minoru:focus + .input__label--minoru::after {
}
Estou fazendo um efeito aqui, mas não estou entendendo esse sinal de + que tem no framework.
Resultado Final
$(...
29
votos
3
respostas
720
visitas
Comentários pesam?
Comentários pesam?
Eu deixar comentários em todo meu código, vai influenciar em alguma coisa no site?
Estou dizendo mais especificamente em HTML, CSS, JavaScript, PHP.
29
votos
2
respostas
4mil
visitas
Quais as vantagens e desvantagens de minificar scripts JavaScript?
E quais minificadores posso usar?
28
votos
5
respostas
9mil
visitas
Com CSS é possível colocar 2 cores em 1 letra? Ou metade do texto com uma cor diferente?
Gostaria de saber se com CSS tem como deixar apenas metade de uma letra, ou metade de uma palavra, com outra cor e a outra metade com outra?
Seria possível chegar nesse resultado da imagem abaixo só ...
28
votos
9
respostas
61mil
visitas
Como remover auto complete de input do google Chrome?
Quero remover background amarelo de quando esta habilitado o auto complete do Google Chrome.
Tentei desabilitar o auto complete, aplicando: autocomplete="off" e não tive sucesso.
A imagem de cima é a ...
28
votos
4
respostas
7mil
visitas
Qual a prioridade do HTML? "id" ou "class"?
Gostaria de saber se o HTML trata por prioridade o id ou class.
Por exemplo, se eu estou montando minha estrutura e faço o seguinte:
<div class="teste1" id="teste2">TESTE</div>
O que ...
27
votos
2
respostas
21mil
visitas
Alguma maneira de estilizar elemento "pai" com CSS
Olá, existe alguma maneira de selecionar o elemento pai de outro elemento com CSS?
Para ser mais especifico, estou estudando em localhost usando a plataforma de fóruns phpBB3, quando uma mensagem é ...
26
votos
1
resposta
79mil
visitas
Como estilizar a barra de rolagem?
Boas,
Tenho perdido algum tempo à procura de soluções para isto mas não encontro, tenho uma scrollbar e gostava de diminuir o seu tamanho.
Alguém me pode indicar algum site ou me dizer o que é ...
26
votos
2
respostas
7mil
visitas
Pegar cores da imagem
Há uma possibilidade (com plugins ou não) de pegar as [principais] cores ou as cores predominantes, parecido com o Adobe Kuler, da imagem?
Exemplo
Tenho essa imagem:
E queria pegar as principais ...
25
votos
4
respostas
10mil
visitas
Criar um triângulo com CSS
Os quadrados que apresentam a cor de um item podem ter até duas cores que neste último caso deverão ser apresentadas como se pode ver em baixo:
Ambas as cores são aplicadas na propriedade de CSS ...
25
votos
2
respostas
2mil
visitas
Quais são as diferenças estruturais e de sintaxe entre Sass, Less e Stylus?
Hoje em dia é difícil ver pessoas escrevendo "CSS à moda antiga" por causa dos pré-processadores que facilitam a escrita removendo repetições de código, e simplificação de sintaxe.
Gostaria de ...
24
votos
7
respostas
25mil
visitas
Como criar um <select> com imagens nas opções?
Achei que saberia fazer um select simples em html com imagem, porém não funciona.
Começo a achar que seja problema dos browsers modernos ou do HTML5.
CSS
select#gender option[value="Prima"] {
...
23
votos
6
respostas
15mil
visitas
O que é e como funciona o Bootstrap?
Dei uma pesquisada, mas a maioria dos artigos que achei partem do pressuposto de que o leitor já tem alguma familiaridade com frameworks (o que não é meu caso), que ainda tenho só uma vaga ideia do ...
23
votos
1
resposta
366
visitas
Propriedade will-change do CSS: quando utilizar?
De acordo com a especificação W3C, a propriedade will-change tem como objetivo informar ao navegador quais são as propriedades do CSS que serão modificadas para que o mesmo possa fazer otimizações ...
22
votos
4
respostas
21mil
visitas
Como impedir um click sobre um link/âncora ou elemento com evento amarrado
No caso de um link:
<a href="http://www.google.com">Google</a>
ou no caso de outro elemento que tenha um evento amarrado com addEventListener, que alternativas existem para evitar que o ...
22
votos
1
resposta
8mil
visitas
O que significa o asterisco em "* {}" no CSS?
Às vezes pego sites prontos pra editar e percebo que no console aparece:
* {
/* código aqui */
}
O que significa esse asterisco?
22
votos
6
respostas
19mil
visitas
Como simular uma tela de maior resolução para verificar o comportamento de um website?
Existe alguma forma de simular uma tela com maior resolução para verificar como um site se comporta? Atualmente utilizo 1440x900 e preciso testar a interface em resoluções maiores.
22
votos
3
respostas
889
visitas
Como melhorar o desempenho de arquivos estáticos de um site?
Meu site tem 10 folhas de estilos (CSS) e 15 scripts (JavaScript / jQuery), fora as imagens, isso influencia muito no carregamento. Na opinião de vocês, qual a melhor maneira de deixar o site mais ...
21
votos
6
respostas
17mil
visitas
Como criar formas geométricas usando CSS?
Como posso fazer as formas geométricas abaixo utilizando preferencialmente CSS? Caso não seja possível fazer utilizando somente CSS também aceito respostas com outros métodos.
21
votos
4
respostas
2mil
visitas
Por que colocar JavaScript, CSS e imagens em outro servidor?
Na maioria dos sites percebi que eles usam outro servidor para carregar scripts, CSS e imagens. Porque eles utilizam?
21
votos
4
respostas
17mil
visitas
Como tornar uma tabela responsiva usando (Twitter) Bootstrap?
Estou trabalhando numa aplicação web usando Ruby On Rails 4 e grande parte da interface consiste de tabelas.
Gostaria que sugerissem uma forma de detectar o tamanho da tela em uso e, com base nisso, ...
21
votos
6
respostas
20mil
visitas
Como fazer uma ScrollBar personalizada?
Como modificar a scrollbar de uma div, para aparecer como no exemplo da imagem abaixo (Hangouts), em vez da scrollbar padrão do sistema operacional?