Wondershare EdrawMind
Galería de mapas mentales CSS HTML
- 14
CSS HTML
La base común de html y css, CSS son hojas de estilo en cascada y html es un lenguaje de marcado de hipertexto.
Editado a las 2023-08-22 15:01:32,
- Recomendados
- Resumen
Resumen de notas sobre el marco de conocimiento de la red de algoritmos front-end
- 8
CSS HTML
Conceptos CSS
Hojas de estilo en cascada
Hojas de estilo en cascada
sintaxis CSS
Comentario
/* */
Selector {propiedad:valor de propiedad;propiedad:valor de propiedad;propiedad:valor de propiedad;...propiedad:valor de propiedad;}
Selectores CSS comunes
Básico
Etiqueta
nombre de etiqueta {}
IDENTIFICACIÓN
Características
unicidad
#caja{}
clase
Características
uno a muchos
muchos a uno
.rojo{}
pseudoclase
:flotar
:enlace
:activo
:visitado
comodín
*
complejo
grupo
Selector 1, Selector 2,....{}
Incluir
Selector 1 Selector 2...{}
Especificar
Selector 1 Selector 2...{}
Propiedades CSS comunes
texto
tamaño de fuente
color
altura de la línea
texto alineado
peso de fuente
atrevido
normal
encendedor
más audaz
Estilo de fuente
normal
itálico
Familia tipográfica
variante de fuente
normal
letras minúsculas
guion de texto
decoracion-de-texto
subrayar
sobrelínea
línea directa
ninguno
transformación de texto
mayúscula
minúscula
capitalizar
desbordamiento de texto
espaciado de letras
espaciado de palabras
modelo de caja
margen
Admite el método de cuatro valores
Admite definición de dirección única
Soporta valores negativos
Las imágenes de fondo no son compatibles
Fusión verticalmente adyacente
Desbordamiento del cuadro principal: oculto
flotador de subcaja
borde
Características
Imagen de fondo de soporte
Soporta una sola dirección
El método de cuatro valores no es compatible
cuña fronteriza
triángulo
borde: 100px sólido transparente;
color del borde superior: rojo;
altura: 0;
ancho: 0;
Atributos
ancho del borde
estilo de borde
sólido
línea sólida
discontinuo
Linea discontinua
punteado
linea punteada
doble
Doble linea
color del borde
relleno
Admite el método de cuatro valores
Soporta una sola dirección
Imagen de fondo de soporte
No se admiten valores negativos
Es necesario reducir el ancho y el alto correspondientes (la caja extraña no lo necesita)
contenido
ancho
altura
flotar
flotar
izquierda
bien
ninguno
claro
izquierda
bien
ninguno
ambos
Colócalo en una caja que no quieras que se vea afectada por la flotación.
posición
relativamente
relativo
Características
Sin ocupación de espacio fuera de etiqueta
posición relativa a uno mismo
Se puede utilizar para pequeños movimientos de posición.
Objetos de referencia que se pueden utilizar para el posicionamiento absoluto.
absoluto
absoluto
Características
Fuera de etiqueta, no ocupa espacio
Posicionamiento relativo al bloque contenedor
No escribas las coordenadas y déjalas en su lugar.
El hijo es completamente diferente al padre.
fijado
fijado
Características
Posicionamiento relativo de la ventana
Fuera de etiqueta, no ocupa espacio
No escribas las coordenadas y déjalas en su lugar.
viscosidad
pegajoso
Características
Debe usarse en combinación con coordenadas.
Equivalente a una combinación de posicionamiento relativo y posicionamiento fijo
Sin ocupación de espacio fuera de etiqueta
estático
estático
Características
Sin ocupación de espacio fuera de etiqueta
Los atributos de coordenadas no son compatibles
Los atributos jerárquicos no son compatibles
tipo de elemento
Clasificación
nivel de bloque
linea exclusiva
Ancho y alto configurables
La altura de la fila puede soportar la altura.
Después de flotar, se dispondrá horizontalmente.
en línea
mostrar en una línea
No se puede establecer el ancho y el alto
La altura de la fila no puede soportar la altura.
Puede establecer el ancho y el alto después de flotar
La sangría de texto no es compatible.
Los atributos relacionados con el modelo de caja no se admiten y no son válidos en la dirección vertical.
Convertir
mostrar
bloquear
bloque en línea
en línea
ninguno
elemento oculto
elemento de lista
tipo de lista
celda de tabla
tipo de célula
solicitud
Navegación de ancho variable centrada horizontalmente
ul{text-align:centro}
li {pantalla: bloque en línea;}
Una sola línea centrada, varias líneas a la izquierda
.todo {text-align:center;}
.all p {display:inline-block;text-align-left};
brecha de imagen
img{display:bloquear;
img{vertical-align:arriba/medio/abajo;}
.todos{font-size:0;}
Centrar la imagen verticalmente
Método 1
.todo {altura:400px;altura de línea:400px;}
img{vertical-align:middle;}
Método 2
img{vertical-align:middle;}
span{vertical-align:middle;width:0;height:100%;display:inline-block}
Relacionado con la tabla
espaciado de fronteras
espacio del bisel
colapso de frontera
fusión de fronteras
diseño de mesa
Diseño de mesa fijo
valor
fijado
Diseño de mesa fijo
auto
Disposición automática de la mesa
celdas vacias
Celdas sin contenido mostrado
valor
esconder
Ocultar celdas sin contenido
espectáculo
No hay visualización de celular para ese día.
Antecedentes relacionados
color de fondo
imagen de fondo
URL();
repetición de fondo
repetir
no repetir
repetir-x
repetir-y
posición de fondo
Horizontal y vertical
píxeles
%
arriba derecha abajo izquierda
archivo adjunto de fondo
Desplazarse
cuadro relativo
fijado
ventana relativa
Lista relacionada
estilo de lista: ninguno
css3
Selector
Básico
Etiqueta
IDENTIFICACIÓN
clase
*
Jerarquía
Descendientes
(espacio)
descendencia
>
hermanos vecinos
Universal
~
pseudoclase
Pseudoclase dinámica
:flotar
:enlace
:activo
:visitado
:enfocar
Pseudoclase estructural
serie infantil
:nésimo-niño()
:primer hijo
:último niño
:hijo único
: enésimo-último-hijo()
serie hijo
: enésimo de tipo()
:primero de tipo
:último tipo
:solo de tipo
: enésimo-último-de-tipo()
:raíz
:vacío
:no()
negar pseudoclase
:no
Pseudoclase de lenguaje
:idioma
Pseudoclase objetivo
:objetivo
Debe usarse junto con enlaces de anclaje.
poner en el objetivo
El que tiene la identificación es el objetivo.
Pseudoclase de estado de elemento de interfaz de usuario
:desactivado
:activado
:solo lectura
:leer escribir
:comprobado
Atributos
[atributo]
[atributo=val]
[atributo^=valor]
[atributo$=val]
[atributo*=valor]
[atributo~=valor]
[atributo|=valor]
Pseudoelementos (en línea)
::después de {contenido:""}
::antes de {contenido:""}
::primera linea
::primera letra
::selección
Pesos
*
0.1
Etiqueta
1
clase
10
pseudoclase
10
Atributos
10
IDENTIFICACIÓN
100
en línea
1000
!importante
10000
Atributos
radio de esquina
radio-frontera
sombra de la caja
sombra de la caja
recuadro
sombra interior
A la derecha
abajo
grado de ambigüedad
grado de expansión
color de sombra
sombra de texto
sombra de texto
A la derecha
abajo
grado de ambigüedad
deformación
transformar (2D)
traducir()
girar()
escala()
sesgar()
transformar (3D)
Definir profundidad de campo
perspectiva
Definir tipo de deformación
transformar-estilo: preservar-3d;
deformación 3D
traducir3d
rotarx
rotativo
rotar
escala3d
Definir el punto de partida de la deformación.
origen-transformación
transición
transición
Degradado
gradiente lineal
fondo: gradiente lineal (0 grados, #000, #000)
gradiente radial
fondo:gradiente radial (radio en la posición, #000, #000)
Radio: mayor/menor
Posición: x/y
Mosaico de degradado lineal
fondo: gradiente-lineal-repetitivo (0 grados, #000 5px, #000 10px)
Mosaico de gradiente radial
fondo: gradiente-radial-repetitivo (radio en la posición, #000 5px, #000 10px)
animación
declaración de animación
@nombre de fotogramas clave{}
llamada de animación
animación: nombre .5s lineal 0s infinito alertnate palabras clave
Disposición
Diseño de caja flexible
envase
pantalla:flexible
dirección flexible
columna
fila
columna-inversa
fila inversa
envoltura flexible
envoltura
sin envoltura
envoltura inversa
justificar-contenido
inicio flexible
extremo flexible
centro
espacio entre
espacio alrededor
uniformemente en el espacio
alinear elementos
estirar
inicio flexible
extremo flexible
centro
base
contenido-alegn
estirar
inicio flexible
extremo flexible
centro
espacio entre
espacio alrededor
uniformemente en el espacio
proyecto
doblar
flex-contraíble
crecimiento flexible
base flexible
alinearse
estirar
inicio flexible
extremo flexible
centro
base
orden
diseño de cuadrícula
envase
pantalla:cuadrícula
columnas-plantilla-cuadricula
200 px 200 px 200 px
20% 50% 30%
repetir (3200 px)
repetir (autocompletar, 20%)
1fr 1fr 1fr
1fr 1frr 1minmax(200px,1fr)
filas de plantilla de cuadrícula
200 px 200 px 200 px
20% 50% 30%
repetir (3200 px)
repetir (autocompletar, 20%)
brecha de red
espacio entre filas
espacio entre columnas
áreas de plantilla de cuadrícula
justificar-contenido
alinear contenido
justificar elementos
alinear elementos
proyecto
área de cuadrícula
columna de cuadrícula
inicio-columna-cuadrícula
final de columna de cuadrícula
fila de cuadrícula
inicio de fila de cuadrícula
final de fila de cuadrícula
diseño de varias columnas
columnas
columnas: 5 200 px;
recuento de columnas
ancho de columna
espacio entre columnas
regla de columna
tramo de columna
relleno de columna
Consultas de los medios
<link mate="pantalla y (ancho mínimo: 960 px) y (ancho máximo: 1200 px)">
@media screen y (ancho mínimo: 960 px) y (ancho máximo: 1200 px)
modelo de caja
tamaño de caja
cuadro de borde
modelo de caja extraño
Características
borde de relleno dentro del ancho alto
cuadro de contenido
modelo de caja estándar
Características
ancho alto no incluye borde de relleno
compatible
contenido
Tridente
Geco
kit web
Parpadear
Presto
prefijo
-moz-
-EM-
-webkit-
-o-
el término
mejora progresiva
Primero bajo y luego alto, centrándose en la implementación de las funciones de la versión baja y agregando efectos interesantes a la versión alta.
Rebaja elegante
Primero alto y luego bajo, centrándose en los efectos de las funciones de la versión alta y necesita lidiar con la compatibilidad de las versiones bajas.
otro
Icono de fuente
http://www.iconfont.cn
enlace de anclaje
<a href="#uno"></a>
Saltar
<a nombre="uno"></a>
<div id="uno"></div>
Método de centrado
posición
Método 1
cuadro principal
posición: relativa;
subcuadro
posición:absoluta;
arriba: 50%;
izquierda: 50%;
margen izquierdo: -medio ancho;
margen superior: -media altura;
margen:automático
Método 2
cuadro principal
posición: relativa;
subcuadro
posición:absoluta;
arriba: 0;
abajo: 0;
izquierda: 0;
derecha: 0;
margen:automático
Método 3
cuadro principal
posición: relativa;
subcuadro
posición:absoluta;
arriba:calc(50% - la mitad más alto);
izquierda:calc(50% - la mitad del ancho);
Método 4
cuadro principal
posición: relativa;
subcuadro
posición:absoluta;
arriba: 50%;
izquierda: 50%;
traducir(-50%,-50%);
Caja flexible
Método 1
cuadro principal
pantalla:flexible;
subcuadro
margen:automático;
Método 2
cuadro principal
pantalla flexible;
justificar-contenido:centro;
alinear elementos:centro;
Método 3
cuadro principal
pantalla:flexible;
justificar-contenido:centro;
subcuadro
alineación-auto:centro
red
Método 1
cuadro principal
pantalla:cuadrícula;
justificar-contenido:centro;
alinear contenido:centro;
Método 2
cuadro principal
pantalla:cuadrícula;
subcuadro
margen:automático;
bloque de transferencia intralínea
Método 1
cuadro principal
altura de línea: alta;
alineación de texto:centro;
cuadro principal
pantalla: bloque en línea;
alineación vertical: medio;
altura de línea: alta;
Método 2
cuadro principal
alineación de texto:centro;
subcuadro
pantalla: bloque en línea;
alineación vertical: medio;
Pseudoelemento del cuadro principal::después
contenido:"";
pantalla: bloque en línea;
alineación vertical: medio;
ancho: 0;
altura: 100%;
Método 3
cuadro principal
alineación de texto:centro;
alineación vertical: medio;
pantalla: celda de tabla;
subcuadro
pantalla: bloque en línea;
Centrar verticalmente texto de varias líneas
cuadro principal
alineación vertical: medio;
pantalla: celda de tabla;
segmento de código
Elipsis
ancho fijo
ancho
Sin saltos de línea
espacio en blanco:nowrap;
desbordamiento oculto
desbordamiento: oculto
Elipsis
desbordamiento de texto: puntos suspensivos
Diseño móvil
ventana gráfica
Ventana gráfica, el valor predeterminado para dispositivos móviles es 980
dpr
Proporción de píxeles del dispositivo
Disposición
Diseño porcentual
Diseño de escala
unidad
ellos
Un múltiplo de sí mismo o del tamaño de fuente del cuadro principal
movimiento rápido del ojo
Múltiples tamaños de fuente raíz (html)
VW
Uno por ciento del ancho de la ventana gráfica
vh
Uno por ciento de la altura de la ventana gráfica
vmin
uno por ciento del lado corto
vmáx
Uno por ciento del lado largo
BFC
Propiedades activables
flotar
izquierda
bien
Desbordamiento
oculto
Desplazarse
auto
posición
absoluto
fijado
mostrar
bloque en línea
celda de tabla
título de tabla
doblar
solicitud
problema de penetración del margen superior
problema de colapso de altura
Ancho y alto adaptables
Contenido adaptable al ancho
flotar
posición
bloque en línea
Contenido altamente adaptable
muy colapsado
El cuadro secundario flota y la altura del cuadro principal es 0.
resolver
altura fija
ventaja
Simple
defecto
incapaz de adaptarse
Agregar desbordamiento: oculto al cuadro principal
ventaja
Adaptable
defecto
desbordamiento oculto
Agregue un cuadro vacío debajo del flotador y configúrelo en clear:both;
ventaja
Puede ser adaptativo
Ocultar sin desbordamiento
defecto
Necesito cargar una caja más
Método universal de flotación clara, agregue::after{content:"";display:block;clear:both;} al cuadro principal
ventaja
Adaptable
problema de desbordamiento oculto
No es necesario cargar una caja adicional
ventana adaptable a la altura
html,cuerpo{altura:100%;}
HTML5
Características
La estructura básica es más simple.
relajación gramatical
Semántica de etiquetas
Incluso sin estilos, se puede presentar una estructura clara.
Fácil para SEO
Facilita el trabajo en equipo y la modificación del código posterior al mantenimiento.
accesibilidad
características futuras
Agregar etiquetas semánticas
gran semántica
encabezamiento
pie de página
principal
navegación
sección
artículo
aparte
pequeña semántica
cifra
leyenda de figura
marca
lienzo
video
Atributos
control S
auto-reproducción
apagado
bucle
src
Formatos soportados
mp4
ogg
webm
ancho
altura
audio
Atributos
control S
auto-reproducción
apagado
bucle
src
Formatos soportados
mp3
ogg
wav
detalles
resumen
fuente
forma inteligente
Agregar nuevos atributos
requerido
Campos requeridos
enfoque automático
enfoque automático
marcador de posición
Marcador de posición
autocompletar
Si se debe habilitar la grabación del historial
valor
en
apagado
patrón
Verificación periódica
Agregar nuevo control
teléfono
correo electrónico
URL
número
mín.
máximo
paso
rango
mín.
máximo
paso
color
buscar
fecha
mes
semana
tiempo
datos-hora-local
etiquetas comunes html
clase de texto
título
h1
Generalmente se utiliza para colocar logotipos.
h2
Generalmente se usa para poner títulos de columnas.
h3
h4
h5
h6
párrafo
pag
Clase de modificación
Atrevido
b
fuerte
Semántica fuerte
inclinación
i
ellos
Semántica fuerte
Subrayar
tu
En s
Semántica fuerte
tachado
s
del
Semántica fuerte
superíndice y subíndice
sorber
sobrescrito
sub
subíndice
clase de mesa
Etiqueta
mesa
tr
td
th
Encabezado de la columna
subtítulo
título de la tabla
agrupación de filas
cabeza
cuerpo
pie
agrupación de columnas
colgrupo
Atributos
normas
Línea divisoria de grupo
valor
todo
columnas
filas
ninguno
grupos
ancho
altura
borde
colorbg
alinear
alineación horizontal
valor
izquierda
bien
centro
vilipendiar
alineamiento vertical
valor
arriba
medio
abajo
base
colpano
envergadura
espacio entre celdas
relleno celular
Clase de formulario
campos de formulario
forma
método
Método de envío
valor
conseguir
no es seguro
Compartible
Procesar datos de menos de 2 KB
Afectado por la longitud de la barra de direcciones
eficiente
El proceso de obtención de datos.
correo
El proceso de transferencia de datos.
Sin límite de tamaño
relativamente seguro
baja eficiencia
No compartible
acción
dirección de destino
valor
(dirección saltada)
nombre
objetivo
método abierto
valor
_blanco
abrir en una nueva ventana
_ser
La ventana actual está abierta.
control de formulario (tipo)
texto
texto
contraseña
contraseña
elección única
radio
Cada grupo debe tener el mismo valor de atributo de nombre.
Opción multiple
caja
desplegable
seleccionar>opción
campo de texto
área de texto
botón
imagen
botón
entregar
reiniciar
archivo
Propiedades relacionadas
nombre
nombre
valor
valor
múltiple
Opción multiple
comprobado
Marcado por defecto
seleccionado
Menú desplegable marcado por defecto
solo lectura
solo lectura
desactivado
Desactivar
clase de lista
ordenado
ol>li
Atributos
tipo
valor
1
a
A
i
I
comenzar
trastorno
ul>li
Atributos
tipo
valor
círculo
desct
cuadrado
ninguno
personalizar
dl>dt dd
Dependiente del camino
imagen
imagen
Atributos
scr
título
alternativo
ancho
altura
Hipervínculo
a
Atributos
href
título
objetivo
camino
relativamente
Mismo nivel
./
Escribe directamente
nivel superior
../
siguiente nivel
carpeta
documento
absoluto
A partir de la letra de unidad
D:\......
utilizado desde páginas web
https://img….
la diferencia
relativamente
Hay una referencia
No se pueden cruzar letras de unidad
absoluto
sin referencia
Los locales no pueden abarcar computadoras (a menos que las rutas en las computadoras sean las mismas)
otro
hermano
forzar salto de línea
hora
linea horizontal
div
durar
entidad de carácter
>
<
©
®
gramática
doble etiqueta
<nombre de etiqueta atributo="valor de atributo"></nombre de etiqueta>
etiqueta única
<nombre de etiqueta atributo="valor de atributo" />
etiqueta, marca, elemento
estructura básica html
Encabezado de declaración del documento
Decirle al navegador que mi tipo de documento es html
Codificación de caracteres
conjunto de caracteres="utf-8"
Título de la página
título
concepto html
Lenguaje de marcado de hipertexto
Lenguaje de marcado de hipertexto