CSS (Cascading Styel Sheet) es una serie de reglas de formato que controlan la apariencia de las páginas web. Es una de las herramientas esenciales para el diseño web. A continuación comenzaremos a aprender el formato de sintaxis básica de CSS.
1. Reglas de definición de CSS
Una hoja de estilos en cascada es un archivo de texto sin formato completo, que generalmente se usa como un archivo separado con una extensión "css". Su contenido contiene un conjunto de reglas que le indican al navegador cómo organizar y mostrar el contenido en reglas de definición CSS específicas. Consta de tres partes: selectores, atributos y valores de atributos. La sintaxis es la siguiente:
Sintaxis: selector { propiedad: valor }
↑ ↑ ↑
selector {propiedad: valor}
Los estilos CSS constan de una serie de reglas que los navegadores web analizan y luego aplican a los elementos correspondientes de un documento HTML. Las reglas de estilo CSS constan de tres partes, a saber, selectores, atributos y valores:
1. Selector: el selector es la etiqueta html para definir el estilo. Una vez definida la etiqueta html como selector, el contenido de la etiqueta en la página html se cambiará de acuerdo con las reglas definidas por CSS.
2. Atributo: el nombre de estilo que desea establecer para el elemento HTML se refiere al contenido que se cambiará en el selector. Los más comunes incluyen: atributos de fuente, atributos de color, atributos de texto, etc. A continuación se muestra una hoja de estilo que definimos.
3. Valor: el valor de un atributo, que consta de un valor numérico y una unidad o palabra clave, se utiliza para controlar el efecto de visualización de un determinado atributo.
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}En esta hoja de estilo:
1. @charsetgb2312; significa utilizar el conjunto de caracteres estándar nacional chino.
2. body y p son dos etiquetas en html, y se establecen tres estilos para estas dos etiquetas, a saber:
familia de fuentes: especifica el tipo de fuente de la fuente.
"> 2. Incrustar hoja de estilo
La hoja de estilos CSS definida dentro de la página HTML se llama hoja de estilos CSS incrustada, es decir, en la parte principal del documento HTML, se utiliza la etiqueta de estilo y se definen una serie de reglas CSS en la etiqueta.
Sintaxis: <head><styletype=text/css><!--......--></style></head>
ilustrar:
<style> indica el inicio de la hoja de estilo CSS y la marca de final es </style>. En la marca de inicio <style>, puede agregar algunos atributos según sea necesario, como el atributo type=text/css en lo anterior. columna, que indica que la hoja de estilo CSS adopta el tipo MIME, la característica de este tipo es que cuando el navegador no admite el código CSS, el código CSS se filtra para evitar que el navegador muestre el código CSS en forma de. código fuente. Para garantizar una mayor confiabilidad, agregue el identificador de comentario <!--...--> nuevamente en la hoja de estilo. Las reglas CSS se definen en este identificador de comentario.
Ejemplo 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Hoja de estilos CSS integrada</title><styletype=text/css><!--@charsetgb2312; {fuente-fa mily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body> Aves de miles de montañas vuelan por miles de caminos y las huellas humanas son borradas<p>Pájaros de miles de montañas vuelan por miles de caminos y las huellas humanas son borradas</p></body></html>3. Enlace a hojas de estilo externas
Una hoja de estilos CSS externa es un archivo externo con un sufijo .css. La definición de una hoja de estilos externa se puede aplicar a varias páginas. Usando la etiqueta de enlace en la página HTML, puede conectar la hoja de estilo CSS externa. La sintaxis es la siguiente:
gramática:
<linkrel=stylesheethref=*.css” tipo=texto/css>
parámetro:
1. El atributo rel indica cómo se combinará la hoja de estilo con el documento HTML. valor rel: hoja de estilo, que indica especificar una hoja de estilo externa
2. *.css es un archivo de hoja de estilo que se guarda por separado.
Ejemplo 2 Defina un archivo CSS externo p2.css y luego conecte el archivo en el archivo t2.htm.
Ejemplo 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Enlace a hoja de estilo externa</title><styletype=text/css><!--@charsetgb2312; cuerpo {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>Querido, vuelas despacio, ten cuidado con la rosa espinosa que tienes enfrente<p>Querida, abre la boca, la fragancia de las flores en el viento te embriagará</p></body></html>4. Hojas de estilo en línea
Los estilos en línea se refieren a hojas de estilos CSS definidas en etiquetas específicas de HTML. Las etiquetas HTML de uso común son principalmente algunos elementos en BODY, como: <p>, <h2>, <ul>, <div>, etc. Los siguientes son ejemplos de estilos en línea.
Ejemplo 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Documento sin título</title></head><body><divstyle=color:blue;font- size :30px;>La fragancia de las flores en el viento te embriagará</div><pstyle=color:#ff0000;font-style:italic;>La fragancia de las flores en el viento te embriagará</p>< /cuerpo></html>
5. Importar hojas de estilo externas
Importar una hoja de estilo externa significa que se ha establecido una hoja de estilo externa en el archivo html, pero se deben usar algunas configuraciones de la hoja de estilo externa. En este caso, puede importar una hoja de estilo externa en <estilo> y usar @. importar, como se muestra en el siguiente ejemplo.
<html><head><styletype=text/css><!--@importurl(mystyle.css);Declaración de otras hojas de estilo--></style></head></body>..... .</body></html>
Entre ellos, @import url(mystyle.css); significa importar la hoja de estilo mystyle.css. La hoja de estilo externa importada debe estar al principio de la hoja de estilo, encima de la hoja de estilo interna.
Ejemplo 4
Defina un archivo css externo p4.css y luego importe el archivo en el archivo t4.htm
Ejemplo 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Importar hoja de estilos externa</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;cuerpo {font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>Miles de pájaros vuelan por miles de montañas y no se ve ningún rastro de seres humanos<p>Miles de pájaros vuelan por miles de montañas y no se ve ningún rastro de seres humanos</p></body></html>6. Herencia de hojas de estilo CSS.
En la hoja de estilo CSS, algunos atributos de la etiqueta secundaria heredarán los atributos de la etiqueta principal. Por ejemplo, la etiqueta p es un elemento secundario del cuerpo de la etiqueta. Cuando la etiqueta p no establece el atributo de color de fuente, el contenido. en p usará el color en el valor del cuerpo, el siguiente ejemplo ilustra esta situación.
Ejemplo 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Hoja de estilos CSS integrada</title><styletype=text/css><!--@charsetgb2312; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟Volando por miles de caminos, se borran las huellas humanas<p>Miles de montañas, pájaros volando por miles de caminos, se borran las huellas humanas</p></body></html>7. Establecer varios elementos
CSS permite aplicar un único formato a varias etiquetas. Cada etiqueta está separada por una coma cuando se utiliza como selector, como se muestra en el siguiente ejemplo.
Ejemplo 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>Hoja de estilos CSS integrada</title><styletype=text/css><!--@charsetgb2312; ,h2,h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>Miles de pájaros vuelan a través de miles de montañas y miles de personas desaparecen</h1> <h2>Pájaros de miles de montañas vuelan por miles de caminos, desapareciendo sin rastro de personas</h2><h3>Pájaros de miles de montañas vuelan por miles de caminos, desapareciendo sin rastro de personas</h3><p>Pájaros Desde miles de montañas vuelan por miles de caminos, desapareciendo sin dejar rastro de personas</p></ body></html>