1. Introducción a CSS
1. Definición de
CSS: Hojas de estilo en cascada (nombre completo en inglés: Hojas de estilo en cascada) es un archivo utilizado para representar HTML (una aplicación de lenguaje de marcado universal estándar) o XML (un subconjunto de lenguaje de marcado universal estándar) Estilo de lenguaje informático.
CSS no solo puede modificar estáticamente las páginas web, sino que también formatea dinámicamente varios elementos de las páginas web con varios lenguajes de secuencias de comandos.
CSS puede realizar un control preciso a nivel de píxeles del diseño de las posiciones de los elementos en las páginas web, admite casi todos los estilos de tamaño de fuente y tiene la capacidad de editar objetos de página web y estilos de modelo.
En pocas palabras: CSS se refiere a las hojas de estilo en cascada (hojas de estilo en cascada) define cómo mostrar y controlar elementos HTML, para embellecer las páginas web HTML.
2. Características y ventajas
1) Características:
CSS proporciona una descripción de estilo para el lenguaje de marcado HTML y define cómo se muestran los elementos. CSS es un gran avance en el campo del diseño web. Se puede utilizar para modificar un estilo pequeño para actualizar todos los elementos de la página relacionados con él. En general, CSS tiene las siguientes características:
Definición de estilo rico. CSS proporciona un aspecto de estilo de documento rico y la capacidad de establecer propiedades de texto y fondo; le permite crear bordes para cualquier elemento, y la distancia entre el borde del elemento y otros elementos, y la distancia entre el borde del elemento y el contenido del elemento; permite cambiar el texto Capitalización, modificación y otros efectos de página.
Fácil de usar y modificar. CSS puede definir el estilo en el atributo de estilo del elemento HTML, o puede definirse en la parte del encabezado del documento HTML, o puede declarar el estilo en un archivo CSS especial para referencia de la página HTML. En resumen, las hojas de estilo CSS pueden almacenar todas las declaraciones de estilo para una gestión unificada. Además, puede clasificar elementos del mismo estilo y definirlos con el mismo estilo, también puede aplicar un estilo a todas las etiquetas HTML con el mismo nombre, o puede asignar un estilo CSS a un elemento de página. Si queremos modificar el estilo, solo necesitamos encontrar la declaración de estilo correspondiente en la lista de estilos para modificar.
Aplicación multipágina. Las hojas de estilo CSS se pueden almacenar por separado en un archivo CSS, para que podamos usar la misma hoja de estilo CSS en varias páginas. Las hojas de estilo CSS no pertenecen a ningún archivo de página en teoría, se puede hacer referencia a ellas en cualquier archivo de página. Esto puede lograr la unidad de múltiples estilos de página.
Cascada En pocas palabras, la conexión en cascada consiste en establecer el mismo estilo para un elemento varias veces, que utilizará el último valor de atributo establecido. Por ejemplo, el mismo conjunto de hojas de estilo CSS se usa para varias páginas en un sitio, y algunos elementos en algunas páginas desean usar otros estilos, puede definir una hoja de estilo para estos estilos y aplicarlos a la página. Estos estilos definidos más adelante reescribirán la configuración de estilo anterior, y lo que verá en el navegador serán los efectos de estilo establecidos en último lugar.
Compresión de página. En los sitios web que usan HTML para definir los efectos de la página, a menudo se requiere una gran cantidad de formas repetidas y elementos de fuente para formar estilos de texto de varias especificaciones, lo que se debe a que se generará una gran cantidad de etiquetas HTML, lo que aumenta el tamaño del archivo de la página. Poner las declaraciones de estilo por separado en la hoja de estilo CSS puede reducir en gran medida el tamaño de la página, por lo que el tiempo utilizado al cargar la página también se reducirá en gran medida. Además, la reutilización de las hojas de estilo CSS reduce el tamaño de la página en mayor medida y reduce el tiempo de descarga. Con el fin de enriquecer el estilo de los elementos de la página web y separar el contenido y el estilo de la página web, CSS nació de esta idea. Con CSS, la mayoría de las etiquetas que expresan estilo en html se descartan, y html solo es responsable de los documentos La estructura y el contenido del formulario se entregan completamente a CSS, y el documento html se vuelve más conciso.
2) Ventajas:
Para enriquecer el estilo de los elementos de la página web y separar el contenido y el estilo de la página web, CSS nació de esta idea. Con CSS, la mayoría de las etiquetas que expresan el estilo en html se descartan, y html solo es responsable de los documentos La estructura y el contenido del formulario se entregan completamente a CSS, y el documento html se vuelve más conciso.
2. Sintaxis básica
1. Introducción del
formato de página CSS : selector {atributo: valor; atributo: valor; atributo: valor; ...}
Método 1: estilo en línea Estilo en
línea: escriba el estilo directamente en la etiqueta a través del atributo de estilo de la etiqueta. El
código simple se implementa de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css内联式引入</title>
</head>
<body>
<div style="color: red ;font-size:50px">css页面引入方法1</div>
</body>
</html>
Como se muestra en el código anterior, escribo directamente el estilo a través del atributo de estilo en la etiqueta div. Así que aquí configuramos el color de fuente en rojo y el tamaño de fuente en 50px.
Nota: este método es el menos utilizado en el desarrollo, porque escribir el método en la etiqueta hará que el código se vea desordenado, y no es propicio para la administración y la búsqueda, por lo que solo se usará en ciertas situaciones. Manera de escribir estilos.
Método dos: Incrustado
Incrustado: cree una hoja de estilo incrustada en la página web a través de la etiqueta de estilo. Se usa más comúnmente y debe escribirse en la cabeza
El código simple se implementa de la siguiente manera:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌入式引入 </title>
<!--
css样式的声明：写在head标签里面
1、div是最简单的标签选择器
-->
<style type="text/css">
div {
border:1px solid red;
width:700px;
height:200px
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
Visualización del resultado de la implementación de la página web:
Nota: Este método es más común. Generalmente, este método se usa generalmente al escribir la página de inicio. La velocidad de carga de la página de inicio del sitio web afectará directamente la experiencia del usuario, por lo que la velocidad de carga de la página web es Rápido Entonces este método no afectará la velocidad de carga, y el estilo está integrado en la etiqueta, por lo que es más aplicable. Pero no se usará en grandes cantidades. El último es la forma en que usamos a menudo.
Método 3: tipo fuera de línea Tipo
fuera de línea: enlace a hojas de estilo externas a la página a través de la etiqueta de enlace. El más utilizado, escrito en la cabeza.
El código simple se implementa de la siguiente manera:
archivo main.css:
/*外联式css样式信息*/
div {
border: 1px solid red;
width: 700px;
height: 200px
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 外联式：通过link标签，链接到外部样式表到页面中。-->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
Los resultados de la implementación de la página web son los siguientes:
Nota: se recomienda escribir una ruta relativa para la ubicación de la hoja de estilo. Se recomienda almacenar el archivo de estilo CSS directamente en el directorio CSS, crear un directorio CSS y luego crear un archivo main.css para editar el código de estilo.
Además: podemos ver que esta vez se usan dos archivos, uno es un archivo CSS y otro es un archivo HTML. Las cosas escritas en el archivo css son exactamente las mismas que las escritas en la etiqueta de estilo. Solo escríbelo en un archivo separado. Luego, introduzca el archivo de estilo CSS a la página a través de la etiqueta de enlace. No nos importa el contenido en rel, la ruta en herf es la ruta lógica del archivo css. Echemos un vistazo al efecto.
3. Estilos CSS comunes
1. Configuración de texto
2. Notación de color Cuando
comenzamos a imitar las páginas de otras personas, si vimos los hermosos colores de las personas y queríamos usarlos, simplemente mire el código fuente de la página. Las flechas hacen clic en el área de color deseada, en el lado derecho para ver el color utilizado por el código fuente.
Hay muchos estilos de CSS, puede ir al sitio web oficial para verificar cuándo lo usa, haga clic para ingresar:
Tutorial novato
W3C
Un ejemplo de código simple es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*标签名叫a*/
a{
text-decoration: none; /*text-...用来去掉超链接的文本装饰下划线*/
}
ul>li{
/*list...用来去掉列表的文本装饰前面的点*/
list-style: none; #用来去掉ul列表前的样式
line-height: 30px; #设置ul列表的行高为30px
}
</style>
</head>
<body>
<a href="#">
百度一下
</a>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
Resultados de visualización de la página web:
