guia sobre las css

1. Universidad Nacional Micaela Bastidas de Apurímac
Carrera Profesional de Ing. Informática y Sistemas
Guía práctica de laboratorio`
Asignatura: Desarrollo de Software II
TEMA: Sintaxis CSS
DOCENTE: Mag. Elvio Tintaya Zegarra
JP: Roy Braitner Barrientos Oviedo
1. Objetivos de la Practica
1.1. Aprender a Utilizar la Sintaxis CSS
2. Conocimientos Previos
2.1. Tener conocimientos en etiquetas HTML
3. Marco Teórico
3.1. Capa de Estilos CSS
El acrónimo CSS (Cascading Style Sheets) significa "Hojas de estilo en cascada" y
se basa en un concepto simple pero muy poderoso: aplicar estilos (colores, formas,
márgenes, etc.) a uno o más documentos (generalmente documentos HTML, páginas
web) son numerosos. Se denominan estilos en cascada porque se aplican de arriba a
abajo (siguiendo un patrón del que hablaremos más adelante llamado herencia), y si
hay ambigüedad, se siguen una serie de reglas para resolverla. La idea de CSS es
utilizar el concepto de separación de presentación y contenido en un intento de
garantizar que los documentos HTML contengan solo información y datos, el
significado de la información (contenido) que se transmitirá y todos los aspectos
relevantes de los estilos ( diseño, colores, formas, etc.) se encuentran en separado En
la documentación CSS.
Se puede unir todo lo relacionado con lo visual en un solo documento css, con ello
tendremos varias ventajas.
• Si necesitamos hacer una modificación visual, lo hacemos en un solo lugar.
No necesitamos editar todo el HTML.
• La menor repetición de estilos en diferentes lugares facilita la organización
y la realización de cambios. Además, hay mucha menos información para
transferir al final (las páginas se descargan más rápido).
• Es más fácil crear diferentes versiones de presentaciones para otro tipo de
dispositivos: tabletas, smartphones o dispositivos móviles, etc...
3.2. Sintaxis Basica
La estructura CSS se basa en reglas que tienen el formato:

2. • Selector: El selector es el elemento HTML que vamos a seleccionar del
documento para aplicarle un estilo concreto. Por ejemplo, con p
seleccionaríamos todas las etiquetas <p> del HTML. Más adelante veremos
que esto puede ser mucho más complejo, y dedicaremos una serie de
capítulos exclusivamente a este tema.
• Propiedad: La propiedad es una de las diferentes características que brinda
el lenguaje CSS y que aplicaremos al selector para darle estilo.
• Valor: Cada propiedad CSS tiene una serie de valores concretos a que se le
pueden asignar, con los que tendrá uno u otro comportamiento.
Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido
de la siguiente regla. El último punto y coma es opcional y se puede omitir si se
desea:
3.3. Selectores CSS
• Selectores de elemento.- El selector de elementos selecciona elementos
HTML en función del nombre del elemento.
• Selectores de ID.- El selector de id usa el atributo id de un elemento HTML
para seleccionar un elemento específico. La identificación de un elemento es
única dentro de una página, por lo que el selector de identificación se usa para
seleccionar un elemento único. Para seleccionar un elemento con una

3. identificación específica, escriba un carácter hash (#), seguido de la
identificación del elemento.
• Selectores de Clases.- El selector de clase selecciona elementos HTML con
un atributo de clase específico. Para seleccionar elementos con una clase
específica, escriba un carácter de punto (.), seguido del nombre de la clase.
• Selector Universal.- El selector universal (*) selecciona todos los elementos
HTML de la página.
3.4. Bordes en CSS.
Estilos de bordes
La propiedad Border-style especifica que tipo de borde mostrar, Se permiten los
siguientes valores
• dotted- Define un borde punteado
• dashed- Define un borde discontinuo
• solid- Define un borde sólido
• double- Define un borde doble
• groove- Define un borde ranurado 3D. El efecto depende del valor del color
del borde.
• ridge- Define un borde estriado 3D. El efecto depende del valor del color del
borde.
• inset- Define un borde de inserción 3D. El efecto depende del valor del color
del borde.
• outset- Define un borde inicial 3D. El efecto depende del valor del color del
borde.
• none- No define ningún borde
• hidden- Define un borde oculto
Ancho de borde
La propiedad border-width especifica el ancho de los bordes
Color de Borde

4. La propiedad border-color se utiliza para establecer el color de los bordes, el color
se puede configurar mediante:
• nombre - especifique un nombre de color, como "rojo"
• HEX: especifique un valor HEX, como "#ff0000"
• RGB: especifica un valor RGB, como "rgb(255,0,0)"
• HSL: especifique un valor HSL, como "hsl(0, 100%, 50%)"
• Transparente
3.5. Márgenes en CSS
Los márgenes se utilizan para crear espacio alrededor de los elementos, fuera de los
bordes definidos. La propiedad margin se utiliza para crear espacio alrededor de los
elementos, fuera de los bordes definidos.
Márgenes lados Individuales. - CSS tiene propiedades para especificar el
margen de cada lado de un elemento:
• margin-top
• margin-right
• margin-bottom
• margin-left
Todas las propiedades de margen pueden tener los siguientes valores:
• auto - el navegador calcula el margen
• longitud : especifica un margen en px, pt, cm, etc.
• % - especifica un margen en % del ancho del elemento contenedor
3.6. Padding en CSS
La propiedad padding se utiliza para crear espacio alrededor del contenido de un
elemento, dentro de los bordes definidos.
Padding Lados Individuales. - CSS tiene propiedades para especificar el relleno
para cada lado de un elemento:
• padding-top
• padding-right
• padding-bottom
• padding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
• longitud : especifica un relleno en px, pt, cm, etc.
• % - especifica un relleno en % del ancho del elemento contenedor
3.7. Tablas en CSS
En una pagina web generalmente las tablas son creadas con etiquetas html y se
utilizan CSS para mejorar el estilo visual.
Bordes de tabla. - Para especificar bordes en una tabla se utiliza la propiedad
border en CSS

5. Ancho y alto de la tabla. - El ancho y el alto de una tabla están definidos por las
propiedades width y height
Alineamiento de la tabla. - La propiedad text-align establece la alineación
horizontal (como izquierda, derecha o centro) del contenido en <th> o <td>.
• Para alinear al centro el contenido de los elementos se utiliza text-
align:center;
• Para alinear el contenido a la izquierda se utiliza la propiedad text-
align:left;
• Para Alinear de manera vertical se utiliza la propiedad vertical-align
Relleno en Tabla. - Para controlar el espacio entre el borde y el contenido de
una tabla, se utiliza la propiedad padding en los elementos <td> y <th>.
Divisores horizontales. – Para utilizar divisores horizontales en una tabla
agregue la propiedad border-bottom a <th> y <td>

6. Resaltado en tabla. – Para resaltar las filas en una tabla al pasar el mouse por
encima se usa el selector :hover en <tr>.
Tablas rayadas. – Para dar un estilo de rayas de cebra a una tabla se utiliza el
selector nth-child() y agregaremos un background-color a todas las filas pares
(o impares) de la tabla.
Color de la Tabla. – Para dar un color a la tabla se utiliza la propiedad
background-color en los elementos <th> y color en elementos de texto.
3.8. Listas en CSS
Las propiedades de la lista CSS le permiten:
• Establecer diferentes marcadores de elementos de lista para listas ordenadas
• Establezca diferentes marcadores de elementos de lista para listas
desordenadas
• Establecer una imagen como marcador de elemento de lista
• Agregar colores de fondo a listas y elementos de lista
Diferentes Marcadores de Elementos de Lista.- Para especificar el tipo de
marcador de un elemento de lista se usara la propiedad list-style-type.
Imagen como marcador de elemento de lista.- Para especificar una imagen
como marcador de elemento de lista se utiliza la propiedad list-style-image.

7. Posición de elementos de lista. - La propiedad list-style-position especifica
la posición de los marcadores de elementos de lista (viñetas)
Colores en elementos de lista. – Se pueden diceñar listas con colores para darle
una apariencia mas atractiva utilizando la propiedad background. Todo lo que se
agregue a la etiqueta <ol> o <ul> afecta a toda la lista, mientras que las
propiedades agregadas a la etiqueta <li> afectarán a los elementos individuales de
la lista.
3.9. Enlaces CSS
Los enlaces se pueden diseñar de muchas maneras, cualquier propiedad CSS puede
ser utilizado para la apariencia de los enlaces (ejemplo color, font-family,
background, etc.).

8. Además, los enlaces pueden tener un estilo diferente según el estado en el que se
encuentren.
Los cuatro estados de enlace son:
• a:link- un enlace normal, no visitado
• a:visited- un enlace que el usuario ha visitado
• a:hover- un enlace cuando el usuario pasa el mouse sobre él
• a:active- un enlace en el momento en que se hace clic
Decoración del texto. – La propiedad text-decoration se utiliza principalmente
para eliminar los subrayados de los enlaces.

9. Color de fondo.- La propiedad background-color se puede utilizar para
especificar un color de fondo para los enlaces.
Botones como enlace.- Se puede usar enlaces como botones o cuadros utilizando
propiedades conocidas (margin, padding, color, background-color, text-
decoration, etc)
3.10. Posición en CSS
La propiedad posición en CSS especificas el tipo de método de posicionamiento que
es utilizado para un elemento, existen 5 valores de posición diferentes:
• Static
• Relative
• Fixed
• Absolute
• Sticky
Posicion Estatica.- Los elementos HTML se colocan estáticos de forma
predeterminada. Los elementos posicionados estáticos no se ven afectados por las
propiedades superior, inferior, izquierda y derecha. Un elemento con position:

10. static; no está posicionado de ninguna manera especial; siempre se posiciona de
acuerdo con el flujo normal de la página
Posición Relativa. - Un elemento con position: relative; se coloca en relación
con su posición normal. Establecer las propiedades superior, derecha, inferior e
izquierda de un elemento relativamente posicionado hará que se ajuste fuera de su
posición normal. El resto del contenido no se ajustará para encajar en ningún
espacio dejado por el elemento.
Posición Fija. - Un elemento con position: fixed; se coloca en relación con la
ventana gráfica, lo que significa que siempre permanece en el mismo lugar,
incluso si se desplaza la página. Las propiedades superior, derecha, inferior e
izquierda se utilizan para colocar el elemento.
Posición Absoluta. - Un elemento con position: absolute; se coloca en relación
con el ancestro posicionado más cercano (en lugar de posicionarse en relación con
la ventana gráfica, como fijo). Sin embargo; si un elemento con posición absoluta
no tiene ancestros con posición, utiliza el cuerpo del documento y se mueve junto
con el desplazamiento de la página.

11. Posición Pegajosa. - Un elemento con position: sticky; se posiciona en función
de la posición de desplazamiento del usuario.
3.11. Alineamiento en CSS
Para alinear un elemento se utilizará la propiedad margin se utiliza mayormente en
elementos de bloque como <div>
Alineamiento de texto. - Para alinear un texto dentro de un elemento se utiliza la
propiedad text-align: center;
Centrar una Imagen.- Para centrar una imagen, establezca el margen izquierdo
y derecho auto y conviértalo en un block elemento

12. Uso del Flotador en el alineamiento horizontal. - Otro método para alinear
elementos es usar la propiedad float
4. Ejercicios propuestos
• Crear un documento html utilizando las hojas de estilo CSS para
replicar la siguiente pagina
• Crear una pagina web con tu autobiografía como contenido utilizando
HTML y CSS tomando como referencia el siguiente formato

13. • Crear una pagina web utilizando formularios a travez de HTML para
los elementos y CSS para los estilos utilizando como referencia la
siguiente imagen.