Compartilhamento de tecnologia

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Introdução ao CSS

CSS éFolhas de estilo em cascata(Abreviatura de Cascading Style Sheets) é usado para controlar com precisão o estilo das páginas HTML para melhor exibir informações gráficas ou produzir uma experiência interativa interessante/amigável.

没有必要让所有浏览器都显示得一模一样的，好的浏览器有更好的显示，糟糕的浏览器就只有普通的显示，这才是对用户更负责任的做法。
1

O sufixo do arquivo CSS é .css

Comente

/* 注释的内容 */
1

Três maneiras de adicionar estilos

1. estilo Estilos embutidos

<span style="color: red">红色文字</span>
1

2. Adicione via seletor de estilo CSS

https://blog.csdn.net/weixin_41192489/article/details/140226382

3. Herança

Os elementos dentro do contêiner obterão os estilos adicionados no contêiner

  <div style="color: red">
    <p>我是容器内的元素，并没有直接添加样式，但也会变红！</p>
  </div>
1
2
3

• Os atributos de estilo de texto são todos herdados. Esses atributos incluem: cor, começando com texto, começando com linha e começando com fonte.
• Os atributos de caixa, posicionamento e layout não podem ser herdados.

Quem decide o estilo final?

Como existem muitas fontes de estilos em elementos, incluindo estilos padrão do navegador, estilos embutidos de estilo, estilos adicionados por vários seletores CSS e estilos herdados de elementos pai, o estilo final será aquele com a prioridade mais alta entre muitos estilos. estilo.

Prioridade de estilo CSS

https://blog.csdn.net/weixin_41192489/article/details/139720467

Noções básicas essenciais de estilo

Unidade de comprimento CSS

https://blog.csdn.net/weixin_41192489/article/details/140236423

Funções CSS

https://blog.csdn.net/weixin_41192489/article/details/140318834

modelo de caixa

https://blog.csdn.net/weixin_41192489/article/details/102411612

• Tanto a altura quanto a altura da linha podem abrir a caixa, mas a imagem de fundo não pode abrir a caixa.

Coisas a serem observadas sobre elementos embutidos

• Os elementos embutidos só podem exibir margens internas e externas no início e no final e devem ser evitados tanto quanto possível, portanto, não defina margens internas e externas para elementos embutidos.

• Depois que os elementos embutidos forem agrupados, a exibição das bordas ficará empilhada e desordenada, portanto, não defina bordas para os elementos embutidos!

• Quando você precisar adicionar bordas/margens internas e externas a um elemento embutido, converta-o em uma caixa embutida

  display：inline-block
  1

Quais estilos podem ser adicionados?

Estilo universal

Os estilos podem ser adicionados a quase todos os elementos HTML.

Largura altura

• largura: o padrão é a largura do conteúdo (não a largura da caixa)
• altura: o padrão é a altura do conteúdo (não a altura da caixa)

Através do estilo a seguir, você pode alterar o modelo de caixa padrão padrão do elemento para o modelo de caixa do IE.

box-sizing:border-box;
1

Neste momento

• Largura: A largura da caixa (borda esquerda + preenchimento esquerdo + largura do conteúdo + preenchimento direito + borda direita)
• altura: altura da caixa (borda superior + preenchimento superior + altura do conteúdo + preenchimento inferior + borda inferior)

Preenchimento

• Valores negativos não são suportados
• O valor percentual, seja horizontal ou vertical, é calculado em relação à largura.

padding: 10px;
1

Preenchimento: 10px para parte superior, inferior, esquerda e direita

padding:10px 5px;
1

O preenchimento superior e inferior é de 10px

O preenchimento direito e esquerdo tem 5px

padding:10px 5px 15px;
1

O preenchimento superior é de 10px

O preenchimento direito e esquerdo tem 5px

O preenchimento inferior é de 15px

padding:10px 5px 15px 20px;
1

O preenchimento superior é de 10px

O preenchimento direito é 5px

O preenchimento inferior é de 15px

O preenchimento esquerdo é 20px

fronteira

Estilos relacionados também são

