Download - Fundamentos de CSS
![Page 1: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/1.jpg)
Fundamentos de CSS
Compilado por Andrés Felipe Gallego Aguilar [email protected]
Para contenidos educativos gratuitos visita www.afoxcp.com/aprende
![Page 2: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/2.jpg)
Las hojas de estilo CSS (Cascading Style Sheets) hacen referencia a una serie de
¿Qué son las hojas de estilo CSS?
ordenes que contienen diferentes instrucciones que facilitan la aplicación de formato a los elementos HTML.
Los estilos se pueden aplicar para generar formato en:Los estilos se pueden aplicar para generar formato en:
1. Fuentes y Colores. 2. Distancias y Bordes. 3. Diagramación, ubicación de los elementos en la pantalla.
Sin formato Con CSS
Página web
![Page 3: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/3.jpg)
Anatomía de una regla CSS
Define el elemento o elementos a los que se aplicará el formato. Ej: h1.
Entre las llaves de inicio y final se encuentran una o varias declaraciones que se encargan
Selector {propiedad: valor;
de dar formato a los elementos que estén referenciados por el selector. En el caso del ejemplo las p p ;
propiedad: valor;}
propiedades aplicarán a los elementos que cuenten con la etiqueta h1.
En esta zona se publican las propiedades y los valores que se aplicarán al selector. Ej: font‐family: Arial, Verdana, Helvética; configuran la familia de fuentes a utilizar.
![Page 4: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/4.jpg)
Tipos de declaración de hojas de estilo CSSTipos de declaración de hojas de estilo CSS
ExternaLos estilos se encuentran en un archivo externo y Interna
l d l l d ly
se enlazan con la página web que requiere del formato. Con esta técnica una hoja de estilos puede ser aplicada a un número indefinido de páginas web.
Los estilos se declaran al interior de las etiquetas <head> y </head> ; sólo aplican para la página seleccionada.
Página webCSS
p g
Página web
CSS
g
Página web
“Inline”Inline Se declara el estilo usando “Style” al interior de una etiqueta HTML. Ej: <p style="font‐family: Arial, Helvetica, sans serif;">Texto </p>sans‐serif; >Texto </p>
![Page 5: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/5.jpg)
Ejemplo de estilo declarado de manera interna <!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1‐strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en‐US">
<head><title>BIENVENIDOS</title><meta http‐equiv="content‐type"content="text/html; charset=utf‐8" />
‐ Para declarar la hoja de estilos de manera interna se utiliza la etiqueta
<style type="text/css">h1, h2 {font‐family: sans‐serif; color: #3366CC;}
<style type=“text/css”> .
‐Luego se crea un selector; que contiene diversas propiedades y valores
</style>
</head>
<body>
que aplicarán formato al HTML. En el ejemplo se aplicará un formato de texto a las etiquetas h1 y h2.
<body>
<h1> Primer título</h1><p>…</p><h2> Segundo título </h2>
/
‐ Al final se cierra la etiqueta con </style>.
‐En caso de realizar un enlace con una <p>…</p><h2>Tercer título</h2><p>…</p></body>
hoja de estilos externa se utiliza el siguiente código: <link href=“ruta donde se encuentran los estilos.css" rel="stylesheet"
/ /</html> type="text/css" />
![Page 6: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/6.jpg)
Ti d l t h j d tilTipos de selectores en una hoja de estilos
Selector de tipo (Type Selector)Aplica el estilo a un elemento particular o etiqueta de HTML. Se utiliza la mayoría de las veces para configurar los estilos básicos que se aplicarán a lo largo de la página web. Ej:
Etiquetas a las que se aplicará el estilo (Cuerpo, párrafo, tablas, divisiones, lista de definiciones, listas de viñetas y numeradas).
body, p, td, th, div, dl, ul, ol {font‐family: Tahoma, Verdana, Arial, Helvetica, sans‐serif;font‐size: 1em;
Propiedades li font size: 1em;
color: #ff0000;}
a aplicar.
![Page 7: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/7.jpg)
Clases (Class Selector)Permite asignar estilos individuales que puedan ser aplicados a porciones específicas de una página web Se caracteriza porque para declarar el estilo se debe poner un punto ( ) antes delpágina web. Se caracteriza porque para declarar el estilo se debe poner un punto (.) antes del nombre que lo describe. Se puede aplicar muchas veces. Ej:
l l l l l b l l d lDeclara el selector como clase. El nombre que se aplica es personalizado por lo que hay que tratar de que sea descriptivo y que identifique el tipo de formato que aplicará. No debe contener espacios ni caracteres extraños.
.textoVerde {color:#00ff00;}
Cuando se vaya a declarar la clase se debe hacer al interior de la etiqueta en la que se quiera aplicar el estilo. }
<p class=“textoVerde”> El texto que se ponga sobre esta línea tendrá el color verde </p>
q p
tendrá el color verde </p>
![Page 8: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/8.jpg)
ID (ID Selector)Este tipo de selectores se utilizan para seleccionar un elemento en particular, en vez de un grupo de elementos Para que funcione el elemento al que se va a aplicar debe contar con elgrupo de elementos. Para que funcione, el elemento al que se va a aplicar debe contar con el atributo id (Esta ID sólo debe aparecer una vez en una página web). Para crearla se debe usar el símbolo # antes del nombre personalizado. Ej:
<p id=“lineadetexto">A este párrafo en particular se le ha asignado un<p id= lineadetexto >A este párrafo en particular se le ha asignado un identificador con el nombre de “lineadetexto”. </p>
#lineadetexto { color: #FFFFFF; }#lineadetexto { color: #FFFFFF; }
Este estilo se aplicará al párrafo que contenga el id lineadetexto.
![Page 9: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/9.jpg)
Pseudo‐ClasesSon unas clases especiales de HTML, que se refieren a algunos estados especiales del elemento, las pseudoclases, igual que los pseudoelementos, se escriben de la siguiente manera:
objeto:pseudoclase {propiedad: valor;}
Las principales pseudoclases son para el objeto A (vínculo), y son las siguientes:
link Nos dice el estilo de un enlace que no ha sido visitadolink ‐ Nos dice el estilo de un enlace que no ha sido visitado.visited ‐ Nos dice el estilo de un enlace que ha sido visitado.active ‐ Nos dice el estilo de un enlace que está siendo pulsadohover ‐ Nos dice el estilo de un enlace sobre el que está pasando el ratón.
Para que la pseudo clase de la etiqueta <A> funcione correctamente el orden de las declaraciones debe ser el siguiente:
a:link {color: #FF0000} a:visited {color: #00FF00} a:hover {color: #FF00FF} a:active {color: #0000FF}
![Page 10: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/10.jpg)
Atributos que pueden aplicarseAtributos que pueden aplicarse
Nombre del atributo Posibles valores Ejemplos
FUENTES ‐ FONT
color valor RGB o nombre de color color: #009900; color: red;
Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores son admitidos en el estándar, es aconsejable entonces utilizar el valor RGB.
font‐size xx‐small | x‐small | small | medium | large | x‐large | xx‐largeUnidades de CSS
font‐size:12pt; font‐size: x‐large;
Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.
font‐familyserif | sans‐serif | cursive | fantasy | monospace font‐family:arial,helvetica;
font‐family Todas las fuentes habituales font‐family: fantasy;
Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema.También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entienda biencomillas para que se entienda bien.
font‐weight normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
font‐weight:bold; font‐weight: 200;
Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor así como bold y 700Normal y 400 son el mismo valor, así como bold y 700.
font‐style normal | italic | oblique font‐style:normal; font‐style: italic;
Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic.
Tabla recuperada de http://www.desarrolloweb.com/articulos/186.php
![Page 11: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/11.jpg)
PÁRRAFOS ‐ TEXT
line‐height normal y unidades CSS line‐height: 12px; line‐height: normal;
El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esas características que no se podian mofificar utilizando HTML.
text‐decoration none | [ underline || overline || line‐through ] text‐decoration: none; text‐decoration: underline;
Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado.
text‐align left | right | center | justify text‐align: right; text‐align: center;
Sirve para indicar la alineación del texto. Es interesante destacar que las hojas de estilo permiten el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas.
text‐indent Unidades CSS text‐indent: 10px; text‐indent: 2in;
Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.
text‐transform capitalize | uppercase | lowercase | none text‐transform: none; text‐transform: capitalize;
Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabrs, todo en mayúsculas o minúsculas.
FONDO BACKGROUNDFONDO ‐ BACKGROUND
Background‐color Un color, con su nombre o su valor RGB background‐color: green; background‐color: #000055;
Sirve para indicar el color de fondo de un elemento de la página.
Background‐image El nombre de la imagen con su camino relativo o absoluto background‐image: url(mármol.gif) ; background‐image: url(http://www.x.com/fondo.gif)
Colocamos con este atributo una imagen de fondo en cualquier elemento de la página,.Colocamos con este atributo una imagen de fondo en cualquier elemento de la página,.
Tabla recuperada de http://www.desarrolloweb.com/articulos/186.php
![Page 12: Fundamentos de CSS](https://reader038.vdocuments.pub/reader038/viewer/2022100517/5571f26749795947648c89ef/html5/thumbnails/12.jpg)
BibliografíaBibliografía
MULLER, PETER. Css un juego de niños, crea tu sitio web. PC‐Cuadernos técnicos. Barcelona. http://www pc cuadernos comhttp://www.pc‐cuadernos.com
ANDREW, RACHEL. The CSS anthology . Sitepoint Pty Ltda. 2007. 414 p.
Webgrafía
http://www.webtaller.com/construccion/lenguajes/css/lecciones/clases_pseudoclases_y_pseudoelementos_en_css.php
http://www.tizag.com/cssT/reference.php