Cómo crear clases CSS para diseños de página Web

10-28  Fuente: Red de recoleccin  Vistas: 5 

Advertisement

Clases de Cascading Style Sheets (CSS) permitir a los diseñadores web para asignar atributos similares a múltiples etiquetas HTML sin tener que crear entradas para cada una. En lugar de colocación de estilos, como el color, tamaño de fuente, la altura y el ancho directamente en las etiquetas HTML, todos los atributos de estilo se colocan en un archivo separado llamado un archivo CSS. El archivo HTML está vinculada a la CSS, y cuando un visitante del sitio Web tiene acceso al archivo HTML en un navegador web, el HTML carga los atributos en el archivo CSS y las aplica a las etiquetas HTML apropiadas.

Cosas que necesitará

Editor de texto

navegador web

Configurar el archivo CSS

Cree un archivo HTML normal. Debe contener al menos las siguientes etiquetas:

<! DOCTYPE HTML PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" />
<title> Nombre del sitio web </ title>
</ head>
<body>
</ body>
</ html>

Crear un directorio dentro del directorio de documentos HTML y lo llaman "estilos".

Hacer un nuevo archivo en el directorio "estilos" llamado "style.css". Debe ser un archivo de texto vacío.

Edite el archivo HTML y añadir la siguiente línea directamente encima de la etiqueta </ ​​head>:

<link rel = "stylesheet" type = "text / css" href = "estilos / style.css" />

Asignar Clases

Edite el archivo HTML.

Crear un cuadro genérico que va a utilizar para aplicar estilos Por ejemplo:

<div class = "classname"> </ div>

Reemplazar "nombre de clase" con un nombre que mejor describe su clase.

Asigne el mismo nombre de la clase a cualquier etiqueta que desea tener las mismas características. Por ejemplo, si usted tiene 10 cajas y cinco de ellos tendrá el mismo aspecto exacto, asigne la clase de esos cinco etiquetas.

Para cada uno de los elementos del grupo que tiene un estilo único, asignar una nueva clase para ello.

Especifique estilos para las clases

Edite el archivo CSS.

Crear una entrada para cada clase que haya asignado con el siguiente formato:

.nombre de clase { }

Asignar atributos a las clases. Por ejemplo:

