leer tabla de contenido
Ejemplos de CSS para ver cómo funciona CSS
¿Qué es CSS?
CSS significa hojas de estilo en cascada, también conocidas como hojas de estilo en cascada.
CSS describe cómo mostrar elementos HTML en pantalla, papel u otros medios.
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web al mismo tiempo.
Las hojas de estilo externas se almacenan en archivos CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>wgchen</title>
<style>
body {
background-color: #d0e4fe;
}
h1 {
color: orange;
text-align: center;
}
p {
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>CSS 实例!</h1>
<p>这是一个段落。</p>
</body>
</html>
sintaxis CSS
Un conjunto de reglas CSS consta de selectores y bloques de declaración:
los selectores apuntan a los elementos HTML que desea diseñar.
Un bloque de declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración consta de un nombre de propiedad CSS y un valor, separados por dos puntos.
Varias declaraciones CSS están separadas por punto y coma, y los bloques de declaración están encerrados entre llaves.
p {
color: red;
text-align: center;
}
Todos los <p>elementos se alinearán al centro con un color de texto rojo:
Ejemplo de explicación
p es un selector en CSS (apunta al elemento HTML a diseñar: <p>).
el color es el atributo y el rojo es el valor del atributo.
text-align es la propiedad y center es el valor de la propiedad.
Selectores de CSS
Los selectores de CSS se utilizan para "buscar" (o seleccionar) elementos HTML para diseñar.
Podemos dividir los selectores de CSS en cinco categorías:
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）
Selectores de elementos CSS
Los selectores de elementos seleccionan elementos HTML en función de los nombres de los elementos.
p {
text-align: center;
color: red;
}
<p>每个段落都会受到样式的影响。</p>
<p id="para1">我也是！</p>
<p>还有我！</p>
Aquí, todos los <p>elementos se alinearán al centro con un color de texto rojo:
Selector de ID de CSS
El selector de id usa el atributo id de un elemento HTML para seleccionar un elemento específico.
¡La identificación de un elemento es única dentro de una página, por lo que el selector de identificación se usa para seleccionar un elemento único!
Para seleccionar un elemento con una identificación específica, escriba un signo de almohadilla (#) seguido de la identificación del elemento.
#para1 {
text-align: center;
color: red;
}
<p id="para1">Hello World!</p>
<p>本段不受样式的影响。</p>
Esta regla CSS se aplicará al elemento HTML con id=”para1”:
注意:id El nombre no puede comenzar con un número.
Selector de clase CSS
Los selectores de clase seleccionan elementos HTML con un atributo de clase específico.
Para seleccionar elementos con una clase específica, escriba un （.）carácter seguido del nombre de la clase.
.center {
text-align: center;
color: red;
}
<h1 class="center">居中的红色标题</h1>
<p class="center">居中的红色段落。</p>
En este ejemplo, todos los elementos HTML con class="center" estarán en rojo y alineados al centro:
también puede especificar que la clase solo afecte a elementos HTML específicos.
注意: ¡El nombre de la clase no puede comenzar con un número!
Selector universal CSS
Selector genérico （*）Selecciona todos los elementos HTML de la página.
Las siguientes reglas CSS afectan a todos los elementos HTML de la página:
* {
text-align: center;
color: blue;
}
Selectores de agrupación CSS
Los selectores de grupo seleccionan todos los elementos HTML con la misma definición de estilo.
Eche un vistazo al código CSS a continuación (los elementos h1, h2 y p tienen la misma definición de estilo):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Es mejor agrupar selectores para minimizar el tamaño del código.
Para agrupar selectores, separe cada selector con una coma.
h1, h2, p {
text-align: center;
color: red;
}
En este ejemplo, hemos agrupado los selectores en el código anterior.