Cascading Style Sheets (CSS) se utiliza para las páginas Web de estilo de una manera que es a la vez coherente y ampliable. El uso de CSS, los diseñadores Web pueden separar atributos de diseño y los estilos de contenido de la página (texto e imágenes), manteniendo efectivamente estilos de página, aparte de la semántica de página. Las hojas de estilo se pueden utilizar en una amplia variedad de formas de Estilo casi todos los elementos incluidos en páginas web, por ejemplo, cuando la alineación de texto en las áreas de texto y el control de desbordamiento de atributos para modificar las barras de desplazamiento en la zona de texto o desplazarse cajas.
Instrucciones
1 Abra un editor de texto y crear un nuevo archivo de texto denominado scrollAlign.html. Por lo general, la selección de "Nuevo" del menú "Archivo" crea nuevos archivos.
2 Añadir algunas etiquetas HTML básicas a la página, incluyendo una etiqueta "<html>", una etiqueta "<head>", un "</ head>" etiqueta, una etiqueta "<body>", un "</ body>" etiqueta y una etiqueta "</ html>".
3 Agregar una etiqueta de estilo entre el HTML "<head>" y "</ head>" etiquetas. Esta etiqueta indica que el estilo de los elementos de la página deben utilizar la hoja de estilo indicado. Dar la etiqueta "<style>" el atributo de tipo "text / css". Cierre la hoja de estilo usando la etiqueta "</ style>".
4 Declarar un estilo llamado "div" entre la "<style>" y "</ style>" etiquetas. El estilo "div" establece los atributos de todas las "<div>" etiquetas utilizadas en la página (suponiendo que el estilo no es anulado). Establezca las siguientes propiedades para la etiqueta "<div>": "altura: 100px", "width: 200px" y "overflow: scroll".
5 Declarar un estilo llamado ".alignCenter" entre la "<style>" y "</ style>" etiquetas. La clase .alignCenter utiliza la propiedad "text-align: center".
6 Declarar tres estilos más nombrado ".alignRight", ".alignLeft", y ".alignJusify" entre la "<style>" y "</ style>" etiquetas. La clase .alignRight utiliza la propiedad "text-align: right", la clase .alignLeft utiliza la propiedad "text-align: left", y la clase .alignJustify utiliza la propiedad "text-align: jusitify".
7 Agregar un cuadro de desplazamiento HTML con una etiqueta "<div>" entre el HTML "<body>" y "</ body>" etiquetas. La etiqueta "<div>" debe utilizar el estilo de clase "bside". Cierre la etiqueta "</ div>".
8 Añadir tres más cuadros de desplazamiento HTML usando la etiqueta "<div>" para cada uno. Coloque estas etiquetas HTML entre el "<body>" y "</ body>" etiquetas. El primer "<div>" etiqueta debe utilizar el estilo de clase "bside", el segundo "<div>" etiqueta debe utilizar el estilo de clase "AlignLeft" y el tercero "<div>" etiqueta debe utilizar el estilo de clase "alignJustify" . Coloque el texto "griega" "Neque Porro quisquam qui est quia dolorem ipsum dolor sit amet, consectetur, adipisci velita" después de cada etiqueta "<div>" y cerrar cada "</ div> etiqueta. Guarde y cierre scrollAlign.html. Después siguiendo los pasos 1 a 8, scrollAlign.html aparecerá como se muestra a continuación:
<Html>
<Head>
<Title> </ title>
<Style type = "text / css">
div {
altura: 100px;
Anchura: 200px;
overflow: desplazarse;
}
.alignCenter {text-align: center;}
.alignRight {text-align: right;}
.alignLeft {text-align: left;}
.alignJustify {text-align: justify;}
</ Style>
</ Head>
<Body>
<Div class = "alignCenter">
Ñeque Porro quisquam qui est quia dolorem ipsum dolor sit amet, consectetur, adipisci velita
</ Div>
<Div class = "bside">
Ñeque Porro quisquam qui est quia dolorem ipsum dolor sit amet, consectetur, adipisci velita
</ Div>
<Div class = "AlignLeft">
Ñeque Porro quisquam qui est quia dolorem ipsum dolor sit amet, consectetur, adipisci velita
</ Div>
<Div class = "alignJustify">
Ñeque Porro quisquam qui est quia dolorem ipsum dolor sit amet, consectetur, adipisci velita
</ Div>
</ Body>
</ Html>
9 ScrollAlign.html abrir en un navegador Web. Compruebe que cada cuadro de desplazamiento utiliza una alineación diferente: centro, derecha, izquierda y justificado.
Consejos y advertencias
- Cuando sea posible, utilizar CSS en forma abreviada al crear estilos mediante la agregación de atributos. Este enfoque hace que los estilos más limpio, más fácil de leer y pueden ahorrar tiempo de carga.
- El selector de ID se puede utilizar en lugar del selector de clase, pero normalmente está reservado para los estilos que no se repiten.
- archivos CSS se pueden importar con el @ importación o el "<link>" comunicado.
- formularios HTML pueden ser de estilo con CSS.
- El modelo de caja CSS puede ser implementado de manera diferente en diferentes navegadores. Asegúrese de revisar los resultados de la página en varios navegadores para asegurarse de que la página tiene un aspecto uniforme.