Antes de leer este artículo, debes tener un poco de conocimiento de HTML. También puede ir al enlace "Aprender etiquetas HTML comunes": https://blog.csdn.net/qq_37617413/article/details/106459876 .
1. ¿Qué es CSS?
1. Definición
CSS 指层叠样式表 (Cascading Style Sheets) , define cómo mostrar los estilos de elementos HTML. Los estilos generalmente se almacenan en hojas de estilo.
2. Función
: esto es necesario para lograr un control uno a uno, uno a muchos o muchos a uno CSSsobre HTMLlos elementos de la página CSS选择器. Por ejemplo, modificar fuente, tamaño, color, espaciado, etc.
3. Formato gramatical
Cada atributo CSS se compone de pares clave-valor, como modificar el color de fuente color: red;y el color de fondo:background-color:pink;
2. 3 formas de importar hojas de estilo
1. Estilos en línea, importados usando el modo de estilo.
<h1 style="color:red;">style属性的应用</h1>
<p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
2. Hoja de estilo interna, escriba código CSS en la etiqueta de estilo. La etiqueta de estilo está escrita en la etiqueta principal.
<head>
<style type="text/css">
h1 {
border:blue solid 1px;background-color: brown}
p {
border:blue solid 1px;background-color: brown}
</style>
</head>
3. Hoja de estilo externa, el código CSS se almacena en una hoja de estilo con extensión .css, el archivo HTML se refiere a una hoja de estilo con extensión .css. Más fácil de mantener que las hojas de estilo internas
// html文件
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
// 样式表文件，写法跟内部样式表一致
h1 {
border:blue solid 1px;background-color: brown}
p {
border:blue solid 1px;background-color: brown}
Resumen: Entre estos tres métodos, el estilo escrito directamente en estilo tiene la mayor prioridad. Por ejemplo, si también se establece el ancho, el ancho en estilo se aplica primero.
prioridad:行内样式>内部样式表>外部样式表
3. Uso de selectores
1. En línea/incrustado, simplemente escriba el estilo directamente en el atributo de estilo del elemento
<div style="color: #fff000;">
我是div标签，我的样式是通过行内方式给我的呀
</div>
El resultado de la ejecución es como se muestra en la figura:
2. En el selector de elementos, simplemente escriba el nombre de la etiqueta directamente, aquí están el estilo, la fuente 28pxy el color de la etiqueta p.#333
<head>
<style>
p {
font-size: 28px;
color: #333333;
}
</style>
</head>
<p>
我是p标签，我的样式是通过标签给我的呀
</p>
El resultado de la ejecución es como se muestra en la figura:
3. La clase se usa comúnmente, comenzando con ".": la fuente de estilo es negrita y el tamaño de fuente es 24 px
<style>
.text-styles {
font-weight: bolder;
font-size: 24px;
}
</style>
<span class="text-styles">
我是span标签，我的样式是class给我的呀
</span>
El resultado de la ejecución es como se muestra en la figura:
4. id, comenzando con "#"
<style>
p {
font-size: 28px;
color: #333333;
border: 1px solid #ddd;
padding: 8px;
}
#link-styles {
color: #2C68FF;
cursor: pointer;
}
</style>
<p>
<a id="link-styles" href="https://blog.csdn.net/qq_37617413/article/details/106459876">我是a标签，是个链接，点击我可以去学习基础标签</a>
</p>
resultado de la operación:
Ahora ya tiene una comprensión básica de cómo se combina HTML + CSS para formar una página. Con este conocimiento básico, en el próximo artículo podremos implementar una página web de cuenta pública de WeChat.