Valores de propiedad de estilo. ¿Qué es CSS, para qué sirven los estilos CSS?

Hemos publicado un nuevo libro, Marketing de contenidos en redes sociales: cómo entrar en la cabeza de sus seguidores y hacer que se enamoren de su marca.

CSS es un lenguaje para dar forma a la apariencia de un documento creado utilizando un lenguaje de marcado. CSS se utiliza comúnmente como herramienta para describir páginas web que fueron escritas previamente en XHTML y .

Además, CSS se puede utilizar con otros documentos XML, siendo los más utilizados los documentos XUL y SVG.

Para entender qué es CSS, veamos un ejemplo sencillo. Cuando un empleado de la redacción de un periódico o revista diseña una publicación, toma notas que luego se utilizan para desarrollar la apariencia del material terminado. Por ejemplo: "resaltar el título en rojo", "sangrar", "aumentar la distancia entre bloques de información", etc. Cuando trabaje con sitios web, no podrá escribir dichas notas en lenguaje normal; el navegador no podrá leerlas. Para que tenga en cuenta las marcas, debes escribirlas en CSS.

Cómo funciona CSS

La forma en que funciona es que CSS encuentra un elemento HTML específico (encabezado) y define una propiedad específica para él (color) para asignarle un valor (rojo). Está escrito así:

CSS se utiliza para tomar decisiones estilísticas, así como para diseñar documentos HTML: altura, columnas, ubicación de elementos, etc.

Cómo y dónde escribir CSS

• CSS se puede escribir como un atributo directamente en HTML.