.classname {height: 30px; background-color: #ffffff}

Repita los mismos pasos para cada clase, y asegúrese de guardar periódicamente sus documentos.

Abra el archivo HTML en un navegador web en cualquier momento para revisar su trabajo, y también comprobar el código con un validador de CSS.

Consejos y advertencias

El son cientos de estilos CSS que se pueden asignar. Utilice el enlace que aparece en Recursos para aprender más sobre ellos. Recuerde que debe guardar sus documentos y comprobar su trabajo con frecuencia.

Artculos relacionados
  • Cómo crear clases CSS para diseños de página Web 10-28

    Clases de Cascading Style Sheets (CSS) permitir a los diseñadores web para asignar atributos similares a múltiples etiquetas HTML sin tener que crear entradas para cada una. En lugar de colocación de estilos, como el color, tamaño de fuente, la altur

  • Cómo crear una lista desplegable en una página Web 05-16

    Creación de un menú desplegable es una forma sencilla de obtener más opciones en su página. También es más fácil de programar y se puede hacer con un par de nuevas etiquetas, <select> y <option>. Cosas que necesitará Computadora Conocimientos

  • Cómo crear un degradado suave en una página Web 02-09

    Un diseñador web tiene muchas opciones para la elaboración de la apariencia de una página web. Gradientes de fondo son una de esas opciones. Pueden ser una parte funcional o decorativo de diseño web. El método más común para añadir un gradiente a una

  • Cómo crear secciones expandibles dentro de una página Web 08-07

    Secciones expandibles a menudo aparecen en las páginas Web como menús o fragmentos del blog. Estas secciones expandibles pueden ser creados usando JavaScript y propiedades CSS. Con un poco de conocimientos de HTML, puede crear secciones expandibles d

  • Cómo crear una fuente RSS desde cualquier página web 05-08

    Un sitio web que tiene Really Simple Syndication (RSS) le proporciona una página de contenido (alimentación) que muestra el Sitea más € ™ s en una pantalla de texto abreviado. Estos canales RSS entonces se observan en los lectores RSS (agregadores),

  • Cómo crear un 5 Columna plantilla de página web sin tablas CSS 01-23

    Maquetación de una página web con las hojas de estilo en cascada en lugar de tablas puede ser difícil para las personas que están acostumbrados a código basado en tablas, sobre todo cuando se trata de la colocación de lado la información de la otra,

  • Cómo crear una línea vertical en tu página web 01-17

    Muchos sitios web dividen su contenido en columnas y se dividen con líneas verticales. A diferencia de una línea horizontal, que se puede insertar usando un "<hr>" código de HTML estándar, las líneas verticales tienen que ser manipulado de

  • Cómo crear un concurso incrustar en una página web 04-13

    Creación e incrustación de su propio concurso en su sitio web puede ser extremadamente difícil y requiere mucho tiempo - si lo haces a ti mismo en HTML. Afortunadamente, hay sitios web que ayudan a crear tu propio test integrado de forma gratuita. My

  • Cómo crear los Rolling fotos en una página Web 01-31

    Creación de rodadura (también conocido como desplazamiento) fotos en una página web se puede hacer con poco conocimiento de diseño web página. Con fotos de rodadura de una página web, un pequeño espacio en la página puede estar lleno de docenas de fo

  • Cómo crear espacio entre imágenes en una página Web 03-16

    A menos que se agrega específicamente el código HTML adecuado, una imagen en su página Web no tendrá espaciamiento cuneta entre éste y cualquier otra imagen. El CSS o Cascading Style Sheet, propiedad margen agregará espacio alrededor de los cuatro la

  • Cómo crear un acceso directo a una página web Firefox 06-09

    Aunque Firefox te permite crear marcadores para acceder fácilmente a tus páginas favoritas, debe abrir el navegador de Internet antes de poder acceder a sus sitios web marcados. Sin embargo, puede crear un acceso directo de escritorio que se abrirá e

  • Cómo Crear un fondo multicolor en una página Web 08-20

    Nuevos autores de páginas Web pueden tomar varios enfoques para dar una página un fondo multicolor. Una forma común consiste en hojas de estilo en cascada (CSS) para mostrar la imagen de fondo. CSS utiliza "etiquetas" similares a las del lenguaj

  • Cómo crear puntos de anclaje en una página Web 01-26

    Creación de puntos de anclaje en una página web es una excelente manera de organizar grandes cantidades de datos. Los puntos de anclaje actúan muy parecido a la mesa de un libro de contenido: Puede hacer clic en un punto de anclaje para saltar a otra

  • Cómo crear un Comentario Page en una página web 04-10

    Comentar páginas permiten a los visitantes del sitio web para dejar sus propios comentarios en su sitio. Por lo general, estas páginas de comentarios son públicos, y los visitantes del sitio posteriores pueden ver los mensajes que otros han dejado. E

  • Cómo hacer un diseño para un ajuste Página Web 03-21

    Por desgracia para los diseñadores web, pantallas de computadoras todavía vienen en una amplia variedad de formas y tamaños, lo que hace difícil para crear un diseño de página web que parece siempre bueno para todos los que lo ven. Aquí es donde "el

  • Cómo crear un favicon para su página web 01-01

    Un favicon aparece en la barra de direcciones de su navegador. Por ejemplo, el favicon eHow es la letra O con una marca de verificación que se ve en el logo del sitio. Muchos sitios utilizan estos favicons para ayudar a identificar y marca de su siti

  • Cómo crear un CSS Vertical Barra de navegación Uso 11-25

    Creación de una barra de navegación horizontal añadirá funcionalidad a su sitio y ayudar a mantenerlo organizado. También puede agregar valor en términos de SEO. Es un proceso simple que se puede hacer uso de CSS o Cascading Style Sheets. Cómo crear

  • Cómo crear una revista para niños 03-03

    Revistas independientes van y vienen en estos días. El Internet y la disponibilidad de software de autoedición, hacen que sea fácil para casi cualquier persona para crear y publicar una revista. El éxito de una revista independiente depende del tamañ

  • Cómo utilizar iWeb para hacer una página web 07-10

    Programa iWeb de Apple Computer, parte de la suite de aplicaciones iLife, realmente está diseñado para los blogs personales, pero va a trabajar para el diseño simple página web, también. Dreamweaver es el programa de diseño de sitios web top-of-the-l

  • Cómo crear un calendario para un boletín de noticias 03-20

    Gran, tienes un boletín de noticias! Se puede mantener a los compañeros de trabajo y clientes tanto de las novedades de la empresa o puede actualizar los familiares cercanos y lejanos en cuentos de terribles 2s de Junior, pero de cualquier manera, us