Sintaxe básica CSS, seletores, atributos de elementos comuns, modelo de caixa, layout flexível

1. O que é CSS

• HTML descreve apenas a estrutura e o conteúdo da página. CSS pode ser usado para descrever o estilo da página e embelezá-la ainda mais.

• Cascading Style Sheets (Cascading Style Sheets)
  CSS pode realizar um controle preciso em nível de pixel sobre o layout das posições dos elementos nas páginas da web, obter o efeito de embelezar a página e pode separar o estilo e a estrutura da página.

• Especificamente, ele descreve os elementos de qualquer página da web, como tamanho/posição/fonte/cor/fundo/borda... A
  introdução do CSS pode fazer com que uma página tenha uma boa aparência. CSS não é tanto uma tecnologia, mas uma "arte"

---

2. Sintaxe CSS

1. Especificações básicas de sintaxe CSS

Cada instrução CSS contém duas partes: seletor + atributos aplicados

• O seletor determina para quem modificar
• Decida o que modificar
• {}Dentro está uma estrutura de par chave-valor, que representa vários atributos em CSS.
  • Os atributos declarados são pares de valores-chave . Use ;para distinguir pares de valores-chave e use :para distinguir chaves e valores.
  • É comum que cada par de valores-chave esteja em sua própria linha e é comum adicionar um espaço após os dois pontos.
  • Cada par de valores-chave corresponde a uma propriedade CSS
• CSS usado /* */como comentários (use ctrl + / para alternar rapidamente), não suportado//

<style>
	p {
    
    
		/* 设置字体颜色 */
		color: red;
		/* 设置字体大小 */
		font-size: 30px;
	}
</style>

<p>hello</p>

p é o seletor, aqui significa selecionar todas as tags p na página

O código CSS pode ser colocado em arquivos HTML (geralmente colocados styleem tags) e styleas tags podem ser colocadas em qualquer lugar em HTML

---

2. Como introduzir CSS

2.1. Folha de estilo interna

Escreva-o na tag style e incorpore-o dentro do html.
Teoricamente, o estilo pode ser colocado em qualquer lugar do html, mas geralmente é colocado na tag head.

Vantagens : Isso pode separar o estilo e a estrutura da página.
Desvantagens : A separação não é completa o suficiente, especialmente quando há muito conteúdo CSS.

O código escrito anteriormente usa principalmente esse método, que não é comumente usado
no desenvolvimento real . PS: Este método de escrita ainda é mantido na pesquisa Sogou.

---

2.2. Folha de estilo embutido/estilo embutido

• Especifique o estilo de uma determinada tag através do atributo style

• É adequado apenas para escrever estilos simples e só tem efeito para uma determinada tag.
  Desvantagens : Você não pode escrever estilos muito complexos, o que parecerá confuso.

• Este tipo de estilo embutido é um uso relativamente especial (geralmente usado com JS). O estilo embutido só tem efeito no elemento atual.

  (Não há necessidade de escrever seletores, não há necessidade de escrever {}, apenas escreva propriedades e valores CSS diretamente)

<p style="color: red;">test</p>
<p>test</p> <!-- 不会受影响 --> 

Este método de escrita tem prioridade mais alta e substituirá outros estilos.

a cor vermelha é substituída:

<style>
	div {
    
    
		color: red;
	}
</style>

<div style="color:green">想要生活过的去, 头上总得带点绿</div>

---

2.3. Estilo externo

O método mais comumente usado no desenvolvimento real

1. Extraia o código CSS separadamente e coloque-o em um .cssarquivo
2. Em seguida, no código html, insira o arquivo CSS através da tag link

Dessa forma, vários HTML podem reutilizar o mesmo estilo.
Por exemplo, ao escrever um site, pode haver muitas páginas no site e os estilos dessas páginas são semelhantes.

Nota: Não se esqueça de chamar o CSS na tag link , caso contrário ele não terá efeito.
Este método de escrita é semelhante a definir um método em Java. Ele não apenas deve ser definido, mas também deve ser chamado.

1. Crie estilo.css:

p {
    
    
    color : rgb(8, 147, 240);
}

2. Use a tag link para apresentar o CSS:

<link rel="stylesheet" href="style.css"> <!-- 在 head 中 -->

Esse tipo de tag de link geralmente é colocado na tag head do html . Essa tag pode existir em múltiplas cópias (css diferentes são introduzidos por meio de vários links)

Ao mesmo tempo, as ferramentas do desenvolvedor também nos lembrarão em qual CSS esse estilo foi introduzido . 2 é o número da linha.

• Vantagens : estilo e estrutura estão completamente separados
• Desvantagens : Afetado pelo cache do navegador, a modificação pode não ter efeito imediato.
• Sobre cache:
  • Este é um meio técnico comum para melhorar o desempenho em computadores.
  • Os recursos dos quais as páginas da web dependem (imagens/CSS/JS, etc.) são geralmente obtidos do servidor. Se o site for visitado com frequência, não há necessidade de obter repetidamente esses recursos externos do servidor, e eles podem ser armazenado em cache (ou seja, armazenado localmente em disco), melhorando assim a eficiência do acesso
  • Você pode forçar a atualização da página por meio de ctrl + F5 para forçar o navegador a obter novamente o arquivo css.

O estilo mais comumente usado no trabalho é o estilo externo. O que estudamos aqui usa principalmente a forma de tag de estilo de estilo interno, porque o estilo é relativamente simples.

---

3. Estilo de código

• estilo compacto
• Expandir estilo (recomendado)

