La hoja de estilo externa CSS comienza con una línea. Cómo vincular tu estilo CSS y HTML. Selector de pseudoclase de tipo estructural
Una hoja de estilos CSS, por definición, es un lenguaje de descripción. apariencia documento. Es decir, HTML es responsable de la estructura de la página y las hojas de estilo CSS son responsables de todo el diseño. He recopilado información aquí que le permitirá utilizar la hoja de estilo libremente. No escribiré sobre lo necesario que es saberlo, porque ya está claro: sin él no podrás llevar el sitio a un nivel más o menos aspecto normal. Si alguien recién está comenzando a aprender estilos CSS, estos materiales serán suficientes para comenzar a aprender CSS.
1. Cosas básicas
Empezaré por lo más básico. Cuando comencé este sitio, escribí pequeños tutoriales sobre cómo aprender hojas de estilo CSS. Las lecciones son adecuadas tanto para quienes recién comienzan como para quienes ya saben algo para actualizar sus conocimientos. Allí se presenta todo en imágenes y ejemplos reales.
Una pequeña digresión: Cuando comencé a estudiar el tema de la creación de sitios web, aprendí casi todas las etiquetas HTML y no me inspiraron mucho. Pero después de que comencé a estudiar la hoja de estilos CSS y a intentar aplicar cada una de las propiedades, me gustó mucho (no la habría creado si no me gustara). Vi que puedes hacer cosas increíbles solo con usando CSS. Este no es un lenguaje de programación que lleve meses aprender. La hoja de estilo se puede dominar en una (máximo dos) semanas.
Por supuesto, no estudiarás absolutamente todas las propiedades y sus significados, ¡y esto no es necesario! Sólo necesitas conocer los conceptos básicos para que puedas empezar a aplicarlo y utilizarlo en tus proyectos. Uno matiz importante es que necesitas aplicar INMEDIATAMENTE la propiedad que acabas de aprender ejemplo real. Deja que sea tu propio sitio web o HTML sencillo sitio web: no hay diferencia. Lo importante es que intentes escribirlo tú mismo y veas el resultado.
Tengo muchos ejemplos en mi sitio que usan CSS. ¡Juntos contienen más de 100 lecciones! Cuando conozca al menos los conceptos básicos, podrá cambiar y aplicar de forma segura todos los ejemplos de las lecciones.
Mis lecciones sobre lo básico. estilos en cascada CSS
2. Hojas de referencia de CSS y CSS3
Pues aprendiste lo básico y al cabo de un par de días te olvidaste de todo con “éxito” y, probablemente, pienses que esto no es lo tuyo y todo se complica. Quiero animarte un poco de inmediato: yo mismo no conozco todas las propiedades de CSS. ¿Pero qué me impide verlos en Internet?
Es cierto que por ahora irá a Yandex o Google y luego escribirá la solicitud que necesita. Y si la búsqueda aún no te da lo que necesitas. Puedes pasar mucho tiempo de esta manera y aún así no encontrar lo que realmente buscas.
Afortunadamente, buena gente Recopilaron hojas de trucos muy útiles que me ayudaron más de una vez. Basta con averiguar dónde está todo y luego buscar. propiedades requeridas no presenta ninguna dificultad.
Hojas de trucos CSS y CSS3
Estos son simplemente materiales insustituibles al diseñar y desarrollar el diseño de un sitio web. El tiempo que lleva distraerse y buscar en Internet descripciones de propiedades se reduce muchas veces.
Es cierto que, como comprenderá, cuanto más cree sitios web o diseñe, menos tendrá que mirar esta pista, ya que todo permanece siempre en su memoria. propiedades necesarias. Pero aún así, no será superfluo tener a mano este juego de chuletas.
Es como en la escuela: Incluso si no usas una hoja de trucos, tu alma de alguna manera está más tranquila con ella 😆.
En nuestro curso cubriremos lecciones de CSS, es decir. Lecciones sobre tecnología, una de las más importantes en maquetación de páginas web.
En esta lección diseñaremos nuestra página web para que sea más colorida (Figura 1).
Foto 1
Antes de pasar al diseño de páginas, estudiemos cómo se establece el color en la web.
1. Definición de colores. Lecciones de CSS
Al determinar los colores para documento HTML puedes usar los nombres de los colores o sus códigos hexadecimales. El sistema de codificación hexadecimal se basa en tres componentes: rojo (Red), verde (Green) y azul (Blue), de ahí su nombre RGB, después de las primeras letras de los nombres de estos colores. Cada uno de los componentes corresponde número hexadecimal 00 a FF (0 y 255 V sistema decimal estimación). Estos tres valores luego se combinan en un solo valor precedido por un #, como #800080, que corresponde al color violeta.
La tabla muestra los nombres de algunos colores y sus códigos. Más mesas completas Los colores y sus códigos se pueden ver en la carpeta. colores ubicado en la carpeta CD.
|
Color |
Color |
||
|
Negro |
Plata |
||
|
Granate (burdeos oscuro) |
Rojo |
||
|
Verde |
Lima (lima) |
||
|
Aceituna |
Amarillo |
||
|
Azul marino (azul oscuro) |
Azul |
||
|
Púrpura |
Fucsia (fucsia) |
||
|
Verde azulado (verde oscuro) |
|||
|
Gris |
Blanco |
Mesa colores seguros para el desarrollo de diseño de sitios web
La paleta de colores segura garantiza la visualización más precisa en diferentes monitores.
La paleta segura consta de 216 colores. Los colores seguros siempre son consistentes de un navegador a otro o de una plataforma a otra, de un monitor a otro desde su varias posibilidades Pantalla a color y resoluciones.
Si alguno de los tres valores hexadecimales diferente de 00, 33, 66, 99, SS o FF, entonces el color no es seguro.
La tabla de colores seguros se puede consultar en la carpeta. CD/ colores.
2. Definición de CSS
Nuestra página web aún no cuenta con diseño, el cual se puede realizar de dos maneras:
- primero - por medio hojas de estilo CSS (método más progresivo y correcto),
- el segundo - por medio atributos de etiqueta HTML .
Empecemos ahora mismo con un método más progresivo.
CSS: hojas de estilo en cascada(especificaciones de estilo jerárquico o mesas en cascada estilos) no reemplazan el lenguaje de marcado; son una tecnología independiente que se aplica a la etiqueta HTML.
Objetivo: le permite cambiar automáticamente estilo HTML elemento en todas las páginas del sitio. Por ejemplo, utilizamos un encabezado H1 en diez páginas web, que debería ser verde. Al usar hojas de estilo, solo tenemos que especificar una vez color verde y se aplicará en diez páginas a la vez.
Situación inversa: estamos usando atributos HTML establezca todos los encabezados H1 en diez páginas web en verde, es decir, fue recetado diez veces. Luego decidimos cambiar el color del título a rojo, luego tendríamos que corregir el color verde a rojo diez veces.
Al usar una hoja de estilo, sólo tenemos que hacer esto una vez, cambiando el color del encabezado de verde a rojo en la propia hoja de estilo, y automáticamente cambiará en las diez páginas web.
Una hoja de estilo incluye un conjunto de elementos CSS cuya estructura difiere de la estructura de un elemento HTML.
SintaxisCSS-elemento
selector (propiedad 1: valor; propiedad 2: valor; ... propiedad N: valor)
El nombre del selector se escribe primero, por ejemplo, h1, esto significa que todos propiedades de estilo se aplicará a la etiqueta
, luego hay llaves en las que está escrita la propiedad de estilo y su valor se indica después de los dos puntos. Las propiedades de estilo con valores están separadas por un punto y coma; este símbolo se puede omitir al final.
Puede haber tantas propiedades de estilo con valores como desee; su secuencia no importa.
CSS no distingue entre mayúsculas y minúsculas, saltos de línea, espacios o caracteres de tabulación, por tanto, la forma de la grabación depende del deseo del desarrollador.
Por ejemplo:
h1 (familia de fuentes: Arial; tamaño de fuente: 14 puntos)
o lo mismo se puede escribir así:
familia de fuentes: Arial;
tamaño de fuente: 14pt
En este ejemplo:
- h1 - selector, en en este caso elemento HTML,
- familia de fuentes y tamaño de fuente: propiedades de estilo,
- Arial: el valor de la propiedad de la familia de fuentes,
- 14 puntos es el valor de la propiedad de tamaño de fuente.
Formas de incluir hojas de estilo en un documento HTML
- Hoja de estilo externa (estilo vinculado).
- Hoja de estilo integrada (estilo global).
- Estilos internos.
3. Hoja de estilo CSS externa (estilo vinculado)
Define el estilo de todo el sitio.
Es un archivo de texto con extensión css.
EN en este ejemplo la hoja de estilo está escrita en Archivo de texto estilo.css.
Práctica 1
1. Abra un documento en blanco en Notepad++ y guárdelo en una carpeta. público_html bajo el nombre estilo. CSS. Tenga en cuenta que en el campo Tipo de archivo fue encontrado Todos los tipos(Figura 2).
Figura 2
2. Dado que CSS es una tecnología diferente, entonces etiquetas HTML no están escritos en el archivo .css en absoluto. Diseñemos nuestro título “Catálogo proyectos arquitectonicos" en archivo principal. HTML con alineación central, color azul, fuente Verdana, altura de fuente 20 pt. Para ello, en el archivo css haremos próxima entrada(Figura 3):
figura 3
En nuestros tutoriales de CSS, comprendamos lo que está escrito aquí de acuerdo con la sintaxis del elemento CSS de la que hablamos anteriormente en este tutorial.
- h1 es un selector, es decir elemento html, al que se aplica el estilo;
- alineación de texto:centro; - estilo propiedad de alineación de texto(alinea el texto) con el centro del valor (centro);
- color:#0000FF; - color de propiedad de estilo (color de texto) con valor de color azul#0000FF (valor tomado de la tabla de colores);
- familia de fuentes: Verdana; - propiedad de estilo del tipo de letra Familia tipográfica con el significado Verdana;
- las propiedades de estilo con valores están separadas por un punto y coma;
- y así sucesivamente, todo según la sintaxis.
Para que nuestra página web “vea” la hoja de estilos y aplique propiedades a los elementos html, es necesario establecer un enlace entre el archivo principal. HTML Y estilo. CSS. Para hacer esto, abra el archivo main.html y entre las etiquetas < cabeza> Y cabeza> diseño de inserción , Cómo en la Figura 4.
Figura 4
3. Vea el resultado en un navegador. Debe coincidir con la Figura 5.
Figura 5
En esta lección de CSS veremos dónde obtener los nombres de las propiedades de estilo y sus valores. También hay libros de referencia especiales y especificaciones para esto (carpeta de referencia CSS). Para comenzar, utilice este pequeño libro de referencia como referencia. Spravi_CSS.doc.
4. Establezca el estilo para el encabezado h2 "Proyectos para su futuro hogar" con la alineación correcta. color burdeos, fuente Verdana, altura de fuente 16 pt. Para hacer esto en el archivo estilo. CSS h2 (Figura 6).
Figura 6
5. Verifique el resultado en el navegador, debe coincidir con la Figura 7.
Figura 7
6. Los párrafos estarán justificados, color azul oscuro, fuente Arial, alto de fuente 12 pt. Para hacer esto en el archivo estilo. CSS hagamos la siguiente entrada para el selector pag(Figura 8).
Figura 8
7. También haremos que el fondo de toda la página web sea de color azul claro. Para hacer esto para el selector cuerpo agregar un registro (Figura 9)
Figura 9
8. Vea el resultado en un navegador. Debe coincidir con la Figura 10.
Figura 10
creo que desde Esta lección CSS, el principio de utilizar una hoja de estilo externa es claro. Para diseñar de forma fácil y colorida tu web-páginas, debe estudiar las propiedades de estilo y sus significados en el libro de referencia y probarlas en la práctica. Cuanto más recuerde esas propiedades y significados sin consultar un libro de referencia, mayor será su profesionalismo.
Tareas de investigación
- Usando el directorio sprav_css.doc, diseñar el título < h3> en el archivo principal.html. Propiedades de estilo para elegir.
- Para la lista "Proyectos de casas", usando estilos, cambie los números arábigos a números romanos. Otros parámetros son opcionales.
- Para la lista "Área de la casa", use una imagen como marcador spisok_1.gif de la carpeta html_css_2. Otros parámetros son opcionales.
- Aplicar una imagen como fondo de la página web mediante estilos fon9.jpg de la carpeta html_css_2.
- Utilice estilos para poner las fuentes de los párrafos en negrita.
Un resultado de ejemplo se muestra en la Figura 11.
Figura 11
4. Clases de especificaciones de estilo.
En nuestro tutorial de CSS veremos clases en especificaciones de estilo Se utilizan cuando es necesario definir varios estilos de un elemento. Al definir una clase para a la etiqueta deseada se agrega arbitrario nombre único clase, separados por un punto.
Por ejemplo, tenemos varios títulos en el texto. h1 y necesitamos que sean de diferentes colores. Luego necesitas separar los estilos de la siguiente manera:
h1.golub(color:azul)
h1.krasn(color:rojo)
h1.verde (color: verde)
Después del punto viene el nombre de la clase, que debe ser única y no puede constar únicamente de números.
Ahora al usar la etiqueta < h1> el atributo debe establecerse en el documento clase para especificar qué estilo aplicar:
< h1 clase=" golub"> Este es un título azul. h1>
< h1 clase=" krasn"> Este es un título rojo. h1>
< h1 clase=" verde"> Este es un encabezado verde. h1>
Práctica 2
1. Abra el archivo plantilla. HTML. Guárdalo con un nuevo nombre cuadrado. HTML en carpeta público_html.
2. Escribe entre etiquetas
3. Al contenido
copiar texto del archivo Áreas de la casa.txt de la carpeta HTML_ ccs_2 .4. Escribiremos estilos en el mismo archivo. estilo. CSS, que creamos en la lección anterior. Por lo tanto en el expediente cuadrado. HTML enlace a esta hoja de estilo insertando entre las etiquetas
Y(Figura 12)
Figura 12
5. Formatee los encabezados con etiquetas.
y asignar a cada encabezado su propia clase (Figura 13).
Figura 13
Tu archivo cuadrado. HTML Ahora debería verse así (Figura 14).
Figura 14
6. En la hoja de estilo estilo. CSS cree la siguiente entrada (Figura 15)
Figura 15
7. Consulte la página web en su navegador. El resultado está en la Figura 16.
Figura 16
8. Probablemente hayas notado que en nuestro nueva entrada Los estilos de títulos tienen diseños repetidos. familia de fuentes: Verdana; alineación de texto: izquierda; tamaño de fuente: 14pt. Estas construcciones se pueden escribir una vez agrupando los selectores a los que se aplican. Para hacer esto, debe enumerar los selectores separados por comas y luego escribir entre llaves propiedades generales. Entonces nuestra hoja de estilo para títulos se verá así (Figura 17):
Figura 17
Práctica 3
Debajo de cada título del archivo cuadrado. HTML hay texto. Formatee párrafos usando varias clases. Usar Colores diferentes, alineación y tipo de letra. Los nombres de las clases deben ser únicos. No es recomendable utilizar los mismos nombres para diferentes selectores. Uno de opciones posibles en la Figura 18:
Figura 18
5. Estilo de identificación para un elemento específico
Las lecciones de CSS incluyen aprender sobre los llamados estilos de identificación.
A cualquier elemento se le puede asignar un identificador. identificación y luego haga coincidir este elemento con algún estilo usando identificación.
Por ejemplo:
La entrada en el archivo de la hoja de estilo será la siguiente
# prueba { color:#00 ffff}
Ahora puedes hacer coincidir este estilo con cualquier elemento del documento html:
...
...
En este ejemplo, la palabra prueba es el nombre del estilo. El nombre puede ser cualquier cosa desde letras latinas, pero debe ser único, es decir. ningún elemento de la hoja de estilo debería tener ese nombre.
Práctica 4
Hagamos una plantilla para el futuro menú de nuestro sitio web.
1. Abra el archivo plantilla. HTML y guardarlo con un nuevo nombre menú. HTML en carpeta público_html.
2. Al contenido de la página del archivo. menú. HTML ingresar texto del archivo menú. TXT de la carpeta HTML_ CSS_2 .
3. Usando etiquetas HTML, formatee el archivo de la siguiente manera:
- para los títulos “Categorías de proyectos”, “Catálogo de proyectos arquitectónicos” y “Áreas de viviendas” utilice la etiqueta
;
- para la lista "Categorías de proyectos", utilice una lista numerada
- ;
- para las listas “Catálogo de proyectos arquitectónicos” y “Área de la casa”, utilice lista con viñetas
4. En la parte superior de la página web, inserte un logotipo (archivo logo_micasa.gif). El resultado debe coincidir con la Figura 19.
Figura 19
5. Para este menú haremos mesa separada estilos bajo el nombre estilo_ menú. CSS. Vincular el archivo menú. HTML y hoja de estilo estilo_ menú. CSS insertando una entrada entre etiquetas
Y en archivo menú. HTML.6. Cree un documento en blanco y guárdelo con el nombre estilo_ menú.css en tu carpeta.
7. Para el grupo “Categorías de Proyectos”, que incluye un título y una lista numerada, y para el grupo “Catálogo de Proyectos Arquitectónicos”, que incluye el título en sí y una lista con viñetas, usaremos el nombre del estilo de identificación. azul. Aquellos. el código se verá así (Figura 20):
Figura 20
8. En archivo estilo_ menú. CSS El estilo de estos elementos será azul oscuro, en fuente Tahoma (Figura 21):
Figura 21
9. Para el grupo "Áreas de la casa", que incluye un encabezado y una lista con viñetas, usaremos el nombre del estilo de identificación. marrón. Aquellos. el código se verá así (Figura 22):
Figura 22
10. En archivo estilo_ menú. CSS creemos un estilo para estos elementos Marrón, en fuente Times (Figura 23):
Figura 23
11. Y agregue otro color de fondo al archivo menu.html (Figura 24)
Figura 24
12. Como resultado, obtenemos la siguiente página web (Figura 25)
Figura 25
Como resultado de hacer esto Lección CSS, deberías tener los siguientes archivos creados:
- estilo.
CSS
- estilo_ menú. CSS
- cuadrado.
HTML
- menú.
HTML
existe cuatro formas de conectar estilos a su documento HTML. Los métodos más utilizados son CSS en línea y CSS externo.
CSS en línea en elemento HTML
A continuación se muestra un ejemplo implementación de CSS basado en la sintaxis anterior:
Título
Párrafo.
Obtenemos el siguiente resultado:
Atributos
CSS en línea: atributo de estilo
Puede utilizar el atributo en cualquier elemento HTML para definir reglas de estilo. Estas reglas sólo se aplicarán a este elemento. Aquí está la sintaxis general:
<элемент style = "...правила стиля...">
Atributos
Ejemplo
A continuación se muestra un ejemplo de CSS en línea basado en la sintaxis anterior:
CSS en línea
Obtenemos el siguiente resultado:
Estilos CSS externos - elemento
Elemento se puede utilizar para incluir archivos CSS externos en su documento HTML.
Una hoja de estilos CSS externa es un archivo de texto independiente con la extensión .css. Usted define todas las reglas de estilo en este archivo de texto y luego puede incluir el archivo CSS en cualquier documento HTML usando el elemento .
Aquí está la sintaxis de conexión general. archivo externo CSS:
Atributos
Los atributos están asociados con elementos. o reglas definidas en cualquier archivo de hoja de estilo externo.
- estilo.
CSS
- Cualquier regla definida en etiquetas., anula las reglas definidas en cualquier archivo CSS externo.
- Cualquier regla definida en un archivo de hoja de estilo externo tiene la prioridad más baja en CSS y las reglas definidas en ese archivo solo se aplicarán cuando las dos reglas anteriores no se apliquen.
Manejo por navegadores más antiguos
Hay muchos navegadores antiguos que no admiten CSS. Por lo tanto, debemos encargarnos de escribir CSS en línea en nuestro documento HTML. El siguiente fragmento de código muestra cómo se pueden usar etiquetas de comentarios para ocultar CSS de navegadores más antiguos:
Tabla de contenidos del documento
Hay varias formas de agregar estilos a una página web, que difieren en sus capacidades y propósito. A continuación se describe cómo incluir CSS.
Hoja de estilo asociada
Cuando se utiliza una hoja de estilo vinculada, la descripción de los selectores y sus propiedades se ubica en un archivo separado, generalmente con una extensión css, y se usa una etiqueta para vincular el documento a este archivo. . Esta etiqueta colocado en un contenedor , como se muestra en el ejemplo 1.
Ejemplo 1: conectar una hoja de estilo vinculada
Título
Texto
Valores de parámetros de etiqueta - rel y type permanecen sin cambios, como se muestra en este ejemplo. El parámetro href especifica la ruta al archivo CSS; puede especificarse de forma relativa o absoluta. Tenga en cuenta que de esta manera puede conectar una hoja de estilo que se encuentra en otro sitio.
Contenido del archivo mysite.css conectado mediante la etiqueta mostrado en el ejemplo 2.
Ejemplo 2. Archivo con estilo
H1 (color: azul marino; tamaño de fuente: 200%; familia de fuentes: Arial, Verdana, sans-serif; alineación de texto: centro;) P (relleno izquierdo: 20 px;)
Como puede ver en este ejemplo, el archivo de estilo no almacena ningún dato excepto sintaxis CSS. A su vez, el documento HTML contiene sólo un enlace al archivo con el estilo, es decir. De esta manera, se cumple plenamente el principio de separar el contenido y el diseño del sitio. Por lo tanto, utilizar una hoja de estilo vinculada es el método más versátil y conveniente para agregar estilo a un sitio. Después de todo, los estilos se almacenan en un archivo y en los documentos HTML solo se indica un enlace al mismo.