• raio de borda arredondado
• preenchimento de borda imagem de borda
• esboço

Veja detalhes https://blog.csdn.net/weixin_41192489/article/details/140325106

margem

https://blog.csdn.net/weixin_41192489/article/details/115140348

transbordar

• visível [Valor padrão] Todo o conteúdo excedente será exibido sem cortar ou adicionar barras de rolagem.
• oculto: oculta a barra de rolagem e não exibe conteúdo que exceda o tamanho do objeto, mas ainda pode ser rolado.
• auto: Se o conteúdo não exceder, a barra de rolagem não será exibida; se o conteúdo exceder, a barra de rolagem será exibida;
• scroll: Na plataforma Windows, as barras de rolagem são sempre exibidas, independentemente de o conteúdo exceder o limite. Na plataforma Mac, é igual ao atributo auto.

Contêineres com valores de overflow de auto e scroll são contêineres rolantes (contêineres com barras de rolagem). Não é recomendado usar preenchimento para seus espaços em branco. Devido a problemas de compatibilidade, você só pode usar a margem inferior dos elementos filhos para obter resultados. o preenchimento inferior do contêiner de rolagem é branco.

transparênciaopacidade

O valor do atributo varia de 0,0 (completamente transparente) a 1,0 (completamente opaco). Se exceder o limite do intervalo de 0 a 1, o valor final calculado é o valor limite.

    opacity: -1;    /* 解析为 0, 完全透明 */
    opacity: 2;     /* 解析为 1, 完全不透明 */
1
2

fundo de fundo

https://blog.csdn.net/weixin_41192489/article/details/140301618

shadowbox-sombra

A sombra não alterará o tamanho da caixa e não afetará o layout de seus elementos irmãos. Você também pode definir várias sombras de borda para obter melhores efeitos e aprimorar o efeito tridimensional.

box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色（默认值为color的颜色值）  内/外阴影
1

• Deslocamento horizontal: valor positivo à direita, valor negativo à esquerda.
• Deslocamento vertical: valores positivos para baixo e valores negativos para cima.
• Nível de desfoque: não pode ser negativo
• Sombra interna/externa - inserção é sombra interna, não escrita como sombra externa

box-shadow: 15px 21px 48px -2px #666;
1

Sombras comumente usadas

box-shadow: 0 2px 6px 0 rgba(0,0,0,.4);
1

Veja mais uso
https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

• [Prático] Substituindo a cor de fundo do preenchimento automático da caixa de entrada

  input:-webkit-autofill {
      -webkit-box-shadow: inset 0 0 0 1000px #fff;
      background-color: transparent;
  }
  1
  2
  3
  4

• [Prático] Modificar cores de pressionamento de botão em lotes

  button:active {
      box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .1);
  }
  1
  2
  3

• 【Combate real】Guia para iniciantes sobre efeito de máscara

  .guide {
      box-shadow: 0 0 0 9999px rgba(0, 0, 0, .75);
      border-radius: 50%;
  }
  1
  2
  3
  4

caminho do clipe do clipe

https://blog.csdn.net/weixin_41192489/article/details/121341551

• [Prático] clip-path implementa animação de transição semelhante ao PPT
  https://www.zhangxinxu.com/wordpress/2019/05/css-transfer-animation

transformartransformar

https://blog.csdn.net/weixin_41192489/article/details/140314866

aproximação aproximação

O navegador Firefox não oferece suporte. Ele pode ter os seguintes valores de atributos.

• Valor percentual.zoom:50%, indicando redução para metade do tamanho original.
• valor numérico.zoom:0.5, indicando redução para metade do tamanho original.
• normalPalavras-chave.zoom:normalEquivalente azoom:1, é o valor padrão.
• resetPalavras-chave.zoom:reset , indicando que quando o usuário pressiona Ctrl e - ou Ctrl e + para ampliar o documento, os elementos não serão reduzidos ou ampliados de acordo. No entanto, esta palavra-chave tem pouca compatibilidade e só é suportada pelo navegador Safari.

Comparação entre as funções zoom e scale()

