Introducción a CSS: Introducción a CSS

1. ¿Por qué necesitamos CSS?

El propósito de usar CSS es hacer que las páginas web tengan páginas hermosas y consistentes. La otra razón más importante es que el contenido y el formato están separados. Antes de que no exista CSS, queremos modificar el estilo de los elementos HTML. Necesitamos definir atributos de estilo para cada elemento HTML por separado. Cuando hay mucho contenido, se definirán muchos atributos de estilo repetidos, y al modificarlo, es necesario modificarlo uno por uno, lo cual es laborioso. Es hora de hacer un cambio, entonces apareció CSS.

La aparición de CSS resuelve los dos problemas siguientes:

Separe el contenido y el estilo de la página HTML.
Mejorar la eficiencia del desarrollo web

En segundo lugar, ¿qué es CSS?

Medios CSS Cascading Style Sheets ( C ascading S Tyle S heets), se determinan HTML estilo cómo los elementos, el estilo generalmente estarán presentes en la hoja de estilo. Es decir, los estilos de los elementos HTML se recopilan y escriben en un solo lugar o en un archivo CSS.

CSS se refiere a Cascading Style Sheet ( C ascading S tyle S heets)
El estilo define cómo mostrar elementos HTML
El estilo normalmente se almacena en una hoja de estilo en
El estilo se agrega a HTML 4.0 para resolver el problema de separación de contenido y presentación.
Las hojas de estilo externas pueden mejorar enormemente la eficiencia del trabajo
La hoja de estilo externa generalmente se almacena en un archivo CSS en
Se pueden apilar varias definiciones de estilo en una
El estilo proporciona un control preciso a nivel de píxeles sobre el diseño de los elementos en las páginas web

2.1 Ventajas de CSS

La hoja de estilo define cómo mostrar elementos HTML

La hoja de estilo define cómo mostrar los elementos HTML, al igual que lo hacen las etiquetas de fuente y los atributos de color de HTML 3.2. El estilo generalmente se guarda en un archivo .css externo. Al editar un documento CSS simple, una hoja de estilo externa le brinda la capacidad de cambiar el diseño y la apariencia de todas las páginas del sitio al mismo tiempo.

1. Separación de contenido y rendimiento
2. El rendimiento de la página web es uniforme y fácil de modificar.
3. Los estilos enriquecidos hacen que el diseño de la página sea más flexible
4. Reduzca la cantidad de código en las páginas web, aumente la velocidad de los navegadores web y ahorre ancho de banda de la red
5. El uso de CSS para páginas independientes favorece la inclusión de páginas web por parte de los motores de búsqueda.

2.2 ¿Cómo usar CSS?

Por lo general, guardamos el contenido de las reglas de estilo en un archivo CSS. En este momento, el archivo CSS se denomina hoja de estilo externa y, a continuación, se linkpuede hacer referencia al archivo CSS mediante etiquetas en el archivo HTML . De esta manera, el navegador linkcargará el archivo CSS cuando se analice la etiqueta y renderizará el archivo HTML de acuerdo con las reglas de estilo del archivo.

2.3 El estilo resuelve un gran problema

Las etiquetas HTML se diseñaron originalmente para definir el contenido de los documentos, como en el siguiente ejemplo:

<h1>这是一个标题</h1>

<p>这是一个段落.</p>

Para resolver este problema, el World Wide Web Consortium (W3C), una alianza de estandarización sin fines de lucro, asume la misión de la estandarización HTML y ha creado estilos fuera de HTML 4.0.

Todos los navegadores modernos admiten CSS.

2.4 Orden de apilamiento de estilos

Cuando se definen varios estilos para el mismo elemento HTML, ¿qué estilo se debe utilizar?

En términos generales, todos los estilos se apilarán en una nueva hoja de estilo virtual de acuerdo con las siguientes reglas, donde el número 4 tiene la máxima prioridad.

Configuración predeterminada del navegador
Hoja de estilo externa
Hoja de estilo interna (ubicada headdentro de la etiqueta < >)
Estilo en línea (dentro del elemento HTML)

Por lo tanto, el estilo en línea (dentro del elemento HTML) tiene la mayor prioridad, lo que significa que tendrá prioridad sobre las siguientes declaraciones de estilo: declaraciones de estilo en <head>etiquetas, declaraciones de estilo en hojas de estilo externas o declaraciones de estilo en navegadores (Valor por defecto).

Tres, concepto CSS

CSS es la abreviatura de Cascading Style Sheets. El chino se llama Cascading Style Sheets. Es un lenguaje informático utilizado para expresar HTML (una aplicación de Standard Universal Markup Language) o XML (un subconjunto de Standard Universal Markup Language). CSS no solo puede modificar páginas web de forma estática, sino también formatear dinámicamente los elementos de las páginas web con varios lenguajes de programación para controlar el rendimiento de los datos de la página web y separar el rendimiento de las páginas web del contenido de datos.

