Marco conceptual de la unidad 5. HTML - CSS

CONCEPTUALIZACIONES DE LA UNIDAD 5
Fundamentos de CSS
CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para dar estilo y
formato a documentos HTML y XML. Con CSS, se pueden controlar aspectos
visuales como el color, el tamaño y la posición de los elementos en una página web.
Además, CSS permite separar el contenido de un documento HTML de su
presentación visual, lo que facilita el mantenimiento y la actualización de los sitios
web.
Los fundamentos de CSS incluyen los siguientes conceptos:
1. Selectores: los selectores son patrones de texto que se utilizan para

seleccionar uno o varios elementos en una página web. Los selectores
pueden basarse en el tipo de elemento (como "p" para párrafos), la clase o
el ID del elemento, o en su posición en la estructura del documento.
2. Propiedades: las propiedades son los atributos que se aplican a los
elementos seleccionados para controlar su apariencia. Algunas de las
propiedades más comunes incluyen color, tamaño de fuente, margen y
padding.
3. Valores: los valores se utilizan para definir el valor de una propiedad. Por
ejemplo, el valor de la propiedad de color podría ser "rojo" o "#FF0000".
4. Estilos en línea: los estilos en línea son estilos CSS que se aplican
directamente a un elemento HTML utilizando el atributo "style". Esto
permite dar estilo a elementos individuales en una página web.
5. Hojas de estilo externas: las hojas de estilo externas son archivos CSS
separados que se enlazan con un documento HTML utilizando la etiqueta
"link". Las hojas de estilo externas permiten mantener la coherencia de
estilo en todo un sitio web y facilitan el mantenimiento.
6. Prioridad de estilos: cuando varios estilos se aplican a un mismo elemento,
la prioridad de los estilos se determina por la cascada de estilos de CSS. La
cascada de estilos sigue un orden de prioridad específico, que tiene en
cuenta la ubicación del estilo (en línea, en la hoja de estilo externa o en la
hoja de estilo interna), la especificidad del selector y la importancia relativa
del estilo.
7. Herencia: algunos estilos se heredan de los elementos padre a los
elementos hijos en una estructura de documentos HTML. Esto significa que
un estilo aplicado a un elemento padre también se aplicará a sus elementos
hijos, a menos que se anule con un estilo específico.
8. Box model: el modelo de caja es un concepto fundamental en CSS que
define cómo se dibujan y se posicionan los elementos en una página web.
Cada elemento se representa como una caja rectangular que consta de
contenido, padding, borde y margen.
Resumiendo, CSS es un lenguaje de estilo esencial para el desarrollo web moderno.

Con una comprensión de los conceptos fundamentales de CSS, es posible dar estilo
y formato a los elementos de una página web y crear sitios web atractivos y
funcionales.
Utilización y aplicación de CSS
CSS (Cascading Style Sheets) es un lenguaje de estilo utilizado para aplicar diseños
visuales a los documentos HTML y XML.
Para aplicar CSS a un documento HTML, podemos usar tres métodos principales:
1. Estilos en línea: podemos aplicar estilos directamente a un elemento HTML

utilizando el atributo "style". Por ejemplo, para cambiar el color de fondo
de un párrafo a rojo, podemos utilizar el siguiente código:
<p style="background-color: red;">Este es un párrafo con fondo

rojo</p>
2. Estilos internos: podemos incluir CSS directamente en la sección "head" de
nuestro documento HTML utilizando la etiqueta "style". Por ejemplo, para
cambiar el color de fondo de todos los párrafos en una página a rojo,
podemos utilizar el siguiente código:
<head>
<style>
p{
background-color: red;
}
</style>
</head>
3. Estilos externos: podemos definir nuestros estilos CSS en un archivo

externo y luego vincularlo a nuestro documento HTML utilizando la
etiqueta "link". Por ejemplo, si tenemos un archivo llamado "estilos.css" que
contiene nuestras reglas CSS, podemos utilizar el siguiente código para
vincularlo a nuestro documento HTML:
<head>
<link rel="stylesheet" href="estilos.css">
</head>
Una vez que hemos aplicado CSS a nuestro documento HTML, podemos utilizar
una amplia variedad de propiedades CSS para personalizar la apariencia de
nuestros elementos HTML. Algunas de las propiedades CSS más comunes incluyen:
• background-color: define el color de fondo de un elemento

