CSS: é a abreviatura de Cascading Style Sheet, traduzido como [Folha de estilo em cascata], que é um conjunto de regras de formatação. É uma linguagem de marcação usada para controle (aprimorado) sobre o estilo de páginas da web e permitindo a separação das informações de estilo do conteúdo da web.
Composição do CSS: A definição do CSS é composta por três partes: seletor (Selector), propriedades (propriedades) e valor da propriedade (valor). Sintaxe: seletor{propriedade:valor} (seletor{propriedade:valor da propriedade})
Coisas a serem observadas:
1. O bloco de declaração CSS consiste em: seletor + "{" + um ou mais atributos CSS + "}".
2. CSS não diferencia maiúsculas de minúsculas e letras minúsculas são recomendadas na sintaxe CSS.
1. Seletores CSS
É o nome de um estilo CSS. Quando um estilo CSS é exibido em um documento HTML, um CSS é usado. Como usar? Neste momento, o seletor CSS (nome CSS) é usado para especificar que esta tag HTML usa este estilo CSS.
2. Sintaxe do seletor
Um seletor CSS define um estilo.
nome do seletor {declaração;}
por exemplo:
p{tamanho da fonte:12px;}.dreamdublue{cor:azul;}.dreamdu18px{tamanho da fonte:18px;}#dreamdured{cor:vermelho;}P, dreamdublue e dreamdured são todos seletores.
3. Regras de nomenclatura do seletor
Os seletores CSS podem usar letras maiúsculas e minúsculas do inglês, números, hífens, sublinhados, dois pontos e pontos.
(1) Letras inglesas maiúsculas e minúsculas AZ az
(2) Números 0-9
(3) Hífen -
(4) Sublinhado_
(5) Cólon:
(6) Período.
Nota: os seletores CSS só podem começar com letras.
4. Classificação do seletor
Os seletores CSS podem ser divididos em muitas categorias, como: seletor de tipo, seletor de id, seletor de classe, seletor universal, seletor de grupo, seletor de inclusão, seletor específico de elemento, seletor de subobjeto, seletor de atributo, seletor relacionado Seletores vizinhos, etc. serão apresentados e analisados um por um a seguir.
1. Seletor de tipo: O seletor de tipo é o próprio elemento da página da web e o nome do elemento é usado diretamente na definição.
Corpo{/*Defina os atributos da página*/}Div{Width:774px;/*Defina todos os elementos div para ter uma largura de 774 pixels*/}2. Seletor de id: É único. Os valores de id de diferentes elementos não podem ser repetidos. O seletor de id define estilos diferentes para os objetos específicos de cada elemento, o que facilita ao usuário um controle mais preciso da página. Ao usar o seletor de id, você deve primeiro definir um atributo de id para cada elemento.
<divid="top"></div>Ao usar o seletor de id, você precisa usar # para identificação: #top{Width:774px;/*Defina todos os elementos div para ter uma largura de 774 pixels*/}3. Seletor de classe: O mesmo nome de classe pode ser definido para diferentes tipos de elementos em um documento. A classe pode unificar elementos do mesmo estilo em uma categoria. Ao usar o seletor de classe, você deve primeiro definir um atributo de classe para cada elemento. :
<divclass="red"></div><spanclass="red"></span><pclass="red"></p>Ao usar o seletor de classe, você precisa usar o inglês (ponto) para identificação. : .vermelho{Cor:vermelho;}4. Seletor universal: É um seletor especial, representado por *, que é um seletor usado, mas fácil de ignorar.
*{font-size:12pt;/*Defina o tamanho de todas as fontes no documento como 12pt*/}5. Seletor de grupo: O seletor de grupo não é um tipo de seletor, mas um método de seletor. Quando vários objetos definem o mesmo estilo, podemos agrupá-los em um grupo. Isso pode simplificar a leitura e gravação de código, como:
.class1{tamanho da fonte:13px;cor:vermelho;text-decraotian:sublinhado;}.class2{tamanho da fonte:13px;cor:azul;decroação de texto:sublinhado;}Podem ser agrupados em:
.class1,class2{tamanho da fonte:13px;text-decroation:underline;}.class1{cor:vermelho;}.class2{cor:azul;}Existem dois princípios para usar o agrupamento: 1. Princípio do aspecto 2. Princípio da proximidade (se vários elementos forem adjacentes, você pode considerar o uso de seletores de agrupamento dentro de um módulo)
6. Contém seletores: O tipo mais útil de seletores, que pode simplificar o código e obter uma ampla gama de controle de estilo. por exemplo:
.div1h2{/*Defina o estilo do título de todos os h2 na camada da classe div1*/font-size:18px;}.div1p{/*Defina o estilo do título de todos os p na camada da classe div1*/font-size:12px ;}7. Seletores especificados por elemento: Às vezes, queremos controlar o estilo de um determinado elemento dentro de um determinado intervalo. Nesse caso, podemos usar seletores de classe ou id em combinação. por exemplo:
span.red{/*Defina a cor do elemento com classe red no elemento span como red*/color:red;}div#top{/*Defina a largura do elemento com id no topo do elemento div como 100 %*/largura:100% ;}por exemplo:<div><h2><h2><p></p><span></span></div>Obviamente não é possível usar o seletor de notícias no código acima. Não é bom usar P diretamente. O seletor de tipo h2 também não é bom.
p.news{} h2.news{} span.news{}
8. Seletores de subobjetos: Assim como os seletores de elementos, são seletores de restrição, ou seja, os estilos de elemento que atendem às condições de restrição são definidos dentro de um determinado intervalo de elementos. O seletor específico do elemento usa atributos de classe e id como restrições, enquanto sub. -seletores de objetos O seletor usa id e subobjeto como restrições.
#main>table{/*Defina o estilo da tabela de subobjetos no módulo principal com id como main*/width:788px;font-size:12px;}#main>.title{/*Defina o subobjeto no módulo principal com id como principal A classe do objeto é o estilo de title*/color:red;font-style:italic;}9. Seletor de atributos: O seletor de atributos adiciona um colchete após o elemento, e vários atributos ou expressões são listados entre colchetes. Existem 7 formas específicas de seletores de atributos:
(1) Correspondência de atributos de existência: controle o estilo do elemento combinando os atributos existentes. Geralmente, os atributos correspondentes devem ser incluídos entre colchetes e apenas os nomes devem ser listados sem atribuir valores:
h1[class]{color:red;/*Aplica-se a qualquer elemento h1 com atributo class independentemente do valor de class*/}img[alt]{border:none;/*Aplica-se a qualquer elemento img com atributo alt independentemente de alt Qual é o valor*/}a[href][title]{font-weight:bold;/*funciona como um elemento com atributos href e title*/}(2) Correspondência precisa de atributos: o estilo será aplicado somente quando o valor do atributo corresponder completamente ao valor do atributo especificado. Os seletores de id e classe são, na verdade, uma seleção precisa de atributos.
a[href=www.163.com][title=NetEase]{font-size:12px;/*O endereço da função aponta para www.163.com e o prompt do título é um elemento a do NetEase*/}(3) Os espaços em branco são correspondidos individualmente: Ao definir uma lista de strings para atributos, você pode controlar o estilo do elemento, desde que corresponda a qualquer uma das strings.
<spanclass=abc>Quem controla meu estilo</span> Você pode usar os seguintes estilos para controlar: [class^=a]{color:red;} ou: [class^=b]{color:red;} ou: [class^=c]{cor:vermelho;} ou: span[class^=c]{cor:vermelho;}(4) Correspondência de hífen: a função e o uso são iguais à correspondência de espaços em branco, mas a lista de strings na correspondência de hífen é separada por hífens.
<span>Quem controlará meus estilos</span>
Isso pode ser controlado usando os seguintes estilos:
[class|=a]{color:red;} ou: [class|=a]{color:red;} ou: [class|=b]{color:red;} ou: [class|=c]{color :red;} ou: span[class|=c]{color:red;}(5) Seletor de prefixo: Contanto que o caractere inicial do valor do atributo corresponda à string especificada, o estilo pode ser aplicado ao elemento. A correspondência de prefixo é implementada usando o formato [^=]:
<div>Correspondência de prefixo</div>
Você pode usar os seguintes controles de estilo
[classe^=minha]{cor:vermelho;}(6) Correspondência de sufixo: Ao contrário do prefixo, desde que o caractere final do atributo corresponda ao caractere especificado, use o controle de formulário [$=].
<div>Correspondência de sufixos</div>
Você pode usar os seguintes controles de estilo
[classe$=Teste]{cor:vermelho;}(7) Correspondência de substring: O estilo é aplicado enquanto a string especificada existir no atributo e for controlada no formato [*=].
<div>Correspondência de substring</div>
Você pode usar os seguintes controles de estilo
[classe*=est]{cor:vermelho;}10. Seletor adjacente: refere-se ao próximo elemento adjacente ao elemento.
div+p{font-size:24px;/*Aplica-se a todos os elementos p imediatamente após o elemento div, definindo o tamanho da fonte do elemento p como 14px*/}exemplo:<divid=wrap><divid=sub_wrap><h1 >< /h1><p></p></div><p></p></div>Para controlar o elemento p inferior separadamente, a menos que você defina um atributo de classe e id para ele, você pode fazer isso usando seletores adjacentes.
#sub_wrap+p{tamanho da fonte:14px;}