Estrutura CSS: improvisação e efeito
Estilos em cascata (CSS) para toda a sua lógicaSimplicidade permite não apenas criar uma solução de design espetacular, mas também fornecer elementos com uma ação real, para emular a execução de código real.
Qualquer tag visual de marcação HTML -área retangular de uma estrutura e conteúdo específicos. O elemento contém coordenadas, tamanhos, recuos, cores, fonte, seus contornos, etc. O quadro do elemento CSS especifica a área ocupada por ele, localizada de sua borda para dentro até a largura indicada na descrição.
Descrição Sintaxe
A localização do elemento é dada por coordenadasem relação ao canto superior esquerdo da página (esquerda, superior), o tamanho da horizontal e vertical (largura, altura). Todo o design e animação do elemento são executados em pares: "property: value".
A descrição é executada diretamente no código da página, na inserção do estilo ou em um arquivo separado, apontando para ele com o link LINK. Sintaxe:
#name {property: value; propriedade: valor; propriedade: valor; ...}
ou
.name {propriedade: valor; propriedade: valor; propriedade: valor; ...}
O nome também pode ser p, body, html, table, td ..., ou seja, o nome da tag de marcação HTML. É permitido conectar a descrição do estilo diretamente ao elemento.
Antes de fazer suas próprias variaçõesestilos de escrita, não faz mal ver como isso é feito em sites populares, salvando o código da página ou pressionando Ctrl-U para visualizá-lo diretamente no navegador.
Parâmetros básicos
O quadro CSS real para o elemento é representadoestilo (estilo de borda), cor (borda-cor), largura (borda-largura). Você pode descrever tudo com a mesma propriedade - fronteira. É possível descrever cada borda do quadro de forma independente (borda superior, borda inferior, borda esquerda, borda direita).
A estrutura CSS é descrita pelas regras gerais das folhas de estilo em cascata:
fronteira: 3px;
border-color: vermelho;
estilo de borda: duplo tracejado pontilhado.
Essa descrição define a largura do quadro como 3 pixels, a cor é vermelha, o estilo lateral: o lado superior é duplo, o direito é tracejado, o fundo é sólido, o esquerdo é o pontilhado.
largura da borda: 1px 2px 4px 8px;
border-color: azul;
estilo de borda: pontilhado.
Aqui as dimensões de cada lado também são mostradas sequencialmente, começando no topo, no sentido horário, na cor azul e no estilo - pontilhado.
border-color: azul vermelho verde preto;
nesta descrição, a cor de cada lado é indicada separadamente. A propriedade border pode incluir vários parâmetros de uma só vez e os cantos da borda podem ser arredondados:
borda: 1px verde sólido;
border-radius: 0px 4px 8px 12px;
-moz-border-radius: 0px 4px 8px 12px;
-webkit-border-radius: 0px 4px 8px 12px;
De como fazer um quadro em CSS, dependea conveniência do visitante, pois geralmente esse efeito de estilo é usado para fins técnicos: quando é importante mostrar exatamente o local ou o tamanho da área na página.
A espessura do quadro e sua finalidade
Escolhendo a espessura do quadro, você pode usar px, pt,em ..., mas tenha em mente que está sempre dentro da região do elemento. É difícil imaginar que o framework CSS tenha um propósito de design, mas tecnicamente é muito conveniente usá-lo para destacar elementos de página.
Se o quadro estiver bloqueado na classe principal,não há, então, apontando-o na pseudo-classe: hover, você pode mostrar ao visitante o elemento da página quando o cursor do mouse estiver sobre ele, por exemplo, selecione o item de menu. Às vezes você precisa selecionar algo clicando na imagem ou arrastar algo para algum lugar. É muito conveniente usar um quadro pontilhado e não alterar o plano de fundo do elemento ou seu conteúdo.
Algumas aplicações precisam ser alocadasárea de página ou seleção de elementos para processamento adicional. Neste caso, você pode criar um div com um quadro no momento de clicar e até que o visitante libere o botão do mouse, redimensione-o, mostrando visualmente o resultado da seleção.
Fora do estipulado
Aulas de CSS são muito interessantes, também é importante estudar as páginas de código de sites populares. No entanto, o recurso próprio deve ser único, deve ter seu próprio rosto.
O framework CSS fornecido pela sintaxe não permitetal diversidade como sua própria iniciativa. O improviso é um ótimo começo, e nada impede que o desenvolvedor forme seu próprio framework. Especialmente com todas as conquistas das tecnologias da Internet e as capacidades dos padrões existentes, há muitas ideias promissoras baseadas em falhas reais na sintaxe existente, que (por definição) sempre foi estritamente formal.
Em particular, se quisermos criar a estrutura desses ououtros elementos, parece apropriado fazê-lo de maneira abrangente. Ao destacar os lados e ângulos de uma determinada área em tags separadas, você pode obter efeitos impressionantes. E, ao atribuir os manipuladores apropriados, você pode criar elementos de página dinâmicos, alterando a posição, a forma e o conteúdo.
