paginas - hojas de estilo css ejemplos
¿Qué es la hoja de estilo del agente de usuario? (10)
Estoy trabajando en una página web en Google Chrome. Se muestra correctamente con los siguientes estilos.
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
Es importante tener en cuenta que no definí estos estilos. En las herramientas de desarrollo de Chrome, dice la hoja de estilo del agente de usuario en lugar del nombre del archivo CSS.
Ahora, si envío un formulario y se produce algún error de validación, obtengo la siguiente hoja de estilo:
table {
white-space: normal;
line-height: normal;
font-weight: normal;
font-size: medium;
font-variant: normal;
font-style: normal;
color: -webkit-text;
text-align: -webkit-auto;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
El font-size de font-size de estos nuevos estilos está perturbando mi diseño. ¿Hay alguna forma de forzar mis hojas de estilo y, si es posible, sobrescribir completamente la hoja de estilo predeterminada de Chrome?
¿Cuál es el navegador de destino? Diferentes navegadores establecen diferentes reglas de CSS por defecto. Intente incluir un reset.css o un normalise.css (Google para uno o para "reset vs normalize" para ver las diferencias) para eliminar esos valores predeterminados.
Algunos navegadores usan su propia forma de leer archivos .css. Entonces, la forma correcta de superar esto: si escribe la línea de comandos directamente en el código fuente .html, esto supera al archivo .css, de esa manera, le dijo al navegador directamente qué hacer y el navegador está en posición de no leer. Los comandos del archivo .css. Recuerde que los comandos escritos en el archivo .html son más fuertes que el comando en .css.
Básicamente, una hoja de estilo predeterminada proporcionada por el navegador. De la especificación ...
La hoja de estilo predeterminada de un agente de usuario debe presentar los elementos del idioma del documento de manera que satisfaga las expectativas generales de presentación para el idioma del documento. ~ La Cascada .
También, vea para más detalles sobre el agente de usuario en general ...
Cada navegador proporciona una hoja de estilo predeterminada, llamada hoja de estilo del agente de usuario, en caso de que un archivo HTML no especifique una. Los estilos que especifique anulan los valores predeterminados. Debido a que no ha especificado valores para el cuadro del elemento de la tabla, se han aplicado los estilos predeterminados
Con respecto al concepto “hoja de estilo de agente de usuario”, consulte la sección Cascade en la especificación CSS 2.1.
Las hojas de estilo del agente de usuario se anulan por cualquier cosa que establezca en su propia hoja de estilo. Son solo el fondo: en ausencia de las hojas de estilo proporcionadas por la página o por el usuario, el navegador todavía tiene que mostrar el contenido de alguna manera , y la hoja de estilo del agente de usuario simplemente lo describe.
Entonces, si cree que tiene un problema con una hoja de estilo de agente de usuario, entonces realmente tiene un problema con su marca, su hoja de estilo o ambas (sobre las cuales no escribió nada).
Defina los valores que no desea que se usen del estilo de agente de usuario de Chrome en su propio CSS.
Marcando el documento como HTML5 por el doctype apropiado en la primera línea, resolví mi problema.
<!DOCTYPE html>
<html>...
Si <!DOCTYPE> falta en su html, puede experimentar que el navegador le da preferencia a la "hoja de estilo del agente de usuario" sobre su hoja de estilo personalizada. Añadiendo el doctype arregla esto.
Tuve el mismo problema que uno de los míos tenía un margen establecido por el navegador, era bastante molesto, pero luego me di cuenta de que la mayoría de la gente decía que era un error de marca.
Regresé y revisé mi sección y mi enlace css era como a continuación:
<link rel="stylesheet" href="ex.css">
Incluí el tipo y lo hice como a continuación:
<link rel="stylesheet" type="text/css" href="ex.css">
mi problema fue resuelto
Espero que ayude para algunos de ustedes.
ponga el siguiente código en su archivo CSS
table {
font-size: inherit;
}