Luego aprenda la hoja de estilo CSS:

(45 mensajes) Hoja de estilos CSS learning_one day321's Blog-CSDN Blog

Parte II (continuación):

transparencia opacidad

opacidad significa transparencia, generalmente: opacidad:1. Esta es la transparencia predeterminada, es decir, opaca.

El valor es generalmente 0~1. Cuanto menor sea el valor, mayor será la transparencia.

Se puede usar con la etiqueta img:hover. Indica que cuando se desplaza el mouse, la imagen cambiará de estilo.

Por ejemplo:

img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}

Barra de navegación: (interesante para pellizcar)

La barra de navegación, introdujo varios tipos, marcos, atributos, etiquetas. Sin embargo, la forma más adecuada es usar etiquetas de elementos <ul>, <li>.

Dividido en barra de navegación lateral vertical y barra de navegación horizontal:

Barra de navegación lateral vertical:

Lo más importante es el cambio de color de estos dos enlaces en los que se hizo clic. Indica el estilo de este enlace activo y el estilo de esta página activa. Tenga en cuenta que estos dos son indispensables.

li a.active { color de fondo: #04AA6D; color blanco; }

li a:hover:not(.active) { //Si falta el elemento: not(.active), hará que el estilo de la página activa cambie cuando pasemos el cursor sobre ella.
color de fondo: #555;
color: blanco;
}

Nota: posición: es necesario configurar fijo. Este elemento es importante. Probablemente solo la barra lateral usará este elemento.

ejemplo:

ul {
  list-style-type: none;     //设置样式无列表
  margin: 0;    
  padding: 0;       //位置是左上。
  width: 25%;         //宽度是25%
  background-color: #f1f1f1;     
  position: fixed;     //固定此位置，这个多琢磨一下。和position:sticky进行比较。
  height: 100%;
  overflow: auto;
}

li a {
  display: block;   设置标签为块级元素，一个占据一行
  color: #000;       
  padding: 8px 16px;
  text-decoration: none;    设置链接无下划线。
}

li a.active {
  background-color: #04AA6D;
  color: white;    
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

Barra de navegación horizontal:

La diferencia entre la barra de navegación horizontal y la anterior es que hay muchas formas de configurarla. Establece el modo de coma flotante: float:left. Configure el modo en línea: pantalla: en línea. Establecer navegación fija: display:sticky.

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: -webkit-sticky; /* Safari */
  position: sticky;       //设置粘贴性的水平导航栏
  top: 0;
}

li {
  float: left;      //这个是关键，使用浮点式的方法设置水平导航栏。
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

Ejemplo extendido:

Barra de navegación con lista desplegable: hay un ejemplo de esto al final de este enlace.

Barra de navegación horizontal CSS (w3schools.com)

la lista desplegable

.dropdown-content { display: none;} Este elemento oculta el estilo de contenido desplegable. Este estilo se puede habilitar con el flotador a continuación.

.dropdown:hover .dropdown-content { El elemento oculto se puede reiniciar en la pseudoclase.
pantalla: bloque;
}

Ejemplo:

<style>
.dropdown {
  position: relative;   
  display: inline-block;
}

.dropdown-content {
  display: none;   
  position: absolute;    //这个很重要的，决定了它会单独成为一个样式。
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
  <p>Hello World!</p>
  </div>
</div>

Estilo de imagen (icono pequeño), selector de atributos

Objeto de la imagen:

background: url(img_navsprites.gif) 0 0;- Definir la imagen de fondo y su posición (0px izquierda, 0px arriba)

De hecho, es similar a una imagen larga y luego se extrae una parte de ella por separado. Esta es la imagen larga en muchas aplicaciones.

Por ejemplo, una imagen de la barra de navegación:

background:url(" ") -47px -47px; el siguiente píxel es el píxel de valor de la parte de la sombra

Selector de atributos:

[atributo] Por ejemplo: [a] De esta manera, se cambiará el estilo de atributo de todos los enlaces.

【atributo="valor"】 Ejemplo: un[objetivo="_espacio en blanco"]

[atributo~="valor"] Por ejemplo: [título~="flor"] especifica que el título contiene el atributo de flor. ¡Palabras completas!

[atributo|="valor"] Por ejemplo: [clase|="superior"] Es similar al uso anterior. diferencia, puede ir seguido de "-".

[atributo^="valor"] Por ejemplo: [clase^="superior"] El encabezado contiene el atributo superior. ¡El valor no tiene que ser una palabra completa!

[atributo$="valor"] Por ejemplo: [clase$="prueba"] contiene el atributo de prueba al final. Ídem.

[attribute*="value"] está bien siempre que el atributo contenga esto. [clase*="te"]

forma, contador

input[ type=text ]: focus //Este es un botón de enfoque, cuando se hace clic, su estilo cambia.

redimensionar: ninguno. Cuando se establece esta propiedad, la propiedad de formulario no permite cambiar el tamaño. (Algunos navegadores pueden arrastrar el tamaño; configurar esta propiedad desactivará el arrastre).

encimera:

Tiene las siguientes propiedades:

counter-reset- Crear o restablecer contadores
counter-increment- Incrementar el valor del contador
content- contenido de inserción generado
counter()o función: agregue el valor del contador de elementoscounters()

Por ejemplo: Esto define el número de h2. Cuente por el número de h2.

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

Lo más importante de este atributo es el contador anidado: como 1.1, 1.2, 1.3 estilos. Se requieren dos contadores. Y el contenido del contenido del último contador es el contador anterior.

Por cuestiones de tiempo necesito modificar mi plan de estudios, el método anterior sigue siendo demasiado lento. Debido a que no hay una aplicación práctica, solo lo leo nuevamente y luego tomo notas de estos contenidos en esto, como si lo copiara nuevamente. No podemos seguir así. Sugerencia: solo mire, hay puntos de conocimiento para el entrenamiento de temas . Otros puntos de conocimiento, no tomes notas, puedes leerlo si quieres. Trate de no mirar. Espera hasta que realmente lo necesites.

Aprendiendo hojas de estilo CSS Parte 2