CSS Introducción
Acabado notas HTML acabados, el siguiente paso es el CSS. Podemos usar HTML para construir una base de estructura estable, y estilos CSS a la página de control se lleva a cabo. páginas estilo de varios elementos incluyendo el color, el tamaño, espaciado de línea, y así sucesivamente, que para el diseño o mantenimiento de un sitio de datos grande, la carga de trabajo es enorme. Afortunadamente, se puede utilizar CSS para controlar estos estilos, que mejorará en gran medida la eficiencia de diseño web y mantenimiento, y la sensación general de una página es fácil ser unificadas.
CSS general
CSS es la abreviatura de Cascading Style Sheet, las hojas de estilo en cascada traducidos al chino, sino que también se traduce como las hojas de estilo en cascada, se hace referencia a la hoja de estilo. Es un objeto de la anchura, altura, posición, tipo de letra, estilo visual aparición de fondo se utiliza para definir la tecnología web, las reglas CSS página de introducción puede llevarse a cabo con rapidez y eficacia a la disposición de la página, las etiquetas HTML pueden controlarse con precisión .
CSS es un lenguaje de identificación, no sólo puede controlar con eficacia las páginas de estilo, la más importante es lograr la separación de contenido web y el estilo, y permite que las reglas CSS almacenados en un archivo separado, la extensión del nombre de archivo CSS "css ".
CSS3
estándar CSS3 ya en 1995 comenzó a desarrollar, poner en la agenda de investigación del W3C en 2001, sin embargo, 10 años CSS3 se puede decir que básicamente no hay gran cambio, hasta junio de 2011 se publicó una nueva versión de la CSS 3, en la actualidad muchos navegadores tienen un amplio apoyo CSS3.
CSS3 es una versión mejorada de la tecnología CSS, el lenguaje CSS CSS3 se divide en módulos más pequeños, desarrollo modular hacia la dirección. La versión anterior es relativamente grande y relativamente complejos módulos, por lo tanto, se descompone en un pequeño módulo simple, sino que también añade más nuevos módulos. Hay fuentes, colores, diseño, fondo, la ubicación, las fronteras en CSS3, una de varias columnas, la animación, la interfaz de usuario, y así varios módulos.
El uso básico de CSS
las reglas de uso de CSS consta de dos partes: selectores y una o más sentencias. La sintaxis básica básico es el siguiente:
选择器{
属性1: 值;
属性2: 值;
…
属性n: 值;
}
propiedades CSS
funciones relacionadas con CSS-de acuerdo con un atributo del paquete, el paquete comprende una pluralidad de fuente, texto, fondo, listas, animación, y el uso de ejemplos específicos de estos atributos se mencionarán en la posterior.
El uso de CSS en un método documento HTML
Dependiendo del alcance y el uso de CSS en un documento HTML, el uso de hojas de estilo CSS divide en tres categorías: los estilos en línea, hoja interna de estilo y una hoja de estilo externa, y una hoja de estilo externa puede ser dividido en enlaces Waibuyangshibiao e importar una hoja de estilos externa. En esta sección llegamos a conocer a partir de los cuatro métodos de clasificación de uso de CSS en HTML.
- estilo en línea
- hoja de estilo interna
- hoja de estilos externa
- Enlaces una hoja de estilo externa
- hoja de estilos externa de importación
estilo en línea
estilo en línea (estilo en línea), también conocido como estilos en línea, es cuatro tipos de uso de CSS es la más directa, se den cuenta de sus atributos globales prestados elementos HTML, el código de estilo CSS que se puede escribir directamente.
En el sentido estricto de estilo es un uso flojo, que no requiere un selector, el código CSS camino y código HTML mezclados entre sí, no se recomienda el uso de estilos en línea. La sintaxis básica en el estilo de la línea de la siguiente manera:
<标记 style="属性:值; 属性:值; …">
hoja de estilo interna
Cuando un solo documento requiere un estilo especial, hoja de estilo interna debe ser usado. hoja de estilo interna es un patrón en la sección de cabecera de la página, el patrón en la aplicación de esta definición a esta página, la declaración hoja de estilo interna utilizando los marcadores de estilo, es un método más común de usar. La sintaxis básica es la siguiente:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
选择器1｛属性:值;…｝
选择器2｛属性:值;…｝
……
选择器n｛属性:值;…｝
</style>
</head>
etiqueta de estilo define documento de información HTML estilo especifica cómo los elementos HTML se prestan en el navegador el que se utiliza el tipo de contenido para especificar el tipo de elemento.
Enlaces una hoja de estilo externa
Cuando el fin de asegurar un sitio estilo unificado, o cuando más definido el contenido de estilo, y requiere de varias páginas en estilos por acción, se puede utilizar una hoja de estilos externa. La cadena se guarda en una hoja de estilo externa es un archivo de hoja de hoja de estilos externa estilo, y luego enlace está marcado con un enlace a este archivo de hoja de estilo de página, enlace de marcador en la zona de la cabeza de la página. La sintaxis básica es:
<head>
<meta charset="utf-8" />
<title></title>
<link href="样式表路径" rel="stylesheet" type="text/css" />
</head>
Dónde:
href: punto de salida de las hojas de estilo de ruta almacenados.
rel: enlace se utiliza para definir la relación entre los archivos y HTML, rel = "stylesheet" se refiere a la utilización de esta hoja de estilo externa en la página.
atributo type se utiliza para especificar el tipo de archivo, "text / css" se refiere al tipo de archivo es una hoja de estilo de texto.
hoja de estilos externa de importación
Waibuyangshibiao medios de introducción de un elemento de estilo en la cabecera de una hoja de estilo del archivo HTML externo introducción, introducir el modo de importación utilizando una hoja de estilos externa. Y el método de introducción de enlaces externos estilo de hojas de estilo muy similar, pero sustancialmente equivalente a importar presencia estilo de estilo externa de un sitio web interno. La sintaxis básica es:
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("样式表路径");
</style>
</head>
Los selectores CSS básicos
selector de CSS es un concepto muy importante, se puede mejorar mucho la eficiencia de escribir o modificar los desarrolladores de hojas de estilo. CSS3 ofrece una serie de selectores, se puede dividir enEl selector de base selecciona una combinación, propiedades de selectores, selectores y selector de clase de objeto de pseudo seudoY así sucesivamente. Desde el apoyo del navegador, las muchas opciones que rara vez se utiliza en el desarrollo real, en este capítulo muestran la más básica y más comúnmente grabado varios selector.
El selector básico incluyemarcador de selección, un selector de clase, selector de ID y el selector universal,.
selector de etiquetas
Los documentos HTML se componen de etiquetas HTML básicas, si se desea marcar todos los documentos similares utilizan los mismos estilos CSS, se debe utilizar el selector de etiquetas. La sintaxis básica es:
标记名{ 属性1:值1; 属性2:值2;…}
Por ejemplo, texto P-tag todo centrado, la siguiente sintaxis:
p{
text-align: center;
}
selector de clase
sintaxis básica es la clase de selección:
标记名.类名{属性1:值1;属性2:值2;…}
selector de clase para la clase de atributo global etiquetada como referencia:
<标记名 class="类名">
Vale la pena señalar que, cuando el nombre de la clase puede ser cualquier carácter válido, definido por el diseñador. Si la etiqueta se puede utilizar para todos, * se utiliza. El nombre de la clase, donde los medios * de todo, por supuesto, puede omitirse.
Aquí están algunos ejemplos:
<style type="text/css">
p.text1{color:brown;font-size:14px;}
/* 该形式下只允许<p>标记中类名为"text1"的标签引用该样式 */
*.text1{ color:brown;font-size:14px; }
或
.text1{ color:brown;font-size:14px; }
/* 表示所有类名为"text1"的标签都可引用该样式 */
</style>
Identificación del selector
sustancialmente el mismo que el selector de ID de clase y el selector, excepto que la definición no utiliza. "" usado "#", que actúa sobre los atributos globales de etiquetas HTML son "id" en lugar de "clase".
La sintaxis básica para el selector de ID:
标记名#id名{ 属性1: 值1;属性2: 值2;…}
Los selectores de ID para las variables globales propiedad ID de referencia es:
<标记名 id="id名">
Por supuesto, como con los selectores de clase, si todo se utilizan para la bandera, el nombre del formulario * # id, donde * indica todo, se puede omitir.
selector universal
selector universal es un selector especial, indicado por *, que coincida con todos los elementos de la página, a menos que se especifique en las mismas propiedades para un elemento que corresponde a la más uso específico de otros valores debe ser seleccionado. ajuste del selector universal y el estilo de los elementos del cuerpo es ligeramente diferente, ya que la elección se aplica a cada elemento común sin depender heredado del elemento del cuerpo en la regla se aplica a los atributos. Los fundamentos son los siguientes:
<style type="text/css">
*{
属性1: 值1;
属性2: 值2;
…
}
</style>
Otros selectores CSS
Además de fuera de la CSS básico selectores, CSS hay muchos otros selectores.
selector de combinación
selectores CSS en combinación, pueden ser considerados como la base para una versión mejorada de selectores, es decir, utilizar una combinación de medios de selección de base. Hay una combinación de selectores cinco categorías:selector de elementos múltiples, selectores de descendientes, sub-selectores, selectores y selectores de hermanos adyacentes.
selectores de elementos múltiples
sintaxis básica de múltiples elementos selectores es:
E, F {属性1:值1;属性2:值2;… }
Esto se entiende bien, es para seleccionar varios elementos, en el medio "" separado.
selector de elementos Descendiente
selector de elementos descendiente sintaxis básica es:
E F {属性1:值1;属性2:值2;… }
Esto también se entiende bien, es para que coincida con todos los elementos que pertenecen a F E descendientes de elementos, elemento elementos E y F separados por un espacioPor ejemplo:
table b{color:red; }
Esto significa que todos los elementos del texto en la tabla B está ajustado en rojo.
selector de elemento hijo
selectores sub-elemento de sintaxis básica es:
E>F{属性1:值1;属性2:值2;…}
selector de elementos hijo puede seleccionar elementos secundarios de un elemento, en el que el elemento padre E, F es un elementos secundarios directos, E> F está representado por F todos los elementos secundarios seleccionados en el elemento E entre las mismas con> conexión.Este selector de elementos y las generaciones futuras no es lo mismo, los elementos descendientes selectores F todos los elementos descendientes E y F en el selector de sub-elemento debe ser un elemento secundario E.
Selector de hermanos adyacentes
La sintaxis básica es selector de hermanos adyacentes:
E+F{属性1:值1;属性2:值2;…}
selector de hermanos adyacentes puede seleccionar otro elemento inmediatamente después del elemento, y tienen el mismo elemento padre, con un enlace entre los mismos el signo +, en otras palabras,E y F tienen el mismo elemento padre, y un elemento de F en la parte trasera y los elementos inmediatamente adyacente E.
selectores generales de hermanos
sintaxis básica de hermanos en general selectores es:
E~F{属性1:值1;属性2: 值2;…}
Por lo general, entre hermanos seleccionará todos los hermanos detrás de un elemento, con ~ Nº enlace entre éste y el selector de hermanos adyacentes Del mismo modo, una necesidad dentro del mismo elemento padre, E y F elemento después del elemento.Excepto que E ~ F F Partido elemento de selección detrás de todos los elementos de E, E + F F partidos únicos elementos inmediatamente detrás elemento E.
selector de pseudo clase
pseudo clase puede ser visto como un selectores de clase especiales, el CSS se puede apoyar es el navegador automáticamente identificados selector particular. La sintaxis básica es la siguiente:
E:伪类 {属性1:值1; 属性2:值2;…}
Pseudo-clase y clases, la CSS ya está definido, no tan libre como selector de clase con otro nombre, selector de pseudo clase común como se muestra a continuación:
Selector de objetos seudo
Pseudo selector de objeto, no un selector para el uso de objetos reales, pero se ha definido para los CSS selector de buenas pseudo-objetos. La sintaxis básica es la siguiente:
E:伪对象{属性1:属性值1;属性2:属性2;…}
Como los selectores de clase de pseudo, selectores seudo objeto no puede utilizar nombres aleatorios, Selector de objetos de pseudo común como se muestra a continuación:
Se hace notar que, antes de la adición a la figura anterior son E :: selectores selección CSS3 exterior, lo anterior selectores CSS3 solo dos puntos (:) seudo objetos modificados dos puntos dobles (: :) para distinguir los selectores de pseudo-clase, aunque sigue siendo válida antes de la escritura, pero se recomienda utilizar la nueva redacción.
selectores de atributos
se añade selector de atributos a un soporte, las distintas propiedades se enumeran entre paréntesis después de la etiqueta o expresión. En la forma de selectores de atributo son muchos, aquí introducimos unos simples por ejemplo.
Atributos de presencia partido
elementos de estilo controlados por coincidencia de atributos presentes, debe coincidir generalmente los atributos contenidos en corchetes.
Por ejemplo, cualquier marca con un atributo href se establece en el color integral:
a[href]{color:brown;}
atributo de concordancia exacta
Sólo cuando el valor del atributo coincide exactamente con los valores de las propiedades especificadas de aplicar un estilo, seleccione los selectores id y class es esencialmente coincidir exactamente con los atributos de los selectores.
Por ejemplo, seleccione la URL "http://www.taobao.com" enlace establece un indicador como un marrón:
a[href="http://www.taobao.com"]{color:brown;}
partido prefijo
Mientras valores de las propiedades comenzaron a cadena que coincide con la cadena especificada, se puede aplicar un estilo a los elementos. partido de prefijo utilizando [^ =] aplicado en la forma, tales como:
[id^="user"]{color:brown;}
A continuación, las siguientes etiquetas se pueden cambiar a marrón:
<p id="userName">小明</p>
<p id="userWeight">体重</p>
<p id="userAge">年龄</p>
partido sufijo
En contraste con el partido prefijo, siempre y cuando la cadena de caracteres final con un valor de atributo coincidente con la cadena especificada, para aplicar un elemento de estilo. Sufijo juego utilizando [$ =] implementado en la forma, tales como:
[id$="Name"]{color:brown;}
A continuación, las siguientes etiquetas se pueden cambiar a marrón:
<p id="JackName">杰克</p>
<p id="RoseName">萝丝</p>
subcadena coincidente
Es decir, siempre y cuando no especifica los atributos de estilo de cadena aplicación, el uso de [* =] implementado en forma, como por ejemplo:
[id*="test"]{color:brown;}
A continuación, las siguientes etiquetas se pueden cambiar a marrón:
<p id="Rosetest">段落1</p>
<p id="testY">段落2</p>
<p id="xtesty">段落3</p>
epílogo
fiebre del registro, suplemento omisiones futuro errores o deficiencias, sino también la corrección de aspecto
