CSS-selector, e seu papel na formatação html-documento

click fraud protection

Criando um site e preenchê-lo com certos elementos de uma página web, todos terão de enfrentar um termo como CSS-selector.Ele serve para determinar com mais precisão todos os elementos de um arquivo HTML de sua concepção e localização na página.Para fazer isso, criar um-a CSS documento que enuncia certos seletores e as suas opções de formatação: cor, tamanho, posição, e outros.Todo web designer deve saber e ser capaz de entrar corretamente as datas de seletores.Eles são divididos por tipo, o principal dos quais discutiremos a seguir.

Tipos seletores na CSS

Dependendo do que html-elemento se aplica a formatação, CSS-selector pode se referir a um dos seguintes grupos:

  • etiquetas do seletor;
  • seletor de classe;
  • id-selector;Atributos selector
  • .Seletor de tags

É também chamado de "seletor de tipo" e "no item", que é o mais simples e comum.Como seu CSS-documento são os nomes dos elementos html em arquivo que descrevemos.Por exemplo, se precisamos definir o estilo de parágrafo, que especifique as propriedades e seus valores para o elemento p {background: X;color: y;size: z}.Neste caso, cada página da web n vai ter o mesmo formato (cor de fundo, o tamanho do texto e semelhantes. D.).Seletor de classe

Mas e se você precisa perguntar a seu cada parágrafo é diferente de outros estilos?Para este efeito, há um seletor de classe.

CSS-documento neste caso, irá conter uma entrada semelhante ao seguinte: p.first {color: X;font-size: y}.Assim, definimos as propriedades da "cor" e "tamanho" apenas para um parágrafo de primeira classe.

em html-documento neste caso, digite o atributo de classe para o nome do estilo primeiro.As aulas podem ser tanto quanto o estilo que você deseja aplicar para os elementos da página web.

id seletor

Muitas vezes, há uma necessidade de definir o estilo mais precisamente, por exemplo, para qualquer um dos elementos de uma página ou em sua amostra.Nesta situação, a ajuda vem id-selector.O arquivo html atribuir um nome do item desejado que o identifica entre os outros.Por exemplo, o elemento que queremos definir um estilo diferente dos outros, vai título do artigo.

Em seguida, atribua-html documento identificador de cabeçalho h1, tais ArticleName.E no arquivo CSS para definir o estilo, acrescentando que a grade identificador nome: #articlename {color: blue;text-align: center}.Agora o nosso título vai ser a cor azul e centrado.

Cada um dos tipos acima pode ser chamado de "uma simples CSS-selector."Eles definem a formatação para um parâmetro html-determinado documento: elementos juntos semelhantes (por exemplo, todos os parágrafos do artigo), uma classe (por exemplo, apenas o primeiro parágrafo) ou um item específico (por exemplo, o título do artigo).Atributos selector

Além dos acima, existem CSS-in seletores de atributos - uma forma mais sofisticada de usar estilos.Ele permite que os elementos de formatação HTML de um atributo ou valor selecionado.Existem diversas variedades de este selector:

  • pela presença de um atributo;
  • em seu valor exato;
  • no valor de atributo parcial;
  • de seu valor particular.

Vamos considerar cada uma dessas variedades:

  1. primeiro caso.A formatação é aplicada se houver um atributo específico no código HTML-(que pode ser p, div, cabeçalho, etc).Se não for, ele utiliza uma genérico para todos os elementos do modelo.Por exemplo, elementos tendo o título (dica).
  2. segundo caso.O estilo aplica-se apenas aos elementos-html que são exatas um valores de atributos jogo.Por exemplo, para os elementos de entrada, onde o valor do tipo de atributo igual a enviar.
  3. terceiro caso.Sob o formato só irá incluir itens na lista de valores que tem uma determinada palavra.Por exemplo, sideBar atributo "class" nos elementos div.
  4. quarto caso.Estilo é definida apenas para os elementos html em documentos em que um determinado atributo tem um certo valor, e começa com ele.Por exemplo, o uso da cor especificada para todos os elementos, os atributos que o idioma Inglês (pode ser en, pt-rus,-en au e assim por diante. D.).

Assim, utilizando uma ou outra CSS-selector melhor pode ser colocado em uma página inteira, e descrever alguns dos seus elementos.