Scribd
Cargar
2 vistas

CSS

El documento explica el uso de CSS (Cascading Style Sheets) para estilizar páginas web, separando el contenido HTML de la presentación visual. Se detallan las ventajas y desventajas de CSS, así como su sintaxis, selectores y métodos para agregar estilos a documentos HTML. Además, se describe la estructura básica de una página web y cómo aplicar reglas CSS para modificar la apariencia de elementos específicos.

Cargado por

nereadiazlasalle
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
2 vistas

CSS

El documento explica el uso de CSS (Cascading Style Sheets) para estilizar páginas web, separando el contenido HTML de la presentación visual. Se detallan las ventajas y desventajas de CSS, así como su sintaxis, selectores y métodos para agregar estilos a documentos HTML. Además, se describe la estructura básica de una página web y cómo aplicar reglas CSS para modificar la apariencia de elementos específicos.

Cargado por

nereadiazlasalle
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/ 9

INTRODUCCIÓN

 CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style Sheets).
Funciona junto con el HTML que se encarga del contenido.
 Este lenguaje se utiliza para dar estilo a las páginas web, es decir, describe como va a
ser visualizado el HTML y nos permite crear páginas web atractivas.
 Se denominan hojas de estilo en cascada porque se puede tener varias, heredando
propiedades entre ellas.
 CSS ahorra trabajo, puede controlar el diseño de varias páginas web. Se pueden crear
reglas para indicar a las páginas web como mostrar la información: fuentes, colores,
tamaños, etc.
 Lo habitual es crear una plantilla HTML con la estructura/maquetación deseada y otra
plantilla con los estilos, que sirvan de base al desarrollo de todas las páginas
posteriores.

La estructura de la página web la organizamos en HTML, los estilos (el formato) con CSS.
Ventajas de las CSS:

 Separa el contenido (HTML) de la presentación visual, con lo que se mejora la


legibilidad del código y facilita el mantenimiento y actualización de estilos.
 Los estilos se definen una sola vez y se aplican a múltiples elementos de las páginas.
 Es utilizable en todos los navegadores y plataformas.
 Mejora el rendimiento, al tener los estilos en un archivo CSS, el navegador almacena en
cache los estilo y los aplica a las distintas páginas del sitio con lo que hay una mejora
del rendimiento, ya que solo se carga una vez.

Desventajas del uso de CSS:

 Entender todas las propiedades y selectores lleva tiempo y práctica, es un lenguaje


diferente a HTML.
 Aunque los estándares de CSS son aceptados, algunos navegadores podrían
interpretar los estilos de manera diferente.
 El orden de las reglas y la jerarquía pueden provocar conflictos y problemas de
estilo.

ESTILOS EN HTML
En HTML los estilos son muy básicos y vienen predeterminados por el navegador para
asegurarse de que sean legibles, incluso si el autor de la página no especifica un estilo explícito.

Los navegadores tienen hojas de estilo internas que contienen estilos predeterminados, que se
aplican a todas las páginas por defecto. Todos los navegadores modernos muestran el
contenido HTML por defecto de la misma manera.

Cuando queremos modificar la elección que ha hecho el navegador utilizamos reglas CSS para
cambiar su apariencia.

Usando CSS se pueden controlar con precisión cómo se ven los elementos HTML en el
navegador, que presentará para las etiquetas de marcado el diseño que establezcamos: títulos,
párrafos, enlaces, colores, etc.
ESTRUCTURA / MAQUETACIÓN HTML
Maquetar o estructurar una página web consiste en organizar su contenido para que cada
elemento aparezca en el lugar y con el formato que queramos.

Hemos visto que la estructura de una web se divide en:

 Cabecera o header: parte superior de la página web. Se incluye información básica de la


empresa/ marca y elementos identificativos como el logotipo, el menú de navegación o el
cuadro de búsqueda. La cabecera es consistente en todo el sitio, es decir, se repite en cada
página de la web y suele ser fija, a medida que el usuario navega por el sitio web, la
cabecera no se mueve, se mantiene siempre visible y accesible. La cabecera de la web
podemos identificarla en lenguaje HTML cuando aparece entre las etiquetas:
<header>Contenido de la cabecera</header>.

 Cuerpo o body: contiene el contenido principal de la web. Esta parte cambia en cada
