¿Qué es el código CSS?

¿Qué es CSS?

La traducción al chino es una hoja de estilos. Su función es simplemente decir: te permite usar diferentes estilos de hipervínculos en una misma página.

Lo que es aún más sorprendente es que con CSS, simplemente cambiar un archivo puede cambiar la apariencia de cientos de páginas web... rendimiento personalizado sin perder visitantes... todo esto se debe al poder y la flexibilidad. de hojas de estilo web.

1. Sintaxis de CSS:

La definición de CSS se compone de tres partes:

Selector (selector), atributos (propiedades) y atributos Obtener valor.

Sintaxis: selector {propiedad: valor} (selector {propiedad: valor})

Explicación:

·Los selectores pueden tener muchas formas. Generalmente, desea definir el estilo de las etiquetas HTML, como BODY, P, TABLE... Puede definir sus atributos y valores a través de este método. Los atributos y valores deben estar separados por dos puntos:

Ejemplo: cuerpo {color: negro}, el efecto de este ejemplo es hacer que el texto de la página sea negro.

·Si el valor de un atributo se compone de varias palabras, el valor debe estar entre comillas. Por ejemplo, el nombre de una fuente suele ser una combinación de varias palabras:

<. p>Ejemplo: p {font- family: "sans serif"} (definir la fuente del párrafo como sans serif)

· Si necesita especificar múltiples atributos para un selector, usamos punto y coma para separar todos los atributos y valores:

Ejemplo: p {text-align: center; color: red} (el párrafo está centrado; y el texto del párrafo es rojo)

2.

Puedes combinar selectores con los mismos atributos y valores y separarlos con comas para reducir las definiciones repetidas de estilos:

h1, h2, h3, h4, h5, h6 { color: verde } (Este grupo incluye todos los elementos del título y el texto de cada elemento del título es verde)

p, table{ font-size: 9pt } (El tamaño del texto en párrafos y tablas es 9pt)

El efecto es completamente equivalente a:

p { font-size: 9pt }

table { font-size: 9pt }

3. Selector de clases

Utilizando el selector de clases, puede clasificar los mismos elementos y definir diferentes estilos. Al definir el selector de clases, agregue un punto delante del nombre de la clase personalizada. Si quieres dos párrafos diferentes, uno alineado a la derecha y otro centrado, primero puedes definir dos clases:

p.right {text-align: right}

p.center {text-align: center}

Luego úsalo en diferentes párrafos, solo agrega el parámetro de clase que definiste en la etiqueta HTML:

Este párrafo está alineado a la derecha

Este párrafo está centrado

Existe otra forma de utilizar el selector de clases, omitiendo el nombre de la etiqueta HTML en el selector, de modo que se puedan definir varios elementos diferentes como un mismo Estilo:

.center {text-align: center} (defina el selector de clase .center para centrar el texto)

Dicha clase se puede aplicar a cualquier elemento.

A continuación clasificamos tanto el elemento h1 (título 1) como el elemento p (párrafo) en la clase "center", lo que hace que los estilos de ambos elementos sigan el selector de clase ".center":

Este título está centrado

Este párrafo también está centrado

Nota: este selector de clases que omite etiquetas HTML es nuestro método CSS más utilizado. Con este método, podemos aplicar fácilmente estilos de clase predefinidos a cualquier elemento.

4. Selector de ID

En la página HTML, el parámetro ID especifica un solo elemento y el selector de ID se usa para definir un estilo separado para este único elemento.

La aplicación del selector de ID es similar a la del selector de clases, simplemente reemplace CLASS con ID. Reemplace la clase en el ejemplo anterior con ID:

Alinee este párrafo a la derecha

Para definir el selector de ID, agregue un signo "#" antes del nombre de ID. Al igual que el selector de clase, hay dos formas de definir los atributos del selector de ID. En el siguiente ejemplo, el atributo ID coincidirá con todos los elementos con id="intro":

#intro

