La relación entre HTML, CSS y JavaScript
HTML es el portador del contenido web. El
estilo CSS es el rendimiento y el control de apariencia
JavaScript es el comportamiento, que se utiliza para lograr efectos especiales en las páginas web.
A partir de hoy, la palabra anhelar / sed / anhelar reemplaza estar ansioso por
¿Qué son las
hojas de estilo en cascada CSS ?
Se utilizan para definir el estilo de visualización del contenido html en el navegador.
Historial de desarrollo
1996 W3C CSS1
1998 W3C CSS2
ahora W3C CSS3
H5 y CSS3 se utilizan a menudo en el desarrollo de páginas móviles.
En el lado de la computadora, debido a problemas de compatibilidad del navegador, CSS2 se usa principalmente
Por qué aprender CSS:
css simplifica las etiquetas relacionadas con html, las páginas web son de tamaño pequeño y se descargan rápidamente.
Resuelve el problema de la separación de contenido y rendimiento.
Mantén mejor las páginas web y mejora la eficiencia del trabajo.
Contenido:
gramática básica de
css uso de
css selector de
css herencia de css y
prioridad de
css en cascada convención de nomenclatura de css
1. Gramática básica de
CSS Las reglas de CSS se componen de dos partes: selector y declaración
h1 {color: rojo; tamaño de fuente: 14px;}
declaración del selector declaración La
declaración se compone de atributos y valores;
referencia de CSS:
escrito en la etiqueta de estilo en la etiqueta principal
<head>
<style type="text/css">
p,
h1,
span{
font-size:30px;
color:blue;}
/*css注释*/
</style>
<!--html注释-->
</head>
2. Cómo usar CSS
¿Cómo hacer referencia a estilos CSS?
El estilo en línea (en línea) no se recomienda para uso intensivo
<p style="color:red;" ></p>
Hoja de estilo interna (incrustada)
<head>
<style type="text/css">
<!--
span{
font-size:30px;}
-->
/*css注释*/
</style>
<!--html注释-->
</head>
在css中加html注释的原因是在低版本浏览器中可能不支持css，这样就不会显示
Hoja de estilo externa Uso pesado
Escriba el código de estilo css en un archivo separado con la extensión index.css para
importar archivos externos
<link href="xx.css" rel="stylesheet" type="text/css" />
Escriba directamente en el archivo .css:
span{
font-size:30px;}
El
"estilo CSS externo" importado de @import
debe escribirse en la etiqueta de estilo
<head>
<style type="text/css">
@import "index.css";
@import url(index.css);
/*css注释 两种方法均可*/
</style>
</head>
Cuando la carga de la red es lenta, el tipo de importación tiene compatibilidad con el navegador, pero no hay problema con el enlace
Los beneficios de usar una hoja de estilo externa:
css y html separados,
varios archivos pueden usar el mismo archivo de estilo,
varios archivos hacen referencia al mismo archivo css, css solo necesita descargarse una vez
Prioridad del método:
para el mismo elemento, utilizando estos métodos para establecer estilos CSS al mismo tiempo, ¿qué método realmente funciona?
Estilo en línea> Estilo interno> Estilo externo
Nota: La prioridad entre la hoja de estilo externa y la hoja de estilo interna depende del orden de la ubicación, la última definición tiene la máxima prioridad (el principio de proximidad )
selector de css selector de
etiquetas selector de
clase selector de
ID selector
global selector de
grupo selector
descendiente
El selector de etiquetas usa la etiqueta html como selector para
establecer el estilo a través del selector de etiquetas, y luego el contenido de la etiqueta se refiere al estilo
El selector de clase agrega el atributo de clase a la etiqueta html
. Red {color: red;}
Siempre que el estilo establecido por el selector de clase se haga referencia a través del atributo de clase, la etiqueta se refiere al estilo correspondiente
Se pueden establecer diferentes reglas de estilo para el selector de clases del mismo nombre de diferentes tipos de elementos:
p.red {font-size: 50px;}
Solo se puede hacer referencia a la etiqueta p con la clase como especial
Se pueden establecer varias clases para el mismo elemento, separadas por espacios:
例如：
<p class="red one">content</p>
但不能这样写：
<p class="red" class="one">content</p>
因为相同的属性不能多次写
Establezca el subrayado.one
{decoración de texto: subrayado;}
Selector de ID para
agregar atributos de ID a las etiquetas html
例如：
<p id="one">content</p>
#one {text-decoration: underline;}
Bajo el mismo archivo html,id es único
No se pueden usar varios bajo la misma etiqueta como clase
Selector de grupo para
establecer el estilo colectivamente:
p,h1,h2{
font-size:30px;}
h1{
color:red;}
Nota:Los valores de class e id distinguen entre mayúsculas y minúsculas
Selector global / selector de comodines
* {color: red;}
El selector descendente está
separado por un espacio cuando se usa:
p em {font-size: 40px;}
#up em {font-size: 20px;}
Pseudo-clase El
selector de pseudo-clase define el estilo en un estado especial.
No puede ser realizado por etiqueta, id, clase y otros atributos. Pseudo-clase de
enlace:
4 estados: activado, visitado, no visitado, mouse flotando
a:link{
color:blue;}
a:visited{
color:grey;}
a:hover{
color:green;}
a:active{
color:orange;}
Pseudo-clases: hover y action
: hover se usa para acceder cuando el mouse pasa sobre un elemento
: active se usa cuando se activa un elemento (es decir, el tiempo antes de que se suelte el mouse después de presionar el mouse)
p:hover{
color:green;}
p:active{
color:orange;}
Para IE6 y versiones anteriores, los 4 estados que admiten un elemento El
navegador IE6 no admite otros elementos: hover y: active
El orden de las
pseudoclases de enlaces : enlace> visitado> desplazarse> actice
Descripción:
un: hover debe colocarse después de un: enlace y un: visitado para que sea efectivo
a: active debe colocarse después de un: hover para que sea efectivo
Los nombres de pseudo-clases no distinguen entre mayúsculas y minúsculas
<a href="#" target="_blank" class="one">例如</a>
<p>
<a href="#" target="_blank" class="one">例如</a>
</p>
a.one:link{
color:blue;}
a.one:visited{
color:red;}
a.one:hover{
color:green;}
a.one:active{
color:grey;}
p a:link{
color:blue;}
p a:visited{
color:red;}
p a:hover{
color:green;}
p a:active{
color:grey;}
La herencia de CSS y la cascada
heredan algunos atributos de CSS del elemento principal
Beneficios: los
elementos principales establecen estilos y los elementos secundarios pueden heredarsecciónPropiedades, reduzca el código css, no todas las propiedades se pueden heredar
Superposición de CSS:
se pueden definir varios estilos
cuando no hay conflicto, se pueden apilar varios estilos en uno. Cuando hay
conflictos, los estilos se aplican de acuerdo con la prioridad de diferentes reglas de estilo
prioridad css
css selector priority id> class> tag
Regla:
contar el número
de selectores diferentes El número de cada tipo de selector se multiplica por el peso correspondiente.
Suma todos los valores para obtener el peso del selector.
Por supuesto, también se puede cambiar por ajuste. Priority
! Important declara
la prioridad del alto uso de CSS: Inline> Internal> External
La prioridad del estilo externo y el estilo interno del enlace de enlace depende del orden
Prioridad en la hoja de estilo:
id> class> tag> comodín, usado
cuando los pesos son los mismosEl principio de proximidad
estilo CSS nombrar
reglas:
el uso de las letras inglesas, números y _-y nombrar
con letras minúsculas, no puede utilizar otros inicios
formato de nombre: palabra, guión, guión bajo, joroba significativo
de nombres
No abuse de la identificación, use la clase apropiadamente
Resumen:
regla CSS: selector {declaración;} donde declaración == atributo: valor
estilo CSS
: en línea, incrustado, enlace, @import 4 tipos
selector de CSS:
etiqueta, clase, id, global, grupo, descendiente, pseudoclase
prioridad css:!
important> id> class> tag> *
Se usa cuando los pesos son los mismosEl principio de proximidad
Prioridad del método de uso de CSS: en línea> interno> externo
La prioridad del estilo externo y el estilo interno del enlace de enlace depende del orden
reglas de nomenclatura css
SIGUIENTE:
CSS: fuente y estilo de texto