• color: define el color del texto de un elemento
• font-family: define la familia de fuentes para el texto de un elemento
• font-size: define el tamaño de fuente para el texto de un elemento
• margin: define el espacio entre un elemento y los elementos adyacentes
• padding: define el espacio entre el contenido de un elemento y su borde
• border: define el borde de un elemento
• width: define el ancho de un elemento
• height: define la altura de un elemento
Para aplicar estilos a elementos específicos, podemos utilizar los selectores CSS.
Los selectores CSS nos permiten seleccionar elementos en función de su tipo,
clase, identificador u otros atributos. Algunos de los selectores CSS más comunes
incluyen:
• Selector de tipo: selecciona todos los elementos de un tipo específico, por

ejemplo "p" para párrafos o "h1" para encabezados de primer nivel.
• Selector de clase: selecciona todos los elementos que tienen una clase
específica, por ejemplo ".mi-clase" para todos los elementos con la clase
"mi-clase".
• Selector de identificador: selecciona el elemento con un identificador
específico, por ejemplo "#mi-identificador" para el elemento con el
identificador "mi-identificador".
• Selector descendiente: selecciona elementos anidados dentro de otros
elementos, por ejemplo "ul li" para seleccionar todos los elementos "li" que
se encuentran dentro de una lista desordenada "ul".
Archivo CSS
Un archivo CSS (Cascading Style Sheets) es un documento que contiene código CSS
utilizado para definir la apariencia y el estilo de una página web. Es una hoja de
estilo que se utiliza para controlar la presentación de los elementos HTML de una
página.
El archivo CSS se utiliza para separar la presentación de la estructura de una página

web, lo que significa que podemos definir el estilo de todos los elementos HTML
en un solo archivo CSS. Esto hace que la estructura de la página sea más legible y
mantenible.
Para utilizar un archivo CSS en una página web, se debe vincular el archivo CSS en
el encabezado del documento HTML utilizando la etiqueta <link>. Dentro de la
etiqueta <link>, se especifica el nombre del archivo CSS y la ubicación del archivo
en el servidor.
Por ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Ejemplo de uso de archivo CSS</h1>
<p>Este es un ejemplo de cómo se puede utilizar un archivo CSS para
aplicar estilos a una página web.</p>
</body>
</html>
En este ejemplo, se está vinculando un archivo CSS llamado "styles.css" ubicado

en la misma carpeta que el documento HTML. Todos los estilos definidos en este
archivo CSS se aplicarán a la página web.
Margin
En CSS, margin es una propiedad que se utiliza para establecer el margen exterior
de un elemento. El margen es el espacio en blanco que se encuentra fuera del
borde de un elemento y se puede definir para cada uno de los cuatro lados del
elemento: arriba, abajo, izquierda y derecha.
La sintaxis básica para establecer el margen de un elemento es la siguiente:

selector {
margin: valor;
}
Donde selector es el elemento HTML al que se le aplicará la propiedad margin y

valor puede ser un número, una medida o una palabra clave que indique la cantidad
de margen que se desea agregar al elemento.
También es posible establecer el margen para cada uno de los cuatro lados del
elemento de forma individual utilizando las siguientes propiedades:
• margin-top: establece el margen superior del elemento

• margin-bottom: establece el margen inferior del elemento
• margin-left: establece el margen izquierdo del elemento
• margin-right: establece el margen derecho del elemento
Por ejemplo, para establecer un margen de 20 píxeles en la parte superior e

inferior y 10 píxeles en los lados izquierdo y derecho de un elemento con la clase
.ejemplo, se puede utilizar el siguiente código CSS:
.ejemplo {
margin-top: 20px;
margin-bottom: 20px;
margin-left: 10px;
margin-right: 10px;
}
Es importante recordar que el valor del margen se suma al tamaño del elemento,
por lo que un margen demasiado grande puede hacer que el elemento ocupe más
espacio del deseado y afectar el diseño de la página web.
Padding
El atributo padding en CSS se utiliza para definir el espacio que hay entre el
contenido de un elemento y su borde interno. Es decir, el espacio que hay entre el
contenido y la línea de borde.
El valor de padding se puede definir de varias maneras. Por ejemplo, se puede
establecer un valor diferente para cada uno de los cuatro lados del borde
(superior, derecho, inferior e izquierdo) utilizando la propiedad padding-top,
padding-right, padding-bottom y padding-left. O bien, se puede establecer un solo
valor que se aplicará a todos los lados del borde utilizando la propiedad abreviada
padding.
Por ejemplo, si queremos aplicar un espacio de 10 píxeles entre el contenido y el

