revisión del día 18
Notas de estudio de Java-day19
día 19
Etiquetas one, div y span
div是html中一个普通的标签，主要用来当做容器，一般用于配合css完成网页的基本布局,
span是html中一个普通的标签，一般作为文本容器
1.1 Diferencia
div是一个块级标签，独占一行，能存放所有内容（除了html、head和body）
span是一个行级标签，内容会在一行内追加，只能嵌套像文本、图片、超链接
Dos, CSS
Hojas de estilo en cascada Hojas de estilo en cascada
Apilamiento: capa por capa
Hoja de estilo: una colección de estilos
Nota: aprender html es aprender etiquetas, aprender CSS principalmente aprende estilos (atributos), selectores
1.1 Rol
1. 美化页面,修饰页面
2. 之前是html自己完成内容和样式，而现在我们可以通过css来完成样式的内容，并且可以批量的完成的样式的添加和修改
html当做毛坯房, CSS当做装修。
1.2 Por qué usar CSS
之前的问题：
1. 之前用html属性完成样式的时候有很多问题，比如字体的大小只能在1和7之前选择，不能设置更大的字体，还有超链接的下换线不能去除等
2. 我们给标签设置属性之前需要先记忆标签是否有此属性，如果没有的话，写上也没有效果。
3. 有些效果需要嵌套好几层标签才能实现
而CSS可以解决如上问题
1. css不用记忆哪些属性属于哪个标签
2. 当需求变更时我们不需要修改大量的代码就可以满足需求
1.3 Cómo utilizar
① Formato
选择器 {
属性名1 : 属性值1;
属性名2 : 属性值2;
属性名3 : 属性值3
}
注意事项：
1. 属性名和属性值之间通过英文状态的 : 连接
2. 大括号中可以放多对属性名和属性值，但是它们之间要通过分号 ; 分隔
3. 最后一个属性名和属性值的后面可以不加 ;
② Dónde usar CSS [método de introducción]
HTML es un lenguaje; CSS también es un lenguaje. Si desea que CSS modifique el estilo de HTML, debe introducir CSS en HTML. Es decir: para solucionar el problema de dónde escribir el código CSS
行内样式
内部样式
外部样式
1.4 Introducción
① El primer tipo: estilo en línea [estilo en línea] [entender]
把CSS代码内嵌到HTML代码里，直接通过标签的style属性进行设置
<p style="color: green;">我是文字</p>
② El segundo tipo: estilo interno [Maestro]
把CSS代码写在HTML文档内部,通过style标签来结合
1. 需要在head标签中写一个style标签
2. 在style标签中统一写css相关的样式设置
注意：
1. style标签中，可以写上type="text/css"，也可以不写
2. style标签，一定要放在head标签中
<style type="text/css">
p {
color: pink;
font-size: 50px
}
</style>
③ El tercer tipo: estilo externo [maestro]
把CSS代码写在独立的CSS文件里,通过link标签结合
1. 将css样式写在一个后缀为css的文件中
2. 在html文件中引入css文件
注意：引入外部css文件，是在head标签中写一个link标签引入的
<link rel="stylesheet" href="../css/bb.css">
④ La prioridad de los tres métodos de introducción
就近原则，也就是距离要修饰的标签最近的引入方式产生效果
1.5 selector
Selector: se utiliza para seleccionar elementos HTML (etiquetas) para modificar el estilo
① Selector básico
| Selector | descripción | gramática | Ejemplo |
|---|---|---|---|
| Selector de etiquetas | Seleccionar etiquetas según el nombre de la etiqueta HTML | 标签名称{} |
div{ color:red; } |
| Selector de ID | Seleccione la etiqueta según el valor del atributo id | #id值{} |
#d1 { color:blue; } |
| Selector de clases | Seleccione la etiqueta de acuerdo con el valor del atributo de clase (nombre de clase) | .类名{} |
.c1 { color:yellow; } |
| Selector universal | Seleccionar todas las etiquetas | *{} |
*{ color: pink;} |
② Prioridad del selector
ID选择器 > 类选择器 > 标签选择器 > 通用选择器
注意：如果优先级相同，那么就满足就近原则
③ Selector extendido
La combinación de múltiples selectores básicos puede seleccionar etiquetas de manera más flexible
| Selector | descripción | gramática | Ejemplo |
|---|---|---|---|
| Selector de nivel | Seleccionar etiquetas según el nombre de la etiqueta HTML | 祖先 后代 |
div a{ } |
| Selector de atributos | Filtrar elementos según el valor del atributo especificado | [属性='值'] |
input[type='text'] { } |
| Selector de unión | Combinar los resultados de varios selectores | 选择器1,选择器2,... |
.c1, span { } |
④ Selector de pseudo-clase [entender]
| Selector | descripción | Ejemplo |
|---|---|---|
:link |
Seleccione el hipervínculo normal | a:link{} |
:visited |
Seleccione los hipervínculos que se han visitado | a:visited{} |
:hover |
Seleccione el hipervínculo al pasar el mouse | a:hover{} |
:active |
Seleccione el hipervínculo presionado por el mouse | a:active{} |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-伪类选择器</title>
<style>
/*超链接默认的颜色*/
a:link{
color: blueviolet;
}
/*超链接被访问之后的颜色*/
a:visited{
color: mediumvioletred;
}
/*鼠标悬浮在超链接上方显示的颜色*/
a:hover{
color: green;
}
/*鼠标点击不松开的颜色*/
a:active{
color: pink;
}
/*注意：一定要确保顺序为lvha*/
</style>
</head>
<body>
<a href="https://www.baidu.com">百度一下，你就知道</a>
</body>
</html>
1.6 atributos comunes
CSS proporciona una gran cantidad de estilos (atributos) para modificar etiquetas HTML, necesitamos entender: atributos de fondo, estilos de texto, atributos de fuente.
① Atributos de fondo
| Caracteristicas | Nombre del Atributo | Valor de atributo |
|---|---|---|
| Color de fondo | background-color |
1. Constantes de color, como: rojo 2. Use hexadecimal, como: #ABC 3. Use rgb para rojo, verde y azul (rojo, verde, azul) |
| Imagen de fondo | background-image |
url(图片的路径) |
| Embaldosado | background-repeat |
repeatdefecto. La imagen de fondo se repetirá en las direcciones vertical y horizontal. La repeat-ximagen de fondo se repetirá en la dirección horizontal. repeat-yLa imagen de fondo se repetirá en dirección vertical. no-repeatLa imagen de fondo solo se mostrará una vez. |
② Estilo de texto
| Caracteristicas | Nombre del Atributo | Valor de atributo |
|---|---|---|
| color | color |
color |
| Establecer altura de fila | line-height |
Pixel |
| Modificación de texto | text-decoration |
underlineSubrayado overlinecruzaron el ine-throughponche noneno lo alinea |
| Guion de texto | text-indent |
Para sangrar texto, puede utilizar unidades em. |
| Alineación del texto | text-align |
leftOrganiza el texto a la izquierda. rightOrganiza el texto a la derecha. centerOrganiza el texto en el medio. Valor predeterminado: determinado por el navegador. |
③ Atributos de fuente
| Caracteristicas | Nombre del Atributo | efecto |
|---|---|---|
| Nombre de la fuente | font-family |
Configure la fuente, la máquina debe tener esta fuente |
| Establecer tamaño | font-size |
Pixel |
| Establecer estilo | font-style |
italicCursiva normalValor predeterminado. El navegador muestra un estilo de fuente estándar. |
| Establecer espesor | font-weight |
boldNegrita |