CSS, al igual que HTML, también es un lenguaje de marcado. El código también es muy simple. También debe ser interpretado y ejecutado por un navegador. También se puede escribir con cualquier editor de texto. Su extensión de archivo es «. CSS».
- Funciones principales del CSS
La función principal de CSS es embellecer la página y separar el contenido y la apariencia de la página (similar al maquillaje, cirugía plástica^^).
Instrucciones
Estilo en línea, estilo en línea
Formato:
<Label name style="CSS code">
The first code!
</Label name>
Ejemplo:
<p style="color: blue;">
First code
</p>
Nudo:
En este caso, el color del texto «primera línea de código» en p se convertirá en azul.
Estilo interno
Formato
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
CSS code
</style>
</head>
Ejemplo:
<style>
p{
color: blue;
}
</style>
Nudo:
En este caso, el color del texto en p se convertirá en azul.
Estilo exterior
Crear un archivo CSS independiente, utilizar la etiqueta de vínculo en la etiqueta de cabecera html para introducir, estos dos últimos son condiciones opcionales
Formato:
<link href="CSS file path" type="text/CSS" rel="stylesheet">
Ejemplo:
<link rel="stylesheet" type="text/CSS" href="../CSS/First lesson.CSS">
Aquí usted necesita crear un archivo CSS fuera
p{
color: blue;
}
Nudo:
Ahora agregue las condiciones en el archivo css, y el color de la etiqueta p también ha cambiado a azul.
Método de importación
Lo mismo que el método de enlace, pero algunos navegadores no se pueden utilizar, por lo que no se utiliza comúnmente, sólo entender
Formato
<style>
@import url("The path to import the CSS file");
</style>
css archivo sin cambios
Sintaxis básica del CSS
Las reglas CSS constan de dos partes principales:Selector y una o varias declaraciones.
selector{declaration1;declaration2… declaraciónN}
El selector suele ser el elemento html del estilo que necesita cambiar. El selector incluye muchas formas, todas las etiquetas html se pueden utilizar como selectores, como la tabla de cuerpo p, etc.
Cada declaración consta de un atributo y un valor
propiedad representa el nombre del atributo que se va a formatear, value representa el valor del atributo que se va a formatear y cada atributo tiene cada valor.
selector{property:value;property:value;…}
Insertar hoja de estilo CSS
Formato:
CSS selector{
Attribute name: attribute value;
Attribute name; attribute value;
...
}
Ejemplo:
p{
color: blue;
}
Características de CSS
Herencia
- En cascada significa que cuando el mismo archivo HTML hace referencia a varios archivos de hoja de estilos, el explorador aplicará estilos según la jerarquía de definiciones de estilo.Si no se tiene en cuenta la prioridad del estilo, generalmente se sigue el «principio de prioridad reciente».
- La base de la capacidad de los estilos CSS para controlar el contenidoRelación de herencia familiar en el diagrama de estructura de documentos HTML.
- El elemento secundario hereda el estilo del elemento primario y solo hereda los atributos que no están definidos por sí mismo.
Selector de etiquetas
El selector de etiquetas hace referencia al uso de nombres de etiqueta HTML como selectores, categorizados por nombres de etiquetas y especifican un estilo CSS unificado para un determinado tipo de etiqueta en la página. El formato de sintaxis básico es el siguiente:
Nombre de etiqueta {atributo 1: valor de atributo 1; atributo 2: valor de atributo 2; … atributo n: valor del atributo n;}
Pros y contras de usar selectores de etiquetas
- Ventajas: Puede unificar rápidamente estilos para el mismo tipo de etiquetas en la página.
- Desventajas: incapaces de diseñar estilos diferenciados, a veces interfieren entre sí
Selector de clases
El selector de clases se identifica mediante «.» (notación de puntos), seguido del nombre de clase y su formato de sintaxis básico es el siguiente:
. Nombre de clase {atributo 1: valor de atributo 1; atributo 2: valor de atributo 2; … atributo n: valor del atributo n;}
En esta gramática, el nombre de clase es el valor del atributo de clase del elemento HTML y la mayoría de los elementos HTML pueden definir el atributo de clase. La mayor ventaja of selectores de clase es que puede definir estilos separados o idénticos para objetos de elemento
Método
- El primer paso: defina el nombre de clase de la etiqueta que necesita ser styled, es decir, establezca un atributo de clase en la etiqueta y asigne un valor al atributo class.El valor asignado es el nombre de clase.
- Paso 2: Utilice el nombre de clase en CSS para encontrar la etiqueta correspondiente en el archivo html.Para agregar un punto sólido negro delante del nombre de la clase.
Ejemplo:
<style>
.p1{
color:blue;
}
</style>
<p class="p1">
This is the use of class selector
</p>
Atención del nombre de la clase
- Los números no se pueden utilizar como el primer carácter del nombre de la clase, y no puede funcionar en Mozilla o Firefox.
- Los nombres de clase distinguen estrictamente entre mayúsculas y minúsculas y, por lo general, usan caracteres en minúsculas en inglés.
- No se recomienda utilizar el subrayado «_» para nombrar selectores CSS.
- Trate de no abreviar, a menos que pueda entender las palabras de un vistazo.
La misma etiqueta puede definir el mismo nombre de clase y también se pueden definir etiquetas diferentes como el mismo nombre de clase.
Selector de ID
El selector de IDENTIFICADOR utiliza «#» para la identificación, seguido del nombre del identificador, y su formato de sintaxis básico es el siguiente:
#ID {atributo 1: valor de atributo 1; atributo 2: valor de atributo 2; … atributo n: valor del atributo n;}
En esta gramática, el nombre del identificador es el valor del atributo ID del elemento HTML y la mayoría de los elementos HTML pueden definir el atributo ID.El valor id de un elemento es único y solo puede corresponder a un elemento específico del documento.
Método:
- El primer paso: en el documento html, establezca el atributo id en una etiqueta y, a continuación, establezca el valor del atributo para el atributo,El valor del atributo es el nombre del identificador.
- Paso 2: Utilice el nombre del id como selector en el archivo CSS,Pero necesitas agregar # delante del nombre del id.
Ejemplo:
#np1{
background-color: cyan;
}
<div class="p1" id="np1">
Hello there,
<div>
world!
</div>
</div>
Nota: El nombre del id es único en todo el documento y no se puede duplicar.
* En CSS, es un comodín, que coincide con cualquier etiqueta.
Ejemplo:
*{
margin: 0;/*Margin*/
padding: 0;/*Inner margin*/
}
Esto es para eliminar los márgenes internos y externos. Hablaré de ello en detalle más tarde, así que me lo saltaré aquí.
Declaración css simple
| Utilidad | Gramática | Nota |
|---|---|---|
| Establecer el tamaño de fuente | tamaño de fuente | El contenido añadido es del mismo tamaño que la ropa que compraste, xl es mayor que l y mayor que s. También puede establecer el tamaño de fuente con un valor numérico y seleccionar la unidad necesaria |
| Si la fuente es en negrita | font-weight | Añadir contenido como audaz, más audaz (un poco más grueso que audaz), más ligero (un poco más delgado que audaz) o valor en negrita, ya que hay varias opciones para elegir |
| Si la fuente está inclinada | estilo fuente | Si quiere añadir cursa |
| Establecer fuente de caracteres | font-family | Sólo tiene que añadir cualquier fuente que necesite. Si la fuente se escribe con varias palabras, es necesario incluirla entre comillas simples, puede escribir el nombre de la fuente china directamente, puede agregar más de una, de acuerdo con el principio de proximidad |
| Gorras pequeñas | variante de fuente | Convierte letras minúsculas en letras mayúsculas, pero la cabeza sigue siendo la misma, si hay letras minúsculas. Puede agregar small-caps más tarde |
| Establecer sangría de texto | con sangría de texto | Agregue caracteres de sangría, generalmente establezca la primera línea en sangría de dos caracteres 2em |
| Establecer alineación de texto | alineación de texto | alineación central centroizquierda alinear izquierdaderecha alinear derechajusty justificado en ambos extremos |
| Establecer espaciado de línea | alineación de texto | Los valores se pueden agregar, preferiblemente en forma de em, que es el mismo que el múltiplo en la palabra, por ejemplo 1,5em es 1,5 veces el espaciado de línea |
| Texto modificado | texto-decoración | Puede agregar líneas al texto, sobrelínea, subrayado subrayado y tachado de línea. También puede establecer el estilo y el color, para eliminar el subrayado del hipervínculo, es necesario añadir ninguno |
| Conversión de casos | transformación del texto | mayúsculas mayúsculas mayúsculas y minúsculas de letras minúsculas, mayúsculas y minúsculas |
| Modificar el color | Color | Puede agregar directamente el nombre en inglés del color en la parte posterior, y también puede utilizar el formato RGB o el formato hexadecimal |
| Espaciado de caracteres | espaciado de letras | Sólo tiene que añadir un valor |
| Espaciado de palabras en inglés | espaciado de palabras | Sólo tienes que añadir un valor, sólo es útil para las palabras en inglés |
| Establecer la dirección del texto | Dirección | ltr es el valor predeterminado. La dirección del texto es de de izquierda a derecha, y la dirección del texto rtl es de derecha a izquierda. |
| Añadir fondo, añadir cuerpo | color de fondo | Sólo tiene que añadir el color que necesita para agregar |
| Añadir una imagen de fondo | background-image:url (dirección de imagen) | Sólo tiene que añadir su propia dirección de imagen a la dirección de la imagen |
| Azulejo de imagen de fondo | repetición de antecedentes | repetir baldosa horizontal y verticalmente, repetir-x azulejos horizontalmente, repetir-y azulejos verticalmente, no repetir no azulejos |
| Posición de la imagen de fondo | posición de fondo | icono centralbaldosa izquierdabaldosa derechaesquina superior derecha derecha derecha esquina inferior derecha derecha esquina superior izquierda superior izquierda esquina inferior izquierda inferior izquierda esquina izquierda, también puede utilizar el método numérico, el método relativo 50% 50% representa la ubicación 50% de ancho y 50% de longitud, 60px 30px representa la anchura 60px y la longitud 30px |
| Establezca el tamaño de la imagen de fondo | tamaño de fondo | 100% 100% significa horizontal 100%, vertical 100%, contienen significa la mayor proporción sin distorsión, la cubierta también es la mayor, pero independientemente de si la distorsión no está distorsionada |
| La imagen de fondo sigue siendo | background-attachment: fijo; | En este caso, no se moverá con el deslizamiento de la marcha, sino que se arreglará |
Aplicación de código de ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body{
background-color:#cccccc;
}
h1{
color: white;
font-weight:lighter;
background-color: red;
}
.c0{
color: white;
font-family:Italics;
font-style:italic;
direction:rtl;
}
.c1{
color: red;
font-size:24px;
font-weight: 500;
font-family: Song Ti;
font-weight:bold;
}
</style>
</head>
<body>
<h1>Japanese</h1>
<hr />
<p class="c0">Category: Mood</p>
<p class="c1">Feminine beauty</p> Abstract: Charismatic women are beautiful. She makes the world warm, keeps the world youthful and vigorous forever, and makes the world always full of charm and romance. What is charm? The explanation in the dictionary is the power to attract people. It is often heard that someone evaluates a woman like this: she is not beautiful, but she is very attractive. Charm is a deep level of beauty, better than all external beauty Both are full of vitality, making people unforgettable at first sight....... View full text
<br />
<br />
<p class="c2">2007.3.8 13:27 Author: Poetry in Hong Yayun references: 6 | <a style="text-decoration:none" href="http://www.baidu.com">Favorites</a> | Comments: 56 </p>
<p class="c0">Category: Emotional Station</p>
<p class="c1">Emotional analysis: some secret words for men in their 30s</p> Summary: 1. Don't give up ideals and dreams. There will be colors in the dream life; second, there is a set of top suits, or a classic watch, or a luxurious lighter, or. In short, there is something worth telling about history that can be passed on to one's own children; third, reselect one's own friends. Keep one or two confidants and spend your whole life to maintain it; four or thirty years old. Know a lot of details. Including when wearing a suit... more
<br />
<br />
<p class="c2">2011.11.9 00:17 Author: Poetry in Hong Yayun references: 0 | <a style="text-decoration:none" href="http://www.baidu.com">Favorites</a> | Comments: 1</p>
<p class="c0">Category: Appreciation</p>
<p class="c1">Beautiful and picturesque! World ocean photography masterpieces announced (Photos) </p> Abstract: According to foreign media reports, the world’s outstanding ocean photography photos have been announced recently, from which we can enjoy beautiful ocean scenery and learn about many peculiar ocean creatures. In addition, the photographer’s superb photography skills are also amazing. The following are excellent works of ocean photography in 2010. Photographer's comment: "At night, spotted dolphins off the coast of Little Bahamas dive into the deep sea to look for squid... more
<p class="c2"> 2011.10.28 23:53 Author: Poetry in Hong Yayun references: 1 | <a style="text-decoration:none" href="http://www.baidu.com">Favorites</a> | Comments: 1 </p>
</body>
</html>
Imagen de efecto
Selector de pseudoclase
Los selectores de pseudoclase y los selectores de pseudoelementos pueden especificar estilos para resultados no específicos en el documento o especificar estilos para el estado de determinados elementos (incluido el propio documento). Aplica estilos basados en ciertas condiciones en lugar de la estructura del documento.
El método de uso del selector de pseudoclase es el siguiente:
HTML markup pseudo-class name {pseudo-class name: attribute value; attribute name: attribute value; .....}
Las pseudoclases de uso común se muestran en la tabla siguiente:
| Nombre de pseudoclase | Descripción |
|---|---|
| :enlace | El estilo antes de que no se coloque el ratón |
| :visitado | El estilo de los hipervínculos visitados |
| :enfoque | Cuando el elemento se denomina foco, a menudo se utiliza para los elementos de formulario |
| :hover | Se utiliza cuando el mouse está en el elemento, pero no se ha activado ni se ha hecho clic, por ejemplo, el puntero del mouse puede permanecer en un hipervínculo y :hover indicará el hipervínculo |
Uso de selectores de pseudoclase
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The use of CSDN Dong Mengyu pseudo-classes</title>
<style>
a:link{/*The initial color of the hyperlink is blue*/
color: blue;
}
a:visited{/*After the hyperlink is clicked once, the color becomes darkslategrey;*/
color: darkslategrey;
}
a:hover{/*When the mouse is on the hyperlink, the hyperlink color is yellow*/
color: yellow;
}
a{
font-size: 32px;
}
</style>
</head>
<body>
<div>
<a href="https://blog.csdn.net/lolly1023">CSDN: Dong Mengyu</a>
</div>
</body>
</html>
El efecto es el siguiente:
El azul es el color de ajuste inicial, y el amarillo es el color del ratón atascado en la conexión.
Instrucciones para el uso de pseudoclases:
El orden de las pseudoclases en la etiqueta a debe ser LVHA (: link:visited:focus:hover). En la definición CSS, a:hover debe colocarse después de un:link y a:vistied para ser válido. En la definición CSS , A:active debe colocarse después de a:hover para ser eficaz.
Selector de pseudoelemento
El método de uso del selector de pseudoelemento es el siguiente:
Marcado HTML: pseudoelemento (nombre del atributo: valor del atributo; nombre del atributo: valor del atributo;…)
Los pseudoelementos de uso común se muestran en la tabla siguiente:
| Nombre del pseudoelemento | Descripción |
|---|---|
| :primera letra | Agregue un estilo especial a la primera letra del texto, asociado con elementos de nivel de bloque |
| :primera línea | Añadir un estilo especial al viaje inaugural en el texto |
| :antes | Agregar contenido antes del elemento, el pseudoelemento predeterminado es un elemento en línea |
| :después | Agregar contenido después del elemento |
Uso de pseudoelementos
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSDN Dong Mengyu's use of pseudo-elements</title>
<style>
/*The first letter of the first line changes*/
div::first-letter{/*Set the size of the first word at the beginning of the first paragraph to 64px*/
font-size: 64px;
}
/*Modify all the first line*/
div::first-line{/*Set the background color of the first line to red*/
background-color: red;
}
/*Add content in front of the text*/
div::before{/*Add content at the beginning, you need to use content to add*/
/*Add text content*/
content: 'CSDN';
font-style: italic;
}
/*Add content after the text*/
div::after{/*Add content at the beginning, you need to use content to add*/
content: 'Dong Mengyu';
color: blue;
}
</style>
</head>
<body>
<div>
Examples of pseudo-elements
</div>
</body>
</html>
El efecto es el siguiente:
Selector de intersección
- El selector de intersección consta de dos selectores y el resultado es seleccionar la intersección de los dos rangos de elementos de cuadrícula.
- Requisitos: El primer selector de la intersección debe ser un selector de marcas y el segundo debe ser un selector de clases o un selector de id.
- No puede haber espacios entre los dos selectores, y deben escribirse consecutivamente.
Uso del selector de intersección
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The use of Dong Mengyu intersection selector</title>
<style>
p.p1{/**Use the intersection selector, select the content of the p tag and the class selector as p1, and then modify it/
font-size: 32px;
}
</style>
</head>
<body>
<div>
<p class="p1">I used the intersection selector</p>
<p>I did not use the intersection selector</p>
</div>
</body>
</html>
El efecto es el siguiente:
.
