CSS é uma folha de estilo em cascata, que é uma linguagem para descrever a aparência das páginas da web. Uma das principais vantagens do CSS é a capacidade de substituir o layout da tabela pelo layout do bloco.
É necessário
Editor de código HTML
Instruções
Passo 1
Crie o primeiro bloco. No formato HTML, será semelhante a uma tag div com id 'block01'. Aqui, o identificador block01 indica que na descrição CSS, todas as propriedades deste bloco são especificadas para o seletor # block01.
Passo 2
Descreva o bloco em CSS. Nos estilos CSS, especifique o nome do identificador (# block01) e entre chaves descreva seus parâmetros - largura, posicionamento, deslocamento, cor de fundo, etc. Por exemplo, pode ser assim: # block01 {width: 150px; altura: 150px; posição: absoluta; topo: 0px; esquerda: 0px; cor de fundo: rosa}. Esta descrição pressupõe que a caixa terá 150 pixels de comprimento e 150 pixels de largura, será posicionada rigidamente no canto superior esquerdo do documento e seu fundo será rosa.
etapa 3
Dê ao bloco um posicionamento relativo. Se você não usar posicionamento absoluto, mas relativo na descrição CSS, poderá colocar blocos não com um encaixe rígido em uma grade de coordenadas, mas em relação a outros blocos já existentes. Para fazer isso, altere a posição do código: absoluto; topo: 0px; esquerda: 0px por posição: relativo; superior: 200px; esquerda: 100px.
Passo 4
Dê ao bloco um arredondamento. Em CSS, a instrução border-radius é responsável por isso. Adicione o seguinte código à sua folha de estilo: border-radius: 8px. O bloco agora terá cantos arredondados. Se você deseja arredondar apenas alguns cantos, descreva o raio separadamente para cada um deles: border-radius: 8px 8px 0px 0px.
Etapa 5
Dê um golpe no bloco. Para destacar o contorno de um bloco com uma linha fina, adicione o seguinte código à sua descrição CSS: border-top: 1px tracejado preto. Esta instrução significa que a borda do bloco será preta e terá um pixel de espessura. Neste caso, a própria linha de contorno será exibida como uma linha tracejada (tracejada - uma linha pontilhada, pontilhada - pontos, sólida - uma linha sólida).
Etapa 6
Defina as propriedades restantes do bloco. Especifique na descrição do CSS qual tipo de letra deve ser usado para o texto dentro do bloco, qual deve ser o tamanho da fonte, alinhamento e recuo das bordas do bloco. Essas propriedades são descritas nas definições font-family, font-size, text-align e padding.
Etapa 7
Você pode usar a propriedade float para personalizar o fluxo de um bloco sobre o outro. Se você definir como “esquerda”, o restante dos elementos fluirá ao redor do bloco à esquerda e “direita” - à direita. Se você definir o valor flutuante como “nenhum”, o alinhamento do bloco não será definido. A propriedade clear em CSS evita que o bloco flua para a direita, esquerda ou ambos os lados e substitui a instrução float.
