1.Definir DIV
Analise um exemplo típico de div de definição:
#amostra{MARGEM: 10px 10px 10px 10px;
PADDING:20px 10px 10px 20px;
BORDA SUPERIOR: #CCC 2px sólido;
BORDA DIREITA: #CCC 2px sólido;
BORDA INFERIOR: #CCC 2px sólido;
BORDA ESQUERDA: #CCC 2px sólido;
FUNDO: url(images/bg_poem.jpg) #FEFEFE sem repetição no canto inferior direito;
COR: #666;
ALINHAMENTO DE TEXTO: centro;
ALTURA DA LINHA: 150%; LARGURA:60% }
As instruções são as seguintes:
O nome da camada é sample. Você pode chamar esse estilo usando <div id="sample"> na página.
MARGEM refere-se ao espaço em branco deixado fora da borda da camada, usado para margens da página ou para criar um espaço com outras camadas. "10px 10px 10px 10px" representa respectivamente as quatro margens de "superior, direita, inferior e esquerda" (sentido horário, se forem todas iguais, podem ser abreviadas para "MARGIN: 10px;". Se a margem for zero, escreva "MARGEM: 0px;". Nota: Quando o valor for zero, exceto o valor da cor RGB 0% que deve ser seguido de um sinal de porcentagem, nos demais casos a unidade “px” não precisa ser seguida. MARGIN é um elemento transparente e não pode definir uma cor.
PADDING refere-se ao espaço entre a borda da camada e o conteúdo da camada. Assim como a margem, especifique a distância das bordas superior, direita, inferior e esquerda até o conteúdo, respectivamente. Se forem todos iguais, você pode abreviar para "PADDING:0px". Para especificar o lado esquerdo individualmente, você pode escrever "PADDING-LEFT: 0px;". PADDING é um elemento transparente e não pode definir cor.
BORDER refere-se à borda da camada "BORDER-RIGHT: #CCC 2px solid;" define a cor da borda direita da camada como "#CCC", a largura como "2px" e o estilo como linha reta "sólida". .
Se quiser um estilo de linha pontilhada, você pode usar "pontilhada".
BACKGROUND define o plano de fundo da camada. É definido em dois níveis. Primeiro defina o fundo da imagem e use "url(../images/bg_logo.gif)" para especificar o caminho da imagem de fundo; em segundo lugar defina a cor de fundo "#FEFEFE". "no-repeat" significa que a imagem de fundo não precisa ser repetida. Se precisar repeti-la horizontalmente, use "repeat-x", para repetir verticalmente, use "repeat-y", e para repetir para cobrir. todo o plano de fundo, use "repetir". O seguinte "parte inferior direita" significa que a imagem de fundo começa no canto inferior direito. Se não houver imagem de fundo, você só poderá definir a cor de fundo BACKGROUND: #FEFEFE
COLOR é usado para definir a cor da fonte, que foi apresentada na seção anterior.
TEXT-ALIGN é usado para definir a disposição do conteúdo na camada, o centro está no meio, a esquerda está na esquerda e a direita está na direita.
LINE-HEIGHT define a altura da linha 150% significa que a altura é 150% da altura padrão. Também pode ser escrito como: LINE-HEIGHT:1.5 ou LINE-HEIGHT:1.5em, que têm o mesmo significado.
WIDTH é a largura da camada definida, que pode ser um valor fixo, como 500px, ou uma porcentagem, como “60%” aqui. Deve-se observar que esta largura se refere apenas à largura do seu conteúdo e não inclui margem, borda e preenchimento. Mas não é definido desta forma em alguns navegadores, então você precisa tentar mais.
2. Modelo de caixa CSS2
Desde o lançamento do CSS1 em 1996, a organização W3C recomendou que todos os objetos da página web fossem colocados em uma caixa. Os designers podem controlar as propriedades desta caixa criando definições. e camada <div>. O modelo de caixa define principalmente quatro áreas: conteúdo, preenchimento, borda e margem. A camada de amostra de que falamos acima é uma caixa típica. Para iniciantes, eles costumam ficar confusos sobre os níveis, relacionamentos e influências mútuas entre margem, cor de fundo, imagem de fundo, preenchimento, conteúdo e borda. Aqui está um diagrama esquemático 3D do modelo da caixa, espero que seja mais fácil para você entender e lembrar.
Ao usar o layout XHTML+CSS, existe uma tecnologia com a qual você pode não estar acostumado a princípio. É preciso dizer que é uma forma de pensar diferente do layout de tabela tradicional, ou seja: todas as imagens auxiliares são implementadas com. fundos. Algo assim:
FUNDO: url(images/bg_poem.jpg) #FEFEFE sem repetição no canto inferior direito;
Embora seja possível inserir <img> diretamente no conteúdo, isso não é recomendado. As “imagens auxiliares” aqui referem-se a imagens que não fazem parte do conteúdo a ser expresso na página, mas são utilizadas apenas para decoração, intervalo e lembrete. Por exemplo: imagens em álbuns de fotos, imagens em notícias de imagens e as imagens do modelo de caixa 3D acima fazem parte do conteúdo. Elas podem ser inseridas diretamente na página usando o elemento <img>, enquanto outras são semelhantes a logotipos, título. imagens e imagens de prefixo de lista. Todas devem ser exibidas usando o modo de fundo ou outros métodos CSS.
Existem 2 razões para isso:
Separe completamente o desempenho da estrutura (consulte a leitura de outro artigo: "Compreendendo a separação entre desempenho e estrutura") e use CSS para controlar toda a aparência e desempenho para facilitar a revisão.
Torne a página mais utilizável e amigável. Por exemplo, se uma pessoa cega utilizar um leitor de ecrã, as imagens implementadas utilizando tecnologia de fundo não serão lidas em voz alta.