CSS (Cascading Styel Sheet) é uma série de regras de formatação que controlam a aparência das páginas da Web. É uma das ferramentas essenciais para web design. A seguir começaremos a aprender o formato de sintaxe básico do css.
1. Regras de definição de CSS
Uma folha de estilo em cascata é um arquivo de texto simples completo, geralmente usado como um arquivo separado com uma extensão "css". Seu conteúdo contém um conjunto de regras que informam ao navegador como organizar e exibir o conteúdo em tags HTML específicas. consistem em três partes: seletores, atributos e valores de atributos. A sintaxe é a seguinte:
Sintaxe: seletor {propriedade: valor}
↑ ↑ ↑
seletor {propriedade: valor}
Os estilos CSS consistem em uma série de regras que são analisadas pelos navegadores da web e depois aplicadas aos elementos correspondentes de um documento HTML. As regras de estilo CSS consistem em três partes, nomeadamente seletores, atributos e valores:
1. Seletor: O seletor é a tag html para definir o estilo. Após a tag html ser definida como seletor, o conteúdo da tag na página html será alterado de acordo com as regras definidas pelo CSS.
2. Atributo: O nome do estilo que você deseja definir para o elemento HTML refere-se ao conteúdo a ser alterado no seletor. Os mais comuns incluem: atributos de fonte, atributos de cor, atributos de texto, etc. Abaixo está uma folha de estilo que definimos.
3. Valor: O valor de um atributo, composto por um valor numérico e uma unidade ou palavra-chave, é utilizado para controlar o efeito de exibição de um determinado atributo.
@charsetgb2312;body{família da fonte:宋体;tamanho da fonte:20px;cor:#FF0000;}p{família da fonte:宋体;tamanho da fonte:30px;cor:#FF00ff;}Nesta folha de estilo:
1. @charsetgb2312; significa usar o conjunto de caracteres padrão nacional chinês.
2. body ep são duas tags em html, e três estilos são definidos para essas duas tags, a saber:
font-family: especifica o tipo de fonte da fonte.
"> 2. Incorporar folha de estilo
A folha de estilo CSS definida dentro da página HTML é chamada de folha de estilo CSS incorporada, ou seja, na parte head do documento HTML, a tag de estilo é usada e uma série de regras CSS são definidas na tag.
Sintaxe: <head><styletype=text/css><!--......--></style></head>
ilustrar:
<style> indica o início da folha de estilo CSS e a marca final é </style> Na marca inicial <style>, você pode adicionar alguns atributos conforme necessário, como o atributo type=text/css acima. coluna, que indica que a folha de estilo CSS adota o tipo MIME, a característica desse tipo é que quando o navegador não suporta o código CSS, o código CSS é filtrado para evitar que o navegador exiba o código CSS na forma de. código fonte. Para garantir mais confiabilidade, adicione o identificador de comentário <!--...--> novamente na folha de estilo. As regras CSS são definidas neste identificador de comentário.
Exemplo 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Folha de estilo CSS incorporada</title><styletype=text/css><!--@charsetgb2312; {fonte-fa mily:宋体;tamanho da fonte:20px;cor:#FF0000;}p{família da fonte:宋体;tamanho da fonte:30px;cor:#FF00ff;}--></style></head><body> Pássaros de milhares de montanhas voam por milhares de caminhos e rastros humanos são eliminados<p>Pássaros de milhares de montanhas voam por milhares de caminhos e rastros humanos são exterminados</p></body></html>3. Link para folhas de estilo externas
Uma folha de estilo CSS externa é um arquivo externo com um sufixo .css. A definição de uma folha de estilo externa pode ser aplicada a várias páginas. Usando a tag de link na página HTML, você pode conectar a folha de estilo CSS externa. A sintaxe é a seguinte:
gramática:
<linkrel=stylesheethref=*.css” type=text/css>
parâmetro:
1. O atributo rel indica como a folha de estilo será combinada com o documento HTML. valor rel: folha de estilo, indicando a especificação de uma folha de estilo externa
2. *.css é um arquivo de folha de estilo salvo separadamente.
Exemplo 2 Defina um arquivo css externo p2.css e conecte o arquivo no arquivo t2.htm.
Exemplo 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Link para folha de estilo externa</title><styletype=text/css><!--@charsetgb2312; corpo {família de fontes:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Querido, você voa devagar, tome cuidado com a rosa espinhosa na frente<p>Meu querido, abra a boca, a fragrância das flores ao vento vai te deixar embriagado</p></body></html>4. Folhas de estilo embutidas
Os estilos embutidos referem-se a folhas de estilo CSS definidas em tags específicas de HTML. Tags HTML comumente usadas são principalmente alguns elementos em BODY, como: <p>, <h2>, <ul>, <div>, etc. A seguir estão exemplos de estilos embutidos.
Exemplo 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Documento sem título</title></head><body><divstyle=color:blue;font- size :30px;>A fragrância das flores ao vento deixará você embriagado</div><pstyle=color:#ff0000;font-style:italic;>A fragrância das flores ao vento deixará você embriagado</p>< /corpo></html>
5. Importe folhas de estilo externas
Importar uma folha de estilo externa significa que uma folha de estilo incorporada foi estabelecida no arquivo html, mas algumas configurações da folha de estilo externa precisam ser usadas. Nesse caso, você pode importar uma folha de estilo externa em <style> e usar @. importar, conforme mostrado no exemplo abaixo.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Declaração de outras folhas de estilo--></style></head></body>..... .</body></html>
Entre eles, @import url(mystyle.css); significa importar a folha de estilo mystyle.css A folha de estilo externa importada deve estar no início da folha de estilo, acima da folha de estilo interna.
Exemplo 4
Defina um arquivo css externo p4.css e importe o arquivo no arquivo t4.htm
Exemplo 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Importar folha de estilo externa</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;corpo {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Milhares de pássaros voam por milhares de montanhas e nenhum vestígio de seres humanos é visto<p>Milhares de pássaros voam por milhares de montanhas e nenhum vestígio de seres humanos é visto</p></body></html>6. Herança de folhas de estilo CSS
Na folha de estilo CSS, alguns atributos da tag filha herdarão os atributos da tag pai. Por exemplo, a tag p é um elemento filho do corpo da tag. Quando a tag p não define o atributo de cor da fonte, o conteúdo. in p usará a cor no valor do corpo, o exemplo a seguir ilustra esta situação.
Exemplo 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Folha de estilo CSS incorporada</title><styletype=text/css><!--@charsetgb2312; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟Voando por milhares de caminhos, vestígios humanos são eliminados<p>Milhares de montanhas, pássaros voando por milhares de caminhos, vestígios humanos são eliminados</p></body></html>7. Defina vários elementos
CSS permite que um único formato seja aplicado a várias tags. Cada tag é separada por uma vírgula quando usada como seletor, conforme mostrado no exemplo a seguir.
Exemplo 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Folha de estilo CSS incorporada</title><styletype=text/css><!--@charsetgb2312; ,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Milhares de pássaros voam por milhares de montanhas e milhares de pessoas desaparecem</h1> <h2>Pássaros de milhares de montanhas voam por milhares de caminhos, desaparecendo sem deixar rastros de pessoas</h2><h3>Pássaros de milhares de montanhas voam por milhares de caminhos, desaparecendo sem deixar rastros de pessoas</h3><p>Pássaros de milhares de montanhas voam por milhares de caminhos, desaparecendo sem deixar rastros de pessoas</p></ body></html>