Estilo, Propiedades Y Formato
Estilos CSS Introducción
Estilo en línea
Crear una regla de estilo
Si un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta HTML, por lo que si se debe modificar, se debe de ir al elemento. En el Inspector de propiedades En el Inspector de dedestino, CSS, en Regla propiedades CSS, seleccionamos <Nuevo estilo en en Regla de destino, línea>. seleccionamos <Nueva regla CSS>. modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerá la siguiente
Estilos CSS Introducción
Estilo en línea
Crear una regla de estilo
Si un determinado estilo afecte a un único elemento y en un caso puntual, podemos crearlo como un estilo en línea. Esto incrustará el estilo en la propia etiqueta HTML, por lo que si se debe modificar, se debe de ir al elemento. En el Inspector de propiedades CSS, en Regla de destino, En el Inspector de seleccionamos <Nuevo estilo en propiedades CSS, en Regla línea>. de destino, seleccionamos <Nueva regla CSS>. modificar sus propiedades o pulsamos en Editar regla. En cualquier caso nos aparecerá la siguiente
Tipo de selector
•Clase: Es el alias que tomará el estilo, y para que afecte a un elemento, debemos de aplicarle esa clase. El nombre de la clase va precedido por un punto, y si no lo ponemos lo hará Dreamweaver. •ID: El id es un atributo html, que podemos dar a cualquier elemento, y que lo identifica de forma única y concreta. Por tanto, el estilo sólo puede afectar a un elemento en cada página, al que tenga ese ID. En el selector, se escribe precedido por #. •Etiqueta. El estilo afectará a todas las apariciones de la etiqueta HTML indicada. •Compuesto: Combina los selectores anteriores, Ejemplo: p.resaltado afecta únicamente a los párrafos con la clase Nombrepero del no selector: esta opcióncon permite resaltado, a los encabezados esa asignar
Actividad Clase 1. Clic en la opción regla en la barra de propiedades de css al lado del icono de vinculo. 2. Clic en código fuente de base “div id=“base” y clic en nueva regla, se abre una cuadro de dialogo con el nombre de “base” y damos clic en aceptar para las propiedades de base, selecciono fondo y el color a gusto. 3. Clic en cuadro para definir el tamaño puede ser de 1000 px (ancho) X 900 Px (alto) y aceptar. Así se obtiene el color y la dimensión de la página. Para observar clic en vista previa o con F12. 4. Clic en código fuente de cabecera “div id= “cabecera” y clic en regla, esta la base y regla y clic en aceptar, selecciono fondo y escojo el color de fondo a gusto. Elija la opción de cuadro y defina 1000 px (ancho) X 200 px(alto) y aceptar. 5. En diseño en base suprima o borre el texto, luego en código fuente debajo de Div base elimine cuidadosamente la etiqueta <p>&nbsp;</p> y guarde los cambios. Para observar clic en vista previa o con F12. 6. Seleccione logo en diseño y clic en nueva regla se visualiza los nombre
Actividad Clase Recuerde guardar los cambio en código fuente y en estilo. 8. En diseño en cabecera suprima o borre el texto, luego en código fuente debajo de Div cabecera elimine cuidadosamente la etiqueta <p>&nbsp;</p> y guarde los cambios. Para observar clic en vista previa o con F12. 9. Seleccione baner en código fuente y clic en la regla se visualiza los nombre de #base #cabecera, #baner y aceptar. Seleccione fondo y defina el color del fondo del baner y luego en cuadro digito el tamaño 800 px (ancho) X 200 px (alto), seleccione la opción float y escoja Right y aceptar. Recuerde guardar los cambio en código fuente y en estilo. 10. Seleccione menú_horizontal en código fuente y clic en la regla se visualiza los nombre de #base #menú_horizontal y aceptar. Seleccione fondo y defina el color del fondo del menú_horizontal y luego en cuadro digito el tamaño 1000 px (ancho) X 30 px (alto), seleccione la opción float y escoja Right y aceptar. Recuerde guardar los cambio en código fuente y
Actividad Clase 11. Seleccione contenedor en código fuente y clic en la regla se visualiza los nombre de #base #contenedor y aceptar. Seleccione fondo y defina el color del fondo del menú_horizontal y luego en cuadro digito el tamaño 1000 px (ancho) X 650 px (alto), seleccione la opción float y escoja Right y aceptar. 12. Seleccione menú_lateral en código fuente y clic en la regla se visualiza los nombre de #base #contenedor,# menú_lateral y aceptar. Seleccione fondo y defina el color del fondo y luego en cuadro digito el tamaño 200 px (ancho) X 650 px (alto), seleccione la opción float y escoja Left y aceptar. Recuerde guardar los cambio en código fuente y en estilo. 13. En diseño en contendor suprima o borre el texto, luego en código fuente debajo de Div contenedor elimine cuidadosamente la etiqueta <p>&nbsp;</p> y guarde los cambios. Para observar clic en vista previa o con F12. 14. Seleccione cuerpo en código fuente y clic en la regla se visualiza los nombre de #base #contenedor, #cuerpo y aceptar. Seleccione fondo y
Actividad Clase 15. Seleccione publicidad en código fuente y clic en la regla se visualiza los nombre de #base #contenedor, #publicidad y aceptar. Seleccione fondo y defina el color del fondo y luego en cuadro digito el tamaño 200 px (ancho) X 650 px (alto), seleccione la opción float y escoja Right y aceptar. Recuerde guardar los cambio en código fuente y en estilo. 16. Seleccione pie de página en código fuente y clic en la regla se visualiza los nombre de #base #pie de página y aceptar. Seleccione fondo y defina el color del fondo y luego en cuadro digito el tamaño 200 px (ancho) X 650 px (alto), seleccione la opción float y escoja Right y aceptar. Recuerde guardar los cambio en código fuente y en estilo. 17. Elimine cuidadosamente la etiqueta <p>&nbsp;</p>. 18. Clic en estilo Css y doble clic base en cuadro en padding en igual para todos deshabilite y en las opciones de top, right, bottom y left habilite vacío en todos. 19. En Margin padding en igual para todos deshabilite y en las opciones de top, right, bottom y left habilite auto en todos.
Actividad Clase 1.Realizar apunte inteligente (mapa conceptual). 2.Practicar y utilizar estilo Css para dar formato a página Web a través de reglas y sus propiedades en el diseño. Extra Clase Continuar con el formato de estilo y estructura de la página utilizando las herramientas y propiedades de texto, Css, regla y propiedades. Link de refuerzo: https:// www.youtube.com/watch?v=9_oR0EmW0So&list=PLyMfhTCR6CPtxG82Nv6fvv LEYkMiN7pXC&index=6 https:// www.youtube.com/watch?v=SLHplPyW8fs&list=PLyMfhTCR6CPtxG82Nv6fvvL EYkMiN7pXC&index=7