1. Especificações gramaticais básicas
Analise uma instrução CSS típica:
p {COR:#FF0000;FUNDO:#FFFFFF}
Dentre eles, “p” é chamado de “seletores”, indicando que queremos definir o estilo para “p”;
As declarações de estilo são escritas entre colchetes "{}";
COLOR e BACKGROUND são chamados de "propriedades", e diferentes propriedades são separadas por ponto e vírgula ";";
“#FF0000” e “#FFFFFF” são os valores dos atributos.
2. Valor da cor
Os valores de cores podem ser escritos em valores RGB, por exemplo: color : rgb(255,0,0), ou em hexadecimal, como no exemplo acima color:#FF0000. Se os valores hexadecimais forem repetidos aos pares, eles podem ser abreviados com o mesmo efeito. Por exemplo: #FF0000 pode ser escrito como #F00. Porém, não pode ser abreviado se não for repetido. Por exemplo, #FC1A1B deve ser preenchido com seis dígitos.
3. Defina a fonte
Os padrões da Web recomendam os seguintes métodos de definição de fonte:
corpo {família de fontes: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif };
As fontes são selecionadas na ordem listada. Caso o computador do usuário contenha a fonte Lucida Grande, o documento será designado Lucida Grande. Caso contrário, é designada como fonte Verdana, se não houver Verdana, é designada como fonte Lucida, e assim sucessivamente;
A fonte Lucida Grande é adequada para Mac OS X;
A fonte Verdana é adequada para todos os sistemas Windows;
Lucida é adequado para usuários UNIX
"Song Ti" é adequado para usuários chineses simplificados;
Se nenhuma das fontes listadas estiver disponível, é garantido que a fonte sem serifa padrão será chamada;
4.Seletor de grupo
Quando vários elementos possuem os mesmos atributos de estilo, uma instrução pode ser chamada em conjunto e os elementos são separados por vírgulas: p, td, li { font-size: 12px };
5. Derive seletores
Você pode usar seletores derivados para definir estilos para elementos filhos dentro de um elemento, por exemplo:
li forte {estilo da fonte: itálico; peso da fonte: normal;
É para definir um estilo em itálico, mas não em negrito, para o subelemento forte em li.
6. seletor de id
O layout com CSS é implementado principalmente usando a camada "div", e o estilo da div é definido através do "seletor de id". Por exemplo, primeiro definimos uma camada
<div id="menubar"></div>
Em seguida, defina-o assim na folha de estilo:
#menubar {MARGEM: 0px;FUNDO: #FEFEFE;COR: #666;}
Onde "menubar" é o nome do ID que você define. Observe o sinal “#” na frente.
O seletor de id também suporta derivação, por exemplo:
#menubar p { alinhamento de texto: direita; margem superior: 10px;
Este método é usado principalmente para definir camadas e elementos que são mais complexos e possuem vários elementos derivados.
6. Seletor de categoria
Use um ponto em CSS para indicar a definição do seletor de categoria, por exemplo:
.14px {cor: #f60 ;tamanho da fonte:14px ;}
Na página, use o método class="category name" para chamar:
<span class="14px">fonte de tamanho 14px</span>
Este método é relativamente simples e flexível e pode ser criado e excluído a qualquer momento de acordo com as necessidades da página.
7. Defina o estilo do link
Quatro pseudoclasses são utilizadas em CSS para definir estilos de link, a saber: a:link, a:visited, a:hover e a:active, por exemplo:
a:link{peso da fonte: negrito; decoração do texto: nenhum; cor: #c00;}
a:visitado {peso da fonte: negrito;decoração do texto: nenhum;cor: #c30;}
a:hover {peso da fonte: negrito;decoração do texto: sublinhado;cor: #f60;}
a:ativo {peso da fonte: negrito; decoração do texto: nenhum; cor: #F90;}
As afirmações acima definem respectivamente os estilos de "links, links visitados, quando o mouse passa e quando o mouse é clicado". Observe que você deve escrever na ordem acima, caso contrário a exibição poderá ser diferente do que você esperava. Lembre-se que eles estão na ordem “LVHA”.
Haha, depois de ler tanto, fico um pouco tonto. Na verdade, existem muito mais especificações gramaticais para CSS. Aqui estão apenas algumas das mais usadas. Afinal, estamos seguindo passo a passo e é impossível engordar. em uma mordida :)