- Escrito al frente: consulte el tutorial de Bilibili Dark Horse Programmer Pink Teacher
- Dirección: https://www.bilibili.com/video/BV14J4114768?t=328&p=26
Tabla de contenido
Introducir hoja de estilo CSS (posición de escritura)
Hoja de estilo interna (hoja de estilo incrustada)
Hoja de estilo externa (enlace externo)
Hoja de estilo en cascada CSS
Limitaciones de HTML
- HTML no puede satisfacer las necesidades de los diseñadores
- Inconveniente para manipular atributos html
- Agregar estilos en HTML trae una hinchazón interminable y engorrosa
Esteticista para páginas CSS
- La mayor contribución de CSS es: separar HTML del estilo, lograr que HTML se enfoque en la presentación de la estructura y el estilo en CSS
- Nuestro resultado deseado : la estructura (html) y el estilo (css) están separados
Primer conocimiento de CSS
- concepto:
- CSS (hojas de estilo en cascada) , generalmente llamadas hojas de estilo CSS u hojas de estilo en cascada ( hojas de estilo en cascada)
- efecto:
- Se utiliza principalmente para establecer el contenido del texto (fuente, tamaño, alineación, etc.) en la página HTML, la forma de la imagen (ancho y alto, estilo de borde, margen, etc.) y el diseño y el estilo de visualización de apariencia del diseño.
- Basado en HTML, CSS proporciona una gran cantidad de funciones, como fuente, color, control de fondo y composición tipográfica general, y también puede establecer diferentes estilos para diferentes navegadores.
Introducir hoja de estilo CSS (posición de escritura)
Inline (estilo en línea)
- concepto:
- Se llama estilo en línea y estilo entre líneas.
- Establezca el estilo del elemento a través del atributo de estilo de la etiqueta
- El formato de sintaxis básico es el siguiente:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
- De hecho, cualquier etiqueta HTML tiene un atributo de estilo para establecer el estilo en línea.
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
- Nota:
- el estilo es en realidad el atributo de la etiqueta
- Entre el atributo de estilo y el valor es
:;Separe varios conjuntos de valores de atributo .- Solo se puede controlar la etiqueta actual y la etiqueta de palabra anidada en ella, lo que genera redundancia de código
- Desventajas:
- Sin separación de estilo y estructura
Hoja de estilo interna (hoja de estilo incrustada)
- concepto:
- Incrustado
- Es escribir de forma centralizada el código CSS en la etiqueta head del documento HTML y definirlo con la etiqueta de estilo
- El formato de sintaxis básico es el siguiente:
<head> <style type="text/CSS"> 选择器（选择的标签） { 属性1: 属性值1; 属性2: 属性值2; 属性3: 属性值3; } </style> </head><style> div { color: red; font-size: 12px; } </style>
- Nota:
- La etiqueta de estilo generalmente se encuentra en la etiqueta principal, por supuesto, en teoría, se puede colocar en cualquier lugar del documento HTML.
- type = "text / css" se puede omitir en html5.
- Solo puede controlar la página actual
- Desventajas:
- No completamente separados
Caso completo
<style> /*选择器{属性:值；}*/ p { color:#06C; font-size:14px; } /*文字的颜色是 蓝色*/ h4 { color:#900; } h1 { color:#090; font-size:16px; } body { background:url(bg2.jpg); } </style>
Hoja de estilo externa (enlace externo)
- concepto:
- Enlace
- Consiste en poner todos los estilos en uno o más archivos de hojas de estilo externos con extensión .CSS ,
- Vincule el archivo de hoja de estilo externo al documento HTML a través de la etiqueta de vínculo
- El formato de sintaxis básico es el siguiente:
<head> <link rel="stylesheet" type="text/css" href="css文件路径"> </head>
- Nota:
- el enlace es una sola etiqueta
- La etiqueta de enlace debe colocarse en la etiqueta principal y se especifican tres atributos de la etiqueta de enlace
Atributos efecto rel Defina la relación entre el documento actual y el documento vinculado, donde debe especificarse como "hoja de estilo", lo que significa que el documento vinculado es un archivo de hoja de estilo. tipo Defina el tipo de documento vinculado, que debe especificarse como "texto / CSS", lo que significa que el archivo externo vinculado es una hoja de estilo CSS. Todos podemos omitir href Define la URL del archivo de hoja de estilo externo vinculado, que puede ser una ruta relativa o absoluta.
Resumen de tres hojas de estilo (ubicación)
Hoja de estilo ventaja Desventaja Uso Rango de control Hoja de estilo en línea Escritura conveniente, alto peso Sin separación de estilo y estructura Menos Controla una etiqueta (menos) Hoja de estilo interna La estructura parcial y el estilo están separados No completamente separados Más Controlar una página (medio) Hoja de estilo externa Separación completa de estructura y estilo Necesito presentar A lo sumo, muy recomendable Controla todo el sitio (múltiple)
Estilo de código
- Generalmente hay dos tipos de escritura de estilo:
- Uno es el formato compacto (Compact)
h3 { color: deeppink;font-size: 20px;}
- Uno es el formato expandido (recomendado)
h3 { color: deeppink; font-size: 20px; }Caso de código
- Las palabras clave de selector de estilo, nombre de atributo y valor de atributo se escriben en minúsculas, y se permiten mayúsculas y minúsculas para las cadenas de atributos.
/* 推荐 */ h3{ color: pink; } /* 不推荐 */ H3{ COLOR: PINK; }
Resumen de las reglas de estilo CSS
- Al usar HTML, debe seguir ciertas especificaciones. CSS es lo mismo. Si desea utilizar CSS para decorar páginas web de manera competente, primero debe comprender las reglas de estilo CSS.
- El formato específico es el siguiente:
- para resumir:
- 1. El selector se utiliza para especificar las etiquetas HTML utilizadas por el estilo CSS. Los estilos específicos establecidos para el objeto están entre llaves.
- 2. Los atributos y valores de atributo aparecen en forma de " pares clave-valor ".
- 3. Los atributos son atributos de estilo establecidos para el objeto especificado, como el tamaño de fuente, el color del texto, etc.
- 4. Utilice ":" en inglés para conectar atributos y valores de atributo .
- 5. Utilice ";" en inglés para distinguir entre varios "pares clave-valor" .
