conceptosbasicos css diapositivas
TRANSCRIPT
![Page 1: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/1.jpg)
CSS
![Page 2: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/2.jpg)
¿Qué es CSS?
CSS es un lenguaje de hojas de estilos
creado para controlar el aspecto o
presentación de los documentos
electrónicos definidos con HTML y
XHTML.
![Page 3: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/3.jpg)
Cascading Style Sheets
Los estilos definen cómo desplegar la información (elementos HTML/XHTML/XML)
Los archivos externos de estilo separan presentación de información.
Mayor flexibilidad, escalabilidad, y posibilidades en la presentación de contenidos web
Dinamismo (junto a javascript y DOM)
Correctamente utilizado reduce el peso de las páginas
Se usan archivos .css
Permite el cambio de apariencia y presentación con solo editar un archivo
![Page 4: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/4.jpg)
Cascading Style Sheets
El concepto de piel (skin)
◦ Diseño que se coloca por encima de la estructura (esqueleto).
Ejemplo: Teléfonos
◦ Estructura: Modelo del teléfono
◦ Piel:
Carcasas de colores
![Page 5: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/5.jpg)
Ventajas del uso de CSS
Estandarizar la presentación de un sitio web completo. Haciendolo fácil de mantener.
Diferentes usuarios pueden contar con diferentes estilos acordes a sus necesidades. Ejemplos: ◦ Estilos para personas con dificultades visuales,
◦ Estilos para dispositivos móviles,
◦ Estilos para dispositivos monocromos,
◦ Estilos para impresión,
◦ Etc.
Los documentos HTML se reducen en tamaño y complejidad.
![Page 7: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/7.jpg)
Estilos CSS
Antes de la aparición de los estilos, la presentación se manejaba directamente dentro de los elementos HTML por medio de atributos. Por ejemplo:
<h2 align="center">
<font color=“blue" size=“3" face="Times New Roman, serif">
<i>Master inftel</i>
</font> </h2>
CSS permite separar el contenido de un documento de su presentación.
En el documento HTML:
<h2>Master inftel</h2>
En la hoja de estilos se define el formato
de los encabezados h2:
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman",
serif;
}
![Page 8: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/8.jpg)
Ejemplo CSS
Archivo HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="ejemplo1.css" />
</head>
<body>
<h1>This header is 36 pt</h1>
<h2>This header is blue</h2>
<p>This paragraph has a left margin of 50 pixels</p>
</body>
</html>
Archivo CSS
body {background-color: yellow}
h1 {font-size: 36pt}
h2 {color: blue}
p {margin-left: 50px}
Archivo CSS
body {background-color: blue}
h1 {font-size: 12pt}
h2 {color: yellow}
p {margin-left: 5px}
![Page 9: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/9.jpg)
Cómo incluir CSS en un documento
◦ Incluir CSS en el
mismo documento
HTML
◦ Definir CSS en un
archivo externo
◦ Incluir CSS en los
elementos HTML
![Page 10: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/10.jpg)
Incluir CSS en el mismo documento
Los estilos se definen en una zona
específica del propio documento HTML.
Se emplea la etiqueta <style> de HTML y
solamente se pueden incluir en la
cabecera del documento (sólo dentro de
la sección <head>).
![Page 11: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/11.jpg)
<html > <head> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html>
Incluir CSS en el mismo documento
![Page 12: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/12.jpg)
Definir CSS en un archivo externo
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>.
Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css
Se pueden crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como necesite.
![Page 13: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/13.jpg)
<html > <head> <title>Ejemplo de estilos CSS en el propio documento</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> <body> <p>Un párrafo de texto.</p> </body> </html>
Definir CSS en un archivo externo
![Page 14: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/14.jpg)
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<?xml-stylesheet type="text/css" href="tutorials.css"?>
<tutorials>
<tutorial>
<name>XML Tutorial</name>
<url>http://www.mytutorial.com/xml/tutorial</url>
</tutorial>
<tutorial>
<name>HTML Tutorial</name>
<url>http://www. mytutorial.com/html/tutorial</url>
</tutorial>
</tutorials>
Definir CSS en un archivo externo
![Page 15: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/15.jpg)
Incluir CSS en los elementos HTML
El último método para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya que tiene los mismos problemas que la utilización de las etiquetas <font>.
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto.
![Page 16: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/16.jpg)
<html> <head> <title>Ejemplo de estilos CSS en el propio documento</title> </head> <body> <p style="color: black; font-family: Verdana;"> Un párrafo de texto. </p> </body> </html>
Incluir CSS en los elementos HTML
![Page 17: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/17.jpg)
Tipos de dispositivos <html>
<head> <style> @media screen { p.test {font-family:verdana,sans-serif;font-size:14px} } @media print { p.test {font-family:times,serif;font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body> .... </body> </html>
![Page 18: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/18.jpg)
Tipos de dispositivos
![Page 19: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/19.jpg)
Precedencia de valores
Valores por defecto del navegador
Hoja de estilo externa
Hoja de estilo interna (en la sección de
encabezado)
Estilo en línea (dentro de un elemento)
![Page 20: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/20.jpg)
SELECTORES
CSS
86
![Page 21: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/21.jpg)
Sintaxis
Tres partes:
◦ Un selector
◦ Una propiedad
◦ Un valor
Sintaxis:
◦ selector {property:value}
![Page 22: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/22.jpg)
/* Este es un comentario en CSS */
/* Este es un
comentario CSS de varias
lineas */
Sintaxis
Comentarios
![Page 23: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/23.jpg)
Sintaxis
![Page 24: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/24.jpg)
Sintaxis
Uso:
◦ body {color:black}
◦ p {font-family:"sans
serif"}
◦ p {text-
align:center;color:red}
Uso:
◦ p
{
text-align:center;
color:black;
font-family:arial
}
◦ h1,h2,h3,h4,h5,h6
{
color:green
}
![Page 25: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/25.jpg)
Selectores
Selector Universal
Selector de tipo o Etiqueta
Selector Descendente
Selector de Clase
Selectores de ID
![Page 26: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/26.jpg)
Selector Universal
Se utiliza para seleccionar todos los
elementos de la página.
* {
margin: 0;
padding: 0;
}
![Page 27: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/27.jpg)
Selector de tipo o etiqueta
Selecciona todos los elementos de la
página cuya etiqueta HTML coincide con
el valor del selector.
p {
...
}
![Page 28: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/28.jpg)
Selector descendente
Selecciona los elementos que se encuentran dentro de otros elementos.
Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
p span { color: red; }
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
![Page 29: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/29.jpg)
Selector de clase <body>
<p class="destacado">
Lorem ipsum dolor sit amet...
</p>
<p>
Nunc sed lacus et <a href="#" class="destacado">
est adipiscing</a> accumsan...
</p>
<p>
Class aptent taciti <em class="destacado">
sociosqu ad</em> litora...
</p>
</body>
![Page 30: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/30.jpg)
Selectores de ID
El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id.
Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página.
#nav{ color: red; }
![Page 31: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/31.jpg)
Resumen de Selectores
Elementos H1 {font-family: Arial, Helvetica, sans-serif;
font size: 10pt; font-style: italic;}
Elementos agrupados H1, P, B {font-color: blue;}
Clases para elementos P.enfatizada {font-weight: bold;}
Clases generales .enfatizada {font-weight: bold;}
Selectores ID #enfatizada {font-weight: bold;}
![Page 32: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/32.jpg)
Selectores Pseudo-Classes
Clases predefinidas y se puede establecer efectos especiales
a:link {color:#FF0000} /* unvisited link */
a:visited {color:#00FF00} /* visited link */
a:hover {color:#FF00FF} /* mouse over link */
a:active {color:#0000FF} /* selected link */
a.red:visited {color:#FF0000} <a class="red" href="css_syntax.asp">CSS Syntax</a>
![Page 33: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/33.jpg)
Selectores Pseudo-elementos
:after Agrega contenido después de un elemento
:before Agrega contenido antes de un elemento
:first-letter Establece el estilo para el primer carácter de un texto
:first-line Establece el estilo para la primera línea de un texto
![Page 34: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/34.jpg)
Selectores Pseudo-elementos
(:first-line) Ejemplos:
◦ p:first-line { color:#ff0000; font-variant:small-caps; }
Propiedades:
◦ font properties
◦ color properties
◦ background properties
◦ word-spacing
◦ letter-spacing
◦ text-decoration
◦ vertical-align
◦ text-transform
◦ line-height
◦ clear
![Page 35: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/35.jpg)
Selectores Pseudo-elementos
(:first-letter) Ejemplos:
◦ p:first-letter { color:#ff0000; font-size:xx-large; }
Propiedades:
◦ font properties
◦ color properties
◦ background properties
◦ margin properties
◦ padding properties
◦ border properties
◦ text-decoration
◦ vertical-align (only if "float" is "none")
◦ text-transform
◦ line-height
◦ float
◦ clear
![Page 36: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/36.jpg)
Selectores Pseudo-elementos Ejemplos:
◦ p.article:first-letter {color:#ff0000} <p class="article">A paragraph in an article</p>
◦ p:first-letter { color:#ff0000; font-size:xx-large; } p:first-line { color:#0000ff; font-variant:small-caps; }
◦ h1:after { content:url(smiley.gif); }
CSS 2
![Page 37: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/37.jpg)
CAJAS
CSS
103
![Page 38: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/38.jpg)
Modelo de cajas (box model)
![Page 39: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/39.jpg)
Modelo de Formato Visual
Las páginas se construyen como una serie de bloques de arriba hacia abajo.
![Page 40: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/40.jpg)
Cajas
Vestibulum convallis dignissim
diam. Sed et ligula. Proin
ullamcorper odio eu mi. Aliquam
erat volutpat. Nunc ac leo sed
erat commodo ornare. Duis
urna. Nunc ac justo a risus
dictum scelerisque. Curabitur
felis augue, rutrum eu,
sollicitudin ac, auctor non, dolor.
Margin
Padding
Border
![Page 41: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/41.jpg)
![Page 42: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/42.jpg)
![Page 43: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/43.jpg)
![Page 44: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/44.jpg)
Margen
![Page 45: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/45.jpg)
Margen vertical
El margen más largo determinará la distancia entre elementos.
![Page 46: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/46.jpg)
Relleno
![Page 47: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/47.jpg)
PROPIEDADES
CSS
113
![Page 48: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/48.jpg)
Background
Propiedades usadas para el efecto
background
◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
![Page 49: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/49.jpg)
background-color
body {background-color:#b0c4de}
h1 {background-color:#6495ed}
p {background-color:#e0ffff}
div {background-color:#ffffff}
Modos de referencia para el color:
◦ nombre - "red“, “white”, “blue”, etc
◦ RGB - un valor como "rgb(255,0,0)"
◦ Hex – un valor como "#ff0000"
![Page 50: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/50.jpg)
background-image
body {background-image:url(„imagen.gif')}
body {background-image:url('imagen.jpg')}
body { background-image:url(„img/imagen.png'); }
![Page 51: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/51.jpg)
background-repeat
body { background-image:url('gradient2.png'); background-repeat:repeat-x; }
body { background-image:url('img_tree.png'); background-repeat:no-repeat; }
![Page 52: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/52.jpg)
background-repeat background-
position body
{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:top right; }
Versión resumida:
body {background:#ffffff url('img_tree.png') no-repeat top right}
Se requiere un orden:
◦ background-color
◦ background-image
◦ background-repeat
◦ background-attachment
◦ background-position
![Page 53: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/53.jpg)
background-attachment
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed
}
![Page 54: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/54.jpg)
Propiedades de background
![Page 55: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/55.jpg)
Texto
Color del texto
◦ body {color:blue}
◦ h1 {color:#00ff00}
◦ h2 {color:rgb(255,0,0)}
Alineación
◦ h1 {text-align:center}
◦ p.date {text-align:right}
◦ p.main {text-align:justify}
![Page 56: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/56.jpg)
Texto
Decoración ◦ h1 {text-decoration:overline}
◦ h2 {text-decoration:line-through}
◦ h3 {text-decoration:underline}
◦ h4 {text-decoration:blink}
◦ a {text-decoration:none}
Transformación ◦ p.uppercase {text-transform:uppercase}
◦ p.lowercase {text-transform:lowercase}
◦ p.capitalize {text-transform:capitalize}
Identación ◦ p {text-indent:50px}
![Page 57: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/57.jpg)
Propiedades de texto
![Page 58: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/58.jpg)
Font
p{font-family:"Times New Roman",Georgia,Serif}
![Page 59: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/59.jpg)
Font
font-style
◦ p.normal {font-style:normal}
◦ p.italic {font-style:italic}
◦ p.oblique {font-style:oblique}
Tres tipos: ◦ normal – El texto se muestra de manera normal
◦ italic – El texto se muestra en itálica
◦ oblique – El texto está inclinado (similar a itálica, pero es
soportado menos)
![Page 60: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/60.jpg)
Font
font-size -> default = (16px=1em)
◦ h1 {font-size:40px}
◦ h2 {font-size:30px}
◦ p {font-size:14px}
◦ h1 {font-size:2.5em} /* 40px/16=2.5em */
◦ h2 {font-size:1.875em} /* 30px/16=1.875em */
◦ p {font-size:0.875em} /* 14px/16=0.875em */
◦ body {font-size:100%}
◦ h1 {font-size:2.5em}
◦ h2 {font-size:1.875em}
◦ p {font-size:0.875em}
![Page 61: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/61.jpg)
Propiedades de font
![Page 62: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/62.jpg)
Border
p.one { border-style:solid; border-width:5px; } p.two { border-style:solid; border-width:medium; }
p { border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; }
p.one { border-style:solid; border-color:red; } p.two { border-style:solid; border-color:#98bf21; }
border-style:dotted solid;
border-style:dotted solid double dashed;
border-style:dotted solid double;
border-style:dotted solid;
border-style:dotted;
![Page 63: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/63.jpg)
Border (versión corta)
border:5px solid red;
Orden de los valores de la propiedad
border
◦ border-width
◦ border-style
◦ border-color
![Page 64: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/64.jpg)
![Page 65: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/65.jpg)
Outlines
![Page 66: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/66.jpg)
Márgenes
margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;
p.ex1 {margin-top:2cm}
p.bottommargin {margin-bottom:25%
En corto: ◦ margin:100px 50px;
![Page 67: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/67.jpg)
Márgenes
![Page 68: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/68.jpg)
Padding
La propiedad padding limpia una área alrededor del contenido de un elemento (dentro del borde). Se encuentra afectado por el color de fondo del elemento.
◦ padding-top:25px;
padding-bottom:25px; padding-right:50px; padding-left:50px
◦ padding:25px 50px 75px 100px;
◦ padding:25px 50px 75px;
◦ padding:25px 50px;
◦ padding:25px;
![Page 69: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/69.jpg)
Padding
![Page 70: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/70.jpg)
list-style-type (listas no ordenadas)
Listas no ordenadas
◦ ul.circle {list-style-type:circle}
◦ ul.square {list-style-type:square}
![Page 71: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/71.jpg)
list-style-type (listas ordenadas)
Listas ordenadas
◦ ol.upper-roman {list-style-type:upper-roman}
◦ ol.lower-alpha {list-style-type:lower-alpha}
![Page 72: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/72.jpg)
list-style-type
ul.inside {list-style-position:inside} ul.outside {list-style-position:outside}
ul { list-style-image:url('arrow.gif'); }
ul { list-style-type:none; padding:0px; margin:0px; }
li { background-image:url(arrow.gif); background-repeat:no-repeat; background-position:0px 5px; padding-left:14px; }
![Page 73: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/73.jpg)
list-style-type
![Page 74: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/74.jpg)
Tables <html>
<head>
<style type="text/css">
table.ex1 {table-layout:auto}
table.ex2 {table-layout:fixed}
</style>
</head>
<body>
<table class="ex1" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
<br />
<table class="ex2" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">10000000</td>
</tr>
</table>
</body>
![Page 75: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/75.jpg)
Tables
![Page 76: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/76.jpg)
Dimensiones
<html>
<head>
<style type="text/css">
img.normal {height:auto}
img.big {height:50%}
img.small {height:10%}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" width="95" height="84" /><br />
<img class="big" src="logocss.gif" width="95" height="84" /><br />
<img class="small" src="logocss.gif" width="95" height="84" />
</body>
</html>
![Page 77: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/77.jpg)
COMPOSICIÓN
CSS
143
![Page 78: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/78.jpg)
Controlando el Layout
Los estilos pueden controlar el tamaño y
la ubicación de los elementos
Ejemplos: #nav { width: 12em; float: left; }
#news { width: 12em; float: right; }
#main { margin: 1em 13em 1em 13em; }
![Page 79: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/79.jpg)
Layout con DIVs
DIVs pueden son la alternativa a <table>
DIVs son un contenedor como una celda de una tabla
CSS puede posicionar a los DIV
<div id="article">xxx</div>
#article{
width:250px;
padding:5px;
float:right;}
![Page 80: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/80.jpg)
Display
Hidden
◦ h1.hidden {visibility:hidden}
◦ h1.hidden {display:none}
Block vs Inline
Ejemplos de elementos bloque
◦ <h1>
◦ <p>
◦ <div>
Ejemplos de elementos Inline
◦ <span>
◦ <a>
![Page 81: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/81.jpg)
Display (block vs inline)
li {display:inline}
span {display:block}
<html>
<head>
<style type="text/css">
p {display: inline}
</style>
</head>
<body>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
</body>
</html>
![Page 82: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/82.jpg)
Display (block vs inline)
<head>
<style type="text/css">
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
</style>
</head>
![Page 83: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/83.jpg)
Display
![Page 84: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/84.jpg)
Posicionamiento
Fijo:
p.pos_fixed { position:fixed; top:30px; right:5px; }
Relativo y absoluto:
h2.pos_left { position:relative; left:-20px; }
h2.pos_right { position:relative; left:20px; }
h2 { position:absolute; left:100px; top:150px; }
Traslape:
img { position:absolute; left:0px; top:0px; z-index:-1 }
![Page 85: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/85.jpg)
![Page 86: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/86.jpg)
Float La propiedad float permite que un elemento “flote” horizontalmente. De manera que los otros
elementos que le siguen se ajusten de acuerdo al valor del float.
Ejemplo:
img {
float:right; }
Galería de imágenes:
.thumbnail {
float:left; width:110px; height:90px; margin:5px;
}
Desactivar el flotado de los elementos (circundantes):
.text_line {
clear:both; }
![Page 87: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/87.jpg)
Float
![Page 88: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/88.jpg)
UNIDADES DE MEDIDA Y COLORES
CSS
![Page 89: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/89.jpg)
Unidades Relativas
em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M ("eme mayúscula") del tipo de letra que se esté utilizando
ex, relativa respecto de la altura de la letra x ("equis minúscula") del tipo de letra que se esté utilizando
px, (píxel) relativa respecto de la pantalla del usuario
![Page 90: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/90.jpg)
Unidades Absolutas
in, del inglés "inches", pulgadas (1 pulgada
son 2.54cms.)
cm, centímetros
mm, milímetros
pt, puntos (1 punto equivale a 1
pulgada/72, es decir, unos 0.35 mm)
pc, picas (1 pica equivale a 12 puntos, es
decir, unos 4.23 mm)
![Page 91: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/91.jpg)
Porcentajes
Los porcentajes se pueden utilizar por
ejemplo para establecer el valor del
tamaño de letra de los elementos:
◦ body { font-size: 1em; }
◦ h1 { font-size: 200%; }
◦ h2 { font-size: 150%; }
![Page 92: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/92.jpg)
Recomendaciones de medidas
En general, se recomienda el uso de unidades relativas siempre que sea posible, ya que mejora la accesibilidad de la página y permite que los documentos se adapten fácilmente a cualquier medio y dispositivo.
El documento "Recomendaciones sobre técnicas CSS para la mejora de la accesibilidad de los contenidos HTML" (http://www.w3.org/TR/WCAG10-CSS-TECHS/) elaborado por el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del texto y para todas las medidas que sean posibles.
![Page 93: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/93.jpg)
Recomendaciones de medidas
Normalmente se utilizan píxel y
porcentajes para definir el layout del
documento (básicamente, la anchura de
las columnas y elementos de las páginas) y
em y porcentajes para el tamaño de letra
de los textos.
![Page 94: Conceptosbasicos CSS Diapositivas](https://reader034.vdocumento.com/reader034/viewer/2022052618/553cf4cb4a795980388b4b13/html5/thumbnails/94.jpg)
Colores
Palabras clave
◦ red, green, blue
RGB Decimal
◦ p { color: rgb(71, 98, 176); }
RGB Porcentual
◦ p { color: rgb(27%, 38%, 69%); }
RGB Hexadecimal
◦ p { color: #4762B0; }