1. Introdução ao CSS
O que é CSS? CSS, ou "Cascading Style Sheet ( cascading style sheet )", é uma tecnologia usada para controlar a aparência das páginas da web. HTML, CSS e JavaScript são os três elementos principais da tecnologia front-end. Entre eles:
HTML controla a estrutura do frame da página da web,
CSS controla a aparência da página da web e
JavaScript controla o comportamento da página da web.
2. Método de introdução CSS
Existem quatro maneiras de introduzir o CSS:
1. Estilo embutido
<html>
<head>
<meta charset="utf-8">
<title></title>
<body>
<p style="color: #CC0000;">这个是红色字体</p>
</body>
</html>
2. Estilo incorporado
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.big{
font-size: 30px;}
</style>
</head>
<body>
<p class="big">css样式内容写在style标签内</p>
</body>
</html>
3. Estilo de link externo
Primeiro crie um arquivo css 1.css no diretório css
p{
font-size:48px;
}
conteúdo do arquivo html:
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/1.css" />
</head>
<body>
<p>我的大小是48px。</p>
</body>
</html>
4. Importar O
local de importação pode ser no arquivo css ou na tag de estilo. A sintaxe de importação é @import url ('./ xxx.css') ou @import './ xxx.css'
@import url("css/1.css");
ou
@import './xxx.css';
Três. Relacionamento em cascata
1. Quando os atributos são iguais, quanto maior a prioridade por trás do html, a prioridade do estilo inline é a mais alta, porque o estilo inline é o mais próximo do elemento.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
O resultado mostrado aqui é rosa porque o estilo embutido é o mais próximo do elemento p.
2. Quando os atributos são inconsistentes, os atributos são adicionados.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: #006400;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<P>css优先级</P>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
mostrar resultado:
3. Mais! Importante significa que o peso é o maior e não pode ser substituído.
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/css02.css"/>
<style type="text/css">
.red{
color: red !important;
color: #006400;
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red" style="color: pink;">宁静致远</p>
</body>
</html>
mostrar resultado:
Quatro. Seletor de CSS
Primeiro, existem 7 tipos de seletores:
| Tipo de seletor | Pesos |
|---|---|
| Seletor curinga | 0,5 |
| Seletor de etiqueta | 1 |
| seletor de classe | 10 |
| seletor de id | 100 |
| Incluir seletor | |
| Seletor de grupo | |
| Seletor de subconjunto direto |
Prioridade do seletor
Quanto maior o peso na tabela, maior a prioridade e os pesos dos seletores e seletores de subconjunto direto são somados. Quanto maior o peso, maior a prioridade. Aqui estão os 7 seletores:
1. Seletor de curinga, adicione * {color: red;} diretamente ao estilo, o que significa que todas as cores de texto são vermelhas.
2. Seletor de tags, escreva tags diretamente e adicione atributos com estilo
p{ font-size:40px;}
span{ color:red;}
Isso significa que o tamanho da fonte de todas as tags p na página html é 40px e a cor da fonte em todas as tags span é vermelho.
3. Seletor de classes, adicione classes e seus atributos no estilo head e adicione classes no corpo.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: red;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p class="red">宁静致远</p>
</body>
</html>
4. seletor de id, adicione a classe e seus atributos no estilo head, adicione a classe no corpo.
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
color: #DBCBE6;
font-size: 48px;
font-family: "simsun";
}
</style>
</head>
<body>
<p id="red" >宁静致远</p>
</body>
</html>
5. Contém o seletor, nome da classe 1 nome da classe 2 {atributo}, onde o nome da classe 2 deve ser um descendente do nome da classe 1. (Separado por um espaço.)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul li{
background-color: #125AA2;}
/* 选择的li标签是ul的后代 */
/* 尽量在包含选择器中父辈选择类名或者id */
/* 一般选择器层级不超过三层 */
</style>
</head>
<body>
<h1>包含选择器</h1>
<ul>
<li>ul中的li1</li>
<li>ul中的li2</li>
<li>ul中的li3</li>
</ul>
</body>
</html>
6. O seletor de grupo, nome da classe 1, nome da classe 2, nome da classe 3 {atributo}, nome da classe 1, nome da classe 2, nome da classe 3 compartilham os atributos abaixo. (Usado no meio para separar.)
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
h1,p,leiming{
color:red;
}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素，应用css样式</p>
<div class="leiming">宁静致远</div>
</body>
</html>
7. Seletor de subconjunto direto, nome da classe 1> nome da classe 2> nome da classe 3, onde o nome da classe 3 deve ser um subconjunto do nome da classe 2 e o nome da classe 2 deve ser um subconjunto do nome da classe 1, para que a classe seja controlada diretamente O atributo do nome 3. (Separado por> no meio.)
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
ul>li>p{
color: #125AA2;}
</style>
</head>
<body>
<h1>css选择器</h1>
<p>选择到html元素，应用css样式</p>
<ul>
<li id="myid">id选择器</li>
<li class="odd">class类选择器</li>
<li>包含选择器</li>
<li><p>标签选择器</p></li>
<li>通配符选择器</li>
</body>
</html>
Aqui, apenas a cor do texto do seletor de tags p ficará vermelha.
Prioridade Five.css
1. Sim! O modificador importante é o mais alto.
2. Quanto mais próximo o css estiver do elemento, maior será a prioridade
. 3. Quando os seletores forem consistentes, o estilo na linha de estilo terá uma prioridade mais alta. Para o mesmo css, o último substituirá o anterior.