O nome completo do CSS é Cascading Style Sheet. Folhas de estilo em cascata.
1. Quatro métodos de implementação de CSS:
1. Tipo incorporado:
2. Tipo de link externo:
3. Tipo importado
4. Tipo de atributo:
2. Definição CSS:
Selecione o objeto {atributo 1: valor 1; atributo 2: valor 2; atributo 3: valor 3 atributo n: valor n...}
como:
td{tamanho da fonte:12px;cor:#FFFF00}
.meunome{tamanho da fonte:12px;cor:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
Três objetos de seleção.
1.Seletor HTML (TagName)
2.seletor de classe (.NAME)
3.Seletor de ID (#IDname)
4. Objetos especiais (a:hover a:link a:visited a:active)
1.Seletor HTML
O seletor HTML é o caractere de marcação do HTML, como: DIV, TD, H1. O escopo do seletor HTML são todas as tags em todas as páginas às quais o estilo é aplicado.
exemplo:
td
{
cor: #FF0000;
}
-->
Nota: A função do código é tornar vermelho automaticamente o texto nas células da tabela.
2.seletor de classe
Para definir um seletor de classe, você precisa adicionar um ponto "." Como ".classname". O escopo do seletor de classe são todas as tags que contêm "class="classname"".
exemplo:
.fontRed
{
cor: #FF0000;
}
-->
Nota: Não há "class="fontRed"" no segundo, então o texto não fica vermelho.
3.Seletor de ID
Para definir um seletor de ID, você precisa adicionar um ponto “#” ao seu nome. Como "#IDnome". O escopo do seletor de ID são todas as tags que contêm "ID="classname"".
Exemplo:
#fontRed
{
cor: #FF0000;
}
-->
Nota: Não há "ID="fontRed"" no segundo, então o texto não fica vermelho.
4. Objetos especiais Existem quatro tipos de objetos especiais, que são definidos para objetos vinculados:
a: hiperlink pairar quando o mouse é movido
a:link hiperlink regular e não acessível
a:visitou hiperlink visitado
O escopo do objeto especial de hiperlink a:active quando o mouse é clicado são todos os marcadores (esta frase está sujeita a discussão, porque em breve haverá um método para anular a palavra "todos").
exemplo:
a: pairar
{
cor: #0000FF;
decoração de texto: sublinhado;
}
-->
Preste atenção ao seguinte, é muito útil! ! !
a.classname:hover
a#IDnome:hover
Esses dois métodos de escrita são usados com .classname e #IDname respectivamente. Seu escopo passa a ser todas as tags contendo "class="classname"" ou "ID="IDname"". Este método de escrita pode ajudá-lo a obter vários efeitos a:hover na mesma página. Você pode dar uma olhada na diferença entre o texto da barra de navegação na página inicial de Yiwang e o título comum do artigo ao passar o mouse sobre ele.
4. Aplicação:
1. Aplicar marcadores automaticamente
2. Classe especial class="NOME"
3.ID ID="IDnome"
4. Objetos especiais são aplicados automaticamente 5. Propriedades CSS
Existem muitas propriedades CSS, como color, que é a mais utilizada acima, indicando a cor do texto. background-color representa a cor de fundo. Este é o mais importante, mas como não é difícil, basta consultar o manual pertinente.
Propriedades de tags CSS/Referência de propriedades Aqui está uma lista de propriedades de tags de folhas de estilo (CSS) atualmente suportadas.
Atributos/atributos da tag CSS
atributos de comportamento comportamento
fonte e direção do atributo de texto
direção [di?rek??n] guia
fonte
família de fontes
tamanho da fonte
estilo de fonte
variante de fonte [?v??ri?nt] variante
peso da fonte [peso] peso
modo ime [m?ud] modo
grade de layout [? leiaut] composição tipográfica de layout [ɡrid] grade
layout-grid-char [t?ɑ:](queimar..)
linha de grade de layout
modo de grade de layout
tipo de grade de layout
espaçamento entre letras [?let?] espaçamento entre letras [?speisi?]
quebra de linha [breik] quebra
altura da linha [hait] altura
altura mínima
ruby-align [?ru:bi] ruby
saliência de rubi [??uv??hæ?] sobressair
posição ruby [p??zi??n] posicionamento
alinhamento de texto
text-autospace [speis] espaçamento automático
decoração de texto [?dek??rei??n] decoração
recuo de texto [in?dent] recuo tipográfico
alinhamento de texto justificado [?d??stifai]
texto-kashida-espaço
estouro de texto [??uv??fl?u] estouro
transformação de texto [træns?f?:m] alteração
posição de sublinhado de texto
unicode-bidi [?bi:di]
alinhamento vertical
espaço em branco
quebra de palavras
quebra de linha
do modo de escrita
e anexo de fundo
cor de fundo
imagem de fundo
posição de fundo
posição de fundo-x
posição de fundo-y
repetição em segundo plano
borda de atributo de layout
de cores
borda inferior
cor da borda inferior
estilo borda inferior
largura da borda inferior
colapso da borda*
cor da borda
fronteira esquerda
cor da borda esquerda
estilo borda esquerda
largura da borda esquerda
fronteira direita
cor da borda direita
estilo borda direita
largura da borda à direita
estilo de borda
borda superior
cor da borda superior
estilo de borda superior
largura da borda superior
largura da borda
claro
flutuador
fluxo de layout
margem
margem inferior
margem esquerda
margem direita
margem superior
preenchimento
fundo de preenchimento
preenchimento à esquerda
preenchimento à direita
topo acolchoado
barra de rolagem-3dlight-color
barra de rolagem-seta-cor
cor base da barra de rolagem
barra de rolagem-cor da sombra escura
cor da barra de rolagem
cor de destaque da barra de rolagem
barra de rolagem-cor da sombra
layout de mesa
atributo de classificação
de zoom
exibirestilo de lista
imagem de estilo de lista
posição de estilo de lista
clipe
inferior do atributo de posicionamento
do tipo estilo de lista
altura
esquerda
transbordar
estouro-x
estouro-y
posição
certo
principal
visibilidade
largura
página de atributos de impressão de
índice z
pageBreakAfter
pageBreakBefore
atributo de filtro filtro
pseudoclasse e outros atributos: ativo
@charset
cursor
:primeira letra
:primeira linha
@font-face
: pairar
@importar
!importante
:link
@mídia
@página
:visitado
maneiras principais de obter efeitos de borda de imagem CSS
. O método mais simples é definir diretamente a borda (borda) para img no arquivo CSS.
img.framed {
preenchimento: 6px;
borda: 1px sólido #CCCCCC;
cor de fundo: #FFFFFF }
Então, no arquivo HTML, ou quando a página da web for atualizada, usar class="framed" para a definição da imagem incorporada terá o efeito de borda correspondente.
A vantagem do método acima é que ele é relativamente simples, mas o efeito alcançado é relativamente monótono e pode não alcançar necessariamente resultados satisfatórios e alguns efeitos especiais, como sombras, mudanças de cor, etc. Isso pode ser feito muito bem usando substituição de imagem e tradução de posicionamento. Não entrarei em detalhes aqui, acredito que depois de aprender CSS básico, não será difícil desafiar efeitos CSS mais avançados.
Classificando a sintaxe css para bordas de tabela
Sabemos que o Dreamweaver faz um ótimo trabalho ao criar tabelas, mas em algum momento ele ainda precisa ser combinado com css para obter alguns efeitos específicos. e depois apresente-o separadamente. Como embelezar a borda de uma tabela usando css.
Asintaxe CSS específica para bordas de tabela
inclui: largura da borda superior, largura da borda direita, largura da borda inferior, largura da borda esquerda, largura da borda, cor da borda, estilo da borda, borda superior, borda inferior, borda esquerda, borda direita, borda, largura, altura, rótulos relacionados, etc.
1.
Sintaxe da largura da borda superior: border-top-width: <valor>
Valores permitidos: fino | médio | grosso <comprimento>
Valor inicial: médio
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
O atributo de largura da borda superior é usado para especificar a A largura da borda superior do elemento. O valor pode ser uma das três palavras-chave, nenhuma das quais é afetada pelo tamanho ou comprimento da fonte e pode ser usada para implementar larguras proporcionais. Valores negativos não são permitidos. Também pode ser usado para abreviar a borda superior, a largura da borda ou as propriedades da borda.
2. Sintaxe da largura da borda direita
: largura da borda direita: <valor>
Valores permitidos: fino | médio | <comprimento>
Valor inicial: médio
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
O atributo de largura da borda direita é usado para especificar o elemento A largura da borda direita. O valor pode ser uma das três palavras-chave, nenhuma das quais é afetada pelo tamanho ou comprimento da fonte e pode ser usada para implementar larguras proporcionais. Valores negativos não são permitidos. Também pode ser usado para abreviar a borda direita, a largura da borda ou as propriedades da borda.
3. Sintaxe da largura da borda inferior
: border-bottom-width: <valor>
Valores permitidos: fino | médio | <comprimento>
Valor inicial: médio
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
O atributo de largura da borda inferior é usado para especificar o elemento A largura da borda inferior. O valor pode ser uma das três palavras-chave, nenhuma das quais é afetada pelo tamanho ou comprimento da fonte e pode ser usada para implementar larguras proporcionais. Valores negativos não são permitidos. Também pode ser usado para abreviar a borda inferior, a largura da borda ou as propriedades da borda.
4. Sintaxe da largura da borda esquerda
: largura da borda esquerda: <valor>
Valores permitidos: fino | médio | grosso <comprimento>
Valor inicial: médio
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
O atributo de largura da borda esquerda é usado para especificar o elemento A largura da borda esquerda. O valor pode ser uma das três palavras-chave, nenhuma das quais é afetada pelo tamanho ou comprimento da fonte e pode ser usada para implementar larguras proporcionais. Valores negativos não são permitidos. Também pode ser usado para abreviar a borda esquerda, a largura da borda ou as propriedades da borda.
5.
Sintaxe da largura da borda: largura da borda: <valor>
Valores permitidos: [ fino | médio | grosso <comprimento> ]{1,4}
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Sem
atributo de largura da borda Define o limites do elemento com um a quatro valores, onde o valor é uma palavra-chave ou comprimento. Comprimentos negativos não são permitidos. Se todos os quatro valores forem fornecidos, eles se aplicarão aos estilos de borda superior, direita, inferior e esquerda, respectivamente. Se um valor for fornecido, ele será aplicado a cada aresta. Se forem fornecidos dois ou três valores, o valor omitido é igual ao lado oposto. Esta propriedade é uma abreviação das propriedades superior, direita, inferior e esquerda. Você também pode usar o atributo border abreviado.
6.
Sintaxe da cor da borda: border-color: <value>
Valores permitidos: <color>{1,4}
Valor inicial: O valor do atributo color
é aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
O atributo border color define a borda cor de um elemento. Você pode usar de uma a quatro palavras-chave. Se todos os quatro valores forem fornecidos, eles se aplicarão aos estilos de borda superior, direita, inferior e esquerda, respectivamente. Se um valor for fornecido, ele será aplicado a cada aresta. Se forem fornecidos dois ou três valores, o valor omitido é igual ao lado oposto. Você também pode usar o atributo border abreviado.
7. Sintaxe de estilo de borda
: estilo de borda: <valor>
Valores
permitidos:
[nenhum | pontilhado | sulco duplo |
com: Não
A propriedade border-style é usada para definir o estilo da borda de um elemento. Esta propriedade deve ser usada para especificar uma borda visível. Você pode usar de uma a quatro palavras-chave. Se todos os quatro valores forem fornecidos, eles se aplicarão aos estilos de borda superior, direita, inferior e esquerda, respectivamente. Se um valor for fornecido, ele será aplicado a cada aresta. Se forem fornecidos dois ou três valores, o valor omitido é igual ao lado oposto. Você também pode usar o atributo border abreviado.
nenhum: nenhum estilo;
pontilhado: linha pontilhada;
tracejado: linha tracejada;
sólido: linha sólida;
duplo: linha dupla;
sulco: linha de sulco;
cume: cume;
inserção: côncava;
Início: convexo.
8.
Sintaxe da borda superior: border-top: <valor>
Valores permitidos: <largura da borda superior> || <estilo da borda> || <cor>
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
Atributo da borda superior É um abreviação para definir a largura, o estilo e a cor da borda de um elemento. Observe que apenas um estilo de borda pode ser fornecido. Você também pode usar o atributo border abreviado.
9. Sintaxe da borda direita
: border-right: <valor>
Valores permitidos: <largura da borda direita> || <estilo da borda> || <cor>
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
Atributo da borda direita É um abreviação para definir a largura, o estilo e a cor da borda direita de um elemento. Observe que apenas um estilo de borda pode ser fornecido. Você também pode usar o atributo border abreviado.
10.
Sintaxe da borda inferior: border-bottom: <valor>
Valores permitidos: <Largura da borda inferior> || <Estilo da borda> || <Cor>
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
Atributo da borda inferior É um abreviação para definir a largura, o estilo e a cor da borda inferior de um elemento. Observe que apenas um estilo de borda pode ser fornecido. Você também pode usar o atributo border abreviado.
11.
Sintaxe da borda esquerda: border-left: <valor>
Valores permitidos: <largura da borda esquerda> || <estilo da borda> || <cor>
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
Propriedade da borda esquerda É uma propriedade abreviação para definir a largura, o estilo e a cor da borda esquerda de um elemento. Observe que apenas um estilo de borda pode ser fornecido. Você também pode usar o atributo border abreviado.
12.
Sintaxe da borda: border: <valor>
Valores permitidos: <largura da borda> || <estilo da borda> || <cor>
Valor inicial: Indefinido
Aplicável a: Todos os objetos
Compatibilidade com versões anteriores: Não
A propriedade border é uma configuração Uma abreviação para a largura, o estilo e a cor da borda de um elemento.
Exemplos de declarações de fronteira incluem:
H2 { border: groove 3em }
A:link {borda: azul sólido}
A:visitado {borda: pontilhada fina #800080}
A:active { border: Thick Double Red }
O atributo border só pode definir quatro tipos de bordas; ele só pode fornecer a largura e o estilo de um conjunto de bordas; Para dar valores diferentes às quatro bordas de um elemento, os criadores de páginas web devem usar um ou mais atributos, tais como: borda superior, borda direita, borda inferior, borda esquerda, cor da borda, largura da borda, estilo da borda, Largura da borda superior, largura da borda direita, largura da borda inferior ou largura da borda esquerda.
13.
Sintaxe de largura: largura: <valor>
Valores permitidos: <comprimento> | <porcentagem> | auto
Valor inicial: auto
Aplicável a: Nível de bloco e elementos de substituição
Compatibilidade com versões anteriores: Não
O valor inicial do atributo de largura é "auto", isto éÉ a largura original do elemento (é a largura do próprio elemento). A porcentagem refere-se à largura do elemento pai. Valores de comprimento negativos não são permitidos.
14.
Sintaxe de altura: altura: <valor>
Valores permitidos: <comprimento> | auto
Valor inicial: auto
Aplicável a: Nível de bloco e elementos de substituição
Compatibilidade com versões anteriores: Não
O valor inicial do atributo height é "auto", que é o elemento A altura original (é a altura do próprio elemento). A porcentagem refere-se à largura do elemento pai. Valores de comprimento negativos não são permitidos.
15. Em relação ao
rótulo da tabela, a definição de todo o estilo da tabela deve ser colocada na tabela;
rótulo da célula td, a definição do estilo da célula deve ser colocada em td.
BODY é o elemento principal do documento da web. Todos os intervalos visíveis estão dentro do elemento <BODY>.
BOTÃO O botão do campo do formulário pode ter a forma de “enviar”, “redefinir”, etc.
DIV define uma área na página web. A altura, largura ou posição absoluta desta área são conhecidas por.
Elemento de imagem IMG, especifique a origem da imagem especificando o atributo "src"
Campo de formulário de entrada INPUT
Efeito de legenda em movimento MARQUEE
SPAN define uma área na página web. A altura, largura ou posição absoluta desta área são conhecidas por.
Área de texto TEXTAREA
Caixa de texto de entrada multilinha TFOOT
Célula de cabeçalho da tabela TH
Título da tabela THEAD
Linha da tabela TR