Embora seja mais amigável para os programadores, o arquivo CSS geral ficará maior porque o arquivo CSS é transmitido ao navegador através da rede e depois analisado pelo navegador. Se o arquivo CSS ficar maior, ele ficará maior. Consome largura de banda da
rede , afetando assim a eficiência.
Portanto, ao olhar para outros sites por meio de ferramentas de desenvolvedor, seu CSS geralmente está neste estilo compacto. Durante o estágio de desenvolvimento do código, na verdade usamos um estilo de quebra de linha solto. Na verdade, por meio de ferramentas de
terceiros automaticamente substituir (ferramentas de empacotamento front-end)

Isso não é verdade apenas para CSS, mas também para JS, o que é ainda mais insano (JS não apenas removerá recuos e quebras de linha, mas também substituirá nomes longos de variáveis ​​​​por nomes curtos como abcd)

---

4. Estojo de estilo

HTML e CSS não diferenciam maiúsculas de minúsculas . É comum usar letras minúsculas ao escrever código ~~

Como todos usam letras minúsculas, não existe "caixa de camelo" no CSS.
CSS geralmente usa "caixa de lombada" e usa –para separar palavras.

A nomenclatura da coluna não é comum no desenvolvimento diário. A maioria das linguagens de programação não permite o uso de -símbolos em nomes de variáveis ​​(para evitar confusão com o sinal/símbolo de menos),
mas o CSS não pode realizar operações ou expressar lógica... então é -bastante no espaço vazio

Especificação de espaço:

• Espaço após dois pontos
• Também há um espaço entre o seletor e {

---

3. Seletor

Funções do seletor:

• Selecione o elemento de rótulo especificado na página

Selecione o elemento primeiro antes de definir os atributos do elemento.
Assim como em jogos como SC2 e War3, você precisa primeiro selecionar a unidade e depois comandar a unidade para agir.

Manual de referência de seletores CSS

Manual de referência de seletores CSS

Tipos de seletores:

• O conteúdo a seguir são apenas os seletores suportados no padrão CSS2. Algumas adições foram feitas no CSS3, das quais falaremos mais tarde.

1. Seletor básico : composto por um único seletor

• seletor de tags
• seletor de classe
• seletor de identificação
• seletor curinga

2. Seletor composto : Uso abrangente de vários seletores básicos.

• seletor descendente
• seletor filho
• Seletor de união
• Seletor de pseudoclasse

Existem muitos tipos de seletores em CSS

---

1. Seletor básico

1.1. Seletor de tags

Características:

• Pode selecionar rapidamente tags do mesmo tipo, mas não pode selecionar de forma diferente

Entrará em vigor para todos os p

<style>
	div {
     
     
		color: red;
	}
</style>  

---

1.2. Seletor de classe

Características:

• A diferenciação representa tags diferentes,
  permitindo que várias tags usem a mesma tag

Detalhes de sintaxe:

• Os nomes das classes . começam com
• A tag abaixo usa o atributo class para chamar
• Uma classe pode ser usada por várias tags, e uma tag também pode usar várias classes ( vários nomes de classes devem ser separados por espaços , o que pode tornar o código reutilizável)
• Se for um nome de classe longo, você pode usar -split
• Não use números puros, caracteres chineses ou nomes de tags para nomear classes

Através dos seletores de classe, você pode selecionar quaisquer elementos desejados (teoricamente, desde que você tenha esse seletor, é o suficiente)

Exemplo de código : primeiro, você precisa criar um nome de classe no código CSS.
No elemento html correspondente, faça referência a esse nome de classe por meio do atributo de classe . Neste momento, os elementos com esse nome de classe terão os atributos CSS relevantes aplicados a eles .

<body>
    <style>
        /* . 开头的就是 CSS 中的类名 */
        .green {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <!-- 使用 class属性引入的时候，不需要写 . -->
    <p class="green">hello C</p>
    <p class="green">hello Java</p>
    <p>hello C++</p>
    <p>Python</p>
</body>

Exemplo de código : usando vários nomes de classe

<body>
    <style>
        .box {
     
     
        width: 200px;
        height: 150px;
        }
        .red {
     
     
        background-color: red;
        }
        .green {
     
     
        background-color: green;
        }
    </style>
    
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box red"></div>
</body>

Embora os seletores de classe já possam fazer tudo, muitos outros seletores foram introduzidos para facilitar a escrita do código,
o que é semelhante a ter uma CPU e uma GPU.

---

1.3. seletor de ID

• Use o início para indicar o seletor de id em CSS#
• Primeiro, defina um atributo id para o elemento selecionado . O valor do seletor id é igual ao valor id de um elemento em html.
• O ID do elemento html não precisa conter #
• O id é único e não pode ser usado por múltiplas tags . O seletor de id só pode selecionar um elemento, não vários (a maior diferença do seletor de classe)

	<style>
        #cpp {
     
     
            color: red;
        }
    </style>

    <p>hello C</p>
    <p>hello Java</p>
    <p id="cpp">hello C++</p>
    <p>Python</p>

---

1.4. Seletor curinga

Use *a definição de para selecionar todas as tags da página sem ser chamada pela estrutura da página.

* {
    
    
	color: black;
}

A maior utilidade é cancelar o estilo padrão do navegador.Navegadores diferentes têm estilos padrão diferentes.

Estilo padrão do navegador:

Chrome: o tamanho de fonte padrão na tag p é 14 px, com margens superior e inferior de 16 px por padrão. Esse pode não ser o caso em outros navegadores.

Portanto, ao desenvolver front-end, nossas páginas não devem depender do estilo padrão.

Métodos de escrita comumente usados:

* {
    
    
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

Resumo dos seletores básicos:

	efeito	Características
seletor de tags	Pode selecionar todas as mesmas tags	Não é possível escolher diferencialmente
seletor de classe	Capacidade de selecionar uma ou mais tags	Escolha de acordo com suas necessidades, o mais flexível e comumente utilizado.
seletor de identificação	Pode selecionar um rótulo	O mesmo id só pode aparecer uma vez em um HTML
seletor curinga	Selecione todas as tags	Usado em circunstâncias especiais

---

2. Seletor de compostos

2.1. Seletor descendente

Também chamado de seletor de inclusão, por meio da combinação de múltiplos seletores, podem ser selecionados elementos filhos/netos (elementos descendentes) em um elemento.

O elemento 1 é o pai e o elemento 2 é o filho. Somente o elemento 2 é selecionado e o elemento 1 não é afetado.

选择器1 选择器2 {样式声明}

1), deve haver um espaço no meio

• Se houver um espaço ul.name: Procure um elemento com nome de classe na tag ul. Se
  não houver espaço ul.name: Procure um elemento com classe ul e nome.

2), os seletores 1 e ⒉ podem ser seletores de tags/seletores de classe/seletores de id