página, ya que no presentamos la misma información en la página de ‘servicios’ que en la
página de ‘contacto’.

El cuerpo aparece entre las etiquetas: <body>Contenido del cuerpo</body>

 Pie de página o footer: parte inferior de la página web. Al igual que la cabecera, es fija
y consistente en cada página. En el pie se pueden incluir elementos como un menú
simplificado, logotipo, información de contacto, política de privacidad, botones de
redes sociales, formas de pago, etc.

No hay una regla fija para establecer la estructura de una web, pero sí recomendaciones o
tendencias. Podemos ver un ejemplo en la siguiente imagen:

 Cabecera: logotipo y título.


 Menú de navegación
 Cuerpo principal
 Pie de página
 Partes opcionales: zona de anuncios, enlaces,…

SINTAXIS DE CSS
CSS es un lenguaje basado en reglas. Cada usuario define las reglas que especifican los grupos
de estilos que van a aplicarse a elementos particulares o grupos de elementos de la página
web.

Por ejemplo: h1 {
color: red;
«Quiero que el encabezado principal de mi página se
muestre en letras grandes de color rojo». font-size: 5em;
}
La regla se abre con un selector. Este selecciona el elemento HTML que vamos a diseñar. En
este caso, un encabezado de nivel uno (<h1>).

Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más declaraciones, que
tomarán la forma de pares de propiedad (color) y valor (negro). Cada par especifica las
propiedades de los elementos seleccionados y el valor que queremos dar a esa propiedad.
Algunos valores se aprenden rápidamente, mientras que otros deberán buscarse.

SELECTORES
Cada regla CSS comienza con un selector o una lista de selectores que indican al navegador a qué
elemento o elementos deben aplicarse dichas reglas. Todos los siguientes son ejemplos de
selectores válidos o listas de selectores.
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/How_CSS_is_structured

Una regla CSS sería:


p{color:blue;font-family:Verdana;}

Todas las reglas CSS comienzan con un selector, en la anterior sería “p” que indica la parte
del documento al que se le aplica la regla. Al selector le siguen unas declaraciones entre llaves
que incluyen propiedades separados por punto y coma. En la anterior regla color es la
propiedad y blue el valor.

Siempre que se utilice el párrafo en HTML se le aplican las propiedades de color y fuente.

DAR FORMATO A HTML

El selector puede corresponder a:

 Una etiqueta convencional de HTML, a la que le queremos modificar algún parámetro.

En este caso, el selector se corresponde exactamente con el nombre de la etiqueta; por


ejemplo, h1, que hacer referencia al texto de título.

 Una etiqueta «div» acompañada por el identificador «id», que manifiesta la existencia
única de esa etiqueta en toda la página web.

Por ejemplo: <div id=»cabecera»> </div>, ya que solo habrá una cabecera.

En este caso el selector será el nombre de la etiqueta precedida por el símbolo «#»; por
ejemplo #cabecera.

 Una etiqueta «div» acompañada por el identificador «class», que indica la existencia
única o múltiple de esa etiqueta en toda la página web.

Por ejemplo: <div class=”anuncios1″> </div>.


En este caso el selector será el nombre de la etiqueta precedida por el símbolo «.»; por
ejemplo: .anuncios1.

AGREGAR CSS A UN DOCUMENTO

Lo primero, debemos decirle al documento HTML que hay algunas reglas CSS que queremos que
use. Hay tres formas diferentes de aplicar CSS a un documento HTML, sin embargo, por ahora,
veremos la forma más habitual y útil de hacerlo: vincular el CSS desde el encabezado del
documento.

 Crea un archivo en la misma carpeta que tu documento HTML y guárdalo con la


extensión: styles.css. La extensión .css muestra que es un archivo CSS.
 Para vincular stylse.css a index.html, añade la siguiente línea en algún lugar dentro del
<head> del documento HTML:
<link rel="stylesheet" href="styles.css" />

La etiqueta <link> le dice al navegador que hay una hoja de estilo con el atributo rel y la
ubicación de esa hoja de estilo como el valor del atributo href.

Hoja de estilo externa


