CSS en todas partes
Tal vez piense que CSS no es importante en absoluto, pero de hecho, si HTML es el marco del edificio, CSS es la decoración de la casa. ¿Qué pasa con Javascript? El argumento más interesante que he escuchado es P3. Volvamos primero al código.
CSS
El siguiente es el código del que hablamos antes: CSS convierte las tres letras de rojo en rojo.
HTML<!DOCTYPE html> <html> <head> </head> <body> <p id="para" style="color:red">Red</p> </body> <script type="text/javascript" src="app.js"></script> </html>
Solo
javascriptvar para=document.getElementById("para"); para.style.color="blue";
Al convertir la fuente en azul, CSS + HTML hace que las páginas funcionen de manera ordenada, pero Javascript ha interrumpido estos pedidos, y es maravilloso que el mundo no esté desordenado. Comprenda por qué las personas no se sentían bien con Javascript en el pasado, pero aquí está la sala principal, es decir CSS, no hay Javascript en este momento.
Sobre CSS
Este no es un libro profesional sobre CSS, por lo que no hablaré de cómo surgió el CSS. Dado que podemos conocer fácilmente algunas cosas de otros lugares, no necesitamos pasar demasiado tiempo para repetir. Uno de los propósitos, como la refactorización, también es eliminar el código duplicado, pero algunas duplicaciones son indispensables y necesarias, y generalmente estas cosas pueden copiarse de otros lugares.
Hasta ahora no hemos confiado en ningún hardware o software especial. Para nosotros, nuestra necesidad más básica es una computadora, su tableta o, por supuesto, su teléfono inteligente, porque todos tienen Los navegadores, y todos estos son utilizables, y no hay excepción para nuestro CSS.
CSS (Hojas de estilo en cascada), todavía no recuerdo su nombre completo hoy. CSS también tiene un nombre chino para hojas de estilo en cascada. De hecho, lo que se traduce puede no ser lo que nos importa. Lo que debemos preocuparnos es lo que él puede hacer Algo Como uno de los tres mosqueteros, su objetivo principal es permitirnos controlar de manera fácil y flexible la apariencia de las páginas web. Podemos usarlo para crear una interfaz compleja como Taobao, o tan simple como nuestro libro, pero si es tan simple como nuestro libro, es posible que no se necesite CSS. HTML fue diseñado originalmente de acuerdo con el formato del periódico, podemos seguir usando el editor mencionado anteriormente u otro. Si te gusta DreamWeaver, eso no está mal, pero usar IDE al principio no nos ayudará a escribir un buen código.
Olvidé decir que CSS también está disponible en versiones, similares a Windows, kernel de Linux, etc., pero las actualizaciones pueden no ser tan frecuentes, HTML también está disponible en versiones y JS también está disponible en versiones. Actualmente no se consideran cosas complejas.
Estructura de código
Para nuestro ejemplo Rojo anterior, si no hay una buena estructura, este puede ser el caso en el futuro.
HTML<!DOCTYPE html> <html> <head> </head> <body> <p style="font-size: 22px;color:#f00;text-align: center;padding-left: 20px;">如果没有一个好的结构</p> <p style=" font-size:44px;color:#3ed;text-indent: 2em;padding-left: 2em;">那么以后可能就是这样子。。。。</p> </body> </html>
Aunque vemos lo mismo:
Entonces reescribimos el código anterior de acuerdo con las recomendaciones en varios libros
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css"> .para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; } </style> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
Es mejor que lo anterior, y es mucho mejor de entender. Esto es solo un uso temporal. Cuando el archivo es demasiado grande, la escritura formal debe ser la siguiente:
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <style type="text/css" href="style.css"></style> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
Necesitamos
HTML<!DOCTYPE html> <html> <head> <title>CSS example</title> <link href="./style.css" rel="stylesheet" type="text/css" /> </head> <body> <p class="para">如果没有一个好的结构</p> <p class="para2">那么以后可能就是这样子。。。。</p> </body> </html>
Luego tenemos un style.css como app.js colocado en el mismo directorio, y su contenido es
CSS.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; } .para2{ font-size:44px; color:#3ed; text-indent: 2em; padding-left: 2em; }
Este código es muy similar al código JS
javascriptvar para={ font_size:'22px', color:'#f00', text_align:'center', padding_left:'20px', }
Y 22px, 20px y # f00 son valores numéricos, entonces:
javascriptvar para={ font_size:22px, color:#f00, text_align:center, padding_left:20px, }
La brecha visual es lo más pequeña posible, ya que para estos temas se discutirá más adelante, si queremos que nuestro compilador funcione más correctamente, entonces necesitamos muchos de esos símbolos, a menos que esté dispuesto a comprender:
lisp(dotimes (i 4) (print i))
En general, hemos reducido el uso de símbolos, pero el uso de lisp trae más paréntesis, pero esta es una forma concisa de expresión, tal vez podamos verlo en otros idiomas.
regex\d{2}/[A-Z][a-z][a-z]/\d{4}
El código anterior es encontrar "algún día / mes / año" de un grupo de datos. Si al principio no lo entiende como una expresión regular, lo encontrará muy complicado.
Este lenguaje puede estar diseñado para diseñadores, pero la mayoría de los diseñadores aún no entienden la programación, pero este lenguaje es relativamente más simple y fácil de entender que otros lenguajes.
Estilo y objetivo
Como se muestra a continuación, es nuestro estilo
css.para{ font-size: 22px; color:#f00; text-align: center; padding-left: 20px; }
Nuestro objetivo es
如果没有一个好的结构
Entonces, el estilo y el objetivo están tomados de la mano aquí, la pregunta es cómo están juntos. El siguiente es el enfoque de la comunicación entre CSS y HTML:
Selector
El selector que utilizamos se llama selector de clase, que es la clase, o debería llamarse selector de clase. El selector de ID se usa más comúnmente con selectores de clase, pero es adecuado para ocasiones más avanzadas, como cuando necesita usar JS para controlar el DOM. El selector básico es como el siguiente ejemplo:
p.para{
color:#f0f;
}
Agregue el código al final de style.css y encontrará que "Si no hay una buena estructura" se vuelve rosa, por supuesto tendremos esta forma de escribir
p>.para{
color:#f0f;
}
Para producir el estilo especial anterior, aunque no es atractivo, finalmente entendemos cuál es el estilo en cascada. El siguiente código es más importante que el anterior y, por lo tanto, tiene una regla de mayor prioridad.
Y generalmente podemos pasar un
p{
text-align:left;
}
Tal selector de elementos da a todos los elementos p una alineación izquierda.
También hay un selector compuesto más complejo, debajo está el archivo HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS example</title>
<link href="./style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p class="para">如果没有一个好的结构</p>
<div id="content">
<p class="para2">那么以后可能就是这样子。。。。</p>
</div>
</body>
</html>
También hay archivos CSS
.para{
font-size: 22px;
color:#f00;
text-align: center;
padding-left: 20px;
}
.para2{
font-size:44px;
color:#3ed;
text-indent: 2em;
padding-left: 2em;
}
p.para{
color:#f0f;
}
div#content p {
font-size:22px;
}
CSS más interesante
Un ejemplo que contiene para2 y para_bg
<div id="content">
<p class="para2 para_bg">那么以后可能就是这样子。。。。</p>
</div>
Acabamos de agregar un fondo negro
.para_bg{
background-color:#000;
}
La página web modificada se vuelve mucho más interesante que la original. La llamada herencia y fusión es el ejemplo anterior.
También podemos usar CSS3 para crear efectos más interesantes, y estos no están en nuestra discusión, porque estamos hablando de ser un geek.
Tal vez el código que escribimos es tan simple, desde HTML a Javascript, y ahora CSS, pero siempre hay algunas cosas básicas, sin tener en cuenta esas sintaxis básicas, cosas básicas que podemos uno por uno en el proceso de práctica. Encontrado Pero es posible que no lo encontremos o que no consideremos algunos usos interesantes o usos especiales en el uso normal. En este momento, podemos aprender observando un código exquisitamente diseñado. Las cosas complejas pueden volverse muy simples, y las cosas simples también pueden volverse muy complicadas.
Ver en línea : construir un sistema IoT paso a paso
La versión de Turing-eBook crea un sistema de Internet de las cosas paso a paso