¿Qué es el código CSS?
¡Traduce el chino a hojas de estilo! Su función es simplemente permitirle utilizar diferentes estilos de hipervínculo en la misma página.
Lo que es aún más sorprendente es que usando CSS, puedes cambiar la apariencia de cientos de páginas web cambiando un archivo... actuaciones personalizadas sin perder visitantes... todo gracias a las hojas de estilo de la página web. Funciones potentes y flexibles.
1 sintaxis. CSS:
La definición de CSS consta de tres partes:
Selectores, atributos y valores de atributos.
Sintaxis: selector {propiedad: valor} (selector {propiedad: valor})
Descripción:
Los selectores pueden tener muchas formas, generalmente es HTML etiqueta en la que desea definir el estilo, como BODY, p, table, etc. Puede definir sus propiedades y valores a través de este método, y las propiedades y valores deben estar separados por dos puntos:
Ejemplo: cuerpo {color: negro}, el efecto de este ejemplo es convertir el texto de la página en negro.
Si el valor de un atributo consta de más de una palabra, el valor debe ir entre comillas. Por ejemplo, el nombre de una fuente suele ser una combinación de varias palabras:
Ejemplo: p {font-family: "sans serif"} (definir una fuente de 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 párrafo El texto en es rojo)
2. Grupo de selectores
Puede combinar selectores con las mismas propiedades y valores, y separar los selectores con comas, lo que puede reducir la duplicación de estilos. :
H1, H2, H3, H4, H5, H6 {color: verde} (Este grupo incluye todos los elementos del encabezado y el texto de cada elemento del encabezado es verde).
p, table {font-size: 9pt} (el tamaño del texto en párrafos y tablas es 9pt)
El efecto es exactamente el mismo que:
p { font-size: 9pt }
Tabla { font-size: 9pt }
3. Selector de categorías
Usando el selector de clases, se muestran los mismos elementos. clasificados en diferentes estilos. Al definir un selector de clases, agregue un punto antes 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:
right{text-align: right}
center {text- align: center}
Entonces no lo uses en diferentes párrafos, solo agrega el parámetro de clase que definiste en la etiqueta HTML:
Alinea este párrafo a la derecha.
Este párrafo está dispuesto en el medio.
Otro uso de los selectores de clases es omitir el nombre de la etiqueta HTML en el selector, de modo que se puedan definir varios elementos diferentes con el mismo estilo:
. center {text-align: center}(Definición. Centrar el texto como centro)
Esta clase se puede aplicar a cualquier elemento. Clasifiquemos el elemento h1 (título 1) y el elemento P (párrafo) como "centro" para que los estilos de ambos elementos sigan el selector de clase "centro":
& lth1 class=" center " > Este título está ordenado en el medio
& ltp class="center " >Este párrafo también está ordenado en el medio
Nota: Este tipo de selector de clases que omite etiquetas HTML es el Método CSS más utilizado. Con este enfoque, podemos aplicar fácilmente estilos de clase predefinidos a cualquier elemento.
4. Selector de ID
En una página HTML, el parámetro ID especifica un único elemento y el selector de ID se utiliza para definir un estilo separado para ese único elemento.
La aplicación del selector de ID es similar al selector de clases, siempre que la clase sea reemplazada por el ID.
Reemplace la clase en el ejemplo anterior con el ID:
Alinee este párrafo a la derecha.
Defina un selector de ID agregando el símbolo "#" antes del nombre del ID. Al igual que los selectores de clases, hay dos formas de definir las propiedades de los selectores de ID. En el siguiente ejemplo, el atributo ID coincidirá con todos los elementos con id="intro ":
#Introduction
{
font-size:110%;
Peso de fuente: negrita;
Color: # 0000ff
Color de fondo: transparente
} (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 #Introducción
{
Tamaño de fuente: 110%;
Peso de fuente: negrita;
Color: # 0000ff
Color de fondo: Transparente
}
Nota: El selector de ID es muy limitado y solo puede definir el estilo de un elemento de forma independiente, y generalmente solo se usa en circunstancias especiales.
5. Incluyendo selectores
La hoja de estilo que contiene la definición de relación se puede usar para un solo elemento, y el elemento 1 contiene el elemento 2. Este método solo está definido para el elemento 2 dentro del elemento 1, y no está definido para un solo elemento 1 o elemento 2, por ejemplo:
Tabla a
{
font- size: 12px
}
El estilo de los enlaces en la tabla se ha cambiado para que el tamaño del texto sea 12px, mientras que el texto de los enlaces fuera de la tabla sigue siendo el tamaño predeterminado.
6. Hojas de estilo en cascada
La cascada es herencia. La regla de herencia de las hojas de estilo es que el estilo del elemento externo se conservará y se heredará a otros elementos contenidos en este elemento. De hecho, todos los elementos anidados dentro de un elemento heredarán los valores de propiedad especificados por el elemento externo y, a veces, muchas capas de estilos anidados se apilarán una encima de otra a menos que se cambie lo contrario. Por ejemplo, anidar etiquetas p en etiquetas DIV:
div {color: red-size:9pt}
......
Esto El texto es el número rojo 9.
(El contenido del elemento p heredará las propiedades definidas por el DIV).
Nota: en algunos casos, el selector interno no heredará el valor del selector circundante. pero en teoría estos son especiales. Por ejemplo, los valores del atributo cap no se heredarán. Intuitivamente, los párrafos no tendrán el mismo límite superior que el cuerpo del documento.
Además, cuando la herencia de la hoja de estilo entra en conflicto, el último estilo definido siempre tiene prioridad. Si el color de p se define en el ejemplo anterior:
div {color: red; font-size:9pt}
p {color: blue}
...
Este texto es el número 9 en azul.
Podemos ver que el tamaño del texto del párrafo es 9, heredando el atributo div, y el atributo de color se define en base a la definición final.
Cuando diferentes selectores definen el mismo elemento, se debe considerar la prioridad entre diferentes selectores. Los selectores de ID, los selectores de clase y los selectores de etiquetas HTML tienen la máxima prioridad porque los selectores de ID se agregan al elemento en último lugar, seguidos de los selectores de clase. Si quieres trascender la relación entre los tres, ¡puedes usarlo! Consejo importante: aumenta la prioridad de tu hoja de estilo, por ejemplo:
p { color: #FF0000! Información importante}
. Azul { color: #0000FF}
#id1 { color: #FFFF00}
Agregamos estos tres estilos simultáneamente a un párrafo de la página, que eventualmente seguirá ¡Activado! El selector de etiquetas HTML para declaraciones importantes tiene un estilo con texto rojo. ¡Si te lo quitas! Es importante que el texto amarillo se seleccione en función del ID con mayor prioridad.
7. Nota: /*...*/
Puedes insertar comentarios en CSS para explicar el significado del código. Los comentarios le ayudan a usted o a otras personas a comprender el significado del código cuando lo edita y cambia posteriormente. 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
{
Alineación del texto: centrado; /*Texto centrado*/
Color: negro /*El texto es negro*/
Familia de fuentes: arial /* El la fuente es arial */
}
Te sugiero que estudies aquí:
/jxc 1/wsh dsh/web style/computer/cssd/index.
/w3/CSS/CSS-syntax.htm
Materiales de referencia:
/html data/2006-03-29/1143593476. >