• zoomA coordenada central da escala do atributo é relativa ao canto superior esquerdo do elemento e não pode ser modificada.transformtransformandoscale()A coordenada central padrão da escala da função é o ponto central do elemento.
• O dimensionamento do atributo de zoom alterará o tamanho do espaço ocupado pelo elemento em tempo real e acionará o redesenho e o recálculo. Portanto, o desempenho do dimensionamento do atributo de zoom é pior do que o da função scale().
• Aplicar o atributo zoom a um elemento não criará um contexto em cascata, não afetará o posicionamento de elementos fixos e a ocultação de overflow de elementos posicionados de forma absoluta pelo atributo overflow, nem alterará o bloco que contém os elementos posicionados de forma absoluta.

máscara máscara

https://blog.csdn.net/weixin_41192489/article/details/121158821

gradientegradiente

https://blog.csdn.net/weixin_41192489/article/details/140316024

Estilos únicos para diferentes tipos de elementos

texto

https://blog.csdn.net/weixin_41192489/article/details/140264311

Hiperlink

Estilos de pseudoclasse - devem ser escritos na seguinte ordem fixa:

• :link "Link": antes do hiperlink ser clicado - aplica-se a todos os hiperlinks com atributos href (excluindo âncoras) - pode ser omitido, abreviado na tag a
• :visited "Visited": após o link ter sido visitado - pode ser omitido, abreviado na tag a
• :hover "hover": quando o mouse é colocado sobre o rótulo
• :active "Ativar": Quando o mouse clica no rótulo mas não solta.

    /*让超链接点击之前是红色*/
    a:link{
        color:red;
    }

    /*让超链接点击之后是绿色*/
    a:visited{
        color:orange;
    }

    /*鼠标悬停，放到标签上的时候*/
    a:hover{
        color:green;
    }

    /*鼠标点击链接，但是不松手的时候*/
    a:active{
        color:black;
   }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

foto

Filtro de imagem

https://www.runoob.com/cssref/css3-pr-filter.html

ícone

• Implemente ícones responsivos com peso de fonte
  Quando o tamanho da fonte é maior, a fonte do ícone é mais detalhada e, quando o tamanho da fonte é menor, a fonte do ícone é mais simples.
  https://demo.cssworld.cn/8/5-1.php

• fusão de ícones css - tecnologia ClipPath Sprites
  https://blog.csdn.net/weixin_41192489/article/details/121242735

folha

Destacar linhas ao passar o mouse

/*鼠标悬停时，让当前行显示#868686这种灰色*/
table tr:hover{
      background: #868686;
}
1
2
3
4

linhas alternadas de cores

A alternância de cores entre as linhas de dados pode reduzir o cansaço de leitura do usuário.

table tr:nth-child(odd){
   background:#fff
}
table tr:nth-child(even){
   background:blue
}
1
2
3
4
5
6

rolagem

cursor do mouse

cursor

Cor do cursor cor do cursor
Defina a cor do cursor de inserção da caixa de entrada (ainda não suportado pelos navegadores IE e Edge)

input {
    caret-color: red;
}
1
2
3

Mostrar e ocultar estilos relacionados

Quando não há estilos seguintes que possam ocultar elementos, os elementos são exibidos (alguns não são visíveis apenas porque a cascata está coberta):

• display: none [Comumente usado] Elementos ocultos, não ocupam espaço, carregam recursos e o DOM é acessível (adicionar oculto à tag html alterará a exibição da tag para nenhum)
• visibility: hidden Os elementos ocultos ocupam posição, os recursos serão carregados e o DOM estará acessível
  • Se o elemento pai definir visibilidade: oculto, os elementos filhos também ficarão invisíveis (herança)
  • Se Visibility:visible estiver definido em um elemento filho, o elemento filho será exibido novamente.
• opacity: 0 O elemento fica invisível, assume posição e pode ser clicado ou selecionado.
• clip: rect(0 0 0 0) O elemento é invisível, não pode ser clicado, não ocupa espaço, mas pode ser acessado pelo teclado
• Valores negativos do índice z ocultam o elemento. O elemento é invisível e não pode ser clicado, mas ocupa espaço e pode ser acessado pelo teclado.

  .lower {
  　position: relative;
  　z-index: -1;
  }
  1
  2
  3
  4

