3.1 fundamentos básicos de CSS
1. reglas de estilo CSS
Formato específico:
选择器{：属性1：属性值1；属性2：属性值2；属性3：属性值3；}Por ejemplo: el tamaño de fuente del título secundario es de 20 píxeles y el color es rojo
h2{ font-size:20px;clolr:red;}Nota:
1. Los selectores en el estilo CSS son estrictamente sensibles a las mayúsculas y minúsculas, y los atributos y los valores de los atributos no son sensibles a mayúsculas y minúsculas.
2 una pluralidad. La propiedad debe estar separados por un punto y coma entre el estado Inglés, el punto y coma después del último atributo se puede omitir, sin embargo, a fin de facilitar la adición de nuevo retención de estilo es preferiblemente
3 . Si el valor de una propiedad compone de una pluralidad de palabras en inglés Y hay un espacio en el medio, debe agregar comillas en estado inglés a este valor de atributo, como:
p{ font-family:"Timed New Roman";}4. Al escribir código css, para mejorar la legibilidad del código, generalmente agregue comentarios
5. En el código css, los espacios no se analizan y los espacios antes y después de las llaves y los puntos y comas son opcionales.
Segundo, la introducción de hojas de estilo CSS.
1. Fórmula en fila
El estilo en línea también se denomina estilo en línea, que consiste en establecer el estilo del elemento a través del atributo de estilo de la etiqueta.
Formato de sintaxis básica:
<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>
Cualquier etiqueta HTML tiene un atributo de estilo, el estilo en línea solo afecta la etiqueta y las sub-etiquetas anidadas dentro de ella.
2.Tipo de ajuste interno
Inline es escribir código CSS en la etiqueta de encabezado <head> en el documento HTML, y usar la definición de etiqueta <style>, el
formato de sintaxis básica:
<head>
<style type="text/css">
选择器{属性:属性值1:属性2:属性值2:属性3:属性值3;}
</style>
</head>La etiqueta <style> generalmente se encuentra después de la etiqueta <title> en el <head>, y también se puede colocar en cualquier parte del documento HTML. Al mismo tiempo, debe establecer el atributo de tipo text css / text. Solo entonces el navegador sabe que <type> contiene código CSS, porque <style> también puede contener otro código, por lo que debe escribirse como css / text
3. Vinculado
Link-in consiste en colocar todos los estilos en uno o más archivos de hoja de estilo externo con la extensión .css, y vincular los archivos de hoja de estilo externo al documento HTML a través de la etiqueta <link />.
El formato de sintaxis básica es el siguiente:
<head>
<link href="css文件的路径" type="text/css" rel="stylesheet"/>
</head>En esta sintaxis, la etiqueta <link> debe colocarse en la etiqueta de encabezado <head>, y los tres atributos de la etiqueta <link /> deben especificarse de la siguiente manera:
① href: define la URL del archivo de hoja de estilo externo vinculado, que puede ser la ruta
correcta o una ruta absoluta Tabla
③rel: define la relación entre el documento actual y el documento vinculado. Aquí debe especificarse como hoja de estilo, lo que significa que el archivo vinculado es una hoja de estilo.
La mayor ventaja del enlace es que la misma hoja de estilo CSS puede ser utilizada por diferentes enlaces de páginas HTML. Al mismo tiempo, una página HTML también puede vincularse a múltiples estilos CSS por múltiples etiquetas <link />. El enlace
-in es el más utilizado y el más utilizado. Práctica hoja de estilo CSS. Separa el código HTML y el código CSS en dos o más archivos, logrando una separación completa de la estructura y el rendimiento, lo que hace que la preproducción y el post mantenimiento de las páginas web sean muy convenientes
4. Importar
Importados y vinculados son los mismos para archivos de hoja de estilos externos. Aplique la etiqueta de estilo al documento de encabezado HTML y
use la instrucción @import al principio de la etiqueta <style> para importar el archivo de hoja de estilo externo.
Formato de sintaxis básica:
<style type="text/css">
@import url(css文件路径);或@import"css文件路径";
/*此处还可以存放其他css样式*/
</style>## Tres, conceptos básicos del selector
1. Selector de marca
Formato de sintaxis básica:
标记名{属性1：属性值1；属性2：属性值2；属性3：属性值3；}En esta sintaxis, todos los nombres de etiquetas en HTML se pueden usar como selectores de etiquetas, como body, h1, p, strong, etc. El estilo definido con el selector de etiquetas es válido para todas las etiquetas de ese tipo en la página.
Por ejemplo:
p{ font-size:455px;color:red;font-family:"微软雅黑";}
* La mayor ventaja del selector de etiquetas es que puede unificar rápidamente los estilos del mismo tipo de etiquetas en la página, y esta también es su deficiencia, que no puede involucrar estilos diferenciados *
2. Selector de clase
Formato de sintaxis básica:
.类名{属性1:属性值1;属性2;属性3:属性值3;}Este "." Es el
nombre de la clase con caracteres en inglés, que es el valor del atributo de clase del elemento HTML. La mayoría de los colores primarios HTML pueden definir el atributo de clase. La mayor ventaja del selector de clase es que puede definir estilos individuales o iguales para objetos de elementos
El primer carácter del nombre de la clase no puede usar números, y es estrictamente sensible a mayúsculas y minúsculas, generalmente caracteres en inglés.
Selector 3.id
Formato de sintaxis básica:
#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}En esta sintaxis, el nombre de identificación es el valor del atributo de identificación del elemento HTML. La mayoría de los elementos HTML pueden definir el atributo de identificación. El valor de identificación del elemento es único y solo puede corresponder a un elemento específico en el documento.
El selector de id no admite la definición de valores múltiples como el selector de clase, y la escritura como "id =" bold font24 "" es completamente incorrecta
4. Selector de comodines
Tiene la gama más amplia de todos los selectores
(no recomendado)
*{属性1:属性值1;属性2:属性值2;属性3:属性值3:}