{

font-size:110%;

tamaño de fuente: 110%;

#intro

{ p>

peso de fuente: negrita

color; :#0000ff;

fondo-color:transparent

} (El tamaño de fuente es el tamaño predeterminado 110%; negrita; azul; color de fondo transparente)

En el siguiente ejemplo, el atributo ID solo coincide con elementos de párrafo con id="intro":

p#intro

{

font-size:110% ;

peso de fuente:negrita

color:#0000ff;

color de fondo:transparente

}

Nota: El selector de ID es muy limitado. Solo puede definir el estilo de un determinado elemento individualmente y generalmente solo se usa en circunstancias especiales.

5. Selector de inclusión

Puede definir individualmente una hoja de estilo para la relación de inclusión de un determinado elemento. El elemento 1 contiene el elemento 2. Este método solo se aplica a los elementos del elemento 1. 2 definición, no hay definición para el elemento individual 1 o el elemento 2, por ejemplo:

table a

{

font-size: 12px

}

Los enlaces dentro de la tabla tienen sus estilos cambiados y su tamaño de texto es de 12 píxeles, mientras que los enlaces fuera de la tabla todavía tienen su texto en el tamaño predeterminado.

6. La naturaleza en cascada de las hojas de estilo

La naturaleza en cascada de las hojas de estilo es herencia. La regla de herencia de las hojas de estilo es que el estilo del elemento externo será retenido y heredado por otros. elementos contenidos en este elemento. De hecho, todos los elementos anidados dentro de un elemento heredarán los valores de atributo especificados por el elemento externo, a veces apilando muchas capas de estilos anidados juntos, a menos que se cambie lo contrario. Por ejemplo, anide la etiqueta P en la etiqueta DIV:

div { color: red; font-size:9pt}

……

El texto de este párrafo tiene una fuente roja de 9 puntos

(El contenido del elemento P heredará los atributos definidos por DIV)

Nota: En algunos casos, el selector interno no hereda el valor del selector circundante, pero en teoría Estos son especiales. Por ejemplo, el valor del atributo de límite superior no se hereda. Intuitivamente, un párrafo no tendrá el mismo valor de límite superior que el CUERPO del documento.

Además, cuando la herencia de la hoja de estilo entra en conflicto, siempre prevalece el último estilo definido.

Si el color de P se define en el ejemplo anterior:

div { color: red-size:9pt}

p {color: blue}

… …

El texto de este párrafo es de tamaño de fuente azul 9

Podemos ver que el tamaño del texto del párrafo es de tamaño de fuente 9, el cual hereda el atributo div, y el atributo de color se basa en el último definido.

Cuando diferentes selectores definen el mismo elemento, se debe tener en cuenta la prioridad entre diferentes selectores. Selector de ID, selector de clase y selector de etiquetas HTML Debido a que el selector de ID se agrega al elemento en último lugar, tiene la prioridad más alta, seguido del selector de clase. Si desea trascender la relación entre estos tres, puede usar !important para aumentar la prioridad de la hoja de estilo, por ejemplo:

p { color: #FF0000!important }

.blue { color: #0000FF}

#id1 { color: #FFFF00}

Agregamos estos tres estilos a un párrafo de la página al mismo tiempo, y finalmente declararse de acuerdo con! Importante El estilo del selector de etiquetas HTML es texto rojo. Si se elimina !important, el selector de ID con mayor prioridad será el texto amarillo.

7. Comentarios: /* ... */

Puedes insertar comentarios en CSS para explicar el significado de tu código. Los comentarios te ayudarán a ti o a otras personas a editar y cambiar el código. en el futuro. En el navegador, los comentarios no se muestran. Los comentarios CSS comienzan con "/*" y terminan con "*/", de la siguiente manera:

/* Definir hoja de estilo de párrafo*/

p

{

text-align: center; /* El texto está organizado en el centro*/

color: negro /* El texto es negro*/

font-family: arial / * La fuente es arial */

}

Te sugiero que vayas aquí para estudiar:

/jxc1/wshdsh/webstyle/ computer/cssd/index.htm

/w3/css/css-syntax.htm

Referencia: /htmldata/2006-03-29/1143593476.html