El nombre completo de CSS es Hoja de estilos en cascada. Hojas de estilo en cascada.
1. Cuatro métodos de implementación de CSS:
1. Tipo incrustado:
2. Tipo de enlace externo:
3. Tipo importado
4. Tipo de atributo:
2. Definición de CSS:
Seleccionar objeto {atributo 1: valor 1; atributo 2: valor 2; atributo 3: valor 3; valor n...}
como:
td{font-size:12px;color:#FFFF00}
.minombre{font-size:12px;color:#FFFF00}
a:hover{font-size:12px;color:#FFFF00;text-decoration: underline;}
Tres objetos de selección.
1.Selector HTML (Nombre de etiqueta)
2.selector de clase (.NAME)
3.Selector de ID (#IDname)
4. Objetos especiales (a:hover a:link a:visited a:active)
1.Selector HTML
El selector HTML es el carácter de marcado de HTML, como: DIV, TD, H1. El alcance del selector HTML son todas las etiquetas en todas las páginas a las que se aplica el estilo.
ejemplo:
td
{
color: #FF0000;
}
-->
Nota: La función del código es convertir automáticamente en rojo el texto de las celdas de la tabla.
2.selector de clase
Para definir un selector de clase, debe agregar un punto "." a su nombre. Como ".nombre de clase". El alcance del selector de clases son todas las etiquetas que contienen "class="classname"".
ejemplo:
.fontRed
{
color: #FF0000;
}
-->
Nota: No hay "class="fontRed"" en el segundo, por lo que el texto no se vuelve rojo.
3.Selector de identificación
Para definir un selector de ID, debe agregar un punto "#" a su nombre. Como "#IDnombre". El alcance del selector de ID son todas las etiquetas que contienen "ID="nombre de clase"".
Ejemplo:
#fontRed
{
color: #FF0000;
}
-->
Nota: No hay "ID="fontRed"" en el segundo, por lo que el texto no se vuelve rojo.
4. Objetos especiales Hay cuatro tipos de objetos especiales, que se configuran para objetos vinculados:
a: hipervínculo flotante cuando se mueve el mouse
a:link hipervínculo normal y no accesible
a: hipervínculo visitado visitado
El alcance del objeto especial a:active hipervínculo cuando se hace clic con el mouse es todos los marcadores (esta oración está sujeta a discusión, porque pronto habrá un método para anular la palabra "todos").
ejemplo:
a: flotar
{
color: #0000FF;
decoración de texto: subrayado;
}
-->
Presta atención a lo siguiente, ¡es muy útil! ! !
a.nombre de clase: flotar
a#IDname:pase el cursor
Estos dos métodos de escritura se utilizan con .classname y #IDname respectivamente. Su alcance se convierte en todas las etiquetas que contienen "class="classname"" o "ID="IDname"". Este método de escritura puede ayudarlo a lograr múltiples efectos de desplazamiento en la misma página. Puede observar la diferencia entre el texto de la barra de navegación en la página de inicio de Yiwang y el título del artículo normal cuando pasa el mouse sobre él.
4. Aplicación:
1. Aplicar marcadores automáticamente
2. Clase especial clase = "NOMBRE"
3.ID ID="nombre de ID"
4. Los objetos especiales se aplican automáticamente 5. Propiedades CSS
Existen muchas propiedades CSS, como por ejemplo color, que es la más utilizada anteriormente, indica el color del texto. color de fondo representa el color de fondo. Esto es lo más importante, pero como no es difícil, basta con consultar el manual correspondiente.
Propiedades de etiquetas CSS/Referencia de propiedades Aquí hay una lista de propiedades de etiquetas de hojas de estilos (CSS) actualmente admitidas.
Atributos de etiqueta CSS/atributos
comportamiento atributos comportamiento
fuente y atributo de texto dirección
dirección [di?rek??n] guía
fuente
familia de fuentes
tamaño de fuente
estilo de fuente
variante de fuente [?v??ri?nt] variante
peso de fuente [weit] peso
modo ime-modo [m?ud]
diseño-cuadrícula [?leiaut] diseño tipográfico [ɡrid] cuadrícula
diseño-grid-char [t?ɑ:](quemar..)
línea de cuadrícula de diseño
modo-cuadrícula-diseño
tipo de cuadrícula de diseño
espaciado entre letras [?let?] espaciado entre letras [?speisi?]
salto de línea [breik] salto
altura de línea [hait] altura
altura mínima
rubí-alinear [?ru:bi] rubí
saliente de rubí [??uv??hæ?] sobresale
posición-rubí [p??zi??n] posicionamiento
alineación de texto
text-autospace [speis] espaciado automático
decoración de texto [?dek??rei??n] decoración
sangría de texto [in?dent] composición tipográfica de sangría
alineación de justificación de texto [?d??stifai]
texto-kashida-espacio
desbordamiento de texto [??uv??fl?u] desbordamiento
transformación de texto [træns?f?:m] cambio
posición-subrayado-texto
Unicode-bidi [?bi:di]
alineación vertical
espacio en blanco
salto de palabra
ajuste de palabras
del modo de escritura
y adjunto de fondo.
color de fondo
imagen de fondo
posición de fondo
posición-de-fondo-x
posición-de-fondo-y
repetición de fondo
borde de atributo de diseño
de color
borde inferior
color-borde-inferior
estilo de borde inferior
ancho-inferior-del-borde
colapso de fronteras*
color del borde
frontera-izquierda
color-borde-izquierdo
estilo borde izquierdo
ancho-frontera-izquierda
frontera-derecha
color-borde-derecho
estilo de borde derecho
ancho-frontera-derecha
estilo de borde
borde superior
color superior del borde
estilo de borde superior
ancho superior del borde
ancho de frontera
claro
flotar
flujo de diseño
margen
margen inferior
margen izquierdo
margen derecho
margen superior
relleno
fondo acolchado
relleno-izquierda
relleno-derecha
tapa acolchada
barra de desplazamiento-3dcolor-luz
color-flecha-barra-desplazamiento
color-base-de-la-barra-de-desplazamiento
barra de desplazamiento-color-sombra-oscura
color-de-la-cara-de-la-barra-de-desplazamiento
color-resaltado-de-la-barra-de-desplazamiento
barra de desplazamiento-color-sombra
diseño de mesa
estilo de lista
de visualización del atributo de clasificación
de zoom
imagen-estilo-lista
posición-estilo-lista
clip
inferior del atributo de posicionamiento
del tipo de estilo de lista
altura
izquierda
rebosar
desbordamiento-x
desbordamiento-y
posición
bien
arriba
visibilidad
ancho
página de atributos de impresión
del índice z
pageBreakAfter
pageBreakBefore
filtro de atributos
pseudoclase y otros atributos: activo
@charset
cursor
:primera letra
:primera línea
@fuente-cara
:flotar
@importar
!importante
:enlace
@medios de comunicación
@página
:visitado
formas principales de lograr efectos de borde de imagen CSS
. El método más simple es definir directamente el borde para img en el archivo CSS. Por ejemplo, lo definí en CSS:
img.enmarcado {
relleno: 6px;
borde: 1px sólido #CCCCCC;
color de fondo: #FFFFFF;
Luego, en el archivo HTML, o cuando se actualice la página web, el uso de class="framed" para la definición de imagen incrustada tendrá el efecto de borde correspondiente.
La ventaja del método anterior es que es relativamente simple, pero el efecto logrado es relativamente monótono y no necesariamente puede lograr resultados satisfactorios y algunos efectos especiales, como sombras, cambios de color, etc. Esto se puede hacer muy bien mediante la sustitución de imágenes y la traducción de posicionamiento. No entraré en detalles aquí. Creo que una vez que aprenda CSS básico, no será difícil desafiar efectos CSS más avanzados.
Clasificación de la sintaxis CSS para los bordes de las tablas
Sabemos que Dreamweaver hace un gran trabajo al crear tablas, pero en algún momento todavía debe combinarse con CSS para lograr algunos efectos específicos. Y luego preséntalo por separado Cómo embellecer el borde de una tabla usando CSS.
Lasintaxis CSS específica para los bordes de la tabla
incluye: ancho del borde superior, ancho del borde derecho, ancho del borde inferior, ancho del borde izquierdo, ancho del borde, color del borde, estilo del borde, borde superior, borde inferior, borde izquierdo, borde derecho, borde, ancho, altura, etiquetas relacionadas, etc.
1. Sintaxis del ancho del borde superior
: border-top-width: <valor>
Valores permitidos: delgado | medio grueso |
valor inicial: medio
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
El atributo de ancho del borde superior se utiliza para especificar a El ancho del borde superior del elemento. El valor puede ser una de tres palabras clave, ninguna de las cuales se ve afectada por el tamaño o la longitud de la fuente, y se puede utilizar para implementar anchos proporcionales. No se permiten valores negativos. También se puede utilizar para abreviar el borde superior, el ancho del borde o las propiedades del borde.
2. Sintaxis del ancho del borde derecho
: ancho-derecho del borde: <valor>
Valores permitidos: fino | medio grueso |
Valor inicial: medio
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
El atributo de ancho del borde derecho se utiliza para especificar el elemento El ancho del borde derecho. El valor puede ser una de tres palabras clave, ninguna de las cuales se ve afectada por el tamaño o la longitud de la fuente, y se puede utilizar para implementar anchos proporcionales. No se permiten valores negativos. También se puede utilizar para abreviar el borde derecho, el ancho del borde o las propiedades del borde.
3. Sintaxis del ancho del borde inferior
: border-bottom-width: <valor>
Valores permitidos: delgado | medio grueso | <longitud>
Valor inicial: medio
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
El atributo de ancho del borde inferior se utiliza para especificar el elemento El ancho del borde inferior. El valor puede ser una de tres palabras clave, ninguna de las cuales se ve afectada por el tamaño o la longitud de la fuente, y se puede utilizar para implementar anchos proporcionales. No se permiten valores negativos. También se puede utilizar para abreviar el borde inferior, el ancho del borde o las propiedades del borde.
4. Sintaxis del ancho del borde izquierdo
: border-left-width: <valor>
Valores permitidos: delgado | grueso <longitud>
Valor inicial: medio
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
El atributo de ancho del borde izquierdo se utiliza para especificar el elemento El ancho del borde izquierdo. El valor puede ser una de tres palabras clave, ninguna de las cuales se ve afectada por el tamaño o la longitud de la fuente, y se puede utilizar para implementar anchos proporcionales. No se permiten valores negativos. También se puede utilizar para abreviar el borde izquierdo, el ancho del borde o las propiedades del borde.
5.
Sintaxis del ancho del borde: ancho del borde: <valor>
Valores permitidos: [ fino | grueso | <largo> ]{1,4}
Valor inicial: Indefinido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: Sin
atributo de ancho del borde límites del elemento con uno a cuatro valores, donde el valor es una palabra clave o longitud. No se permiten longitudes negativas. Si se dan los cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo respectivamente. Si se proporciona un valor, se aplicará a cada borde. Si se dan dos o tres valores, el valor omitido es igual al lado opuesto. Esta propiedad es una abreviatura de las propiedades superior, derecha, inferior e izquierda. También puede utilizar el atributo de borde abreviado.
6.
Sintaxis del color del borde: color-borde: <valor>
Valores permitidos: <color>{1,4}
Valor inicial: El valor del atributo de color
es aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
El atributo de color del borde establece el borde color de un elemento. Puede utilizar de una a cuatro palabras clave. Si se dan los cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo respectivamente. Si se da un valor, se aplicará a cada borde. Si se dan dos o tres valores, el valor omitido es igual al lado opuesto. También puede utilizar el atributo de borde abreviado.
7. Sintaxis de estilo de borde
: estilo de borde: <valor>
Valores
permitidos: [ninguno
| punteado | borde sólido | inicio de ranura |
con: No
La propiedad border-style se utiliza para establecer el estilo del borde de un elemento. Esta propiedad debe usarse para especificar un borde visible. Puede utilizar de una a cuatro palabras clave. Si se dan los cuatro valores, se aplican a los estilos de borde superior, derecho, inferior e izquierdo respectivamente. Si se da un valor, se aplicará a cada borde. Si se dan dos o tres valores, el valor omitido es igual al lado opuesto. También puede utilizar el atributo de borde abreviado.
ninguno: sin estilo;
punteado: línea punteada;
discontinuo: línea discontinua;
sólido: línea continua;
doble: doble línea;
surco: línea de surco;
cresta: cresta;
recuadro: cóncavo;
Inicio: convexo.
8.
Sintaxis del borde superior: border-top: <valor>
Valores permitidos: <ancho del borde superior> || <estilo de borde> || <color>
Valor inicial: No definido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
Atributo del borde superior Es un abreviatura para establecer el ancho, estilo y color del borde de un elemento. Tenga en cuenta que sólo se puede dar un estilo de borde. También puede utilizar el atributo de borde abreviado.
9. Sintaxis del borde derecho
: borde-derecho: <valor>
Valores permitidos: <ancho del borde derecho> || <estilo de borde> || <color>
Valor inicial: No definido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
Atributo del borde derecho Es un abreviatura para establecer el ancho, estilo y color del borde derecho de un elemento. Tenga en cuenta que sólo se puede dar un estilo de borde. También puede utilizar el atributo de borde abreviado.
10. Sintaxis del borde inferior
: border-bottom: <valor>
Valores permitidos: <Ancho del borde inferior> || <Estilo de borde> || <Color>
Valor inicial: Indefinido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
Atributo del borde inferior Es un abreviatura para establecer el ancho, el estilo y el color del borde inferior de un elemento. Tenga en cuenta que sólo se puede dar un estilo de borde. También puede utilizar el atributo de borde abreviado.
11.
Sintaxis del borde izquierdo: border-left: <valor>
Valores permitidos: <ancho del borde izquierdo> || <estilo de borde> || <color>
Valor inicial: Indefinido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
Propiedad del borde izquierdo Es un abreviatura para establecer el ancho, estilo y color del borde izquierdo de un elemento. Tenga en cuenta que sólo se puede dar un estilo de borde. También puede utilizar el atributo de borde abreviado.
12.
Sintaxis del borde: borde: <valor>
Valores permitidos: <ancho del borde> || <estilo de borde> || <color>
Valor inicial: No definido
Aplicable a: Todos los objetos
Compatibilidad con versiones anteriores: No
La propiedad del borde es una configuración el ancho, estilo y color del borde de un elemento.
Ejemplos de declaraciones de fronteras incluyen:
H2 { border: groove 3em }
A: enlace {borde: azul sólido}
A: visitado {borde: punto fino #800080}
A:active { borde: rojo doble grueso }
El atributo de borde solo puede establecer cuatro tipos de bordes y solo puede proporcionar el ancho y el estilo de un conjunto de bordes; Para poder dar valores diferentes a los cuatro bordes de un elemento, los creadores de páginas web deben utilizar uno o más atributos, tales como: borde superior, borde derecho, borde inferior, borde izquierdo, color de borde, ancho de borde, estilo de borde, Ancho del borde superior, ancho del borde derecho, ancho del borde inferior o ancho del borde izquierdo.
13.
Sintaxis de ancho: ancho: <valor>
Valores permitidos: <longitud> | <porcentaje> | auto
Valor inicial: auto
Aplicable a: Nivel de bloque y elementos de reemplazo
Compatibilidad con versiones anteriores: No
El valor inicial del atributo ancho es "auto", es decir, es el ancho original del elemento (existe el ancho del elemento en sí). El porcentaje se refiere al ancho del elemento principal. No se permiten valores de longitud negativos.
14.
Sintaxis de altura: altura: <valor>
Valores permitidos: <longitud> | auto
Valor inicial: auto
Aplicable a: nivel de bloque y elementos de reemplazo
Compatibilidad con versiones anteriores: No
El valor inicial del atributo de altura es "auto", que es el del elemento La altura original (está la altura del propio elemento). El porcentaje se refiere al ancho del elemento principal. No se permiten valores de longitud negativos.
15. Con respecto a la
etiqueta de la tabla de etiquetas, la definición de todo el estilo de la tabla debe colocarse en la tabla;
td etiqueta de celda, la definición del estilo de celda debe colocarse en td.
BODY es el elemento principal del documento web. Todos los rangos visibles están dentro del elemento <BODY>.
BOTÓN El botón del campo del formulario puede tener la forma de "enviar", "restablecer", etc.
DIV define un área en la página web. La altura, el ancho o la posición absoluta de esta área se conocen por.
Elemento de imagen IMG, especifique la fuente de la imagen especificando el atributo "src"
ENTRADA campo de formulario de entrada
Efecto de subtítulo en movimiento MARQUEE
SPAN define un área en la página web. La altura, el ancho o la posición absoluta de esta área se conocen por.
Área de texto TEXTAREA
Cuadro de texto de entrada de varias líneas TFOOT
Celda de encabezado de tabla TH
Título de la tabla THEAD
Fila de la tabla TR