Exemplo de código : altere a cor de li em ul sem afetar ol

	<style>
        ul li {
     
     
            color: red;
        }
    </style>

    <ul>
        <li>test</li> <!-- 针对 ul-->
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ol>

	<style>
        ul .name {
     
     
            color: red; /* 对 ul 的第一个 li */
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Exemplo de código : o elemento 2 não precisa ser filho, também pode ser neto

	<ul>
        <li>aaa</li>
        <li>bbb</li>
        <li><a href="#">ccc</a></li>
    </ul>

		ul li a {
    
    
            color: red;
        }
        或者
        ul a {
    
    
            color: red;
        }

Exemplo de código : pode ser qualquer combinação de seletores básicos (incluindo seletores de classe, seletores de id)

<ol class="one">
	<li>ddd</li>
	<li>eee</li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
	<li><a href="#">fff</a></li>
</ol>	

.one li a {
    
    
	color: green;
}

---

2.2. Subseletor

• Semelhante ao seletor descendente, mas apenas tags filhas podem ser selecionadas , apenas filhos biológicos são selecionados e elementos netos não são selecionados.
• Separe usando o sinal de maior que,

选择器1>选择器2 { 样式声明 }

Exemplo 1 : Para o primeiro li em ul, igual ao seletor descendente

	<style>
        ul>.name {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li>test</li>
        <li>test</li>
    </ol>

Exemplo 2 : Diferenças dos seletores descendentes

Descendentes: Ambos os links 1 e 2 podem ser selecionados

	<style>
        ul a {
     
     
            color: red;
        }
    </style>

    <div class="two">
		<a href="#">链接1</a>
		<p><a href="#">链接2</a></p>
	</div>

Seletor filho: Se alterado para ul>a, apenas o link 1 será selecionado, pois o seletor filho não pode selecionar elementos netos.

	<style>
        ul>a {
    
    
            color: red;
        }
    </style>

prática:

1. Altere o “gatinho” no código a seguir para vermelho

<div class="cat">
	<ul>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
		<li><a href="#">小猫</a></li>
	</ul>
</div>

CSS:

.cat ul li a {
    
    
	color: red;
}

2. Altere o “gatinho” no código a seguir para vermelho

<div class="cat">
	<a href="#">小猫</a>
	<ul>
		<li><a href="#">小狗</a></li>
		<li><a href="#">小狗</a></li>
	</ul>
</div>

Use as teclas de atalho do Emmet para gerar o código HTML acima: .cat>a+ul>li*2>a

CSS:

.cat>a {
    
    
	color: red;
}

---

2.3. Seletor de união

• Escreva vários seletores em paralelo, separados por vírgulas .
• No seletor de união aqui, você pode escrever seletores simples ou seletores compostos.
• Recomenda-se escrever o seletor de união verticalmente, com cada seletor ocupando uma linha (o último seletor não pode conter vírgula)

元素1, 元素2 { 样式声明 }Indica que o elemento 1 e o elemento 2 estão selecionados ao mesmo tempo

Exemplo : selecione ul e ol, mas não inclua a tag a

	<style>
        ul>li,
        ol>li>a {
     
     
            color: red;
        }
    </style>

    <ul>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ul>

    <ol>
        <li class="name">test</li>
        <li><a href="#">test</a></li>
    </ol>

---

2.4. Seletor de pseudoclasse

1), seletor de pseudoclasse de link

• a:linkSelecione links não visitados
• a:visitedSelecione um link que já foi visitado
• a:hoverSelecione o link ao passar o ponteiro do mouse
• a:activeSelecione o link ativo (o mouse é pressionado, mas não aparece)

Demonstrar pairar e ativo:

	<style>
        div {
     
     
            color: red;
        }

        /* 鼠标悬停的时候 应用这个样式： */
        div:hover {
     
     
            color: gold;
        }

        /* 鼠标按下的时候，应用这个样式： */
        div:active {
     
     
            color: green;
            font-size: 20px;
        }
    </style>

    <div>这是一个 div</div>

Link de demonstração e visitado:

Como restaurar um link visitado para um estado não visitado?
Basta limpar o histórico do navegador. ctrl + shift + delete

		a:link {
    
    
            color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
        } 
        a:visited {
    
    
            color: green;
        }
        a:hover {
    
    
            color: red;
        }
        a:active {
    
    
            color: blue;
        }

		<a href="#">小猫</a>

Precauções:

• Escrever na ordem de LVHA, por exemplo, colocar ativo na frente fará com que ativo se torne inválido. As regras de memória são "verdes"
• A tag a do navegador tem um estilo padrão e geralmente o desenvolvimento real requer um estilo separado.
• No desenvolvimento real, criamos principalmente um estilo para o link e, em seguida, criamos um estilo para o foco.Link, visitado e ativo não são muito usados.

a {
    
    
	color: black;
} 
a:hover {
    
    
	color: red;
}

2), forçar seletor de pseudoclasse

