Wondershare EdrawMind
Galería de mapas mentales Diseño y producción web HTML5 CSS3.
- 12
Diseño y producción web HTML5 CSS3.
Diseño y producción web HTML5 CSS3, el desarrollo front-end Wed es adecuado para principiantes Los capítulos 1 a 4 incluyen conocimientos básicos de CSS, conceptos básicos de Wed, HTML, conceptos básicos de CSS, uso de herramientas Dreamweaver, etiquetas de texto y gráficos HTML, selectores básicos de CSS, etc. Capítulo 5-8 Modelo de cuadro, lista de hipervínculos, tablas y formularios, diseño DIV CSS y otra producción principal de páginas web Capítulo 9-11 HTML5, nuevas funciones de CSS3, incrustación multimedia, transición, transformación, animación, dibujo, etc. Estos contenidos pueden ayudar a los principiantes a dominar rápidamente los conocimientos básicos del diseño web.
Editado a las 2021-06-28 16:26:54,
- Recomendados
- Resumen
HTML5 CSS3
Descripción general de las etiquetas
Clasificación de etiquetas
Misceláneas
<b>/<strong>Texto en negrita
<u>/<ins>Modo de visualización subrayado
<i>/<em>El texto se muestra en cursiva
El texto <s>/<del> se muestra tachado
etiqueta de tiempo
tiempo
fecha y hora define el tiempo relativo
pubdateFecha de publicación
marcar caracteres resaltados
citar referencia de etiqueta
etiqueta de título
alinear
izquierdaAlinear etiquetas a la izquierda
etiqueta centralcentro
etiqueta de alineación derecha
etiqueta de línea horizontal
<hora>
align establece la alineación (etiqueta como arriba)
tamaño espesor
colorcolor
anchoancho
etiqueta de formato original
<por>
etiqueta de nueva línea
<br/>
etiqueta de texto
fuente
fuente de cara
tamaño tamaño
colorcolor
resumen
tormenta audaz em inclinación delstrikethrough subrayado
etiqueta de imagen
imagen
ruta de la imagen src
No se puede reemplazar el texto cuando se muestra la imagen alternativa
Contenido que se muestra cuando se desplaza el puntero del título
anchoEl ancho de la imagen.
alturaLa altura de la imagen.
borde establece el ancho del borde de la imagen
margen establece el borde exterior
borde interior acolchado
vspace establece el margen inferior y superior de la imagen
hapace establece los márgenes izquierdo y derecho de la imagen
alinear
izquierda alinea la imagen a la izquierda
derecha alinea la imagen a la derecha
top alinea la parte superior de la imagen con la primera línea de texto
medio alinea la línea central horizontal de la imagen con la primera línea de texto Otro texto está debajo
inferior alinea la parte inferior de la imagen con la primera línea de texto Otro texto está debajo de la imagen.
Primera introducción a CSS3
Ventajas de CSS
ahorrar costos
Mejorar el rendimiento
Núcleo básico de CSS
regla
Selector {Atributo 1: Valor de atributo 1; Atributo 2: Valor de atributo 2;....}
Introducir hoja de estilo
en línea
Incorporado
Enlace externo
Importado
Los selectores básicos funcionan en estos tres.
Selector básico
selector de etiquetas
selector de clase
selector de identificación
selector comodín
id>clase>estándar>comodín
Establecer estilo de texto
Propiedades de estilo de texto
tamaño de fuente tamaño de fuente
ampliación em (múltiple en relación con el texto actual)
píxeles
en pulgadas
centímetros centímetros
mm mm
punto pt
fuente de familia de fuentes
grosor de fuente
valor predeterminado normal
caracteres en negrita
personajes más audaces
más claro define un carácter más delgado
100-900 definen libremente caracteres finos a gruesos
estilo de fuente estilo de fuente
normal predeterminado
cursiva cursiva (el texto mismo cambia)
Palabras en cursiva oblicua (deje que las palabras que no están inclinadas estén inclinadas)
fuente: configuración completa del estilo de fuente
Reglas de @font-face
propiedades de apariencia del texto
colorcolor
espaciado entre letras: espaciado entre palabras
word-spacing: espaciado entre palabras (solo aplicable al inglés)
altura de línea: interlineado
transformación texe: conversión de texto
ninguno no convierte
capitalizar capitalizar
minúsculasConvertir todo a minúsculas
decoración de texto: decoración de texto
decoración noneno
subrayadosubrayado
subrayar
tachado de línea
alineación de texto: alineación horizontal
izquierdaAlinear a la izquierda
alinear a la derecha
alineación central
sangría de primera línea de texto
espacio en blanco: procesamiento de espacios en blanco
normalnormal
por pantalla preformateada tal cual
mayúsculas Convertir todo a mayúsculas
Los espacios de ajuste y los saltos de línea no son válidos, lo que obliga al texto a no ajustarse a la línea.
sombra de texto: efecto de sombra
text-overflow: marca el texto desbordado dentro del objeto
El clip recorta el texto desbordado sin mostrar etiquetas omitidas.
los puntos suspensivos reemplazan el texto modificado con la etiqueta omitida "....."
ajuste de palabras ajusta automáticamente las líneas
normal sólo permite saltos de línea en los puntos de separación de palabras
break-word rompe una línea dentro de una palabra larga o dirección URL
Características avanzadas
Selector compuesto CSS
Selector específico de etiqueta:
selector de descendientes
selector sindical
Cascada y herencia de CSS
Apilabilidad
herencia
prioridad CSS
Selectores CSS3
selector de atributos
Selector de atributo E[att^=value] (selector de prefijo)
Selector de atributo E[att$=value] (selector de sufijo)
Selector de atributos E[att$=value] (incluido)
E representa el nombre de la etiqueta att representa el selector valor prefijo sufijo etiqueta
Selector de relaciones
Selector de elementos secundarios: selecciona los elementos de primer nivel de un elemento
selector de hermanos
Selector de hermanos cercanos: use el número para conectarse
Selector de hermanos ordinario: use ~ para vincular antes y después
Selector de pseudoclase estructurado
:selector de raíz: la etiqueta raíz siempre es html y tiene efecto en todas las etiquetas de la página
:no selector: excluye un elemento de subestructura debajo de este elemento estructural
:selector de único hijo: coincide solo con un elemento hijo de un elemento padre
Selectores :first-child y :last-child: seleccione el primer y último elemento hijo en el elemento padre respectivamente
Selectores :nth-child(n) y :nth-last-child(n): seleccione el enésimo elemento y el enésimo elemento del último objeto principal
Selectores :nth-of-type(n) y :nth-last-of-type(n): seleccione el enésimo elemento y el penúltimo enésimo elemento de un tipo específico en el objeto principal
:selector vacío: se utiliza para seleccionar todos los elementos que no tienen elementos secundarios o cuyo contenido de texto está vacío
subtema
Selector de pseudoelementos
:antes del selector de pseudoelementos
:después del selector de pseudoelementos
modelo de caja CAJA
Entender el modelo de caja
CSS establece todos los elementos de la página en un cuadro rectangular Después de configurar el elemento en un cuadro rectangular, el diseño de la página web no será Las mismas cajas se colocan en diferentes lugares. Cada modelo consta de elemento contenido (contenido) relleno (relleno) borde (borde) y margen (margen)
Propiedades relacionadas con la caja
Propiedades de borde
borde superior
estilo de borde superior;
ancho del borde superior;
color del borde superior;
borde superior: color de estilo ancho;
borde inferior
estilo de borde inferior;
ancho del borde inferior; ancho del borde inferior;
color del borde inferior;
borde inferior: ancho estilo color;
borde izquierdo
estilo de borde izquierdo;
ancho del borde izquierdo;
color del borde izquierdo;
borde izquierdo: color de estilo ancho;
borde derecho
estilo de borde derecho;
ancho del borde derecho;
color del borde derecho;
borde derecho: color de estilo ancho;
Configuraciones de estilo integrales
estilo de borde: arriba [derecha, abajo, izquierda];
ninguno Ninguno
sólido: una sola línea continua
discontinuo: línea discontinua
punteado: línea punteada
doble: doble línea continua
Configuración integral de ancho
ancho de borde: arriba [derecha, abajo, izquierda];
Valores de píxeles
Configuración integral de color
color del borde: arriba [derecha, abajo, izquierda];
Configuración de bordes completa
borde: ancho de cuatro lados, estilo de cuatro lados, color de cuatro lados;
propiedades de relleno
padding-top: margen superior
padding-right: relleno derecho
acolchado-inferior: acolchado inferior
padding-left: relleno izquierdo
relleno: relleno superior [relleno derecho, relleno inferior, relleno izquierdo]
Propiedades de margen
margen superior: margen superior
margen derecho: margen derecho
margen inferior: margen inferior
margen izquierdo: margen izquierdo
margen: margen superior [margen derecho, margen inferior, margen izquierdo]
propiedades de fondo
color de fondo: color de fondo:
imagen de fondo:imagen de fondo:url()
Mosaico de la imagen de fondo: repetición de fondo: propiedad
repetir mosaicos horizontal y verticalmente
no repetir no mosaico
repetir-x mosaicos horizontalmente
mosaicos repetidos verticalmente
Posición de la imagen de fondo: posición de fondo: abajo a la derecha;
Imagen de fondo arreglada
adjunto de fondo: atributo;
La imagen de desplazamiento se mueve a medida que se mueve la página.
imagen fija fijada a la página
Conjunto completo de elementos de fondo.
fondo: color de fondo URL ("imagen") posicionamiento del mosaico fijo;
El ancho y alto de la caja.
CSS3 agrega un nuevo atributo de modelo de caja
transparencia de color
rgba (r, g, b, alfa) rgb representa la proporción media del color alfa es un parámetro 0.0 es completamente transparente y 1.0 es completamente opaco;
opacidad: parámetro; parámetro entre 0~1
esquinas redondeadas
radio-borde: Parámetro de radio horizontal 1 Parámetro de radio horizontal 2 Parámetro de radio horizontal 3 Parámetro de radio horizontal 4/Parámetro de radio vertical 1 Parámetro de radio vertical 2 Parámetro de radio vertical 3 Parámetro de radio vertical 4;
Borde de imagen
border-image-source especifica la ruta de la imagen
border-image-slice especifica el desplazamiento hacia adentro de los lados superior, derecho, inferior e izquierdo de la imagen del borde
border-image-width especifica el ancho del borde
border-image-outset especifica la distancia que el fondo del borde se extiende hasta el exterior del cuadro
border-image-repeat especifica el método de mosaico de la imagen de fondo
sombra
h-shadow representa la posición de la sombra horizontal, que puede ser un valor negativo (atributo requerido)
v-shadow representa la posición de la sombra vertical, que puede ser un valor negativo (atributo requerido)
Desenfoque de radio de desenfoque de sombra (propiedad opcional)
Radio de expansión de la sombra extendida, no puede ser negativo (atributo opcional)
colorColor de sombra (atributo opcional)
El valor predeterminado de inicio/inserción es sombra exterior/sombra interior (atributo opcional)
Degradado
Imagen de fondo de degradado lineal: degradado lineal (ángulo de degradado, valor de color 1, valor de color 2...·..., valor de color n);
Imagen de fondo con degradado radial: degradado radial (forma de degradado con cuatro posiciones centrales, valor de color 1, valor de color 2. valor de color m;
Imagen de fondo de degradado lineal repetido: degradado lineal repetido (ángulo de degradado, valor de color 1, valor de color 2..., valor de color n);
Repita la imagen de fondo del degradado radial:repeatina-radial-aradient (posición central del círculo de forma del degradado, valor de color 1, valor de color 2..., valor de color n);
Múltiples imágenes de fondo
Recortar imagen de fondo
Establezca el tamaño de la imagen de fondo: tamaño de fondo: valor de atributo 1 valor de atributo 2;
Establezca el área de visualización de la imagen de fondo: origen-fondo: valor del atributo;
Establecer el área de recorte de la imagen de fondo: clip de fondo
Tipos de elementos y conversiones
Elementos de bloque: <hl> ~ <h6>, <p>, <div> <hl>~<h6>, <ul>, <ol>, <li>
Elementos en línea: <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, <u>, <span>, etc.
etiquetas div y span
div implementa la planificación y el diseño de páginas web.
span se usa a menudo para marcar texto mostrado especialmente y se usa con el atributo de clase
Conversión de tipo de elemento
Los valores de atributo comúnmente utilizados y el significado del atributo de visualización son los siguientes:
en línea: este elemento se mostrará como un elemento en línea (el valor de atributo de visualización predeterminado de los elementos en línea) bloque: este elemento se mostrará como un elemento de bloque (el valor de atributo de visualización predeterminado del elemento de bloque). bloque en línea: este elemento se mostrará como un elemento de bloque en línea y se pueden establecer atributos como ancho, alto y alineación, pero el elemento no ocupará una sola línea. none: este elemento estará oculto, no se mostrará y no ocupará espacio en la página, lo que equivale a que el elemento no exista.
Listas e hipervínculos
etiqueta de lista
lista ordenada<ol>
<ol> <li>Listar elemento 1</li> <li>Elemento de lista 2</li> <li>Listar elemento 3</li> </ol>
tipo: valor de atributo (1 predeterminado)/a-A/i-I
número inicial (especifica el valor inicial de la viñeta)
número de valor (el número que especifica la viñeta)
Lista desordenada<ul>
<ul> <li>Listar elemento 1</li> <li>Elemento de lista 2</li> <li>Listar elemento 3</li> </ul>
tipo-
disco círculo sólido
circulo circulo hueco
cuadradocuadrado sólido
lista de definiciones<dI>
<dt> representa el contenido de la definición <dd> explica el contenido
Estilo de lista de control CSS
tipo-estilo-lista se utiliza para controlar el tipo de símbolo que se muestra en los elementos de la lista
círculo sólido del disco (lista desordenada)
none no utiliza viñetas (listas ordenadas y desordenadas)
círculo círculo hueco (lista desordenada)
cjk-ideográfico números ideográficos simples
cuadrado cuadrado sólido (lista desordenada
sistema de numeración georgiano tradicional georgiano
números arábigos decimales
Números arábigos con cero decimal que comienzan con 0
números romanos en minúsculas y minúsculas
números romanos en mayúsculas y mayúsculas
letras inglesas minúsculas alfa inferior
letras inglesas mayúsculas alfa superior
letras latinas minúsculas latinas inferiores
letras latinas mayúsculas latinas superiores
hebreo Numeración armenia tradicional
numeración hebrea tradicional armenia;
list-style-image puede configurar la imagen del elemento para cada elemento de la lista
list-style-position se utiliza para controlar la posición de las viñetas
interior: la viñeta de la lista se encuentra dentro del texto
exterior: la viñeta de la lista está fuera del texto de la lista.
estilo de lista: viñeta de lista, posición de viñeta de lista, imagen de elemento de lista (configuración completa del estilo de lista)
Hipervínculo
<a href="Saltar objetivo" terget="Cómo aparece la ventana de destino">Imagen de texto</a> URL de destino del enlace href (# puede establecer una conexión vacía) l destino especifica el método de apertura
El hipervínculo de enlace de anclaje se utiliza con etiquetas de lista
Enlace de hipervínculos de controles de pseudoclase
a:enlace{reglas de estilo css;}predeterminado
a:visited{reglas de estilo css;}El estilo después de que se visita el hipervínculo
a:hover{regla de estilo css;}estilo de hipervínculo al pasar el mouse sobre
a:active{reglas de estilo css;} estilo de hipervínculo cuando se hace clic y se mantiene presionado el mouse
Tablas y formularios
hoja
<tabla> <tr> <td>Texto en la celda</td> </tr> < /tabla>
<table> </table> define el inicio y el final de una tabla
border establece el borde de la tabla (el borde predeterminado = "0" no es ningún borde) colapso de frontera: colapsar fusión de frontera border-collspacing establece la distancia entre celdas adyacentes
cellpacing establece el espacio entre celdas
cellpadding establece el espacio entre el contenido de la celda y los bordes de la celda
ancho establece el ancho de la tabla
altura establece la altura de la mesa
align establece la alineación horizontal de la tabla en la página web
bgcolor establece el color de fondo de la tabla
fondo establece la imagen de fondo de la tabla
<tr> </tr>Definir una de las líneas
altura establece la altura de la fila
align establece la alineación horizontal de una línea de contenido en la página web
valign establece el modo vertical de una fila de contenido
bgcolor establece el color de fondo de la fila
fondo establece fila imagen de fondo
<td> </td> Definir celdas en la tabla
ancho establece el ancho de la celda
altura establece la altura de la celda
align establece la alineación horizontal de las celdas en la página web
valign establece el patrón vertical del contenido de la celda
bgcolor establece el color de fondo de la celda
backgroundEstablecer imagen de fondo de celda
colspan establece el número de columnas abarcadas por celdas (usadas para fusionar celdas orientadas horizontalmente)
rowspan establece el número de filas que la celda abarca verticalmente (se usa para fusionar celdas orientadas verticalmente)
La etiqueta <th> se utiliza para configurar el encabezado de la tabla para que esté al mismo nivel que la etiqueta td.
Estructura de la mesa
<thead> define el encabezado de la tabla ubicado en la etiqueta de la tabla
<tfoot>El encabezado y pie de página utilizados para definir la tabla se encuentran después del encabezado
<tbody> define el tema de la mesa
Bordes de la tabla de control CSS
El atributo de borde de la etiqueta de la tabla puede establecer el borde de la tabla.
forma
Composición del formulario
de la sintaxis del elemento de formulario: <from> control de formulario</from>
La acción especifica la dirección de destino para el envío de datos.
método de solicitud de datos método get /post get significa que el navegador establece una conexión con el servidor de formulario y luego lo transmite directamente, lo cual es menos seguro. Publicar significa que el navegador establecerá un enlace al formulario especificado en el atributo de acción y luego lo transmitirá en partes. El envío implícito es más seguro.
nombre se utiliza para especificar un nombre para el formulario
Controles centrales del formulario
control de entrada
<tipo de entrada="tipo de control"/>
tipo
textoCuadro de entrada de texto de una sola línea
cuadro de entrada de contraseña
botón de radio
casilla de verificación casilla de verificación
botónbotón normal
botón enviarenviar
Botón de reinicio
botón de envío de imagen en forma de imagen
campo oculto oculto
dominio de archivo
nombreEl nombre del control
El valor de texto predeterminado en el control de entrada de valor.
El ancho de visualización del control de entrada de tamaño en la página.
readonly El contenido del control es de solo lectura (no se puede editar ni modificar)
deshabilitado deshabilita el control (se muestra en gris) al cargar la página por primera vez
marcado define los elementos que se seleccionan por defecto en el control de selección
El control maxlength permite ingresar el número máximo de caracteres.
control de área de texto
El valor del atributo tayp del control de entrada es texto. Este control puede crear texto de varias líneas. Las columnas pueden establecer el número de caracteres en cada línea del cuadro de texto de varias líneas y las filas se utilizan para definir el número de líneas que se muestran. en el cuadro de entrada de texto de varias líneas.
nombre conjunto de atributos nombre
El contenido del espacio de solo lectura es de solo lectura.
deshabilitadoDesactiva el control al cargar la página por primera vez
seleccionar control
Se utiliza para crear menús desplegables.
seleccionar
tamaño especifica el número de elementos visibles en el menú desplegable
Cuando múltiple define múltiple = "múltiple", el menú desplegable tendrá múltiples funciones de selección.
opción
Al definir seleccionado, el elemento actual es el elemento predeterminado.
Atributos del formulario HTML5
Nuevo atributo de formulario
El atributo de autocompletar se utiliza para especificar si el formulario tiene una función de autocompletar, lo que significa que el contenido de entrada del control del formulario se registra y el historial de entrada se mostrará en la lista desplegable cuando se ingrese nuevamente.
encendido significa que hay una función de autocompletar
apagado significa que no hay función de autocompletar
El atributo novalidate especifica cancelar la verificación de validez del formulario cuando se envía el formulario. Después de configurar este atributo para el formulario, la validación de todo el formulario se desactiva. No se validan todos los formularios dentro del control del formulario. ="novalidar"
Nuevo control de formulario P172
Nuevo tipo de control de entrada
El tipo de correo electrónico <input type="email"> es un cuadro de texto especialmente utilizado para ingresar direcciones de correo electrónico.
El tipo de URL <input type="url"> es un cuadro de texto especialmente utilizado para ingresar direcciones URL.
El tipo de teléfono <input type="tel"> es un cuadro de texto que se utiliza especialmente para ingresar números de teléfono.
El tipo de búsqueda <input type="search"> es un cuadro de texto especialmente utilizado para ingresar palabras clave de búsqueda.
El tipo de color <input type="color"> es un cuadro de texto especialmente configurado para color
El tipo de número <input type="numder"> es un cuadro de texto especialmente utilizado para ingresar valores numéricos.
valor especifica el valor predeterminado del cuadro de entrada
valor máximo máximo
valor mínimo mínimo
pasoIngrese un intervalo legal
El tipo de rango <input type="range"> se utiliza para proporcionar un rango de entrada de valores dentro de un rango determinado.
Tipo de fecha rosa <tipo de entrada=fecha, mes, semana...> especifica el tipo de fecha y hora
fecha selecciona día, mes y año
mes selecciona mes y año
semana selecciona semana y año
horaSeleccionar hora
datetime selecciona hora, año, mes, día (hora utc)
datetime-local selecciona hora, día, mes, año (hora local)
Nuevo atributo de entrada
El atributo de enfoque automático se utiliza para especificar si se debe obtener el enfoque automáticamente después de cargar la página (en el cuadro de entrada)
El atributo de formulario puede escribir los subelementos del formulario en cualquier lugar de la página. Solo necesita establecer el valor del atributo de formulario del elemento para esta especificación en el formulario.
El atributo de lista especifica el elemento de la lista de datos vinculado al cuadro de entrada y su valor es la identificación de un determinado elemento de la lista de datos.
El atributo múltiple especifica que el cuadro de entrada puede seleccionar múltiples valores. Este atributo es aplicable al correo electrónico (separado por comas) y al archivo.
Los atributos mínimo, máximo y paso se utilizan para especificar límites para tipos de entrada que contienen números o fechas.
El atributo de patrón se utiliza para verificar si el contenido ingresado en el cuadro de entrada del tipo de entrada coincide con la expresión regular definida P181
El atributo de marcador de posición se utiliza para proporcionar información relevante para el cuadro de entrada del tipo de entrada para describir lo que el cuadro de entrada espera que ingrese el usuario.
El atributo requerido se utiliza para determinar si la entrada del usuario en el cuadro de entrada del formulario está vacía y el usuario no puede enviar el formulario.
Diseño CSS DIV
Atributos de diseño comunes
Atributo flotante de etiqueta
selector {flotante: valor de atributo}
valores de atributos comunes flotantes
la etiqueta izquierda flota hacia la izquierda
la etiqueta derecha flota hacia la derecha
ninguna etiqueta no flota
Características del flotador: 1. El elemento flotante está fuera del flujo del documento y ya no ocupa una posición en el documento. 2. Después de configurar el elemento flotante, el elemento se moverá hacia la izquierda o hacia la derecha del elemento principal. 3. Los elementos flotantes no se moverán de sus elementos principales de forma predeterminada. 4. Cuando un elemento flotante se mueve hacia la izquierda o hacia la derecha, no excederá a otros elementos flotantes al frente. 5. Si el elemento flotante está encima de un elemento de bloque que no flota, el elemento flotante no puede moverse hacia arriba. 6. El elemento flotante no excederá la altura del elemento flotante que está encima de él, y como máximo será tan alto como éste. 7. Los elementos flotantes no cubrirán el texto y el texto se ajustará automáticamente alrededor del elemento.
flotador claro
Selector {borrar: valor del atributo;}
left no permite etiquetas flotantes a la izquierda
La derecha no permite etiquetas flotantes a la derecha.
ambos claros flotan en ambos lados al mismo tiempo
etiqueta vacía flotador claro
Utilice el desbordamiento para limpiar los flotadores
Aplicar el estilo overflow:hidden a una etiqueta también puede eliminar el efecto de flotación en la etiqueta.
Atributos de posicionamiento de etiquetas
Selector {posición: valor del atributo;}
posicionamiento automático estático
Posicionamiento relativo relativo, posicionamiento relativo a la posición de su flujo de documentos original
posicionamiento absoluto, posicionado en relación con su etiqueta principal previamente posicionada
posicionamiento fijo fijo, equivalente a posicionar la ventana del navegador
El modo de posicionamiento de posición solo se utiliza para definir cómo se coloca la etiqueta y no puede determinar la posición específica de la etiqueta.
El desplazamiento superior define la distancia de la etiqueta con respecto al borde superior de su etiqueta principal.
El desplazamiento inferior define la distancia de la etiqueta con respecto al borde inferior de su etiqueta principal.
izquierdaEl desplazamiento izquierdo define la distancia de la etiqueta en relación con la línea izquierda de su etiqueta principal.
El desplazamiento superior derecho define la distancia de la etiqueta en relación con la línea derecha de su etiqueta principal.
Otras propiedades
Selector {desbordamiento: valor del atributo;}
El contenido visible no se recortará y se mostrará fuera del cuadro de etiqueta.
El contenido desbordado oculto se recortará y el contenido recortado será invisible.
aoto genera barras de desplazamiento cuando es necesario y se adapta al contenido que debe mostrarse.
El atributo de índice z ajusta las posiciones superior e inferior.
tipo de diseño
diseño de una sola columna
incrustación multimedia
Formatos de archivos de vídeo y archivos de audio.
Formatos de vídeo soportados por HTML5: ogg, mpeg4, webm
Formatos de audio compatibles con HTML5: ogg, mp3, wav
Insertar vídeo y audio
Vídeo: <video src="ruta del archivo de video" controles="controles"></video> Si se muestra el complemento de video. También se puede insertar texto entre los videos. Si el video no se puede mostrar, se puede mostrar el texto.
Atributos: La reproducción automática reproduce automáticamente el vídeo después de cargar la página actual. El vídeo en bucle finaliza y comienza a reproducirse de nuevo. El vídeo precargado se carga cuando la página se carga y está lista para reproducirse, pero este atributo se ignora si se utiliza el atributo de reproducción automática. Póster Cuando no se pueda reproducir el vídeo, vincule una imagen y muéstrela según una proporción determinada.
Audio: <audio src="ruta del archivo de audio" controles="controles"></audio>
Atributos: La reproducción automática reproduce audio automáticamente después de cargar la página actual. El audio en bucle finaliza y comienza a reproducirse nuevamente. El audio precargado se carga cuando la página se carga y está lista para reproducirse, pero este atributo se ignora si se utiliza el atributo de reproducción automática.
Excesiva deformación y animación.
encima
propiedad de propensión a la transición
noneSin atributos se obtendrán efectos excesivos
todosTodos los atributos obtienen efectos excesivos
La propiedad define el nombre de la propiedad CSS que aplica el efecto excesivo. Varios nombres están separados por comas.
propiedad de duración de transición
el tiempo define la duración del efecto de transición
Propiedad de función de sincronización de transición
Curva de velocidad utilizada para especificar el efecto de transición del atributo de transición
lineal especifica un efecto de transición que comienza y termina a la misma velocidad, equivalente a cúbico-bezier
facilidad (predeterminado) comienza lentamente, luego se acelera y termina lentamente
Efecto de transición fácil que comienza a una velocidad lenta y luego se acelera gradualmente
efecto de transición suave que termina a una velocidad lenta
efecto de transición de entrada y salida que comienza a una velocidad lenta y termina a una velocidad lenta
Cubic-Bézier define la forma de la curva de Bézier de aceleración y desaceleración por sí misma.
propiedad de retardo de transición
Especifica la hora de inicio del efecto de transición.
La secuencia de propiedades compuestas de transición es la anterior.
deformación 2D
atributo de transformación
transform-functions se utiliza para establecer la transformación
transformar: traducir (x-... y-...) traducción
transformar:escala(x-... y-...) escala
transformar: sesgar (x-...y-...) sesgar
transformar: rotar (ángulo) rotación
Establezca su punto central origen de transformación: eje x eje y eje z
deformación 3D
rotarX() permite que el elemento especificado gire alrededor del eje X
rotarY() permite que el elemento especificado gire alrededor del eje Y
rotarZ() permite que el elemento especificado gire alrededor del eje Z
rotado3d (x-y-z, ángulo (ángulo de rotación)) configuración integral de atributos
animación
La animación de regla @keyframes representa el nombre de la animación actual selector de fotogramas clave formulario del selector de fotogramas clave (0) significa inicio hasta (100%) significa final El estilo CSS define la animación a la que responder al ejecutar el fotograma clave actual.
El atributo de nombre de animación se utiliza para definir el nombre de la animación que se aplicará. La regla @Keyframes hará referencia al nombre de la animación. nombre de animación:nombre de fotograma clave|ninguno ninguno significa que no se aplica ninguna animación
La propiedad de duración de la animación se utiliza para definir el tiempo necesario para que se complete todo el efecto de animación. duración de la animación: tiempo
El atributo de función de sincronización de animación se utiliza para especificar la curva de velocidad de la animación. función de sincronización de animación: valor;
lineal especifica un efecto de transición que comienza y termina a la misma velocidad
facilidad (predeterminado) comienza lentamente, luego se acelera y termina lentamente
Efecto de transición fácil que comienza a una velocidad lenta y luego se acelera gradualmente
la animación de salida finaliza a baja velocidad
efecto de transición de entrada y salida que comienza a una velocidad lenta y termina a una velocidad lenta
cúbico-bezier (n,n,n,n) define usted mismo la forma de la curva de Bézier de aceleración y desaceleración
La propiedad de retardo de animación se utiliza para definir el tiempo de retraso para ejecutar efectos de animación. retardo de animación: el tiempo define el tiempo de espera
La propiedad animación-iteración-recuento se utiliza para definir el número de veces que se reproduce la animación. animación-iteración-recuento: número | infinito define el número de veces de reproducción;
La propiedad de dirección de animación define la dirección de la reproducción de la animación actual.
El atributo de animación se utiliza para definir una colección de los seis atributos anteriores.
Principios de dibujo y almacenamiento de datos.