Cada vez más gente lo llama hoja de estilo.
Es una herramienta para diseñar estilos de páginas web.
Con la ayuda de las poderosas funciones de CSS,
Las páginas web cambiarán constantemente bajo tu rica imaginación.
En Baidu Space, puedes modificar la plantilla personalizada según tu propio estilo y aficiones. Gracias,
Se requiere conocimiento de las propiedades CSS para personalizar las plantillas.
Explicación y ejemplos de funcionalidad de propiedades con nombres comunes y sus valores
Clases de Color y Fondo
Color establece el color del texto.
#rgb
#rrggbb
rgb(255, 255, 255)
rgb(100%, 100%, 100% )h 1 {color: rojo}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255 , 0, 0)}
H1{color:rgb(100%, 0%, 0%)}
Color de fondo establece el color de fondo, el formato es el mismo que arriba. Texto {Color de fondo: rojo}
Texto {Color de fondo: #f00}
Texto {Color de fondo: #ff0000}
Texto {Color de fondo: rgb (255, 0, 0)}
Texto {Color de fondo: rgb (100%, 0%, 0%)}
Imagen de fondo Establece la imagen de fondo,
URL(/imageURL)body { back round-image:URL(/back . jpg);}
Repetición de fondo Establece si la imagen de fondo se repite:
Repetir- x(el eje X repite el arreglo);
Repetir-y (el eje Y repite el arreglo);
cuerpo sin repetición { background-repeat:repeat-x }
Texto {Background-repeat: no repetir;}
Background-attachment establece si la imagen de fondo se desplaza. El valor predeterminado es el desplazamiento.
Desplazamiento (Scroll)
Cuerpo fijo {Background-Attachment: Fixed;}
Background-position establece la posición donde comienza a aparecer la imagen de fondo o el color de fondo. mostrar, tomar El formato del valor es:
Arriba, abajo, izquierda, derecha, medio (con palabras clave)
70px 10px (con valor de longitud)
50 % 30% (porcentaje) cuerpo {posición de fondo: arriba derecha;}
cuerpo {posición de fondo: 50px 10px;}
cuerpo {posición de fondo: 20% 50%;}
El fondo define los atributos completos del fondo. El orden no es obligatorio y los valores de los atributos están separados por espacios. Texto {Fondo: #ffcc00 url(/bg.jpg) centro fijo}
Categoría de fuente
La familia de fuentes establece los atributos de fuente. El valor puede ser cualquier nombre de fuente. De forma predeterminada, es una fuente definida por el navegador; varias fuentes se pueden separar mediante comas (,). Las fuentes en inglés con espacios se pueden encerrar entre comillas simples o dobles.
P{font-family: 宋体, cursiva, negrita, "Era New Rom";}
Estilo de fuente establece el estilo de fuente: Normal, cursiva, objlique(italic)P { font-style:italic; }
Valor de variante de fuente: Normal (predeterminado), versalitas (si es una fuente china, la fuente se reducirá y se mostrará, si es inglés, todo se cambiará a minúsculas) H3 { font-variant: small-caps; }
El peso de la fuente establece el peso de la fuente, los valores son:
Normal (predeterminado), negrita, claro, borde, 100, 200...900.
Debido a los diferentes niveles soportados por los navegadores, normalmente sólo se utilizan dos atributos: normal y negrita. p { font-weight: negrita }
Tamaño de fuente establece el tamaño de fuente;
Tamaño absoluto: xx-pequeño, x-pequeño, pequeño, mediano, x -Grande, xx-Large;
Tamaño relativo: más grande, más pequeño;
Los números indican las unidades disponibles: puntos (pt), píxeles (px), pulgadas (in) y centímetros (cm);
También se puede expresar como porcentaje. H2 { font-size:36pt;}
p { font-size:200%;}
Fuente establece los atributos completos de la fuente, en el siguiente orden:
{ estilo de fuente variante de fuente peso de fuente tamaño de fuente/alto de línea familia de fuente;} P{influencia en negrita 12 pt/14 pt, Arial}
Clase de carácter
Configuración de espaciado entre letras El espaciado entre palabras. p {Espaciado entre letras: 5pt}
Configuración de modificación de texto efectos de subrayado y tachado:
Ninguno (ninguno)
Subrayado (subrayado)
Sobrelínea (overline)
A través de línea
Alineación vertical Establece la alineación vertical del texto o imágenes:
Línea base: Valor predeterminado sub :subscript super:superscript top : medio alineado verticalmente: inferior centrado verticalmente: alineado verticalmente hacia abajo.
La conversión de texto convierte las letras mayúsculas y minúsculas de las letras inglesas:
Ninguno: valor predeterminado Mayúsculas: mayúsculas Mayúsculas: todas las letras inglesas en mayúsculas Minúsculas: todas las letras en inglés en minúsculas.
La alineación del texto establece la alineación horizontal del texto:
Izquierda: Alineado a la izquierda Derecha: Alineado a la derecha Centro: Centrado horizontalmente Positivo: Alineado a la izquierda.
Text-indent establece la sangría de la primera línea de texto en el elemento de marcado, o utiliza el atributo de margen izquierdo para establecer la protrusión de la primera línea.
Line-height establece la altura de la línea, que se puede declarar en altura de línea estándar, representación de valor fijo, porcentaje de altura de línea, relación de tamaño de fuente, altura de línea, etc.
Clase de lista
Método de numeración de lista ordenada de tipo estilo de lista (para
Ninguno: decimal sin signo: números arábigos romanos inferiores: números romanos minúsculas romano: números romanos en mayúsculas alfa-inferior: letras inglesas minúsculas alfa-superior: letras inglesas mayúsculas
Tipo de estilo de lista Estilo de símbolo de lista desordenada (usado para
Ninguno: Disco sin firmar: lleno. símbolo de círculo círculo: símbolo de círculo abierto cuadrado: símbolo de cuadrado relleno
Imagen de estilo de lista Estilo de símbolo personalizado para lista desordenada:
Formato: url(imagen. nombre)UL { estilo-lista- imag:URL(/DD . gif);}
List-style-position establece el atributo de sangría del símbolo de lista:
Exterior: interior convexo :indent UL { estilo de lista -imag:URL(/DD . gif); list-style-position: external; }
Configuración integral del estilo de lista de los elementos de la lista, utilizada entre atributos separados por espacios.
UL{list-style-imag: inside url(/dd.gif);}
Límite y sus clases relacionadas
Configuración integral del valor del límite del elemento de marca de margen. (Consulte el ejemplo a la derecha para ver las reglas).
También puede establecer los límites de cada lado por separado usando los márgenes superior, derecho, inferior e izquierdo. Declare cuatro valores en el orden de los bordes superior, derecho, inferior e izquierdo, como div { margin:12pt 15pt 20 pt 16pt;}
Declare tres valores en el orden superior, derecha e inferior, y tome los valores faltantes. El lado opuesto (derecha) del borde izquierdo, como div {margin:12pt 15pt 16pt;}
Declare dos valores, en orden superior y derecho, y tome el lado opuesto de los bordes inferior e izquierdo que faltan, como div { margin:12pt 15pt;}
Si se declara 1 valor, entonces los cuatro bordes tendrán el mismo valor, como DIV { margin:15pt;}
El relleno establece el contenido de la marca. Configuraciones integrales para el margen entre el marcado y los bordes del marcado (consulte ejemplos del atributo de margen para conocer las reglas). También puede establecer valores separados para el relleno superior, el relleno derecho, el relleno inferior y el relleno izquierdo.
Ancho de borde es una configuración integral del ancho del borde del elemento de marca (las reglas son similares al atributo de margen). También puede establecer los valores para el borde superior, el borde derecho, el borde inferior y el borde izquierdo respectivamente.
Border-color es una configuración integral del color del borde del elemento de marca (las reglas son similares al atributo de margen). Consulte Propiedades de color para conocer los valores de color. También puede establecer valores separados para el color superior del borde, el color del borde derecho, el color del borde inferior y el color del borde izquierdo.
El estilo de borde es una configuración integral del estilo de borde del elemento de marca (las reglas son similares al atributo de margen). Los estilos de borde incluyen línea sólida, línea doble, polilínea, cresta, línea de inserción, contorno, etc. También puede establecer valores para los estilos de borde superior, derecho, inferior e izquierdo individualmente.
Configuración completa para los cuatro bordes del elemento de marca de borde, que puede declarar por separado el ancho, el estilo y el color del borde. DIV { border:5pt solid # ff 0000; }
Ancho establece el ancho del elemento de marcado.
Altura establece la altura del elemento de marcado.
Float establece la posición relativa entre el elemento de marca y el texto (ajuste de texto). Valor:
Ninguno: se muestra de forma predeterminada;
Izquierda: marca el elemento a la izquierda y ajusta el texto a la derecha
Derecha: marca el elemento; a la derecha, el texto se ajusta a la izquierda;
Borrar establece la posición relativa entre el elemento de marca y el texto (a diferencia de flotante, el elemento de marca no se ajusta en ambos lados). Valor:
Ninguno: se muestra de forma predeterminada;
Izquierda: el elemento de marca está a la izquierda y no hay texto ajustado a la derecha;
Derecha; : El elemento de marca está a la derecha y no hay texto a la izquierda. Salto de línea;
Otras categorías
El índice Z establece el nivel de apilamiento de los elementos de marca. El valor puede ser un número entero o negativo, estando el valor máximo en el nivel superior.
La visibilidad establece si el elemento de marca es visible, el valor es:
Heredar: el valor predeterminado es visible:visible oculto:invisible (oculto).
Esta tabla solo enumera las propiedades CSS más utilizadas y presenta brevemente sus funciones principales. Para conocer todas las propiedades y el uso específico, consulte los libros pertinentes. Por supuesto, la práctica es la mejor manera de mejorar.