Selecione o elemento do formulário de entrada que tem o foco

<div class="three">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
</div>

.three>input:focus {
    
    
	color: red;
}

A fonte do formulário selecionado ficará vermelha.

Resumo dos seletores compostos:

Seletor	efeito	Precauções
seletor descendente	Selecione elementos descendentes	Pode ser um elemento neto
seletor filho	Selecione os elementos filhos	Você só pode escolher seu filho biológico, não seu neto.
Seletor de união	Selecione elementos do mesmo estilo	Melhor reutilização de código
Seletor de pseudoclasse de link	Selecione links com status diferentes	Concentre-se em dominar como escrever a:hover.
:focuse seletor de pseudoclasse	Selecione os elementos selecionados	Concentre-se na masterização da entrada: foco

---

4. Atributos de elementos comuns

Documentação de referência:

Manual de referência de seletores CSS

Documentação MDN

1. família de fontes família de fontes
2. tamanho da fonte
3. espessura da fonte
4. Estilo da fonte O texto do estilo da fonte é inclinado, use principalmente isso para cancelar a inclinação

---

1. Atributos de fonte

1.1. Definir fonte:

• Use vírgulas para separar várias fontes ( pesquise as fontes da esquerda para a direita , se nenhuma for encontrada, a fonte padrão será usada)
• Se o nome da fonte contiver espaços, use aspas.
• Recomenda-se usar fontes comuns, caso contrário a compatibilidade será ruim

	<style>
        .one {
    
    
            font-family: "Microsoft YaHei";
        }

        .two {
    
    
            font-family: "宋体";
        }
    </style>

    <div class="one">
        it is well
    </div>
    <div class="two">
        it is well
    </div>

Ao definir a fonte, você precisa garantir que a fonte definida exista na máquina da outra parte . O próprio sistema vem com algumas fontes por padrão. Também pode haver algumas fontes adicionais de terceiros. Se quiser usar essas fontes de terceiros, você deve certificar-se de que elas estejam disponíveis na máquina do outro fornecedor.

Você também pode carregar arquivos de fontes da redelink através do atributo em html

---

1.2. Tamanho:

• Navegadores diferentes têm tamanhos de fonte padrão diferentes. É melhor fornecer um valor claro (o padrão do Chrome é 16px).
• Você pode usar font-size para a tag body
• Preste atenção na unidade px e não esqueça
• As tags de título precisam ser dimensionadas individualmente
• NOTA : Na verdade, isso define a altura das caixas de caracteres na fonte; o glifo de caracteres real pode ser mais alto ou mais curto que essas caixas

p {
    
    
	font-size: 20px;
}

---

1.3. Espessura:

• Você pode usar números ou palavras para indicar a espessura.
• 700 == negrito, 400 não está em negrito, == normal
• O intervalo de valores é 100 -> 900

p {
    
    
	font-weight: bold;
	font-weight: 700;
}

---

1.4. Estilo de texto:

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

Raramente coloco um texto em itálico, mas frequentemente mudo o rótulo em/ ipara não itálico.

---

2. Atributos de texto

2.1. Cor do texto:

RGB:

• Nossa tela é composta de muitos “pixels”, cada pixel é considerado um ponto e esse ponto pode refletir uma cor específica.

• Usamos R (vermelho), G (verde), B (azul) para representar a cor** (as três cores primárias de luz e cor**). Quando as três cores são combinadas em proporções diferentes, vários efeitos coloridos podem ser misturados .

• No computador, os três componentes de R, G e B são representados por um byte respectivamente (8 bits, o intervalo de representação é 0-255 e a representação hexadecimal é 00-FF).

• Quanto maior o valor, mais escura será a cor do componente. 255, 255, 255 significa branco; 0, 0, 0 significa preto.

Definir cor do texto:

Passe o mouse sobre a cor do vscode, um seletor de cores aparecerá e você poderá ajustar manualmente a cor

• cor vermelha;

• cor: #ff0000;

  • A cor é expressa em forma hexadecimal. Se dois pares forem iguais, eles podem ser representados por um #ff00ff =>#f0f

• cor: rgb(255, 0, 0);

  • Você pode usar o seletor de cores que acompanha as capturas de tela do QQ para visualizar o valor RGB de cada cor.

• rgba tem mais um componente, alfa representa transparência

---

2.2. Alinhamento do texto:

• Controlar o alinhamento horizontal do texto
• Você não apenas pode controlar o alinhamento do texto, mas também controlar imagens e outros elementos para serem centralizados ou à direita.
• text-align: [值];
  • center: alinhamento central
  • left: Esquerda alinhada
  • right: alinhado à direita

	<style>
        .one {
    
    
            text-align: left;
        }

        .two {
    
    
            text-align: center;
        }

        .three {
    
    
            text-align: right;
        }
    </style>

    <div class="one">这是一段话</div>
    <div class="two">这是一段话</div>
    <div class="three">这是一段话</div>

---

2.3. Decoração de texto

text-decoration: [值];Valores comumente usados

• underlineSublinhado. [Comumente usado]
• noneNada. Você pode remover o sublinhado da tag a.
• overlineSobrelinhado. [Não comumente usado]
• line-throughTachado [não comumente usado]

	<style>
        .text-decorate>a {
    
    
            text-decoration: none;
        }
        .text-decorate>.one {
    
    
            text-decoration: none;
        }
        .text-decorate>.two {
    
    
            text-decoration: underline;
        }
        .text-decorate>.three {
    
    
            text-decoration: overline;
        }
        .text-decorate>.four {
    
    
            text-decoration: line-through;
        }
    </style>

    <div class="text-decorate">
        <a href="#">链接去下划线</a>
        <p class="one">啥都没有</p>
        <p class="two">下划线</p>
        <p class="three">上划线</p>
        <p class="four">删除线</p>
    </div>

