Directorio de artículos
1. CSS
1. Introducción a CSS
HTML solo presta atención a la semántica del contenido y puede crear estilos simples, pero puede resultar feo una vez hecho.
CSSSíHojas de estilo en cascadaabreviatura. CSS también es un lenguaje de marcado, utilizado principalmente para configurar la página HTML.contenido del texto(fuente, tamaño, alineación, etc.),Forma de imagen(ancho y alto, estilo de borde, márgenes, etc.) yEl diseño y la apariencia del diseño.。
CSS puede embellecer HTML, hacer que HTML sea más hermoso y simplificar el diseño de la página. HTML se centra en la presentación estructural y los estilos se pasan a CSS, es decir,La estructura (HTML) y el estilo (CSS) están separados.
2. Especificaciones de sintaxis CSS
Las reglas CSS constan de dos partes principales: un selector y una o más declaraciones .
- El selector es una etiqueta HTML que se utiliza para especificar estilos CSS, y las llaves son los estilos específicos establecidos para el objeto.
- Las propiedades son atributos de estilo establecidos para el objeto especificado, como el tamaño de fuente, el color del texto, etc.
Todos los estilos están incluidos en la etiqueta <style>, que indica una hoja de estilo. <estilo> suele escribirse encima de <cabeza>。
<head>
<style>
h4 {
color: red;
font-size: 20px;
}
</style>
</head>
2. Selector básico de CSS
1. El papel del selector
El selector selecciona diferentes etiquetas según las diferentes necesidades.
2. Clasificación de selectores
- El selector se divide enSelector básicoyselector compuestoDos amplias categorías.
- Los selectores básicos están compuestos por un único selector.
- Los selectores básicos incluyen: selector de etiquetas, selector de clases, selector de identificación y selector de comodines.
3. Selector básico
selector de etiquetas
El selector de etiquetas (selector de elementos) se refiere al uso de nombres de etiquetas HTML como selectores, clasificándolos según los nombres de las etiquetas y especificando un estilo CSS unificado para un determinado tipo de etiquetas en la página.
-gramática:
标签名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
El selector de etiquetas puede establecer estilos de manera rápida y uniforme para etiquetas del mismo tipo en la página, pero no puede diseñar estilos diferenciados y solo puede seleccionar todas las etiquetas actuales.
selector de clase
Si desea seleccionar de forma diferencial diferentes etiquetas y seleccionar una o varias etiquetas individualmente, puede utilizar el selector de clases.
-gramática:
.类名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
La estructura necesita usar el atributo de clase para llamar a la clase.
Por ejemplo: establezca todos los elementos HTML de clase roja en rojo
.red {
color: red;
}
<div class='red'>设为红色</div>
El selector de clases se identifica con ".", seguido del nombre de la clase (nombrado por usted mismo), que puede entenderse como darle un nombre a la etiqueta, y el nombre debe ser significativo.
-Múltiples nombres de clases:
Se pueden asignar varios nombres de clase a una etiqueta para lograr más propósitos de selección. Estos nombres de clase pueden seleccionar esta etiqueta, que puede entenderse como una etiqueta que tiene varios nombres.
El uso de varios nombres de clases puede colocar los mismos estilos de algunos elementos de etiquetas en una clase. Estas etiquetas pueden llamar a esta clase común y luego llamar a sus propias clases únicas, ahorrando así código.
selector de identificación
El selector de id puede especificar un formato específico para los elementos HTML marcados con un id específico. Los elementos HTML usan el atributo id para establecer el selector de id. En CSS, el selector de id se define con "#".
-gramática:
#id名 {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
El atributo id solo se puede llamar una vez por documento HTML
-La diferencia entre selector de id y selector de clase:
Una etiqueta puede tener varios nombres de clase y varias etiquetas también pueden utilizar un selector de clase. El selector de identificación es único y no debe repetirse. Los selectores de clase se usan más comúnmente para modificar estilos y los selectores de identificación generalmente se usan para elementos únicos en la página.
selector comodín
En CSS, el selector comodín se define con "*", lo que significa seleccionar todos los elementos (etiquetas) de la página.
-gramática:
* {
属性1: 属性值1;
属性2: 属性值2;
属性3: 属性值3;
...
}
3. Propiedades CSS comunes
1. Atributos de fuente
Las propiedades de fuente CSS se utilizan para definir la familia de fuentes, el tamaño, el peso y el estilo del texto.
Familia tipográfica
Uso de CSSFamilia tipográficaLa propiedad define la familia de fuentes del texto.
p { font-family:"微软雅黑";}
div {font-family: Arial,"Microsoft Yahei", "微软雅黑";}
- Una fuente que consta de varias palabras separadas por espacios y entre comillas.
- Varias fuentes deben estar separadas por comas en estado inglés.
- Varias fuentes comunes: body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }
tamaño de fuente
Uso de CSStamaño de fuenteLa propiedad define el tamaño de fuente.
p {
font-size: 20px;
}
- Tamaño px (píxel), una unidad comúnmente utilizada en páginas web.
- Diferentes navegadores pueden mostrar diferentes tamaños de fuente de forma predeterminada. Intente dar un valor claro.
Peso de fuente
Uso de CSSpeso de fuenteLa propiedad establece el peso de la fuente del texto.
p {
font-weight: bold;
}
Varios valores de atributos del grosor de fuente:
| valor de atributo | describir |
|---|---|
| normal | Valor predeterminado (sin negrita) |
| atrevido | Atrevido |
| 100 - 900 | 400 es igual a normal, 700 es igual a negrita |
estilo de texto
Uso de CSSEstilo de fuenteLa propiedad establece el estilo del texto.
p {
font-style: normal;
}
Varios valores de atributos de estilos de texto:
| valor de atributo | describir |
|---|---|
| normal | valor por defecto |
| itálico | cursiva |
2. Atributos del texto
Las propiedades del texto CSS definen la apariencia del texto, como el color del texto, el texto alineado, el texto decorativo, la sangría del texto, el interlineado, etc.
color de texto
colorPropiedad utilizada para definir el color del texto.
div {
color: red;
}
Representación centralizada del color del texto:
| Expresión | valor de atributo |
|---|---|
| valores de color predefinidos | rojo verde azul… |
| hexadecimal | #FF0000、#FF6600、#29D794 |
| código RGB | rgb(255,0,0) o rgb(100%),) |
Texto alineado
texto alineadoPropiedad utilizada para establecer la alineación horizontal del contenido del texto dentro de un elemento.
div {
text-align: center;
}
Varios valores de atributos para alinear texto:
| valor de atributo | ilustrar |
|---|---|
| izquierda | alineado a la izquierda (predeterminado) |
| bien | Alinear a la derecha |
| centro | centro |
Texto decorativo
decoracion-de-textoLas propiedades especifican decoraciones agregadas al texto. Puede agregar subrayado, tachado, sobrerayado, etc. al texto.
div {
text-decoration：underline；
}
Varios valores de atributos para decorar texto:
| valor de atributo | ilustrar |
|---|---|
| ninguno | Por defecto, sin líneas decorativas |
| subrayar | Subrayar |
| sobrelínea | sobrelínea |
| línea directa | tachado |
guion de texto
guion de textoEl atributo se utiliza para especificar la sangría de la primera línea de texto. Al configurar este atributo, la primera línea de todos los elementos puede tener una sangría de una longitud determinada, e incluso la longitud puede ser un valor negativo.
div {
text-indent: 10px;
}
p {
text-indent: 2em;
}
ellosEs una unidad relativa, que es el tamaño de un texto del elemento actual (tamaño de fuente). Si el elemento actual no establece un tamaño, será un tamaño de texto del elemento principal.
Espaciado entre líneas
altura de la líneaLa propiedad se utiliza para establecer la distancia entre filas (alto de fila). Puedes controlar la distancia entre líneas de texto.
p {
line-height: 20px;
}
4. Método de introducción de CSS
1. Hoja de estilo en línea (estilo en línea)
Las hojas de estilo en línea (hojas de estilo en línea) establecen estilos CSS en el atributo de estilo dentro de la etiqueta del elemento.
<div style="color: red; font-size: 12px;">行内样式表</div>
Adecuado para modificar estilos simples.
2. Hoja de estilo interna (incrustada)
Las hojas de estilo internas (hojas de estilo integradas) se escriben dentro de la página HTML. Todos los códigos CSS se extraen y se colocan por separado en una etiqueta <style>.
<style>
div {
color: red;
font-size: 12px;
}
</style>
3. Hoja de estilo externa (vinculada)
Los estilos se escriben por separado en archivos CSS y luego los archivos CSS se introducen
en la página HTML para su uso.
<link rel="stylesheet" href="css文件路径">
| Atributos | efecto |
|---|---|
| rel | Defina la relación entre el documento actual y el documento vinculado, que debe especificarse como "hoja de estilo", lo que indica que el documento vinculado es un archivo de hoja de estilo. |
| href | Define la URL del archivo de hoja de estilo externo vinculado. |