¿Qué es CSS? ¿Cuáles son las buenas características de CSS? ¡Preséntalo en detalle!
Acerca de las hojas de estilo CSS
1. ¿Qué conocimientos básicos debes dominar antes de aprender CSS?
1. ¿Qué es una página web y qué es el lenguaje de hipertexto (html)?
2. Capaz de utilizar editores comunes como Dreamweaver.
Dreamweaver es actualmente una de las mejores herramientas de edición de sitios web. El soporte agregado de Dreamweaver8 para CSS hace que sea más conveniente usar CSS, por lo que será más fácil y conveniente usarlo para crear hojas de estilo CSS. páginas web. Este tutorial le enseña cómo utilizar Dreamweaver8 para agregar CSS a una página. Puede utilizar CSS fácilmente en páginas web sin tener que recordar el marcado del código ni leer manuales de CSS extensos. Pero primero, debes saber algo sobre CSS. Por lo tanto, los primeros cuatro capítulos de este tutorial son conocimientos teóricos de CSS, principalmente una introducción completa a CSS. Espero que los lectores tengan una comprensión integral de la sintaxis, estructura y aplicación de CSS después de leer esto. Los siguientes cuatro capítulos son combates reales de DW y le enseñan principalmente cómo usar Dreamweaver8 para usar CSS de manera flexible en páginas web. Antes de leer este artículo, necesita saber algo sobre HTML y el uso de Dreamweaver.
2. Comprenda CSS
CSS es una hoja de estilo en cascada, que se traduce al chino como "hoja de estilo en cascada". Esta es una nueva tecnología para crear páginas web.
El diseño web utiliza inicialmente etiquetas HTML para definir documentos y formatos de página, como títulos.
Nota: CSS requiere soporte de navegador superior a IE4 (Internet Explorer 4.0) y NC4 (Netscape 4.0). algunos efectos requieren soporte de una versión superior del navegador.
3. Cómo usar CSS
Si está utilizando Dreamweaver MX 2004 o superior, al definir la fuente, el color, el tamaño y otros atributos del texto, observe el código y verá. Encontrará que existe una sección de este tipo en el área del encabezado:
& ltstyle type="text/css "
& lt! -
ESTILO2 {
font-size:16pt;
Familia de fuentes: "Express New", Express, monoespaciado;
. Peso de fuente: negrita;
Color: # FF3300
}
-& gt;
& lt/style & gt ;
Felicitaciones, ha utilizado CSS para diseñar páginas web.
Entonces, además de este método de llamar a CSS, ¿hay alguna otra forma? La respuesta es "por supuesto". La siguiente es una introducción al sistema.
Método en línea:
Si solo hay una etiqueta HTML a la que es necesario aplicarle estilo, puede agregarle atributos.
style= " "
Modifica el estilo individualmente.
Método de incrustación de página:
& ltstyle type="text/css " >& lt! - Cuerpo {Fondo: Blanco Color: Negro;} -></style>
Método de llamada externa:
& ltlink rel = " hoja de estilo " rev = " hoja de estilo " href = " CSS/estilo CSS " tipo = " texto/CSS " media = " todo "/& gt;
& ltlink rel = " hoja de estilo " rev = " hoja de estilo " href = ". CSS/style . CSS " type = " text/CSS " media = " all "/& gt;
Llame al método de tabla dual de la hoja de estilo:
& ltlink rel =. " hoja de estilo " rev = " hoja de estilo " href = " CSS/style . CSS " type = " text/CSS " media = " all "/& gt;
& ltstyle type="text /css " media="all " >@Importar URL (CSS/estilo 01 . CSS); & lt/estilo & gt;
1. Sintaxis básica
CSS se define por Compuesto de tres partes: selector, atributo y valor de atributo.
El formato básico es el siguiente:
Selector{Attribute:Value}
(Selector{Attribute:Value})
Selector Puede tomar muchas formas, generalmente es la etiqueta HTML 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, las propiedades y los valores deben estar separados por dos puntos:
Cuerpo {Color: negro}
El cuerpo del selector se refiere al En la parte principal de la página, el color es el atributo que controla el color del texto y el negro es el valor del color. El efecto de este ejemplo es hacer que el texto de la página sea 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:
p {font-family: "sans serif"}
(define una fuente de párrafo como sans serif font)
Si necesita especificar varios atributos para un selector, utilizamos punto y coma para separar todos los atributos y valores:
p {text-align: centered; color: red}< / p>
(Los párrafos están centrados; y el texto del párrafo es rojo)
Para que la hoja de estilo que defina sea más fácil de leer, puede utilizar el formato de escritura línea por línea:
p
{
Alineación del texto: centrado
Color: negro
Familia de fuentes: arial<; /p>
}
(Los párrafos están organizados en el centro, el texto dentro del párrafo es negro y la fuente es arial)
2 Grupo selector
Puedes combinar elementos con los mismos atributos y selectores de Valor, y separar selectores con comas, lo que puede reducir las definiciones repetidas de estilos:
h1, h2, h3, h4, h5, h6 {color : verde}
(Este grupo incluye todos los elementos de encabezado, el texto de cada elemento de encabezado es verde)
p, table{ font-size: 9pt }
(El tamaño del texto en párrafos y tablas es . 9)
El efecto es exactamente el mismo que:
p { font-size: 9pt }
Tabla { font-size: 9pt }
3. Selector de categorías
Utilizando el selector de clases, los mismos elementos se pueden clasificar 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 use en diferentes párrafos, simplemente agregue su parámetro de clase definido en la etiqueta HTML:
& ltp class="right " >Este párrafo está alineado A la derecha.
& lt/p & gt;
& ltp class="center " >
Este párrafo está dispuesto en el medio.
& lt/p & gt;
& ltp class="right " >Este párrafo está alineado a la derecha.
& lt/p & gt;
& ltp class="center " >
Este párrafo está dispuesto en el medio.
</p>
Nota: El nombre de la clase puede ser cualquier palabra en inglés o una combinación de palabras y números en inglés. Generalmente denominados simplemente por sus funciones y efectos.
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:
Centrar {text-align: center}
(Selector de clase definido. Centrar el texto como centro)
Dicha 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á dispuesto en el medio.
& lt/h 1 & gt;
& ltp class="center "
Este párrafo también está ordenado en el medio
</p>
Nota: Este 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 ID:
& ltp id="intro "
Alinee este párrafo a la derecha.
</p>
Defina un selector de ID agregando un símbolo "#" antes del nombre de 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%;
Grosor de fuente: negrita
Color: # 0000ff
Color de fondo: transparente
}
( El tamaño de fuente es 110% del tamaño predeterminado; negrita; 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, generalmente solo en circunstancias especiales. Utilice a continuación.
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 atributo 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, anide etiquetas p en etiquetas DIV:
div {color: red-size:9pt}
......
& ltdiv & gt
& ltp & gt
Este texto es el número 9 en rojo.
& lt/p & gt;
& lt/div & gt; (El contenido del elemento p heredará los atributos definidos por DIV. )
Nota: En algunos casos, los selectores internos no heredan los valores de los selectores circundantes, 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 valor limitado 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}
...
& ltdiv & gt
& ltp & gt
Este texto es el número 9 en azul.
& lt/p & gt;
& lt/div & gt;Podemos ver que el tamaño del texto en el párrafo es 9, que hereda el atributo div y el atributo de color se define en función de 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. Notas
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 */
}
/*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 /*La fuente es arial */
}
Aprendimos la sintaxis de CSS anteriormente, pero si queremos mostrar el efecto en el navegador, debemos dejar que el navegador lo reconozca y lo llame. Cuando el navegador lee la hoja de estilo, debe leerla según el formato del texto.
Aquí hay cuatro formas de insertar una hoja de estilo en una página: [u]Enlace a hoja de estilo externa[/u], [u]Hoja de estilo interna[/u], [u]Importar hoja de estilo externa[/u] y [ u] Estilo de inserción[/u].
1. Enlaces en hojas de estilo externas
Los enlaces en hojas de estilo externas son para guardar la hoja de estilo como un archivo de hoja de estilo y luego usar
& lthead & gt
......
& ltlink href = " mi estilo . CSS " rel = " hoja de estilo " tipo = " texto/CSS " media = " todo " & gt;
p>
……
& lt/head & gt;
El ejemplo anterior muestra al navegador leyendo la hoja de estilo definida del formato de documento del archivo mystyle.css. Rel="stylesheet" significa utilizar esta hoja de estilo externa en la página. Type = "text/CSS" indica que el tipo de archivo es texto de hoja de estilo. Href="mystyle.css "es la ubicación del archivo. Medios es el tipo de medio seleccionado, que incluye: pantalla, papel, dispositivo de síntesis de voz, dispositivo de lectura Braille, etc.
Los archivos de hojas de estilo externos se pueden aplicar a varias páginas. Cuando cambia este archivo de hoja de estilos, los estilos de todas las páginas cambian en consecuencia. Es muy útil al crear una gran cantidad de sitios web con el mismo estilo de páginas. No solo reduce la carga de trabajo repetitivo, ayuda en futuras modificaciones y ediciones, sino que también reduce la descarga repetida de código al navegar.
Los archivos de hojas de estilo se pueden abrir y editar con cualquier editor de texto (como el Bloc de notas). La extensión del archivo de hoja de estilo general es. css. El contenido es una hoja de estilo definida sin etiquetas HTML. El contenido de mystyle.css es el siguiente:
hr {color: sienna}
p {Left margin: 20px}
body { background-image: URL("images/back 40 . gif ")}
/*Defina el color de la línea horizontal como caqui; el margen en el lado izquierdo del párrafo es de 20 píxeles la imagen de fondo de la página; es el archivo back40.gif en el directorio de imágenes */
2 Hoja de estilo interna
La hoja de estilo interna coloca la hoja de estilo en la página
&. lthead & gt
……
& ltstyle type="text/css "