Na tag html, podem ser definidos sublinhado e tachado, o que também pode ser obtido por meio de CSS. O próprio sublinhado/tachado é usado
como um estilo, implementado com base em CSS, e é uma
decoração de texto mais razoável. O uso mais comum Não significa adicionar sublinhado/tachado ao elemento, mas remover o sublinhado/tachado existente , normalmente para a tag a.

Por exemplo, o link de navegação aqui na Estação B está sublinhado usando este atributo. [Pode ser observado com F12]

---

2.4. Recuo de texto

• Controla o recuo da primeira linha de um parágrafo (outras linhas não são afetadas)
• text-indent: [值];
  • As unidades podem usar pxouem
  • emIndica unidades relativas. 1 em é relativo ao tamanho do texto do elemento atual.
    As unidades Em são muito úteis. Em alguns casos, a página permite que os usuários modifiquem o tamanho da fonte.
  • O recuo pode ser negativo, o que significa recuo para a esquerda (o que fará com que o texto apareça)

	<style>
        .text-indent .one {
     
     
            /* text-indent: 20px; */
            text-indent: 2em;
        }

        .text-indent .two {
     
     
            text-indent: -2em;
        }
    </style>

    <div class="text-indent">
        <!-- div.one -->
        <div class="one">正向缩进</div>
        <div class="two">反向缩进</div>
    </div>

---

2,5, altura da linha

A altura da linha refere-se à distância da linha de base entre as linhas de contexto

A exibição de texto em HTML envolve estas linhas de base:

• Linha superior
• linha central
• Linha de base (equivalente à penúltima linha da grade inglesa de quatro linhas)
• resultado final

Área de conteúdo: a área delimitada pela linha inferior e pela linha superior, ou seja, a área de fundo cinza escuro na imagem abaixo

Na verdade, a distância entre as linhas de base = a distância entre as linhas superiores = a distância entre as linhas inferiores = a distância entre as linhas centrais

line-height: [值];

	<style>
        .two {
     
     
            line-height: 50px;
        }
    </style>

    <div class="one">上一行</div>
    <div class="two">中间行</div>
    <div class="three">下一行</div>

Nota 1 : Altura da linha = margem superior + margem inferior + tamanho da fonte

As margens superior e inferior são iguais. O tamanho da fonte aqui é 16px, a altura da linha é 40px e as margens superior e inferior são 12px, respectivamente.

	<style>
        .line-height .one {
     
     
            line-height: 40px;
            font-size: 16px;
        }
    </style>
    
    <div class="line-height">
        <div>上一行</div>
        <div class="one">中间行</div>
        <div>下一行</div>
    </div>

Nota 2 : A altura da linha também pode ser igual ao normal.

Isso depende da implementação do navegador. O normal no Chrome é 21 px.

Nota 3 : A altura da linha e a altura do elemento podem ser usadas para alinhar o texto no centro.

• A altura da linha é, na verdade, a distância entre duas linhas de texto, a linha superior e a linha superior (ao mesmo tempo, essa distância também é a distância da linha inferior à linha inferior, a distância da linha central à linha central, e a distância da linha de base à linha de base)
• Ao definir a altura da linha, isso afetará as direções superior e inferior ao mesmo tempo. As margens superior e inferior são iguais.
• Como a altura da linha é igual para cima e para baixo, você pode centralizar o texto verticalmente com base na altura da linha.
  Se a altura do elemento for 150px, você só precisa definir a altura da linha como 150px para que o texto interno obtenha o efeito de centralização vertical o texto.

	<style>
        div {
     
     
            width: 200px;
            height: 150px;
            font-size: 20px;
            background-color:coral;
            
            /* 居中对齐 */
            text-align: center;
            /* 垂直居中 */
            line-height: 150px;
        }
    </style>

    <div class="one">文本垂直居中</div>

---

3. Atributos de plano de fundo

3.1. Cor de fundo

background-color: [指定颜色]

• vocabulário inglês
• RGB
• #Números hexadecimais
• RGB
• transparente O fundo é transparente (o fundo do elemento pai é aplicado).O padrão é transparente e pode ser modificado definindo a cor.

	<style>
        body {
     
     
            background-color: grey; /* 针对 body */
        }
        .bgc .one {
     
     
            background-color: red;
        }
        .bgc .two {
     
     
            background-color: #0f0;
        }
        .bgc .three {
     
     
            /* 背景透明 */
            background-color: transparent; /* 引用父元素的 grey */
        }
    </style>
        <div class="bgc">
        <div class="one">红色背景</div>
        <div class="two">绿色背景</div>
        <div class="three">透明背景</div>
    </div>

---

3.2. Imagem de fundo

background-image: url(...);

Mais conveniente que a imagem para controlar a posição (a posição da imagem na caixa)

Perceber:

1. Não perca o URL

2. url pode ser um caminho absoluto ou relativo

3. As aspas podem ser adicionadas ao URL ou não.

Nota : Depois de definir a imagem de fundo, o padrão é um efeito de ladrilho, assim como colocar ladrilhos. A imagem é considerada um "ladrilho de piso" e lado a lado um por um.

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: white;

           background-image: url(flower.jpg);

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.3. Ladrilhos de fundo

background-repeat: [平铺方式]

Valores importantes:

• repeat: revestimento
• no-repeat: sem ladrilho
• repeat-x: Telha horizontalmente
• `repeat-y```: ladrilho vertical

