¿Cuáles son las reglas CSS que se pueden utilizar y cuáles son las funciones de estas reglas?
En primer lugar, haga un buen uso de las reglas de abreviatura de CSS
/*Preste atención al orden de escritura arriba, abajo, izquierda y derecha*/
1. Acerca de los márgenes de la página (4 lados):
1px 2px 3px 4px (arriba, derecha, abajo, izquierda)
1px 2px 3px (omitiendo izquierda es igual a derecha) )
1px 2px( Omitir la parte superior es igual a la inferior)
1px (igual en los cuatro lados)
2 Simplifica todo:
*/ body{margin:0} - representa todo lo que hay en la página web. Los márgenes de los elementos son todos 0.
# menu {margin: 0}: indica que el margen de todos los elementos debajo del cuadro de menú es 0.
3. Estilo específico de abreviatura (borde):
Borde: 1px sólido # ffffff
ancho del borde: 0 1px 2px 3px
<; p>4. Acerca de las reglas de abreviatura de palabras:Estilo de fuente: cursiva; forma cursiva
Variante de fuente: versalitas/normal; >
Peso de fuente: negrita;
tamaño de fuente: 12 px;
alto de línea: 1,2 em (120 %)/1,5 em (150 %); p>
Familia de fuentes: Arrival, sans-serif, verdana
Abreviatura:
Fuente: cursiva, versalitas, negrita 12px/1.5 emial, sans serif
<; p>Nota: El tamaño de fuente y la altura de la línea se combinan con barras y no se pueden escribir por separado.5. Acerca de la imagen de fondo:
Fondo: URL #FFF (log.gif), sin duplicación, esquina superior izquierda fija;
6. la lista:
p>Tipo de estilo de lista: cuadrado/ninguno
Posición de estilo de lista: interna
imagen de estilo de lista: URL(nombre de archivo . gif);
La abreviatura es:
Estilo de lista: Ninguno en la URL (nombre de archivo.gif)
En segundo lugar, se utilizan cuatro métodos para introducir estilos CSS.
1.link
& ltlink rel = " hoja de estilo " type = " text/CSS " href = " a . CSS " >>p>
Relación relativa
Tipos de tipos de datos, hay muchos tipos.
Ruta href
Algunos navegadores admiten estilos candidatos. Palabras clave: Alternativa:
& ltlink rel = " hoja de estilo " type = " text/CSS " href = " a . CSS "
& ltlink rel = " hoja de estilo alternativa " type = " text/CSS " href = " b . CSS " >>p>
& ltlink rel = " hoja de estilo alternativa " type = " text/CSS " href = " c . CSS " >> p>
2. Bloque de estilo interno
& ltstyle & gt
& lt! –
h 1 {Color: rojo;}
–& gt;
& lt/estilo & gt;
3. @import
@importurl{a.css}
Nota: Esta descripción debe colocarse
Se recomienda colocarla en el comentario html.
4. Estilo en línea
& ltp style = "color:red;"& gt
El selector es un concepto básico de CSS. sigue :
1. Estructura de reglas:
h 1 {Color: rojo;}
Selector {Atributo: valor;}
Esta clase es un selector de elementos que básicamente puede contener todos los elementos html.
El valor del atributo puede contener varios elementos, como: borde:1px solidred
Sintaxis común
1) Agrupación:
Seleccionar; Los selectores y las declaraciones se pueden agrupar:
h1, h2, h3 {color: rojo; fondo: #fff}, los selectores están separados por "," y los atributos están separados por ";"
2) Selector de clase, es decir, declarado a través de la aplicación class="stylename"
Definición:
. nombre de estilo { color: rojo }
Nota:
Puedes utilizar varios tipos de selectores en HTML: por ejemplo, class = "cn1cn2cn3".
3) selector de id, es decir, el estilo correspondiente al atributo id.
Definición:
# a {Color: rojo;}->Esta definición se refiere al elemento con ID = "a"
2. es nuestra sintaxis CSS común. Hablemos de la sintaxis del selector que no usamos con frecuencia.
1) Estructura padre-hijo, correspondiente al diagrama de estructura del documento.
Por ejemplo, p span { border: 1px solidred } corresponde a
algunas aplicaciones especiales (compatibles con IE7):
(1)p & gt. ; Span {}, coincide con todos los spans bajo todas las p.
(2) p+span{}, coincide con la primera etiqueta span que aparece inmediatamente después del elemento p. Deben tener la misma etiqueta principal.
2) Selector de atributos: (Nota: el selector de atributos solo es compatible con IE7 y no es compatible con las siguientes versiones. Básicamente es compatible con otros navegadores)
Sintaxis: img[alt]{ border:1px solid;}
Representa una etiqueta img con atributo alt. Por supuesto, también puede admitir mapeo de atributos múltiples, como img[alt][title]{ }; Representa una imagen con ambos atributos marcados.
También puede corresponder a valores específicos, como img[alt = " fotografía "]{ };
Aplicación avanzada en selector de atributos, coincidencia especial:
(1) img [class ~ = "b"], ~ =: corresponde a un valor en el atributo, es decir, a
(2) [class = "a"], comenzando con a .
(3) [clase $ = "a"], terminando en a.
(4) [clase * = "a"], contiene uno.
(5) [clase | = "a"], igual o comenzando con a.
3) Pseudoclases y pseudoelementos
En el uso diario, son principalmente
and: first child: first: before: left: right: lang : Enfoque: línea de boxeo, etc.
Nota: Las pseudoclases dinámicas se pueden aplicar a cualquier elemento, como input:focus { background:red; cuando la etiqueta de entrada se enfoca, el fondo se vuelve rojo.
Al combinar la sintaxis anterior, se pueden lograr estilos precisos, simples e indirectos.
En tercer lugar, clasificación e integración del selector
La prioridad es la siguiente: estilo en línea>;etiqueta ID>Class>
Selector de etiquetas de selector básico (por ejemplo:
Selector de categoría (por ejemplo: clase)
Selector de ID
Selector de compuestos
Compuesto "Intersección" El selector (por ejemplo: p.menu {color:rojo}) debe ser
combinación de etiqueta+categoría/ID
selector de compuesto para juntas (por ejemplo: h1, h2, h3 {color:rojo})
Selector compuesto "descendiente" (por ejemplo: #menu.menulist{...})
Selector compuesto "secundario" (por ejemplo: #menu.menulist .selecciónelo {...} )
Cuarto, utilice subselectores para reducir las definiciones de identificación y clase.
Estructura de ejemplo:
& ltdiv = " menu " & gt
& ltdiv class="menulist " >>p>
& ltdivclass="selectit " >contenido& lt/div & gt;
& lt/div & gt;
& lt/div & gt;
CSS de ejemplo:
#menu{...}
#Menu.MenuList...}
#Menú. Selecciónelo{...}
5. Utilice el selector de grupo para aplicar el mismo estilo a diferentes elementos.
Por ejemplo, H1, H2, H3, div { font-size:16px; font-weight:bold}
Luego, los estilos de los elementos H1, H2, H3 y div Son todos de fuente de 16 píxeles, fuente en negrita.
6. El uso combinado de pseudoclases y selectores
Al combinar pseudoclases y clases, podemos crear varios conjuntos de diferentes efectos de enlace en la misma página. Por ejemplo, definimos un conjunto de enlaces como rojos.
Azul después de la visita; el otro grupo es verde y amarillo después de la visita:
a.red:link {color: #FF0000}
a. rojo:Visitado {color: #0000FF}
a.blue:enlace {color: #00FF00}
a.blue:Visitado {color: #FF00FF}
Ahora se aplica a diferentes enlaces:
& lta class="red"href= " ... "& gtEste es el primer conjunto de enlaces
& lta class="blue " href= " ... "& gtEste es el segundo conjunto de enlaces
7. Principio de prioridad reciente de CSS
/*Si se define un estilo para un elemento varias veces, el el último nivel tendrá prioridad y el estilo del último nivel sobrescribirá otros estilos en línea>; ID & gtClass & gtMark*/
Lo siguiente es un fragmento de cita:
CSS:
p {Color: rojo}
. azul{color:azul}
. Amarillo{Color:amarillo}
HTML:
& ltp & gtAquí se muestra en rojo
& ltp class="blue " >Aquí se muestra en azul
& ltp class = " blue " style = " color:green " >Esto es verde
& ltp class="blue yellow " >Esto es amarillo
Nota:
(1) Preste atención a varios órdenes de prioridad de estilos (las prioridades disminuyen de arriba a abajo y los estilos a continuación cubren los estilos de arriba):
-Estilo de elemento settings
-Área de encabezado
-Archivo css de referencia externa
(2) La prioridad no se establece en el orden de acceso, sino en el css El orden de declaración está fijado.
Como en el ejemplo anterior
detrás.
8. Escriba el estilo de enlace correcto
Cuando utilice CSS para definir los distintos estados del enlace, preste atención al orden de escritura, es decir, utilice :link :visited : hover :active Las iniciales son: L V H A,
Puedes recordar el orden del amor, el odio y el odio a través de la memoria.
:Enlace-el color del enlace
:Visitado-el color después del clic del mouse.
:Hover-
:active-El color cuando se hace clic con el mouse.
9. Uso flexible de hover
IE6 no admite el atributo :hover, excepto la etiqueta A. Sabemos que el atributo de desplazamiento es el efecto del mouseover. En IE7 y FF, para casi cualquier elemento, puede configurar el efecto del atributo :hover. Esto funciona muy bien para nosotros para diferentes visitas.
Por ejemplo:
p {
Ancho: 360px
Alto: 80px
Relleno: 20px
p>Margen: 50px auto 0 auto
Borde: 1px sólido # ccc
Alto de línea: 25px
Fondo: # fff< /p >
}
Pase el cursor sobre {
Borde: 1px sólido # 000
Fondo: # ddd
}
-Este efecto es para IE7 y FF.
Ping An Insurance
Color: # 00f
Decoración del texto: ninguna;
Tamaño de fuente: 13px;
}
Desplazamiento{
Color: # 036;
Decoración del texto: subrayado
}
-Este efecto es para IE6.
10. Presta atención a los pequeños problemas a la hora de definir las etiquetas.
Cuando definimos un {color: rojo;}, representa el estilo de los cuatro estados de a. Si desea definir un estado en el mouse en este momento, entonces está definido.
a: Simplemente coloque el cursor. Los otros tres estados son...
Cuando solo se define un a:link, ¡se deben definir los otros tres estados!
11. Prohibir el ajuste de línea de contenido y forzar el ajuste de línea de contenido.
En tablas o capas, es posible que queramos que el contenido se ajuste o fuerce el ajuste. Podemos lograr estos requisitos a través de algunas propiedades CSS.
Sin nueva línea: en blanco: nowrap
Nueva línea forzada: separación de palabras: interrupción completa; en blanco: normal
12. >
El método de escritura en CSS absoluto es: posición: absoluta; significa posicionamiento absoluto. Señaló la esquina superior izquierda del navegador y cooperó.
Utilice arriba, derecha, abajo, izquierda (en lo sucesivo, TRBL) para el posicionamiento. Si TRBL no está configurado, se utilizará de forma predeterminada el marcador original basado en el marcador principal.
Punto original. Si se establece TRBL y el padre no establece una propiedad de posición, la posición absoluta actual se basa en la esquina superior izquierda del navegador.
El posicionamiento y ubicación serán determinados por TRBL.
Relativo: CSS se escribe como :position:relative; significa posicionamiento relativo absoluto. Llamó origen al origen de la matriz.
Si no hay un cuerpo principal, el origen de la geometría se utiliza como origen y TRBL se utiliza para el posicionamiento. Cuando hay atributos CSS como relleno en el nivel principal, el punto original del nivel actual se posiciona con referencia al punto original del área de contenido principal.
13. Distinga entre elementos a nivel de bloque y elementos en línea.
Nivel de bloque: se pueden definir el ancho y el alto, y se pueden usar líneas separadas (por ejemplo, divul).
en línea: el ancho y el alto no se pueden definir para elementos de texto (como el intervalo).
14. La diferencia entre visualización y visibilidad
Tanto display:none como visibilidad:hidden pueden ocultar elementos, pero visibilidad:hidden solo oculta el contenido del elemento, pero usa
El espacio de ubicación aún está reservado. Display:none, por otro lado, elimina el elemento de la página y también se elimina la posición que ocupaba.
15. Alguna sintaxis de fondo
Imagen de fondo: url (modo de fondo. jpg, gif, BMP);
Color de fondo: # FFFFFF (Color de fondo); )
Color de fondo: Transparente; <-Establezca el fondo en un color transparente->
Fondo: cambie repetidamente la configuración de yuxtaposición repetida de imágenes de fondo.
Explicación
Repetir imágenes de fondo una al lado de la otra
Repetir x imágenes de fondo una al lado de la otra en la dirección x.
Las imágenes de fondo repetidas están una al lado de la otra en la dirección y.
Las imágenes de fondo no duplicadas no se procesarán una al lado de la otra.
¿El fondo adjunto tiene una posición de imagen fija?
Explicación
Cuando el desplazamiento tira de la barra de desplazamiento, la imagen de fondo se mueve en consecuencia (valor predeterminado).
Cuando se tira fijamente de la barra de desplazamiento, la imagen de fondo no se moverá en consecuencia.
Posición fondo-posición: longitud x y.
Usa porcentaje para posicionar la posición del fondo: x% y%
Explicación
X% se mueve hacia la derecha
Y% se mueve abajo
Posición del fondo: 0% 0%; esquina superior izquierda
Posición del fondo: 0% 50% izquierda media
Posición del fondo: 50% 0%; ; medio Arriba
Posición de fondo: 50% 50%; justo en el medio
Posición de fondo: 100% 0% arriba a la derecha
Posición de fondo: 0 % 100% ;Esquina inferior izquierda
Posición del fondo: 100% 50%; Medio lado derecho
Posición del fondo: 50% 100% Inferior medio
Fondo posición: 100% 100%; abajo a la derecha
Posición por palabra clave
Descripción de la palabra clave
En la parte superior (y = 0)
En el centro ( x = 50, y = 50)
Abajo (y = 100)
Izquierda Izquierda (x= 0)
Exp:
Background-Position: Center;
La imagen está ubicada en el centro del fondo especificado en X=50% Y=50%.
Posición del fondo: 200 píxeles 30 píxeles
16. Escribir notas
En HTML:
& lt! -Pie de página->
Contenido
<! -Fin del pie de página->
En CSS:
/* -Título-*/
Estilo
Diecisiete . Convención de nomenclatura CSS
1 denominación.
Identificación (identificación)
(1) Estructura de la página
Contenedor: contenedor
Título: título
Contenido: contenido/contenedor
p>
Texto de página: Página principal
Pie de página: Pie de página
Navegación: Navegación
Barra lateral: Barra lateral
Columna: Columna
Ancho del diseño general del control periférico de la página: ajuste
Centro izquierdo y derecho
(2) Navegación
Navegación: Navegación
Navegación principal: Navegación principal
Subnavegación: subnav
Navegación superior: Navegación superior
Navegación lateral: Barra lateral
Navegación izquierda:Barra lateral izquierda
Navegación derecha:Barra lateral derecha
Menú:Menú
Submenú:Submenú
Título: Título
Resumen: Resumen
(3) Función
Logotipo: Logotipo
Publicidad: Banner
p>Iniciar sesión: Iniciar sesión
Iniciar sesión: Iniciar sesión
Registrarse: regsiter
Buscar: Buscar
Área funcional: Tienda
Título: título
Unirse: joinus
Estado: estado
2. Nombramiento de clase
(1) Color: use el nombre del color o el código de 16 hexadecimales, como
. rojo {color: rojo;}
f60 {color:# f60;}
(2). ) tamaño de fuente, use directamente "fuente + tamaño de fuente" como nombre, por ejemplo
fuente 12px { font-size:12px;}
fuente 9pt { font-size. :9pt;}
(3) Método de alineación, utilice el nombre en inglés del objetivo de alineación, como
. izquierda { float:izquierda }
. bottom { float: bottom; }
(4) Estilo de la barra de título, denominado mediante el método "categoría + función", como
. noticias de bar { }
. barproduct { }
Nota:
u está todo en minúsculas
Intentas usar inglés
u no tiene un medio; barra o subrayado ;
Las palabras compuestas U 2 pueden escribir en mayúscula la primera letra de la segunda palabra (como: contenido principal);) sin una barra central o subrayado;
Trate de no abreviar a menos que sea una palabra que puedas entender de un vistazo.
3. Archivo css del sitio principal
Master.css principal
Módulo module.css
Base.css básico compartido (root. CSS).
Diseño diseño.css
Temas.css
Columnas de columna.css
Fuente de texto.css
Formulario formularios.css
Parche css
Imprimir css
Dieciocho. El relleno afecta el ancho
Si un conjunto de etiquetas a anidar requiere algo de espacio, deje el atributo de margen de la etiqueta dentro en lugar de definir este bit.
Relleno fuera de la etiqueta
19. Tabla de contorno perfecta de un solo píxel
Tabla { border-collapse:collapse;}
TD { border: 1px solid # 000; }
20. Si el texto es demasiado largo, se mostrarán los puntos suspensivos de la parte demasiado larga.
& ltstyle = " ancho: 120 px; alto: 50px desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; espacio en blanco: nowrap "
21.
Cuando se define P {padding: 1px2p3x4px} antes de la hoja de estilo, se agregará un estilo con un relleno superior de 5px y un relleno inferior de 5px en proyectos posteriores.
6px . No necesitamos escribir p estilo 1 { Padding:5 px 6 px 3 px 4 px }. Se puede escribir como p . style 1 { padding top: 5px; padding-right: 6px}. Quizás pienses que escribir de esta manera no es tan bueno como el original, pero ¿alguna vez has pensado que tu método de escritura repite la definición?
¡Además, no tienes que buscar los valores originales de padding inferior y padding izquierdo! Si el estilo anterior p cambia más tarde, usted lo define.
El estilo de p.style1 también será cambiado. (Este método es muy importante para modificaciones posteriores de estilos).
Veintidós, varios estilos de procesamiento de detalles CSS de uso común
1) Alinee ambos extremos de los caracteres chinos: text-align :justificar; Alineación de texto: entre ideogramas;
2) Truncamiento de caracteres chinos de ancho fijo: desbordamiento: oculto; desbordamiento de texto: puntos suspensivos; no dejar que se ajuste, solo
Procesar el truncamiento de texto en una línea, no en varias líneas) (IE5 y superiores) FF no puede hacerlo, solo puede ocultarlo.
* * *Nueva línea forzada universal: en blanco: normal; separación de palabras: separación completa
Sin nueva línea: en blanco: nowrap
Nueva línea forzada: nueva línea: Separación de sílabas; :normal;
. Noticias automáticas
{
/*Separación de palabras: romper todo; el método 1 debe ser */
/*Ajuste de línea automático: desbordamiento de palabra; Ocultar; método 2 */
/*Ajuste de línea automático: separación de palabras; separación de palabras: normal; Método 3 */
Ajuste de línea automático: separación de palabras: separación completa; ; }
. No nuevo
{
/*Participio: mantener todo; el método 1 debe ser */
En blanco: nowrap
}
3) Plegado de líneas de caracteres chinos (palabras) de ancho fijo: diseño de tabla: fijo; separación de palabras: separación completa (IE5 y superior) FF no puede.
4)<Acronym title= "Ingrese el texto que se le solicitará" style="cursor:help;">text
Utilice texto para ver el efecto. Este efecto se puede observar en muchos sitios web extranjeros, pero muy pocos en China.
5) Establece la imagen en semitransparente:. half alpha {background-color:# 000000;filter:Alpha(opacity=50)} pasó las pruebas de IE6 e IE5.
Pero FF falló porque este estilo es propiedad de IE.
6) FLASH transparente: seleccione swf, abra la ventana del código original, haga clic en
value = "transparent" & gtLo anterior es el código de IE.
Dar
7) Al crear páginas web, a menudo usa el mouse para colocar la imagen sobre la imagen, lo que hará que la imagen sea más brillante. Puede utilizar la técnica de reemplazar imágenes o puede utilizar el filtro a continuación.
Espejo:
. imagen imagen {
filtro:alfa(opacidad=45);}
.
Imagen a: imagen al pasar el cursor {
Filtro: alfa (opacidad = 90);}
8) Alinear capas en el navegador
Texto { text-align: center }
# contenido { text-align:left; ancho: 700px margen: 0 auto}