• Puedes aplicar la etiqueta

  Texto de ejemplo

  
  
  

  Si en una fracción decimal la parte entera es igual a cero, entonces no se permite escribirla. La notación 0,7 y 0,7 son equivalentes.

  Interés

  La notación porcentual se usa generalmente en los casos en que es necesario cambiar el valor en relación con el elemento principal o cuando las dimensiones dependen de condiciones externas. Por tanto, un ancho de tabla del 100% significa que se adaptará al tamaño de la ventana del navegador y cambiará junto con el ancho de la ventana (ejemplo 6.3).

  Ejemplo 6.3. Entrada de porcentaje

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Contenido de la tabla

  
  
  

  Los porcentajes no tienen que ser números enteros; se pueden utilizar decimales, como 56,8%.

  Dimensiones

  Para establecer los tamaños de varios elementos, CSS utiliza unidades de medida absolutas y relativas. Las unidades absolutas son independientes del dispositivo de salida, pero las unidades relativas definen el tamaño de un elemento en relación con el valor de otro tamaño.

  Unidades relativas

  Las unidades relativas se suelen utilizar para trabajar con texto o cuando es necesario calcular la relación porcentual entre elementos. En mesa 6.1 enumera las principales unidades relativas.

  La unidad em es un valor mutable que depende del tamaño de fuente del elemento actual (el tamaño se establece mediante la propiedad de estilo de tamaño de fuente). Cada navegador tiene un tamaño de texto incorporado que se utiliza cuando este tamaño no se especifica explícitamente. Por lo tanto, inicialmente 1em es igual al tamaño de fuente predeterminado del navegador o al tamaño de fuente del elemento principal. La notación porcentual es idéntica a em, en que los valores de 1em y 100% son iguales.

  La unidad ex se define como la altura del carácter "x" minúscula. ex está sujeto a las mismas reglas que em , es decir, que está vinculado al tamaño de fuente predeterminado del navegador o al tamaño de fuente de su elemento principal.

  Un píxel es un punto elemental que se muestra en un monitor u otro dispositivo similar, como un teléfono inteligente. El tamaño de píxel depende de la resolución del dispositivo y de sus características técnicas. El ejemplo 6.4 muestra el uso de píxeles y ems para establecer el tamaño de fuente.

  Ejemplo 6.4. Usando unidades relativas

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  encabezado de 30px

  Tamaño del texto 1,5 em

  
  
  

  El resultado de este ejemplo se muestra a continuación (Figura 6.1).

  Arroz. 6.1. Tamaño del texto con diferentes unidades.

  Unidades absolutas

  Las unidades absolutas se utilizan con menos frecuencia que las relativas y, por lo general, cuando se trabaja con texto. En mesa 6.2 enumera las unidades absolutas básicas.

  Quizás la unidad más común sea el punto, que se utiliza para indicar el tamaño de fuente. Aunque estamos acostumbrados a medir todo en milímetros y unidades similares, el punto es quizás el único valor de un sistema de medición no métrico que se utiliza en todo nuestro país. Y todo gracias a los editores de texto y los sistemas de publicación. El ejemplo 6.5 muestra el uso de puntos y milímetros.

  Ejemplo 6.5. Usando unidades absolutas

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  titular de 24 puntos

  Desplazar el texto hacia la derecha 30 milímetros

  
  
  

  El resultado del uso de unidades de medida absolutas se muestra a continuación (Figura 6.2).

  

  Arroz. 6.2. Tamaño del texto con diferentes unidades.

  Al configurar las dimensiones, asegúrese de especificar las unidades de medida, por ejemplo, ancho: 30 px. De lo contrario, el navegador no podrá mostrar el resultado deseado porque no comprende qué tamaño necesita. Las unidades no se suman sólo cuando el valor es cero (margen: 0).

  Color

  El color en los estilos se puede especificar de tres formas: por valor hexadecimal, por nombre y en formato RGB.

  Por valor hexadecimal

  Los números hexadecimales se utilizan para especificar colores. El sistema hexadecimal, a diferencia del sistema decimal, se basa, como su nombre indica, en el número 16. Los números serán los siguientes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A , B, C , D, E, F. Los números del 10 al 15 se sustituyen por letras latinas. Los números mayores a 15 en el sistema hexadecimal se forman combinando dos números en uno. Por ejemplo, el número 255 en decimal corresponde al número FF en hexadecimal. Para evitar confusiones al determinar el sistema numérico, se coloca un símbolo de almohadilla # antes del número hexadecimal, por ejemplo #666999. Cada uno de los tres colores (rojo, verde y azul) puede tomar valores de 00 a FF. Por lo tanto, el símbolo de color se divide en tres componentes #rrggbb, donde los dos primeros símbolos indican el componente rojo del color, los dos del medio, verde y los dos últimos, azul. Se permite utilizar una forma abreviada como #rgb, donde cada carácter debe duplicarse (#rrggbb). Por ejemplo, la entrada #fe0 se considera #ffee00.

  Por nombre

  Los navegadores admiten algunos colores por su nombre. En mesa 6.3 muestra los nombres, código hexadecimal y descripción.

  Mesa 6.3. Nombres de colores

  Nombre	Color	Código	Descripción
  blanco		#ffffff o #fff	Blanco
  plata		#c0c0c0	Gris
  gris		#808080	Gris oscuro
  negro		#000000 o #000	Negro
  granate		#800000	Rojo oscuro
  rojo		#ff0000 o #f00	Rojo
  naranja		#ffa500	Naranja
  amarillo		#ffff00 o #ff0	Amarillo
  aceituna		#808000	Aceituna
  cal		#00ff00 o #0f0	Verde claro
  verde		#008000	Verde
  agua		#00ffff o #0ff	Azul
  azul		#0000ff o #00f	Azul
  Armada		#000080	Azul oscuro
  verde azulado		#008080	Azul verde
  fucsia		#ff00ff o #f0f	Rosa
  púrpura		#800080	Violeta

  Usando RGB

  Puede definir el color utilizando los valores rojo, verde y azul en términos decimales. El valor de cada uno de los tres colores puede oscilar entre 0 y 255. También puede establecer el color como porcentaje. Primero se especifica la palabra clave rgb y luego los componentes de color se especifican entre paréntesis, separados por comas, por ejemplo rgb(255, 0, 0) o rgb(100%, 20%, 20%).

  El ejemplo 6.6 muestra diferentes formas de configurar los colores de los elementos de una página web.

  Ejemplo 6.6. Representación de color

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  Lorem ipsum dolor sit amet

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.

  
  
  

  El resultado de este ejemplo se muestra en la Fig. 6.3.

  

  Direcciones

  Las direcciones (URI, Identificadores uniformes de recursos) se utilizan para especificar la ruta a un archivo, por ejemplo, para establecer una imagen de fondo en una página. Para hacer esto, use la palabra clave url(); la dirección relativa o absoluta del archivo se escribe entre corchetes. En este caso, la dirección se puede especificar entre comillas simples o dobles opcionales (ejemplo 6.7).

  Ejemplo 6.7. Dirección del archivo gráfico

  HTML5 CSS 2.1 IE Cr Op Sa Fx

  ¡Atención, no se encontró la página solicitada!
  
  
  

  En este ejemplo, el selector de cuerpo usa una dirección absoluta para el archivo gráfico y el selector div usa una relativa.

  Palabras clave

  Las palabras clave se utilizan activamente como valores que determinan el resultado deseado de las propiedades de estilo. Las palabras clave se escriben sin comillas.

  Correcto: P (text-align: right;)
  Incorrecto: P (text-align: "derecha";)

  Preguntas para comprobar

  1. ¿Qué línea contiene el error?

  1. tamaño de fuente: 20px
  2. tamaño de fuente: 0
  3. tamaño de fuente: 1,5 em
  4. tamaño de fuente: 5 mm
  5. tamaño de fuente: 300ex

  2. ¿Qué expresión está escrita correctamente?

  1. color: #fco
  2. ancho: "automático"
  3. tamaño de fuente: azul
  4. fondo: rojo
  5. borde: ninguno

  3. ¿Qué tamaño en puntos tendrá el texto?

  Texto de ejemplo

  , si el siguiente estilo está configurado en la página?

  CUERPO (tamaño de fuente: 24 puntos; )
  P (tamaño de fuente: 50%; )
  SPAN (tamaño de fuente: 1,5 em;)

  4. Anya quiere establecer el color de fondo de la página web en lila. ¿Qué valor para la propiedad de fondo es mejor?

  1. #cbd1e8
  2. rgb(121, 232, 47)
  3. #b6b7be
  4. RGB(205%, 85%, 53%)

  5. ¿Qué hay de malo en el siguiente estilo?

  img (flotante: izquierda; ancho de borde: 3; pantalla: bloque)

  1. Falta un punto y coma al final de la entrada.
  2. No se especifican las unidades para la propiedad de ancho de borde.
  3. Los valores de la izquierda y del bloque se escriben sin comillas.
  4. La propiedad de ancho de borde no existe.
  5. El valor de bloque de la propiedad de visualización no se puede aplicar a las imágenes.

  Respuestas

  1.tamaño de fuente: 1,5 em

  5. No se especifican las unidades de medida para la propiedad del ancho del borde.

  CSS es un lenguaje formal utilizado para describir la apariencia de un documento creado utilizando un lenguaje de marcado (HTML, XHTML, XML). El nombre proviene del inglés Cascading Style Sheets, que significa “hojas de estilo en cascada”.

  ¿Por qué se utiliza CSS?

  El propósito de CSS es separar lo que define la apariencia de una página de su contenido. Si un documento se crea utilizando únicamente HTML, entonces define no solo cada elemento, sino también cómo se muestra (color, fuente, posición del bloque, etc.). Si las hojas de estilo en cascada están conectadas, entonces HTML describe sólo el orden de los objetos. Y CSS es responsable de todas sus propiedades. En HTML, basta con especificar una clase sin enumerar todos los estilos cada vez.

  Esta tecnología:

  • Garantiza un desarrollo relativamente simple y rápido porque una vez creado un diseño, se puede aplicar a muchas páginas;
  • aumenta la flexibilidad y la facilidad de edición: simplemente realice una edición en el CSS para que el diseño cambie en todas partes;
  • simplifica el código, reduciendo la repetición de elementos. Es más fácil de leer para programadores y robots de búsqueda;
  • acelera los tiempos de carga porque CSS se puede almacenar en caché la primera vez que se abre, y en aperturas posteriores solo se lee la estructura y los datos;
  • aumenta la cantidad de soluciones visuales para presentar contenido;
  • brinda la capacidad de aplicar fácilmente diferentes estilos a un documento (por ejemplo, crear una versión adaptada para dispositivos móviles o estilos especiales para personas con discapacidad visual).

  Es decir, las tablas en cascada sirven no sólo para implementar el diseño, sino también para cambiar radicalmente el enfoque de creación de sitios web, simplificando el trabajo de los desarrolladores y proporcionando flexibilidad en la implementación. Para eso está CSS.

  Desarrollo CSS

  La necesidad de desarrollar CSS fue reconocida por el W3C en la década de 1990. En 1996, se adoptó el estándar CSS1, que permite cambiar la configuración de fuente, el color, los atributos del texto, las alineaciones y el relleno. En 1998, se lanzó CSS2, que agregó la capacidad de utilizar diseño de bloques, tablas de sonido, contenido generado, punteros y medios de página. La versión CSS3 aumentó significativamente las capacidades de los estilos: fue posible crear elementos animados sin usar JavaScript, apareció soporte para suavizado, sombras, degradados, etc. La especificación se dividió en módulos, cada uno de los cuales comenzó a desarrollarse por separado. . Desde 2011, se está desarrollando módulos CSS4. Las características se describen actualmente en versiones preliminares.

  Estructura del lenguaje

  CSS se puede describir en términos simples como un conjunto de reglas que describen cómo debe verse un elemento.

  Una regla consta de un selector y un bloque de declaración.

  Selectores

  El selector indica a qué elemento se aplicarán las propiedades de estilo descritas en el CSS. Cualquier etiqueta que pueda formatearse (tamaño, color, etc.) puede actuar como selector. Si necesita establecer diferentes estilos para una etiqueta o aplicar uno para diferentes elementos, se utilizan clases y un registro del formato “Etiqueta.Clase (propiedad: valor;)”. El nombre de la clase se especifica en caracteres latinos y puede contener un guión bajo o un guión. Si no especifica una etiqueta, pero comienza la entrada con ".Class", puede usar la regla para cualquier etiqueta. Si enumera varias clases para una etiqueta, se le aplicarán todos los estilos descritos. El identificador especifica un nombre único para el elemento al que se le aplicará estilo o al que se accederá mediante un script. Entrada "#Identificador (propiedad: valor;)". El nombre del identificador consta de letras del alfabeto latino; se permite utilizar un guión y un guión bajo. Para aplicar un identificador a una etiqueta específica, indique su nombre, luego sin espacio y separado por un signo de almohadilla, el nombre del identificador.

  bloque de anuncios

  Un bloque de declaración consta de pares propiedad:valor (la entrada siempre va seguida de dos puntos), colocados entre llaves. Las entradas terminan con punto y coma. CSS no distingue entre tabulaciones, espacios y mayúsculas y minúsculas. La elección del método de grabación (columna con sangría o simplemente en una línea) queda a discreción del desarrollador. Si se especifican valores diferentes para la misma propiedad para un selector, se le da prioridad a la entrada inferior.

  Conectando CSS

  CSS se puede vincular a HTML de varias maneras:

  • dentro de la etiqueta usando el atributo de estilo. No es necesario especificar un selector;
  • añadir etiqueta