O padrão é repeatbloco.
A cor de fundo e a imagem de fundo podem existir ao mesmo tempo. A imagem de fundo está acima da cor de fundo.

	<style>
       div {
     
     
            width: 600px;
            height: 400px;
            color: green;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

---

3.4. Posição de fundo

background-position: x y;

Modifique a posição da imagem

Os parâmetros vêm em três sabores:

1. Substantivos posicionais: (superior, esquerdo, direito, inferior)
   • Se você usar apenas px como unidade, não será fácil de conseguir. Para conseguir o efeito de "centralizar" a imagem de fundo, você também pode configurá-la como uma porcentagem.
2. Unidade precisa: coordenada ou porcentagem (com o canto superior esquerdo como origem)
3. Unidades mistas: contém substantivos locativos e unidades precisas

Sobre o sistema de coordenadas:

Em computadores, o sistema de coordenadas retangulares planas (sistema de coordenadas cartesianas) é frequentemente usado para expressar a posição. O sistema de coordenadas planas em computadores é geralmente um sistema de coordenadas para canhotos (diferente do sistema para destros comumente usado em matemática do ensino médio, o eixo y está apontando para baixo)

<style>
       div {
     
     
            width: 600px;
            height: 400px;
            background-color: grey;

           background-image: url(flower.jpg);
           background-repeat: no-repeat;
           /* background-position: 0 0; 左上角 */
            background-position: 100px, 100px; /* 往左往下 */

           text-align: center;
           line-height: 400px;
       }
    </style>

    <div>这是一段话</div>

Nota:
Se ambos os valores do parâmetro forem substantivos direcionais, a ordem não importa. (canto superior esquerdo e canto superior esquerdo são equivalentes)
Se apenas um substantivo direcional for especificado, o segundo será centralizado por padrão. (esquerda significa horizontalmente centralizado, superior significa centralizado verticalmente.)
Se os parâmetros forem valores exatos, então o primeiro deve ser x e o segundo deve ser y. (100 200 significa que x é 100 e y é 200)
Se os parâmetros são valores exatos, e Se apenas um valor for fornecido, o valor deverá ser a coordenada x e o outro centro vertical padrão.
Se o parâmetro for uma unidade mista, o primeiro valor deverá ser a coordenada x e o segundo valor deverá ser a coordenada y (100 centro significa que a abcissa é 100,
centralizada verticalmente)

---

3.5. Tamanho do plano de fundo

ackground-size: 值1, 值2;

• Valores específicos : por exemplo, 40px 60px significa que a largura é 40px e a altura é 60px.
• Porcentagem : definida de acordo com o tamanho do elemento pai
• Palavras especiais : comprimento|porcentagem|cobertura|conter
  • cover: A imagem de fundo se adapta ao tamanho do elemento, preenchendo a imagem de fundo em um tamanho grande o suficiente para que a imagem de fundo cubra completamente a área de fundo. Algumas partes da imagem de fundo podem não ser exibidas na área de âncora de fundo.
  • contém: Parte da cor de fundo pode vazar. Basta esticar a imagem até o tamanho do elemento e finalizá-la. Certifique-se de que a imagem de fundo esteja sempre dentro do elemento.

---

4. Retângulo arredondado

Os elementos em HTML são retangulares por padrão. Assim como os logotipos de aplicativos em celulares, todos eles têm cantos arredondados.

Em CSS, border-radius é usado para fazer com que a borda tenha um efeito arredondado
border-radius: length; - comprimento é o raio do círculo inscrito. Quanto maior o valor, mais forte será a linha.

4.1. Retângulo com um pequeno arco

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;

            border-radius: 10px;
        }
    </style>

    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, repudiandae enim!</div>

---

4.2. Gere um círculo

Se você deseja obter um círculo , também pode defini-lo através do mesmo atributo. Primeiro, você precisa ter um quadrado . Suponha que a largura do quadrado seja 200px. Neste momento, defina o valor do raio da borda como 100px ( metade da largura)

Além de escrever números diretamente, você também pode escrever 50%, o que tem o mesmo efeito (50% é calculado com base na largura)

	<style>
        div {
     
     
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            color: blue;    
            text-align: center;
            line-height: 200px;

			/* 正方形宽度的一半 */
            /* border-radius: 100px; */
            border-radius: 50%;
        }
    </style>

    <div>Lorem ipsum dolor</div>

---

4.3. Gerar retângulo arredondado

	<style>
        div {
     
     
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            color: blue;
            text-align: center;
            line-height: 100px;

            border: 2px solid rgb(35, 12, 167);
            border-radius: 50px;
        }

    </style>

    <div>Lorem ipsum dolor</div>

---

4.4. Expanda o método de escrita

border-radius é um método de escrita composto, que na verdade pode ser definido separadamente para os quatro cantos.

border-radius:2em;  

Equivalente a

border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;  

border-radius: 10px 20px 30px 40px;  

Equivalente a (organizado no sentido horário)

border-top-left-radius:10px;
border-top-right-radius:20px;
border-bottom-right-radius:30px;
border-bottom-left-radius:40px;  

---

5. Ferramentas de depuração do Chrome – Ver propriedades CSS

Significado da página da tag:

• elementos Ver estrutura da tag
• console de visualização do console
• fonte Ver código fonte + depuração de ponto de interrupção
• rede Visualize o processo de interação front-end e back-end
• aplicativo Veja algumas extensões fornecidas pelo navegador (armazenamento local, etc.)
• Desempenho, Memória, Segurança e Farol não são usados ​​por enquanto e não serão mais explorados.

A guia de elementos usa:

