Scribd
Cargar
7 vistas13 páginas

Modulo 2. II Parte. HTML5

Cargado por

mireisy.lorenzog
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
7 vistas13 páginas

Modulo 2. II Parte. HTML5

Cargado por

mireisy.lorenzog
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 13

3.

Hoja de estilo CSS


CSS (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de
un documento HTML, permitiendo controlar aspectos como colores, fuentes, espaciado, y
disposición.

3.1. Sintaxis de CSS

La sintaxis de CSS se compone de selectores y declaraciones. Un selector apunta al


elemento HTML que quieres estilizar, y la declaración contiene una propiedad y su valor.

Estructura básica:

selector {
propiedad: valor;
}

Ejemplo:

Esto cambiará el color del texto de todos los elementos <h1> a azul y su tamaño de
fuente a 24px.

3.2. Selectores CSS

Los selectores en CSS se usan para seleccionar elementos HTML específicos que deseas
estilizar. Existen diferentes tipos de selectores.

3.2.1. Selector de id

El selector de id selecciona un elemento con un atributo id específico. Los id son únicos


por página.

Sintaxis:
Ejemplo:

3.2.2. Selector de clase

El selector de clase selecciona todos los elementos con una clase específica. Las clases
pueden aplicarse a múltiples elementos.

Sintaxis:
Ejemplo:

3.2.3. Selector universal

El selector universal (*) selecciona todos los elementos de la página.

Sintaxis:
Ejemplo:

Esto eliminará los márgenes y el padding de todos los elementos de la página.

3.2.4. Selector de agrupación

El selector de agrupación permite aplicar los mismos estilos a varios selectores.

Sintaxis:

Ejemplo:
Esto aplicará el color azul oscuro a todos los elementos <h1>, <h2> y <p>.

3.3. Atributos

Los atributos de CSS se refieren a las propiedades que controlan el estilo visual de los
elementos HTML. Ejemplos de atributos incluyen:

 color: Cambia el color del texto.

 background-color: Cambia el color de fondo.

 font-size: Ajusta el tamaño de la fuente.

 margin: Define el espacio exterior de un elemento.

 padding: Define el espacio interior de un elemento.

4. Integración de CSS con HTML

CSS puede integrarse en HTML de tres maneras:

a) CSS Inline

El CSS se escribe directamente dentro de un elemento HTML usando el atributo style.


Ejemplo:

b) CSS Interno (en la cabecera)

El CSS se incluye dentro de una etiqueta <style> en la sección <head> del documento
HTML.

Ejemplo:

c) CSS Externo

El CSS se guarda en un archivo separado (.css) y se enlaza al documento HTML con la


etiqueta <link>.

Ejemplo:
Archivo styles.css:

5. Lista de atributos más comunes

Atributos de Texto

Atributo Función Posibles valores Ejemplo

color Define el color del texto. Nombre de color, código color: red;
hexadecimal, RGB, HSL

font-family Define la fuente del texto. Nombre de la fuente, lista font-family:


de fuentes alternativas Arial, sans-serif;

font-size Define el tamaño del texto. px, em, rem, %, vw font-size: 16px;

font- Define el grosor del texto. normal, bold, bolder, font-weight:


weight lighter, 100-900 bold;

font-style Define el estilo de la normal, italic, oblique font-style: italic;


fuente.
font- Define variantes de la normal, small-caps font-variant:
variant fuente (small-caps). small-caps;

line-height Ajusta la altura de la línea número, porcentaje, line-height: 1.5;


del texto. normal

letter- Ajusta el espacio entre número en px, em letter-spacing:


spacing letras. 2px;

text-align Alinea el texto. left, right, center, justify text-align:


center;

text- Controla la capitalización none, capitalize, text-transform:


transform del texto. uppercase, lowercase uppercase;

text- Aplica subrayado, tachado, none, underline, line- text-decoration:


decoration etc. through, overline underline;

text-indent Indenta la primera línea de número en px, em, % text-indent:


un párrafo. 50px;

white- Controla cómo se manejan normal, nowrap, pre, pre- white-space:


space los espacios en blanco. line, pre-wrap nowrap;

word- Ajusta el espacio entre número en px, em word-spacing:


spacing palabras. 5px;

2. Atributos de Fondo

Atributo Función Posibles valores Ejemplo

background- Define el color de Nombre de color, background-color:


color fondo del elemento. código hexadecimal, #f0f0f0;
RGB, HSL

background- Aplica una imagen de url(), none background-image:


image fondo. url('imagen.jpg');

background- Controla la repetición repeat, repeat-x, background-repeat:


repeat de la imagen de fondo. repeat-y, no-repeat no-repeat;

background- Establece la posición left, right, center, background-position:


position de la imagen de fondo. coordenadas en px o % center;

background- Ajusta el tamaño de la auto, cover, contain, background-size:


size imagen de fondo. valores en px o % cover;

background- Fija la imagen de scroll, fixed, local background-


attachment fondo o la permite attachment: fixed;
desplazarse.
background- Controla cómo se border-box, padding- background-clip:
clip pinta el fondo de un box, content-box padding-box;
elemento.

3. Atributos del Modelo de Caja (Box Model)

Atributo Función Posibles valores Ejemplo

margin Define el espacio exterior número en px, %, auto margin: 10px;


alrededor de un
elemento.

padding Define el espacio interior número en px, % padding: 20px;


entre el contenido y
borde.

border Define el borde del border-width border-style border: 1px solid


elemento. border-color black;