Una hoja de estilo externa es aquella donde el CSS está escrito en un archivo independiente con
una extensión .css y vinculado desde un elemento <link> de HTML. Este es el método más común
y útil para adjuntar CSS a un documento, porque podemos vincular el CSS a varias páginas y dar
estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas
de un sitio web se verán más o menos iguales. Ejemplo: hola mundo

Hoja de estilo interna


Una hoja de estilo interna es cuando no hay ningún archivo CSS externo, sino que colocas tu CSS
dentro de un elemento <style> contenido dentro del elemento <head> del HTML.
Esto puede ser útil en algunas circunstancias (tal vez estés trabajando con un sistema de
administración de contenido donde no sea posible modificar los archivos CSS directamente), pero
no es tan eficiente como las hojas de estilo externas: en una página web, deberías repetir el CSS
en cada página y actualizarlo en varios lugares en caso de que hubiera que hacer cambio.

Si se añaden todos los estilos css en html sería imposible leer el documento por la gran cantidad
de código y el documento html aumentaría.

Por ello, creamos carpeta para los estilos.

Extensión: .css

Si guardamos los estilos, vemos que el archivo html no se modifica. Debemos enlazar los
documentos mediante el siguiente código en la etiqueta <head>: <link rel="stlylesheet"
href="Untitled-1.html". Le decimos al navegador que estamos llamando a un archivo externo
tipo hoja de estilo. Separamos conceptos, cada uno en un documento.

Fuentes: utilizar fuentes genéricas.

Modificar el estilo de varios elementos: mencionarlos y dividirlos mediante comas.