• ctrl + roda de rolagem para ampliar, ctrl + 0 para restaurar o tamanho original.
• Use a seta superior esquerda para selecionar um elemento
• À direita, você pode visualizar as propriedades do elemento atual, incluindo as classes introduzidas.
• No lado direito, você pode modificar os atributos CSS do elemento selecionado. Por exemplo, para cor, você pode clicar no ícone de cor para abrir o seletor de cores e modificar a cor. Por exemplo, para tamanho da fonte, você pode usar o teclas de seta para ajustar o valor.
• As modificações aqui não afetarão o código e serão restauradas atualizando
• Se o estilo CSS for escrito incorretamente, também haverá um aviso aqui (ponto de exclamação amarelo)

---

6. Modo de exibição de elementos

Em CSS, existem muitos modos de exibição para tags HTML

Os pontos principais são estes dois:

• elementos de nível de bloco
• elementos embutidos

Elementos de nível de bloco : ocupam uma linha, podem definir largura e altura

div, h1-h6, p, ul, li, tabela…

Elementos embutidos : não ocupam uma linha exclusiva e não podem definir largura e altura

span, a, em, i...(entendido como texto, o tamanho final do elemento inline depende do conteúdo interno~)

Elementos de bloco embutidos : não ocupam uma única linha e podem definir a largura e a altura

entrada, imagem

Modifique o modo de exibição dos elementos através da exibição em CSS. Um uso comum é transformar elementos embutidos em elementos de nível de bloco.

	<style>
        a {
     
     
            width: 500px;
            height: 300px;
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

	<style>
        a {
     
     
            width: 500px;
            height: 300px;

            display: block; /* 改成块级元素 */
        }

    </style>

    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>
    <a href="#">这是一个链接</a>

Exibir é uma opção especial. noneOs elementos não são exibidos (elementos ocultos)
. Embora os elementos aqui ainda possam ser vistos nas ferramentas do desenvolvedor, eles não serão exibidos na interface.

---

7. Modelo de caixa

1. Composição

Cada elemento HTML equivale a uma “caixa” retangular

Equivale a construir uma casa: as paredes da casa são as bordas, a distância entre as casas é a margem externa, a distância entre os móveis e a parede é a margem interna e os móveis são o conteúdo.

Esta caixa consiste nestas partes:

• fronteira _
• conteúdo conteúdo
• Preenchimento _
• margem _

---

2. fronteira

Exemplo : com borda:

	<style>
		div {
     
     
            width: 200px;
            height: 100px;
            border: 2px black solid;
        }

    </style>

    <div>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</div>

Nota: Definir uma borda expandirá o elemento original.

Embora possa ser expandida, esta operação de expansão na verdade não é fácil de usar (pode facilmente fazer com que o tamanho do elemento seja alterado ao definir a borda, o que afeta ainda mais o layout da página)

Por exemplo, a largura da página é 500 px e há muitas imagens nela. Há 5 imagens em uma linha e cada imagem tem 100 px de largura. Como resultado, uma borda é adicionada
à imagem, o que pode resultar em 5 imagens não sendo exibido em uma linha.

Na compra de casa:
Área de construção = Entrevista no apartamento + Entrevista na sala comum (sala do elevador)
Área no apartamento = Área utilizada + Espaço ocupado pela parede
A zona azul é a “área utilizada”, e a zona verde é a “área do apartamento”.

No desenvolvimento real, a operação mais comumente usada é definir box-sizingo atributo. Para a caixa de borda, a borda definida neste momento comprimirá o conteúdo em vez de expandir o elemento.

div {
    
    
	width: 200px;
	height: 100px;
	border: 10px black solid;
	box-sizing: border-box;
}

---

Estilo de borda:

• Espessura: largura da borda
• Estilo: estilo borda
• borda sólida sólida, borda pontilhada tracejada, borda pontilhada pontilhada
• Cor: cor da borda

div {
    
    
    width: 200px;
	height: 100px;
	border: 10px black dashed;
	box-sizing: border-box;
}

• Suporta abreviaturas , sem necessidade Borda: 1px vermelho sólido;
• Você pode alterar qualquer borda em quatro direções: borda superior/inferior/esquerda/direita

---

3. Preenchimento e margem

• distância entre borda e conteúdo

• O conteúdo padrão é colocado contra a borda. Use o preenchimento para controlar essa distância.
  Você pode adicionar margens em todas as quatro direções.

  • topo acolchoado
  • fundo de preenchimento
  • preenchimento à esquerda
  • preenchimento à direita

• Você também pode alterar quaisquer bordas em quatro direções

padding: 5px;

Margens:

• Controle a distância entre as caixas
• Você pode adicionar margens em todas as quatro direções
  • margem superior
  • margem inferior
  • margem esquerda
  • margem direita

	<style>
        div {
    
    
            width: 200px;
            height: 100px;
            border: 10px black dashed;
            box-sizing: border-box;
            padding: 5px;
        }

        .one {
    
    
            margin-bottom: 10px;
        }
        
    </style>

    <div class="one">这是一个元素</div>
    <div class="two">这是一个元素</div>

.one {
    
    
	margin-bottom: 10px;
}

.two {
    
    
	margin-top: 10px;
}

A margem irá "colapsar" na direção vertical. Quando dois elementos têm margens definidas, a margem real é o maior valor dos dois, em vez da soma . Não aparecerá na direção horizontal... (Adição direta...)
Esta é uma situação especial causada por questões históricas.

---

Centralização horizontal de elementos em nível de bloco:

Com base na margem, você pode obter a centralização horizontal de um elemento (não a centralização horizontal do texto).
Centralização horizontal do texto: text-align: center.
Centralização vertical do texto: line-height == height
element: Você pode usar margin (block elementos de nível))
centralização vertical dos elementos: a margem não é muito boa (mais sobre isso mais tarde)

