[Interfaz de inmersión basada en cero] Introducción a CSS (registro 2020.3.20)

selector de id y clase

Si desea establecer estilos CSS en elementos HTML, debe establecer selectores de id y clase en los elementos

selector de id

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
     
     
	text-align:center;
	color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

Inserte la descripción de la imagen aquí

clase de opción múltiple

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
     
     
	text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Inserte la descripción de la imagen aquí

creación de css

Lo presenté en el blog de ayer.

  1. Hoja de estilo externa
  2. Hoja de estilo interna
  3. Estilo en línea

fondo css

color de fondo

imagen de fondo

repetición de fondo

Establecer posicionamiento y no mosaico

adjunto de fondo

Si la imagen de fondo es fija o se desplaza con el resto de la página

posición de fondo

Establecer la posición inicial de la imagen de fondo

lista CSS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
ul.a {
     
     list-style-type:circle;}
ul.b {
     
     list-style-type:square;}
ol.c {
     
     list-style-type:upper-roman;}
ol.d {
     
     list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>无序列表实例:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>有序列表实例:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Inserte la descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_42136832/article/details/115027850
Recomendado
Clasificación