header, section, footer, aside {

border: 1px solid black;

display: block;

AÑADIR UNA CLASE

Hasta ahora, hemos utilizado elementos cuyo nombre se basa en el nombre de elemento que
reciben en HTML. Esto funciona siempre que se desee que todos los elementos de ese tipo
tengan el mismo aspecto en el documento.

Añadimos una clase al elemento HTML cuando queremos seleccionar un subconjunto de los
elementos para aplicar un estilo, pero sin que cambien los demás.

En este ejemplo, queremos que el segundo


<ul> elemento de la lista presente otro estilo.
<li>Punto uno</li> Añadimos el siguiente atributo de clase:

<li class="special">Punto dos</li>

<li>Punto <em>tres</em></li>

</ul>
En el documento CSS, seleccionamos una clase special creando un selector que comience con
un carácter de punto final. Podemos aplicar la clase special a cualquier elemento de la página
donde queremos que tenga el mismo aspecto que este elemento de lista.

.special {  La etiqueta html <div> es un


color: orange; contenedor genérico. No tiene efecto
en el contenido o en el diseño hasta
font-weight: bold; que se le aplica un estilo css. Se
utiliza para agregar divisiones y
}
agrupar contenido y poder diseñar
li em { fácilmente mediante los atributos
color: rebeccapurple; class o id.: <div class="botones">.
} Estos elementos no proporcionan
información al navegador, a
diferencia de las etiquetas header, section, nav, etc.

CÓMO AGREGAR REGLAS CSS

Podemos agregar una declaración en la etiqueta head: etiqueta style, indicamos las reglas css
que queremos que afecten a dicha página.

Si lo que queremos es cambiar el estilo de múltiples elementos diferentes. Por ejemplo, que
h1, ul y un artículo concreto tengan un fondo concreto: utilizamos selectores css.

ID: #
Igual que podíamos agregar el atributo style, podemos agregar otros como id, un identificador
único para dar estilo. Podemos darle el nombre que queramos, lo ideal es darle el mismo
nombre de la etiqueta (no utilizar tildes en el código).

<header id="cabecera">

<nav id="navegacion">

Indicamos al navegador que se trata de un id colocando # y el nombre del id: #cabecera.


Un id es un elemento único, nos permite identificar un único elemento. No deberíamos
repetirlo en otro elemento. Por ejemplo: id: #nav para la etiqueta article. Ya que el menú de
navegación debe tener un estilo único e irrepetible en la web.

CLASS: .
Cuando queremos que dos elementos presenten una estética parecida, por ejemplo, los
artículos del blog, utilizamos el selector css clase, que nos permite crear un estilo que luego
podemos reutilizar en múltiples elementos (al contrario que el id). Se trata de un identificador
que puede ser reutilizado.

Indicamos al navegador que se trata de una clase colocando . y el nombre: .morado


CONCEPTOS DE BLOQUE

La estructura de cualquier elemento considerado un bloque tienen los siguientes


componentes.

 Contenido

Este espacio será el que albergará, en su totalidad, tanto al texto como a las imágenes que
insertemos entre las etiquetas <div …> y </div> así como a cualquier otro bloque que
pertenezca a él.

 Ancho y alto (width – height)

Especifican exactamente las dimensiones que tendrá la superficie que alberga el CONTENIDO.

 Borde (border)

Determina la decoración del bloque; es decir, si está recuadrado o no con líneas, en su


totalidad o solo en algunos de sus lados, si son visibles o no, el tipo de línea que emplea, el
color, etc.

 Relleno (padding)

Consiste en el espacio que intermedia entre el borde y el contenido. Podríamos interpretarlo


como los márgenes «interiores». Se controlan los cuatro a la vez, o de forma individualizada.

 Margen (margin)

Controla la distancia entre el borde de nuestro bloque y los elementos del bloque contenedor;
es decir, del bloque en el que esté introducido nuestro bloque en cuestión, dado que los
bloques pueden ser hijo o padres de otros. Para no hacernos un lío, los margenes de toda la
vida, el espacio en el que no podemos escribir nada. Para diferenciarlo del padding, podríamos
decir que son los márgenes «exteriores».

Otras propiedades de nuestro bloque a tener en cuenta son:

 Imagen de fondo (backgroun-image)

Muestra, como fondo, la imagen a la que se enlace, teniendo en cuenta que rellenará la
superficie que abarque tanto el CONTENIDO como el PADDING, si es que el tamaño de la
imagen da para ello, aunque esto se podría solucionar.

 Color de fondo (background-color)

Muestra, como fondo, el color que se le asigne. Abarca la misma superficie que la imagen de
fondo, pero por detrás de ésta si están los dos elementos establecidos. La imagen de fondo con
zonas transparentes permitirán ver el color de fondo, dado que éste quedaría como la capa de
nivel inferior.

 Unidades de medida

Para establecer las dimensiones, debemos utilizar las unidades.

Existen de tres tipos: absolutas (in, cm, mm, pt, pc), porcentajes (x%), y relativas (px, em, ex).
De entre ellas, emplearemos las relativas, ya que se adaptarán mejor a todos los dispositivos
que visualicen las páginas.

px = píxel (relativa a los puntos de la pantalla en la que se visualice la página).

em = ancho de la letra M mayúscula de la fuente que se esté utilizando.

ex = alto de la letra x de la fuente que se esté utilizando.

 Colores

La forma más extendida consiste en establecerlo por medio del código RGB rojo-verde-
azul (Red-Green-Blue) en hexadecimal, anteponiéndole el símbolo «#». Por ejemplo,
el rojo puro sería #FF0000.

Cualquier programa de edición de imágenes puede facilitarnos la paleta de colores y su


equivalente en hexadecimal, el cual trasladaríamos a nuestro código.

Es posible establecer 17 colores indicando su nombre, pero está opción, por su limitación no se
suele emplear.
DAR FORMATO SEGÚN SU ESTADO: EL ENLACE

Para dar estilo a los enlaces utilizamos una pseudoclase, un selector que nos permiten dar
formato en función de los diferentes estados del enlace. Para ello, seleccionamos el elemento
anclaje (<a>) y la pseudoclase:

 a:link (enlace no visitado): El estado predeterminado del enlace.

 a:visited: cuando el enlace se ha visitado.

 a:hover: el estilo que presenta en enlace cuando pasamos el curso por encima.

 a:active: el estilo del enlace cuando se activa, por ejemplo, cuando se hace clic encima.

Ver ejemplos

Un enlace presenta un estilo por defecto, aparecen subrayados, de color azul cuando aún no se
han visitado y en color morado cuando se visitan. Si queremos eliminar el subrayado de un enlace
debemos utilizar:

a:hover {
text-decoration: none;
}
BIBLIOGRAFÍA

https://developer.mozilla.org/

https://www.w3schools.com/

https://www.w3.org/

También podría gustarte