borde de un elemento div, podemos utilizar la siguiente regla CSS:
div {
padding: 10px;
}
Esto establece un espacio de 10 píxeles en todos los lados del borde del elemento
div.
También es posible utilizar valores negativos para el padding, lo que provocaría

que el contenido se superponga al borde del elemento. Por ejemplo:
div {
padding: -10px;
}
En este caso, el contenido del elemento div se superpondría al borde en 10 píxeles

en todos los lados.
Sombras y radio
En CSS, se pueden aplicar sombras y radios a los elementos para darles una
apariencia más estilizada y atractiva.
Para aplicar una sombra a un elemento, se utiliza la propiedad box-shadow. Esta

propiedad permite agregar una o varias sombras al elemento especificado. Se
puede definir el desplazamiento horizontal y vertical de la sombra, su difuminado,
su tamaño y su color. Por ejemplo, para aplicar una sombra a un div con un
desplazamiento horizontal de 2px, un desplazamiento vertical de 2px, un
difuminado de 4px, un tamaño de 6px y un color gris, se puede usar la siguiente
regla CSS:
div {
box-shadow: 2px 2px 4px 6px grey;
}
Para aplicar un radio a los bordes de un elemento, se utiliza la propiedad border-

radius. Esta propiedad permite definir el radio de las esquinas del elemento. Se
puede definir un solo valor para todos los bordes o un valor diferente para cada
borde. Por ejemplo, para aplicar un radio de 10px a los bordes superiores
izquierdos y un radio de 20px a los bordes inferiores derechos de un div, se puede
usar la siguiente regla CSS:
div {
border-top-left-radius: 10px;
border-bottom-right-radius: 20px;
}
La utilización de sombras y radios en los elementos de una página web, nos puede
ayudar a mejorar su diseño y darles un aspecto más profesional.

Marco conceptual de la unidad 5. HTML - CSS

Cargado por

Copyright:

Formatos disponibles

Marco conceptual de la unidad 5. HTML - CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Marco conceptual de la unidad 5. HTML - CSS

Cargado por

Copyright:

Formatos disponibles

CONCEPTUALIZACIONES DE LA UNIDAD 5

Los fundamentos de CSS incluyen los siguientes conceptos:

1. Selectores: los selectores son patrones de texto que se utilizan para

Resumiendo, CSS es un lenguaje de estilo esencial para el desarrollo web moderno.

1. Estilos en línea: podemos aplicar estilos directamente a un elemento HTML

<p style="background-color: red;">Este es un párrafo con fondo

3. Estilos externos: podemos definir nuestros estilos CSS en un archivo

• background-color: define el color de fondo de un elemento

• Selector de tipo: selecciona todos los elementos de un tipo específico, por

El archivo CSS se utiliza para separar la presentación de la estructura de una página

<link rel="stylesheet" href="styles.css">

<h1>Ejemplo de uso de archivo CSS</h1>

<p>Este es un ejemplo de cómo se puede utilizar un archivo CSS para

aplicar estilos a una página web.</p>

En este ejemplo, se está vinculando un archivo CSS llamado "styles.css" ubicado

La sintaxis básica para establecer el margen de un elemento es la siguiente:

Donde selector es el elemento HTML al que se le aplicará la propiedad margin y

• margin-top: establece el margen superior del elemento

Por ejemplo, para establecer un margen de 20 píxeles en la parte superior e

Por ejemplo, si queremos aplicar un espacio de 10 píxeles entre el contenido y el

También es posible utilizar valores negativos para el padding, lo que provocaría

En este caso, el contenido del elemento div se superpondría al borde en 10 píxeles

Para aplicar una sombra a un elemento, se utiliza la propiedad box-shadow. Esta

Para aplicar un radio a los bordes de un elemento, se utiliza la propiedad border-

También podría gustarte