border- Redondea las esquinas número en px, % border-radius:


radius del borde. 5px;

border- Define el color del borde. Nombre de color, código border-color:


color hexadecimal, RGB, HSL blue;

border- Define el grosor del número en px, thin, border-width:


width borde. medium, thick 2px;

border- Define el estilo del borde none, solid, dashed, border-style:


style (solid, dashed, etc.). dotted, double dashed;

box- Aplica una sombra al none, h-shadow v-shadow box-shadow: 2px


shadow elemento. blur spread color 2px 5px gray;

width Define el ancho del número en px, %, auto width: 100px;


elemento.

height Define la altura del número en px, %, auto height: 200px;


elemento.

max-width Define el ancho máximo número en px, %, none max-width:


de un elemento. 500px;

max- Define la altura máxima número en px, %, none max-height:


height de un elemento. 400px;

min-width Define el ancho mínimo número en px, % min-width:


de un elemento. 300px;

min-height Define la altura mínima número en px, % min-height:


de un elemento. 150px;

4. Atributos de Posicionamiento

Atributo Función Posibles Ejemplo


valores

position Define el tipo de posicionamiento static, relative, position:


del elemento. absolute, fixed, relative;
sticky

top, right, Posiciona el elemento en relación número en px, %, top: 10px;


bottom, left a su contenedor. auto

z-index Controla la superposición de número, auto z-index: 10;


elementos.

float Flota un elemento hacia la left, right, none float: left;


izquierda o derecha.

clear Controla el comportamiento del none, left, right, clear: both;


siguiente elemento en relación a both
flotantes.

overflow Controla cómo manejar el visible, hidden, overflow: hidden;


contenido desbordante. scroll, auto

clip Recorta un elemento en función de rect(top, right, clip: rect(10px,


un rectángulo. bottom, left) 50px, 100px,
10px);

5. Atributos de Visualización y Flexbox

Atributo Función Posibles valores Ejemplo

display Define cómo se muestra block, inline, inline- display: block;


el elemento. block, none, flex, grid

flex Define cómo crecen o número flex: 1;


encogen los elementos
flexibles.

flex-direction Define la dirección de los row, column, row- flex-direction:


elementos en contenedor reverse, column-reverse row;
flex.

justify- Alinea los elementos flex-start, flex-end, justify-content:


content flexibles en el eje center, space-between, center;
principal. space-around

align-items Alinea los elementos flex-start, flex-end, align-items: flex-


flexibles en el eje center, baseline, stretch start;
transversal.

align-self Alinea un solo elemento auto, flex-start, flex-end, align-self: center;


flexible. center, baseline, stretch

order Cambia el orden de los número order: 2;


elementos flexibles.

gap Define el espacio entre número en px, em gap: 10px;


elementos flexibles o de
grid.

grid- Define el número de número en px, %, auto grid-template-


template- columnas en un columns: 100px
columns contenedor grid. 200px;

grid- Define el número de filas número en px, %, auto grid-template-


template- en un contenedor grid. rows: 100px
rows 150px;

6. Atributos de Visibilidad y Efectos

Atributo Función Posibles valores Ejemplo

visibility Controla la visibilidad del visible, hidden, collapse visibility:


elemento. hidden;

opacity Define la opacidad del número de 0 a 1 opacity: 0.5;


elemento.

cursor Cambia la apariencia del auto, pointer, text, cursor: pointer;


cursor cuando pasa sobre el move, default, none
elemento.

transform Aplica transformaciones como none, rotate(), scale(), transform:


rotación o escala. translate(), skew() rotate(45deg);

transition Define la transición de cambio property duration transition: all


de estilo. timing-function delay 0.5s ease;

animation Aplica una animación al name duration timing- animation: fade-


elemento. function delay iteration- in 2s;
count

filter Aplica efectos visuales como none, blur(), filter: blur(5px);


desenfoque o saturación. brightness(), contrast(),
grayscale()

backdrop- Aplica efectos visuales sobre blur(), brightness(), backdrop-filter:


filter los elementos detrás de un contrast(), grayscale() blur(10px);
fondo.

7. Atributos de Listas

Atributo Función Posibles valores Ejemplo

list-style Define el estilo de la none, disc, circle, square, list-style: square;


lista. decimal, lower-roman, upper-
roman, lower-alpha, upper-
alpha

list-style- Define el tipo de none, disc, circle, square, list-style-type: disc;


type marcador de la lista. decimal, etc.

list-style- Define la posición del inside, outside list-style-position:


position marcador de la lista. inside;

list-style- Define una imagen url(), none list-style-image:


image personalizada como url('marcador.png');
marcador.

8. Atributos de Tablas

Atributo Función Posibles Ejemplo


valores

border- Controla si los bordes de la tabla collapse, border-collapse:


collapse se colapsan. separate collapse;

border- Define el espacio entre bordes de número en px border-spacing:


spacing celdas. 10px;

caption-side Controla la posición del título de la top, bottom caption-side:


tabla. bottom;

empty-cells Controla si las celdas vacías se show, hide empty-cells: hide;


muestran.

9. Atributos de Columnas Múltiples

Atributo Función Posibles valores Ejemplo


column- Define el número de número column-count:
count columnas de un 3;
contenedor.

column- Define el espacio entre número en px, em, % column-gap:


gap columnas. 20px;

column- Define la regla (línea) column-rule-width column- column-rule:


rule entre columnas. rule-style column-rule-color 2px solid black;

También podría gustarte