<style>
	.one {
     
     
            width: 500px;
            height: 200px;
            background-color: orange;
        }
        
        .two {
     
     
            width: 200px;
            height: 200px;
            background-color: green ;
        }
    </style>

    <div class="one">
        <div class="two">
            hello
        </div>
    </div>

Conjunto para dois:margin: 0 auto;

Defina as margens horizontais como automáticas (adaptável ao navegador) e você obterá um efeito de centralização horizontal.

Escrita composta:

O preenchimento em múltiplas direções pode ser mesclado. [Lembre-se das quatro situações, elas são todas comuns]

• preenchimento: 5px; significa 5px nas quatro direções
• preenchimento: 5px 10px; significa que o preenchimento superior e inferior é 5px e o preenchimento esquerdo e direito é 10px
• preenchimento: 5px 10px 20px; significa que a margem superior é 5px, o preenchimento esquerdo e direito é 10px e o preenchimento inferior é 20px
• preenchimento: 5px 10px 20px 30px; significa 5px superior, 10px direito, 20px inferior, 30px esquerdo (sentido horário)

---

8. Layout flexível

1、exibição:flexível

Principalmente para organizar a posição (disposição) dos elementos na página

A maioria das propriedades introduzidas anteriormente são definidas para o próprio elemento , mas há alguns elementos aqui que afetam o relacionamento entre os elementos
. O modelo de caixa (margem) faz parte dele, mas não é suficiente.

O layout flexível reforça ainda mais esse ponto. O
layout padrão da página da web é de cima para baixo (os elementos no nível do bloco ocupam uma linha)
. A página da web real não precisa apenas ser de cima para baixo, mas também da esquerda para a direita.

	<style>
        .parent {
     
     
            /* 让当前元素的 宽度 和它的父元素一样宽 */
            width: 100%;
            height: 200px;
            background-color: orange;
        }

        .one, .two, .three {
     
     
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

    <div class="parent">
        <div class="ont">test</div>
        <div class="two">test</div>
        <div class="three">test</div>
    </div>

Por padrão, os divs são elementos de nível de bloco e ocupam uma linha . Para permitir que esses divs sejam organizados em uma linha horizontal, você pode usar um layout flexível
para definir um atributo para o elemento pai .display: flex;

• Flex é a abreviatura de caixa flexível, que significa “caixa flexível”.
• Qualquer elemento html pode ser especificado como display:flex para completar o layout flexível.
• A essência do layout flexível é adicionar o atributo display:flex à caixa pai para controlar a posição e a disposição das caixas filhas.
• Nota : Quando o elemento pai é definido para exibir: flex, float, clear e vertical-align do elemento filho serão inválidos.

O método de layout padrão é o layout "vertical", se você precisar de um layout "horizontal", poderá usar o layout flexível

---

2. Layout flexível

Através flexdo layout, você pode ajustar a forma como os subelementos são organizados.

Por padrão, esses elementos são espremidos no canto superior esquerdo

Arranjo horizontal : justify-content(Defina a disposição dos subelementos no eixo principal), certifique-se de determinar a direção do eixo principal antes de usar

• comece organizado à esquerda
• final Organizar à direita
• centro disposto no centro
• space-between permite algum espaçamento igual entre os elementos (calculado automaticamente pelo navegador)
• space-around permite algum espaçamento igual entre os elementos e também há lacunas nos lados esquerdo e direito.

Arranjo vertical :align-items

• Nota :align-items só pode ser implementado para elementos de linha única. Se houver múltiplas linhas de elementos, você precisará usar item-contents

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: end;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-between;
}

.parent {
    
    
	width: 800px;
	height: 200px;
	background-color: orange;
	
	display: flex;
	justify-content: space-around;
    align-items: end;
}

---

3. Implemente uma estrutura de página típica baseada em layout flexível

As três operações mais comuns no layout flexível:

• Defina para exibição de layout flexível: flexibilize para alcançar
• Configure o arranjo horizontal justificar-conteúdo para conseguir isso
• Defina itens de alinhamento vertical para conseguir isso (no layout flexível, geralmente é organizado linha por linha e não envolve várias linhas).Com
  base no conteúdo acima, você pode obter alguns efeitos de layout de página principal:

Para obter este tipo de layout de página, não apenas o layout flexível pode
ser alcançado, mas também alguns outros métodos de implementação, como baseado em tabela, como baseado em flutuante, como baseado em layout de grade... O
layout de grade é relativamente novo coisa, alguns são um pouco mais antigos. O navegador ainda não suporta isso
. Em contraste, o flex tem melhor compatibilidade.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于弹性布局，实现一个典型的页面结构</title>
</head>
<body>
    <style>
        * {
     
     
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .nav {
     
     
            width: 100%;
            height: 50px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
        }

        .container {
     
     
            width: 100%;
            height: 600px;
            background-color: white;

            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container .left, .right {
     
     
            width: 20%;
            height: 100%;
            background-color:rgb(86, 143, 204);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .container .content {
     
     
            width: 60%;
            height: 100%;
            background-color: rgb(119, 187, 139);

            font-size: 20px;
            line-height: 600px;
            text-align: center;
        }

        .footer {
     
     
            width: 100%;
            height: 100px;
            background-color: rgb(223, 152, 19);
            color: white;
            font-size: 20px;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="nav">
        导航栏
    </div>

    <div class="container">
        <div class="left">
            左侧边栏
        </div>
        <div class="content">
            内容区域
        </div>
        <div class="right">
            右侧边栏
        </div>
    </div>
    
    <div class="footer">
        页脚
    </div>

</body>
</html>

---