CSS é uma linguagem de computador usada para expressar estilos de arquivo como HTML (uma aplicação da Standard Generalized Markup Language) ou XML (um subconjunto da Standard Generalized Markup Language).
CSS pode não apenas modificar páginas da web estaticamente, mas também cooperar com várias linguagens de script para formatar dinamicamente vários elementos das páginas da web.
CSS pode realizar controle preciso em nível de pixel sobre o layout das posições dos elementos em páginas da web, suporta quase todos os tamanhos e estilos de fonte e tem a capacidade de editar objetos de páginas da web e estilos de modelo. Para um estudo aprofundado, pesquise "tutorial em vídeo CSS do site chinês php" no Baidu e aprenda on-line gratuitamente.
1. Atributos comuns
nome: nome, pode ser repetido, pode ser o mesmo; classe: nome da classe, pode ser repetido ou pode ter vários, usado para CSS como <p class="one two"></p>; identificador, não pode A repetição geralmente é usada em JavaScript, as regras de nomenclatura são as mesmas que as regras de nomenclatura de rótulos em outros idiomas;
title: título, que pode ser adicionado na tag; como <img src="1.jpg" /title="This is a picture">;/
2. Relacionamento de tags
Relacionamento descendente: relacionamento pai-filho (incluindo relacionamento);
Relacionamento fraterno: relacionamento entre mesmo pai;
3. Folhas de estilo em cascata CSS
Comentários CSS: /O conteúdo do comentário é escrito aqui para o programador ver e não será exibido na página/;
Regras gramaticais CSS: Todos os símbolos devem ser inseridos usando o método de entrada em inglês, em letras minúsculas, e os atributos devem ser escritos entre chaves. Cada instrução de atributo deve terminar com ponto e vírgula e o valor do atributo deve ter uma unidade de pixel (px); : atributo: valor do atributo;
4. Como introduzir CSS
Introdução inline: O método de introdução para adicionar estilos em tags; Formato: <tag style="background:red; font-size:20px;">Conteúdo</tag>; e html A estrutura não é separada; o escopo de influência está apenas na introdução inline: adicione <style type="text/css">estilo CSS</style> no cabeçalho da página web; a capacidade de manutenção do código é relativamente baixa, não percebe a separação do código CSS e da estrutura HTML, e o escopo de influência está apenas na página atual;
Introdução ao link externo: Crie um arquivo xx.css fora da página da web e use <link rel="stylesheet" type="text/css" href="xx.css"> no cabeçalho da página da web; o código é altamente sustentável. O código CSS é completamente separado da estrutura HTML, afetando todas as páginas da web que introduzem arquivos CSS em todo o site;
5.Sintaxe principal do CSS:
Formato estrutural: seletor {atributo: valor do atributo; atributo: valor do atributo;...} Exemplo: p{background:red;color:gray;size:20px;};Seletor: uma ferramenta para selecionar elementos da página;
Colchetes: o conteúdo do estilo é escrito entre colchetes;
6. Seletor
Seletor básico:
Seletor universal: usado para inicializar o estilo padrão da página web, escrito no início do formato da folha de estilo: *{padding:0;margin:0;}; {color:green; }; Seletor de classe: Escolha para especificar o estilo do seletor de classe: .class name {background: pink;}; os estilos de conteúdo de vários blocos são iguais, então basta dar-lhes o mesmo estilo;
seletor de id: identificador único, não pode ser repetido formato: #id name{backgound-image:url(1.jpg);} Nota: o nome do id é definido na tag id="one"; , quantas vezes Quando o estilo de conteúdo de cada bloco é o mesmo, os nomes de ID de vários blocos devem ser diferentes;;
A diferença entre id e classe: Preste atenção ao ponto anterior - o ID deve ser capaz de determinar exclusivamente o nó DOM. Se você usar o seletor de ID ao longo do artigo, mesmo que os dois estilos de nó DOM sejam exatamente iguais, você deverá escrever o estilo do nó duas vezes. Se quiser mantê-lo mais tarde, você deverá manter o código em ambos os lugares! ! ! Aumenta muito os custos de manutenção;
Seletor de pseudoclasse: Princípio LoVe HAte sequencial, você pode pular, mas a ordem não pode ser alterada: status do link (link), status visitado (visitado), status ativo (passar o mouse) e status do clique (ativo);
Classe de desenho de ponto: a:link{color:yellow;} a:visited{color:blue;} a:hover{color:red;} a:active{color:pin;} estilo ao obter o foco a:focus{}; Observação: atributos de texto, cores de fundo e imagens podem ser adicionados aos atributos; a{} e a:link{} obtêm o mesmo efeito: li:link{color:yellow;};li:visited{color:blue; ;} li:hover{color:red;} li:active{color:pin;};Nota: Atributos de série de texto, cor de fundo e imagens podem ser adicionados aos atributos;
Seletor composto:
Seletor de grupo (seletor de união, seletor múltiplo): usado para adicionar o mesmo estilo a vários elementos, por exemplo: .one, #one, a, span{color:red;font-size:14px;} significa Classe um, #one; , uma tag e uma tag span possuem atributos comuns; seletor de descendente: adicione atributos aos elementos da subclasse exemplo: .one a{text-decoration:none;} significa o conteúdo modificado pela tag a do descendente da classe um Sem sublinhado; seletor de elemento filho (seletor especificado): adicionar atributos ao elemento filho especificado, por exemplo: #one>p{color:red;} significa adicionar o conteúdo que repousa na tag p do filho da propriedade do seletor de id;
Seletor de elemento adjacente:
1. Dois seletores irmãos adjacentes adicionam atributos. Eles não adicionam atributos a si mesmos, mas apenas adicionam atributos ao irmão seguinte; adicionar atributos a todos os elementos da tag p após um seletor, desde que eles tenham uma classe pai;
Seletor de atributos:
1. Adicione atributos a elementos com atributos; img[id]{background:red;} Adicione atributos a elementos com id;
Adicione atributos a elementos com valores de atributos especificados: img[src="b.jpg"]{background:red;}Adicione atributos a elementos com b.jpg;
3. Adicione atributos aos elementos começando com o caractere especificado: img[src^="b"]{background:red;} Adicione atributos a todos os elementos começando com b; : img[src$="b"]{background:red;}Adiciona atributos a todos os elementos que terminam com b; ;}Adicione atributos a todos os elementos contendo b;
7. Inclusão de elementos (classificação dos métodos de exibição)
Elementos de bloco: usados para composição tipográfica. As estruturas típicas incluem: p, p, li, h1, dt;
O elemento é exibido em sua própria linha (independente da largura);
Quando um elemento de nível de bloco é aninhado, se a largura do elemento filho não for definida, a largura do elemento filho será a largura do elemento pai;
Elementos embutidos: usados para adicionar estilos; span, a, font, strong Nota: Não forneça margens superiores e inferiores e preenchimento aos elementos embutidos. );
Os elementos são exibidos em uma linha;
A largura e a altura não podem ser definidas diretamente;
Elementos de bloco embutidos: imagem, entrada;
Os elementos são exibidos em uma linha;
Largura e altura podem ser definidas;
Relacionamento de conversão: inline contém elementos de bloco embutidos, e elementos de bloco podem conter elementos embutidos;
Display: inline converte elementos em elementos inline Display: inline-block converte elementos em elementos de bloco inline
Exibição: bloco Converte o elemento em um elemento de bloco
8. Propriedades CSS
Propriedades relacionadas à fonte:
tamanho da fonte: tamanho da fonte, quantos pixels, px; peso da fonte: espessura da fonte, negrito (700-900), normal, você pode escrever 100-900 estilo da fonte: inclinação da fonte, itálico, família de fontes; : fonte, Microsoft YaHei, HeiTi;
Concatenação de atributos: font: font-style font-weight font-size/line-height font-family Nota: A concatenação de atributos font deve incluir font-size e font-family (outros atributos podem ser omitidos); -A ordem da família não pode ser alterada;
texto:
cor: cor; recuo do texto: recuo [a unidade é em]; decoração do texto: linha do texto [sublinhado, sobrelinha, tachado, nenhum espaçamento entre palavras]; distância; alinhamento de texto: alinhamento horizontal [padrão esquerda, centro, direita];
line-height: altura da linha, altura da linha onde o texto está localizado [quando a altura da linha é igual à altura do elemento, o texto fica centralizado verticalmente];
Tamanho: É o tamanho do elemento do bloco. A largura e a altura não podem ser definidas para elementos embutidos.
largura: largura;
altura: altura;
Atributos da lista ul e li: list-style-type podem ser adicionados a ul, mas não precisam ser adicionados a li;
list-style-type:none; Remova símbolos, quadrados, círculos, círculos sólidos de disco Você não precisa escrevê-los depois de adicionar imagens list-style-type:none;list-style-image:url(1.jpg) Borda da imagem: 1px vermelho sólido define uma borda para ul como um todo;
posição de estilo de lista: fora; posicionamento de imagem de estilo: dentro, fora;
fundo:
Cor de fundo background-color; imagem de fundo background-image Nota: Ao definir a imagem de fundo, certifique-se de definir a largura e a altura do bloco de fundo background-repeat: repetir (valor padrão) | x | (ladrilho horizontal) repetir-y (ladrilho vertical) posição de fundo background-position: Defina o valor específico: left| top| bottom| cneter; número, o primeiro valor representa a direção horizontal, o segundo valor representa a direção vertical, defina o formato de configuração da imagem de fundo frontal para definir se o fundo é fixo. anexo de fundo: rolagem (valor padrão) rolagem fixa (; imagem fixa);
Escrita conjunta de atributos: sem limite de quantidade ou pedido: background:url("") red no-peat 30px 40px;
altura da linha: modelo de caixa: usado para layout de página da web, a largura deve ser definida
Propriedades da borda da caixa: componentes:
Largura e altura da borda: largura da borda: 1px; Cor da borda: cor da borda: vermelho; Estilo da borda: estilo da borda: linha sólida sólida/linha pontilhada pontilhada/linha pontilhada tracejada/nenhuma escrita conjunta: borda: 1px vermelho sólido; ; Nota: Não há restrição de ordem ao escrever atributos juntos. A cor da borda não precisa ser escrita e a largura da borda não precisa ser escrita separadamente: borda borda: preenchimento da margem interna: defina a distância entre a borda. conteúdo e a borda da caixa
Margem: Defina a distância entre as caixas
p{largura:300px;altura:200px;borda superior:1px vermelho sólido;borda esquerda:1px vermelho sólido;borda direita:1px vermelho sólido;borda inferior:1px vermelho sólido;}
Para definir propriedades individualmente:
cor da borda superior: vermelho; estilo da borda superior: sólido; largura da borda superior: 1px;
Tamanho da caixa:
Onde o tamanho da caixa afeta: A caixa herdada está dentro da faixa de largura da caixa pai e o valor do preenchimento não afetará o tamanho da caixa Cálculo do tamanho da caixa: largura = largura do conteúdo + bordas esquerda e direita + preenchimento esquerdo e direito.
A borda pode afetar o tamanho da caixa e o preenchimento pode afetar o tamanho da caixa.
No futuro, ao implementar o layout da caixa de página, se as margens internas forem definidas para a caixa, o valor correspondente deverá ser subtraído da largura ou altura do conteúdo.
Margem: Defina a distância entre as caixas
Centralize a caixa: Atributo de escrita conjunta:
A caixa sob o fluxo padrão é centralizada: margin: 0px auto; a caixa posicionada é centralizada: primeiro pegue metade da caixa pai e depois volte metade de sua própria largura. Margin: 10px, top, right, bottom, left, 10pxMargin: 10px, 20px, superior, inferior, 10px, esquerda e direita, 20pxMargin: 10px 20px 30px 10px superior, 20px esquerda e direita, 30px inferior
Margem: 10px 20px 30px 40px superior direito inferior esquerdo
Perceber:
Atribuir escrita conjunta:
Preenchimento: 10px; a distância entre superior, direita, inferior e esquerda é 10pxPadding: 10px 20px; superior e inferior 10px esquerda e direita 20pxPadding: 10px 20px 30px superior esquerdo e direito 20px inferior 30px;
Preenchimento: 10px 20px 30px 40px superior, direita, inferior, esquerda;
Quando duas caixas são exibidas verticalmente, as margens estão sujeitas ao valor máximo definido (o primeiro caso de mesclagem de margens. Quando duas caixas são exibidas horizontalmente, as margens se sobrepõem e as margens colapsam (um problema difícil) para resolver a etapa:
preenchimento: defina a distância entre o conteúdo e a borda da caixa
Defina uma borda para a caixa pai
Defina overflow:hidden para a caixa pai;
Margens claras:
Método 1: *{preenchimento: 0; margem: 0;}
Método 2: Body,ul,li,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,p,span{margem:0px;preenchimento:0px;}
9.Três características principais do CSS
Herança:
Herdável: color, text-align, text-indent, font-size, font-weight, font-family Não-herdável: text-decoration, border, display, margin, float, padding A premissa para que a herança ocorra é entre tags Pertencentes para um relacionamento aninhado, a cor do texto pode ser herdada; o tamanho da fonte pode ser herdado;
Recursos especiais:
A cor do texto no elemento pai não pode ser herdada (em cascata)
<h1></h1> As tags de título não podem herdar o tamanho do texto do elemento pai
Sobreposição: Sobreposição refere-se à cobertura de estilos
A natureza em cascata dos estilos não tem nada a ver com a ordem em que os estilos são chamados, mas sim com a ordem em que os estilos são definidos.
A premissa para que ocorra a cascata: conflito de estilo
Prioridade:
Peso: introdução inline (1000) > id (100) > classe (10) > rótulo (1) > geral (0).
Os pesos são os mesmos e os estilos a seguir funcionarão
10. Notas complementares de conhecimento
Escrita de otimização de formulário: <lable for="one">Nome de usuário:</lable><input type="text" id="one">Ícone de lista de formato: estilo de lista: nenhumMesclagem de formulário: border-collapse:collapse (Definir mesclagem de bordas de tabelas, aplicável a tabelas) Bfc "Contexto de formatação" estouro:
visível: valor padrão. O conteúdo não será cortado e será apresentado fora da caixa do elemento oculto: O conteúdo será cortado e o conteúdo restante ficará invisível. Quando a imagem mudar de posição, o elemento pai também mudará sua posição. o elemento pai pode fazer com que o elemento pai mude sua posição A posição do elemento permanece inalterada scroll: O conteúdo será cortado, mas o navegador exibirá barras de rolagem para visualizar o conteúdo restante.
automático: se o conteúdo for cortado, o navegador exibirá barras de rolagem para visualizar o restante do conteúdo
11. Fluxo padrão: os elementos em nível de bloco são exibidos em uma linha. Modo de exibição de fluxo padrão: o modo de exibição padrão dos elementos;
12. Flutuante: Flutuante é usado para resolver o problema de quebra automática de texto e imagem usado para fazer barras de navegação e layouts de páginas da web;
Uso: Flutuar:esquerda|direita Características: Flutue o que quiser
Os elementos definidos para serem flutuantes não ocupam sua posição original (off-script), permitindo que os elementos no nível do bloco sejam exibidos como flutuadores em uma linha. Os elementos embutidos podem ser convertidos em elementos de bloco embutidos.
Durante o processo de conversão de modo, use display, se puder.
Flutuação clara:
Definição: limpar float não significa excluir float; limpar float refere-se ao impacto da limpeza de float. Preste atenção ao tempo de uso: quando o elemento filho é definido como flutuante e o elemento pai não tem altura, o layout da página ficará confuso. ; neste caso, limpe o float.
Método flutuante de limpeza: [x] Nota: Adicione um elemento de bloco vazio (<p></p>, tag) após o elemento a ser limpo e adicione clear:both left |right ao elemento vazio adicionado.
13. Posicionamento: Orientação: esquerda, direita, superior, inferior (vá para o canal do tutorial css do site php chinês para obter detalhes)
Posicionamento estático: o posicionamento estático é o método de exibição do fluxo padrão de elementos. position:static é o posicionamento padrão.
Posicionamento absoluto: Posicionamento relativo ao elemento pai ou elemento ancestral do elemento posicionado Se o elemento pai e o elemento ancestral não existirem, a camada que contém o original não ocupa a posição anterior;
Ao definir o posicionamento absoluto para um único elemento, o posicionamento é definido com base no canto superior esquerdo do navegador (corpo). Quando as caixas são aninhadas, se a caixa pai não definir o posicionamento, a caixa filha definirá o posicionamento com base no canto superior esquerdo do navegador. Quando as caixas são aninhadas, se a caixa pai estiver posicionada, a caixa filha será posicionada com base no canto superior esquerdo da caixa pai. O posicionamento absoluto é definido para a caixa e a caixa não ocupa nenhuma posição (off-script). Após o posicionamento absoluto ser definido para o elemento embutido, o elemento é convertido em um elemento de bloco embutido.
Nota: Após o elemento ser definido para posicionamento absoluto, a posição do elemento pode ser definida arbitrariamente através do nome de orientação específico.
Posicionamento relativo: em relação à posição original do elemento, ele ocupará a posição anterior: relativa;
Depois que o elemento é definido para posicionamento relativo, ele ocupa a posição original. Definir posicionamento relativo com sua própria posição como referência. O posicionamento relativo não pode realizar a conversão de modo do elemento.
O filho deve estar na mesma posição que o pai (o elemento filho está definido para posicionamento absoluto e o elemento pai está definido para posicionamento relativo)
Posicionamento fixo: em relação a toda a posição estável, o posicionamento fixo não ocupa posição (off-label);
Problemas de hierarquia:
Haverá problemas hierárquicos somente quando o posicionamento for definido. Existem posicionamentos relativos, absolutos e outros entre elementos irmãos cuja estrutura do documento HTML está na parte traseira e qual está na camada mais externa (nível superior).
Índice Z: Defina o nível O valor é um número Enquanto houver posicionamento, a configuração de posicionamento será usada.
14. CSS Elf Rabbit: Selecione documentos transparentes
O ponto do sistema de coordenadas no navegador tem a direção certa como direção positiva, e a direção abaixo do ponto é positiva. O sprite CSS é uma forma de processar a imagem de fundo da página da web.
Uso de sprites
Ao usar fw, você deve abrir o mapa sprite no modo aberto. Ao usar o mapa sprite como imagem de fundo, ele é frequentemente usado em conjunto com a posição de fundo para medir as coordenadas dos elementos no mapa sprite. seletor.
Ou use a letra de atalho: k
15. Visibilidade CSS
overflow: oculto Ocultar o excesso de exibição: nenhum Ocultar o elemento diretamente exibir: bloco Exibir o elemento (melhor combinar com js) visibilidade: oculto Ocultar o elemento exibir: nenhum Ocultar o elemento e não ocupar a posição;
visibilidade: oculta o elemento e ocupa sua posição original;
16. Centralize imagens e texto
Cada elemento inlne-block tem um padrão vertical-align:baseline
alinhamento vertical: alinhamento vertical médio e alinhamento vertical e bloco inline são melhor combinados;
17. Evite o fluxo fora do padrão
No processo de layout de página da web, use o fluxo padrão, se puder. O fluxo padrão não pode resolver a flutuação.
Use margin-left/margin-right e defina o valor como auto para empurrar automaticamente a caixa para os dois lados externos.
18. Especificações de inclusão de rótulo
p pode conter qualquer tag no fluxo padrão p tag não pode conter pe tag title e list tag title note pode conter outras tags
Os elementos embutidos não devem conter outras tags
19. Resumo da configuração de largura e altura
Após flutuar, o elemento pode definir a largura e a altura. Após o posicionamento absoluto, o elemento pode definir a largura e a altura.
Após o posicionamento fixo, o elemento pode definir a largura e a altura
20. Atualize para CSS3
CSS3 e CSS2: CSS é poderoso e o código é conciso
Seletor de pseudoclasse:
O primeiro elemento filho: first-child O melhor elemento: last-child O enésimo elemento filho: nth-child (n); 2n+1))
Elemento par: n-ésimo filho(par);
sombra de texto: sombra de texto: horizontal, vertical, sombra sombra de caixa: sombra de caixa: horizontal, vertical, sombra
fundo: fundo