contenido
representaciones
Realice las funciones de tonificación, ajuste de nitidez y cambio de color.
Puntos ciegos encontrados
1. <label> generalmente se comparte con <input>
ventaja:
- El texto de la etiqueta no solo se asocia visualmente con su elemento de entrada de texto correspondiente, sino también mediante programación. Esto significa que los lectores de pantalla pueden leer la etiqueta cuando el usuario se enfoca en este elemento de entrada de formulario, lo que facilita que los usuarios de tecnología de asistencia comprendan qué datos deben ingresarse.
- Puede hacer clic en la etiqueta asociada para enfocar o activar el elemento de entrada, al igual que hacer clic directamente en el elemento de entrada. Esto amplía el área en la que se puede hacer clic en el elemento, lo que facilita a los usuarios, incluidos aquellos que usan dispositivos con pantalla táctil, activar el elemento.
Para hacer coincidir una <etiqueta> con un elemento <input>, debe proporcionar a <input> un atributo de identificación. Y <label> requiere un atributo for con el mismo valor que el id de <input>.
por
Es decir , el id del elemento asociado a la etiqueta en el mismo documento que el elemento <label> . El primer elemento en el documento cuyo valor de id es el mismo que el valor del atributo for del elemento <label>, si se puede asociar con una etiqueta (labelable), es un control con una etiqueta asociada, y su etiqueta es este elemento <etiqueta>. El atributo for no tiene efecto si el elemento no está asociado con una etiqueta. Si hay otros elementos en el documento con el mismo valor de id que el atributo for, el atributo for no tiene efecto en esos elementos.
Nota: El elemento <label> puede tener un atributo for y un elemento de control secundario al mismo tiempo, pero el atributo for debe apuntar al elemento de control.
Ejemplo:
etiqueta sencilla
<label>Haz clic en mí <input type=“texto”></label>
Usa el atributo for
<label for=“nombre de usuario”>Haz clic en mí</label>
<tipo de entrada = "texto" id = "nombre de usuario">
Problemas de accesibilidad:
Contenido interactivo:
No coloque elementos interactivos como anclas o botones dentro del elemento de etiqueta . Hacer esto hace que sea más difícil para el usuario activar/activar el elemento de entrada de formulario asociado con la etiqueta.
donde()
Visión de conjunto
La función var() puede reemplazar cualquier parte del valor en cualquier atributo del elemento. La función var() no se puede utilizar como nombres de propiedad, selectores u otros valores que no sean valores de propiedad. (Hacerlo a menudo produce una sintaxis no válida o un valor que no está asociado con una variable).
gramática
El primer parámetro del método es el nombre de la propiedad personalizada que se va a reemplazar. El segundo parámetro opcional de la función se utiliza como valor de reserva. Si la propiedad personalizada a la que hace referencia el primer parámetro no es válida, la función utilizará el segundo valor.
var( <nombre-de-propiedad-personalizada> , <valor-declaración> ? )
Nota: Se permiten comas para los valores alternativos de las propiedades personalizadas. Por ejemplo, var(--foo, red, blue) especifica tanto el rojo como el azul como valores alternativos; es decir, cualquier valor después de la primera coma hasta el final de la función se considera como alternativo.
definir en: root y luego usarlo
:raíz {
--main-bg-color: rosa;
}
cuerpo {
color de fondo: var(--main-bg-color);
}
Copiar al portapapeles
Cuando el primer valor no está definido, el valor alternativo entra en vigor
/* valor de reserva */
/* Definir un valor en el estilo del elemento principal */
.componente {
--text-color: #080; /* el color del encabezado no está establecido*/
}
/* Úselo en el estilo del componente: */
.componente .texto {
color: var(--text-color, black); /* el valor normal de color aquí --text-color */
}
.componente .encabezado {
color: var(--header-color, blue); /* aquí el color vuelve a ser azul */
}
filtrar
La propiedad CSS del filtro aplica efectos gráficos como desenfoque o cambio de color a los elementos. Los filtros se utilizan a menudo para ajustar la representación de imágenes, fondos y bordes.
opacidad()
opacity() transforma la transparencia de la imagen. El valor de la cantidad define la escala de la conversión. Un valor del 0 % es completamente transparente y un valor del 100 % no produce ningún cambio en la imagen. Los valores entre 0% y 100% son multiplicadores lineales del efecto. También equivalente a multiplicar las muestras de imágenes por el número. Si no se establece el valor, el valor predeterminado es 1. Esta función es muy similar a la propiedad de opacidad existente, la diferencia es que a través del filtro, algunos navegadores brindan aceleración de hardware para mejorar el rendimiento.
escala de grises()
La función grayscale() cambiará la escala de grises de la imagen de entrada. El valor de la cantidad define la escala de la conversión. Un valor del 100 % convierte completamente la imagen a escala de grises y un valor del 0 % deja la imagen sin cambios. Los valores entre 0% y 100% son multiplicadores lineales del efecto. Si no se establece ningún valor, el valor predeterminado es 0.
difuminar()
Indica la borrosidad de esta imagen.
código fuente
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线图片修饰器 使用JS修饰CSS变量</title>
</head>
<body>
<h2>Update CSS Variables with <span class='h1'>JS</span></h2>
<div class="controls">
<!-- label与input一般同时使用//还有range的特殊操作，左边界与右边界进行设置 value就是位置啊-->
<label for="spacing">Spacing:</label>
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
<input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="./留言板.jpg" alt="">
<style>
:root{
--base: #ffc600;
--spacing: 10px;
--blur: 10px;
--grayscale: 0%;
}
img {
padding: var(--spacing);
background: var(--base);
filter: blur(var(--blur)) grayscale(var(--grayscale));
width: 66%;
}
.h1{
color: var(--base);
}
body {
text-align: center;
background: #193549;
color:white;
font-family: 'helvetica neue', sans-serif;
/* 表示了字体的粗细程度 */
font-weight: 100;
font-size: 50px;
}
.controls {
margin-bottom: 50px;
}
input {
width: 100px;
}
</style>
<script>
const inputs = document.querySelectorAll('.controls input');
function handleUpdate() {
const suffix = this.dataset.sizing || '';
// 用于改变CSS样式
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
}
inputs.forEach(input => input.addEventListener('change',handleUpdate));
inputs.forEach(input => input.addEventListener('mousemove',handleUpdate));
</script>
</body>
</html>