Estilos dependentes de posição

A posição de um elemento na página é determinada por vários estilos, incluindo posicionamento, exibição, flutuação, margem, etc.

Quando posição, exibição e flutuação existem ao mesmo tempo, o efeito de exibição final do elemento será determinado de acordo com a lógica descrita no link abaixo.

https://blog.csdn.net/weixin_41192489/article/details/119009647

posição posição

https://blog.csdn.net/weixin_41192489/article/details/140242430

exibição de layout

https://blog.csdn.net/weixin_41192489/article/details/140250775

margem

https://blog.csdn.net/weixin_41192489/article/details/115140348

Alinhamento

https://blog.csdn.net/weixin_41192489/article/details/140255028

Índice z em cascata

https://blog.csdn.net/weixin_41192489/article/details/140297366

Estilos relacionados à interação

Comportamento de rolagem suave: suave

https://blog.csdn.net/weixin_41192489/article/details/121365831

esticar redimensionamento

https://blog.csdn.net/weixin_41192489/article/details/121396794

Estilos relacionados à adaptação de dispositivos

Consultas da mídia @media

https://blog.csdn.net/weixin_41192489/article/details/126028971

[Prático] Soluções de adaptação de terminal móvel (três tipos)

https://blog.csdn.net/weixin_41192489/article/details/120999355

Estilos CSS personalizados (variáveis ​​CSS/propriedades personalizadas)

https://blog.csdn.net/weixin_41192489/article/details/140317369

Melhore a eficiência da escrita CSS

Pré-processador CSS

O pré-processador CSS é uma linguagem de programação especializada usada para adicionar alguns recursos de programação ao CSS (o CSS em si não é uma linguagem de programação). Não há necessidade de considerar problemas de compatibilidade do navegador porque o pré-processador CSS compila e gera estilos CSS padrão. Você pode usar habilidades básicas de programação, como variáveis, julgamentos lógicos simples e funções no pré-processador CSS.

Os principais pré-processadores CSS incluem Sass (Scss), Less e Stylus.
(SASS foi renomeado como SCSS desde a versão 3.0)

• Tutorial prático de Scss
  https://blog.csdn.net/weixin_41192489/article/details/134313564

Estrutura CSS

• Tutorial Prático UnoCSS
  https://blog.csdn.net/weixin_41192489/article/details/140034188

Convenções de codificação CSS

• Redefinir estilos padrão do navegador
• Tente evitar usar estilo
• As unidades só podem ser omitidas se o valor do atributo for zero
• O valor geralmente é um número par, como 6px em vez de 5px (especialmente a altura da linha e o tamanho da fonte, de modo a garantir que sua diferença seja divisível por 2, para que a fonte fique centralizada na linha)
• O nome da classe deve ser semântico, para que você possa identificar rapidamente em qual elemento o nome da classe atua/o efeito de estilo alcançado pelo nome da classe.

/* 给左侧的盒子定义的样式 */
.leftBox{
}
/* 给内部为菜单的盒子定义的样式 */
.menuBox{
}
/* 将子元素排列为一行的样式 */
.row{
   display:flex
}
/* 设置颜色为红色 */
.red{
  color:red
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Estilos de texto recomendados

• Use font-size: Medium para contêineres de texto (quando o tamanho padrão do navegador é alterado, o texto pode ser ampliado ou reduzido de acordo)
• O texto dentro do contêiner de texto, usando unidades relativas - porcentagem ou em
• Use em como unidade para margens de texto

Animação de alto desempenho

Os três elementos da animação CSS de alto desempenho referem-se ao posicionamento absoluto, atributo de opacidade e atributo de transformação. Portanto, o mesmo efeito de animação é obtido primeiro usando o atributo transform. Por exemplo, animações de movimento de elementos devem usar o atributo transform em vez do atributo margin.