CSS se refiere a hojas de estilo en cascada

El estilo define cómo mostrar elementos HTML
Los estilos generalmente se almacenan en hojas de estilo
La hoja de estilo se agrega a HTML4.0 para resolver el problema de separación de contenido y rendimiento.
Las hojas de estilo externas pueden mejorar enormemente la eficiencia del trabajo
Las hojas de estilo externas generalmente se almacenan en archivos CSS
Se pueden apilar varias definiciones de estilo en una

Cuarto, el historial de desarrollo de CSS

En 1990, Tim Berners-Lee y Robert Cailliau co-inventaron la Web. En 1994, la Web realmente salió del laboratorio.

Desde que se inventó HTML, los estilos han existido en varias formas. Los diferentes navegadores combinan sus respectivos lenguajes de estilo para proporcionar a los usuarios control sobre los efectos de página. El HTML original contiene solo algunos atributos de visualización.

Con el crecimiento de HTML, para cumplir con los requisitos de los diseñadores de páginas, HTML ha agregado muchas funciones de visualización. Pero con el aumento de estas funciones, HTML se vuelve cada vez más complicado y las páginas HTML se vuelven cada vez más infladas. Así nació CSS.

En 1994, Ha Kun Lee hizo la propuesta original de CSS. En ese momento, Bert Bos estaba diseñando un navegador llamado Argo, por lo que decidieron diseñar CSS juntos.

De hecho, ya existían algunas sugerencias para un lenguaje de hojas de estilo unificado en el mundo de Internet en ese momento, pero CSS fue el primer lenguaje de hojas de estilo con una riqueza "en cascada". En CSS, el estilo de un archivo se puede heredar de otras hojas de estilo. El lector puede usar su estilo favorito en algunos lugares, y heredar o "transmitir" el estilo del autor en otros lugares. Este enfoque en cascada permite tanto a los autores como a los lectores agregar de manera flexible sus propios diseños y mezclar los pasatiempos de todos.

Ha Kun propuso CSS por primera vez en una conferencia en Chicago en 1994, y CSS se propuso nuevamente en la conferencia web www en 1995. Bosch demostró un ejemplo de compatibilidad con CSS en el navegador Argo, y Haken también mostró Navegador Arena que admite CSS.

Ese mismo año, se estableció la organización W3C ( World WideWeb Consortium ). Todos los miembros creativos de CSS se convirtieron en el grupo de trabajo del W3C e hicieron todo lo posible para desarrollar el estándar CSS. El desarrollo de hojas de estilo en cascada finalmente estaba en el camino correcto. Cada vez participan más miembros, como Thomas Reaxdon de Microsoft Corporation, cuyos esfuerzos finalmente hicieron que el navegador Internet Explorer fuera compatible con el estándar CSS. Ha Kun, Persia y otros son los principales líderes técnicos de este proyecto. A finales de 1996, se completó el primer borrador de CSS.En diciembre del mismo año, se completó el primer estándar formal para hojas de estilo en cascada ( Hojas de estilo en cascada Nivel 1 ) y se convirtió en el estándar recomendado para w3c.

A principios de 1997, el grupo de trabajo del W3C responsable de CSS comenzó a discutir temas que no estaban cubiertos en la primera edición. Los resultados de las discusiones formaron la segunda edición de la especificación CSS publicada en mayo de 1998.

Cinco, principio de funcionamiento de CSS

CSS es un lenguaje que define estructuras de estilo como fuentes, colores, posiciones, etc., y se utiliza para describir el formato y la realidad de la información en las páginas web. Los estilos CSS se pueden almacenar directamente en páginas HTML o en archivos de hojas de estilo independientes. De cualquier manera, la hoja de estilo contiene reglas para aplicar el estilo a elementos de un tipo específico. Cuando se usa externamente, las reglas de la hoja de estilo se colocan en un documento de hoja de estilo externo con la extensión de archivo _css.

Las reglas de estilo son instrucciones de formato que se pueden aplicar a elementos en páginas web, como párrafos de texto o enlaces. Una regla de estilo consta de uno o más atributos de estilo y sus valores. La hoja de estilo interna se coloca directamente en la página web, la hoja de estilo externa se almacena en un documento separado y la página web vincula la hoja de estilo externa a través de una etiqueta especial.

La "cascada" en el nombre CSS se refiere a la forma en que se aplican las reglas de la hoja de estilo a los elementos del documento HTML. Específicamente, los estilos en la hoja de estilos CSS forman una jerarquía y los estilos más específicos cubren estilos comunes. CSS determina la prioridad de las reglas de estilo de acuerdo con esta estructura jerárquica para lograr efectos en cascada.

Seis características del lenguaje CSS

6.1 Definición de estilo enriquecido

CSS proporciona una apariencia de estilo de documento rico, así como la capacidad de establecer propiedades de texto y fondo; permite crear un borde 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 que el texto se cambie a voluntad Capitalización, modificación y otros efectos de página.

