CSS Box: improvisar e efecto

follas de estilo en cascada (CSS) para toda a súa sinxeleza lóxica fan posible non só para crear unha solución de deseño espectacular, pero tamén proporcionar elementos de acción real, para emular a actuación do código real.

Calquera etiqueta visuais HTML-marcado - unha área rectangular dunha estrutura e contido específico. O elemento comprende unha indicación das coordenadas, tamaño, espazamento, cor, fonte, estilo de fonte, e así por diante. Cadro CSS-elemento especifica los área ocupada, sendo situada dentro dos seus límites no canto aquí designado.

descrición de sintaxe

CAMPO elemento aberto especificado coordina en relación ao ángulo superior esquerdo da páxina (esquerda, encima), o tamaño das direccións horizontais e verticais (largura, altura). Todos os elementos de deseño e animación están feitos en parellas "propiedade: valor".

Descrición faise directamente no código da páxina para introducir o estilo ou nun ficheiro separado, apuntando para el de referencia LINK. sintaxe:

#name {propiedade: valor; propiedade: valor; propiedade: valor; ...}

ou

.name {propiedade: valor; propiedade: valor; propiedade: valor; ...}

O nome tamén pode ser p, corpo, html, mesa, td ..., que é o nome da etiqueta HTML-reserva. Pode ser conectado directamente coa descrición do elemento de estilo.

Antes de facer o meu propio estilo de escritura, non ferir a ver como está feito en sitios populares, mantendo o código da páxina, ou premendo Ctrl-U para velo directamente no navegador.

Os principais parámetros

De feito estilo elemento de armazón representado CSS (fronteira de estilo), cor (fronteira-cor), ancho (fronteira de ancho). Todo pode ser resumido nunha propiedade - fronteira. Pode describir cada bordo do cadro de forma independente (border-top, border-bottom, border-left, border-right).

cadro CSS descrito polas normas xerais de follas de estilo en cascada:

fronteira: 3px;
border-color: red;
border-style: dobre correu sólida pontilhada.

Esta descrición define a largura do bordo de 3 píxeles, cor - lados vermellos, estilo: banda superior do, dereito dobre - trazos, fondo sólido, á esquerda - punto.

fronteira de ancho: 1 px 2px 4px 8px;
fronteira-cor: azul;
border-style: pontilhada.

Aquí, as dimensións de cada lado son tamén secuencialmente dende arriba, no sentido horario, a cor - azul, e estilo - Spot.

border-color: blue negro Red Green;

na presente memoria descritiva, individualmente especificado cor en cada lado. propiedade border pode incluír varios parámetros e os ángulos do cadro pode ser redonda:

fronteira: 1 px sólido verde;
fronteira de raios: 0px 4px 8px 12 píxeles;
-moz-border-raio: 0px 4px 8px 12 píxeles;
-webkit-fronteira de raios: 0px 4px 8px 12 píxeles;

Sobre como facer a armazón en CSS, iso depende da usabilidade do visitante, xa que normalmente o efecto estilístico é usado para fins técnicos, cando é importante para amosar a localización exacta eo tamaño da área na páxina.

O espesor da estrutura ea súa finalidade

Ao escoller o espesor do cadro, pode utilizar px, pt, en ..., pero hai que ter en conta que sempre dentro do elemento de campo. É difícil supoñer que o cadro ten un propósito de deseño CSS, pero tecnicamente é moi útil para destacar os elementos da páxina.

Se a clase cadro principal está bloqueado, que está ausente, especificando a pseudo-clase: hover, pode ser amosado para o visitante do elemento da páxina, cando é o cursor do rato, como destacar un elemento de menú. Ás veces é necesario para seleccionar algo premendo na imaxe ou arrastre algo en algún lugar. É moi conveniente usar cadro de puntos, e non para cambiar o fondo do elemento ou o seu contido.

Algunhas aplicacións requiren a distribución de áreas da páxina, ou seleccionar elementos para a súa posterior procesamento. Neste caso, no momento do clic para crear unha div con un borde e mentres o visitante non solte o botón do rato, redimensiona-la, mostrando visualmente o resultado da elección.

fóra baixo

tutoriais CSS son moi interesantes, como é a importancia da investigación códigos de páxinas de sitios populares. Con todo, os recursos propios debe ser único, debe ter o seu propio rostro.

Sempre que a sintaxe do cadro CSS non dá unha tal variedade, como a súa propia iniciativa. Impromptu - un gran comezo, e nada impide que un creador para construír o seu propio cadro. Especialmente con todos os logros da tecnoloxía de Internet e capacidades de normas existentes teñen moitas ideas prometedoras en base a deficiencias reais da sintaxe existente, que é (por definición) sempre foi un estrictamente formal.

En particular, e establecer o alcance de determinados elementos, parece apropiado facelo de forma ampla. Destacando etiquetas individuais nos lados e ángulos dunha rexión, pode obter efectos sorprendentes. A asignación respectivos manipuladores, pode crear elementos de páxina dinámicos, cambiando a posición, forma e contido.