6.2 Fácil de usar y modificar

CSS puede definir el estilo en el atributo de estilo del elemento HTML, o definirlo en la parte del encabezado del documento HTML, o declarar el estilo en un archivo CSS especial como referencia para las páginas HTML. En resumen, las hojas de estilo CSS pueden almacenar todas las declaraciones de estilo de una manera unificada para una gestión unificada.

Además, los elementos del mismo estilo se pueden categorizar y definir utilizando el mismo estilo, o se puede aplicar un estilo a todas las etiquetas HTML con el mismo nombre, o se puede asignar un estilo CSS a un elemento de página. Si desea modificar el estilo, solo necesitamos encontrar la declaración de estilo correspondiente en la lista de estilos y modificarla.

6.3 Aplicación de varias páginas

La hoja de estilo CSS se puede almacenar por separado en un archivo CSS, de modo que podamos usar la misma hoja de estilo CSS en varias páginas. En teoría, la hoja de estilo CSS no pertenece a ningún archivo de página, se puede hacer referencia a ella en cualquier archivo de página. De esta forma, se puede unificar el estilo de varias páginas.

6.4 Cascada

En pocas palabras, cascada es establecer el mismo estilo varias veces en un elemento, que utilizará el último valor de atributo establecido. Por ejemplo, si se usa el mismo conjunto de hojas de estilo CSS para varias páginas en un sitio, y algunos elementos en algunas páginas quieren usar otros estilos, se puede definir una hoja de estilo separada para estos estilos y aplicarla a la página. Estos estilos definidos posteriormente sobrescribirán la configuración de estilo anterior, y lo que verá en el navegador será el último efecto de estilo establecido.

6.5 compresión de página

En los sitios web que usan HTML para definir efectos de página, a menudo se requiere una gran cantidad de tablas y elementos de fuente repetidos para formar estilos de texto de diversas especificaciones. La consecuencia de esto es que se generará una gran cantidad de etiquetas HTML, aumentando así el tamaño del archivo de página. Poner la declaración de estilo en la hoja de estilo CSS por separado puede reducir en gran medida el tamaño de la página, por lo que el tiempo empleado para cargar la página también se reducirá considerablemente. Además, la reutilización de hojas de estilo CSS reducirá el tamaño de la página y reducirá el tiempo de descarga.

Siete, clasificación de sintaxis básica CSS

La sintaxis CSS se puede dividir en dos partes:

1. Selector
2. Declaración

La declaración consta de atributos y valores, y las declaraciones múltiples están separadas por punto y coma.

Ocho, comentarios CSS

/*这是注释*/

Nueve, la diferencia entre css y html

Tanto CSS como HTML son los lenguajes centrales de la tecnología front-end, entonces, ¿qué hacen los dos? ¿Cual es la diferencia?

9.1 html (estructura)

El nombre completo es Hyper Text Markup Language, que se utiliza para definir la estructura del contenido del documento.

caracteristicas:

1. El navegador suele analizar y ejecutar el código escrito en este idioma.

2. Hipertexto: no solo incluye texto, sino también imágenes, enlaces, música ...

3. Una página es un documento y el núcleo de un documento es el contenido, con diferentes significados.

Formato de comentario:

9.2 css (diseño)

Nombre completo Hojas de estilo en cascada (Hojas de estilo en cascada)

caracteristicas:

1. Se utiliza para definir el estilo (apariencia) de los documentos html.

2. La base del rendimiento de la página, puede controlar el diseño y controlar la representación de los elementos.

Formato de nota: / contenido de nota /

En general, es una oración: HTML es la estructura de una página web y CSS es el estilo de una página web. Por ejemplo, si compara la página web completa con una persona, entonces HTML es el hueso y CSS es la ropa.

Actualmente estoy trabajando en desarrollo front-end. Si también desea aprender tecnología de desarrollo front-end ahora, y tiene alguna pregunta sobre métodos de aprendizaje, rutas de aprendizaje, eficiencia de aprendizaje, etc. durante el proceso de comenzar a aprender front-end, puede postularse para unirse a mi aprendizaje front-end Falda de comunicación: frente: 421 medio: 374 último: 697. Reúne a algunos principiantes, cambiadores y principiantes que son de autoaprendizaje front-end. También tengo algunos manuales de aprendizaje front-end compilados durante el tiempo que estuve haciendo tecnología front-end, preguntas de entrevistas front-end, tutoriales de código fuente de desarrollo front-end, tutoriales de libros de documentos PDF Si lo necesita, puede obtenerlo del cerdo de la falda.

10. Cuando haya aprendido css, ¿qué debería aprender a continuación?

El siguiente paso debería ser aprender JavaScript.

10.1 JavaScript

JavaScript es uno de los lenguajes más populares.
JavaScript es un lenguaje que pertenece a la web y es adecuado para PC, portátiles, tabletas y teléfonos móviles.
JavaScript puede hacer que su sitio web sea más dinámico.