hojas de estilo - web.dit.upm.esweb.dit.upm.es/~imartinez/cursowebetsam/files/css_basico.pdf · css...
Post on 02-Aug-2020
9 Views
Preview:
TRANSCRIPT
CSS BÁSICOHojas de Estilo
Iván Martínez Toro
ÍNDICE DE CONTENIDOS
� Introducción al CSS.
� ¿Cómo es CSS? Sintaxis general.
� Reglas.
� Selectores.
Class.� Class.
� Div y Span.
� Uso de las hojas de estilo.
CSS (CASCADING STYLE SHEETS)
� Nace en torno a 1995. En 1996 el W3C publica la
primera recomendación oficial “CSS nivel 1”.
� Actualmente se trabaja en la versión CSS3.
� Permite definir el aspecto visual de una página HTML o
XHTML.
� Antes de CSS la estructura de las páginas era definida
mediante tablas.
HTML + CSS
� HTML define el marcado de los contenidos, es decir, qué es un párrafo, un titular o una lista.
� CSS define el aspecto de todos los contenidos, es decir, color, tamaño y tipo de letra de los párrafos de texto, separación entre titulares y párrafos, tabulación entre los elementos de entre titulares y párrafos, tabulación entre los elementos de una lista, etc.
� Es la mejor forma de separar los contenidos de la presentación lo que conlleva las siguientes ventajas:
� Obliga a crear HTML/XHTML bien definidos (o “semánticos”).
� Mejora la accesibilidad, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en diferentes dispositivos.
…CÓMO ES CSS?
� Se trata de un fichero de texto plano que contiene “reglas”.
� Cada regla tiene dos partes:
� Selector (para seleccionar las etiquetas HTML sobre las que actúa).
� Descriptor (para decir qué hace con ellas)� Descriptor (para decir qué hace con ellas)
h1: {color:green; font-family:Verdana}
� El fichero CSS es una lista de reglas (pares selector+descriptor)
� Los selectores pueden ser una o varias etiquetas HTML.
� Los descriptores están definidos en CSS, hay una larga lista.
…CÓMO ES CSS? (II)
� Las reglas CSS:
� selector {propiedad: valor}
� selector, selector, …, selector {
propiedad: valor;
…
propiedad: valor;
}
EJEMPLOS DE REGLAS
� h1, h2, h3 { font-family: helvetica }
� h1 {
font-weight: bold;
font-size: 12pt;font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
font-variant: normal;
font-style: normal;
}
EJEMPLOS DE REGLAS (II) -HTTP://WWW.W3SCHOOLS.COM/CSS/DEMO_DEFAULT.HTM
h1,h2,h3 {font-family: "lucida calligraphy", arial, 'sans serif';
} p,table,li, {
font-family: "lucida calligraphy", arial, 'sans serif'; margin-left: 10pt; } body {body {
background-color:#fffaf0; } p,li,th,td {
font-size: 75%; } h1,h2,h3,hr {
color:#483d8b;} table { border-style:outset} li {list-style: square;)}
TIPOS DE SELECTORES
� Podemos seleccionar un solo elemento HTML
� ul { list-style: disc; } (lista con círculo relleno)
� Seleccionar varios elementos HTML
� h1, h3{ font-family: verdana; } (ambos títulos con ese tipo de letra)
� Repetir selectores� Repetir selectores
� h1, h3{ font-family: verdana; }
� h1, h2, h3, hr { color: black; }
� Si un valor no coincide, la última regla es la que se tiene en cuenta.
� Utilizar el selector universal *. Se aplica a todos los elementos.
� * { color: green; }
� Si los valores no coinciden, prevalecen las reglas más específicas.
HERENCIA EN SELECTORES
h1 { color: blue ; }
body { color: black; background: url(texture.gif) white; }
� Si no se especifica una propiedad, se hereda del elemento padre:padre:
<h1>El titular <em>es</em> corto</h1>
� “es” será azul porque <h1> es azul y <em> lo hereda por ser su hijo.
� La página tendría texto negro sobre fondo blanco en el caso de que no se encuentre la imagen de fondo “texture.gif”.
SELECTORES ADYACENTES
� Seleccionando elementos adyacentes o consecutivos que están al mismo nivel (no son hijos unos de otros):
� HTML
<h1>Separa tras esta línea</h1>
<h2>Importante</h2>
<h2>Otro título</h2>
� CSS
h1 + h2 { margin-top: 11px; }
El efecto de la regla es un margen entre h1 y h2.
SELECTOR ATRIBUTO
� Se selecciona un elemento que tenga un atributo:
� Sintaxis: elemento[atributo] { … }
� Ejemplo: table[border] { … }
� Se puede seleccionar una elemento que tenga un atributo � Se puede seleccionar una elemento que tenga un atributo con un valor determinado:
� Sintaxis: elemento[atributo=“valor”] { … }
� Ejemplo: table[border = “0”] { … }
EL ATRIBUTO CLASS
� El atributo “class” permite tener diferentes estilos para elementos del mismo tipo.
� HTML
<p class = “importante”>Este párrafo aparecerá en negrita y grande</p>
<p class = “normal”>Este párrafo aparecerá sin negrita y pequeño</p>
� CSS
p.importante { font-weight: bold; font-size: 24pt; }
p.normal { font-size: 10pt; }
� Para definir una regla que aplique a cualquier elemento de una clase concreta se puede usar indiferentemente:
� .importante { font-weight: bold; font-size: 24pt; }
� *.importante { font-weight: bold; font-size: 24pt; }
EL ATRIBUTO CLASS (II)
� Ejemplo:
� CSS
*.coloreado { color: red; }
h1.coloreado { color: green; }
� HTML
<h1>no aparece de ni rojo ni verde</h1>
<h1 class = “coloreado”>aparece verde</h1>
<p class = “coloreado”>aparece rojo</p>
EL ATRIBUTO CLASS (III)
� Subconjunto del atributo “class”:
� CSS
p.importante.coloreado { color: green; }
�Regla: que sea al menos de la clase importante y coloreado.
� HTML
<p class = “importante grande coloreado”>sale verde </p>
<p class = “importante grande ”>NO sale verde</p>
LAS ETIQUETAS <DIV> Y <SPAN>
� <div> y <span> son etiquetas HTML que permiten aplicar reglas CSS a diferentes elementos:� <div> asegura que habrá una nueva línea antes y después del
bloque.
� <span> no añade líneas antes ni después, solo espacios simples.Ejemplo:Ejemplo:
� CSSdiv { background-color: #66FFFF; }
span.color { color: red; }
� HTML
<div>Este div se trata como un párafo con fondo de color pero <span class = “color”>este span aparece con letras rojas.</span></div>
EL SELECTOR ID
� Este selector se usa para aplicar estilo a un elemento concreto.
� CSS#cabecera { width: 740px; top: 0px; }
HTML� HTML
<div id = “cabecera”>Esta división o “caja” tiene que aparecer con un ancho de 740px y situado en la parte superior</div>
CÓMO USAR LAS HOJAS DE ESTILO
� Existen 3 formas de aplicar el estilo a un HTML:
� Hoja de estilo externa
�Es la más potente
�La hoja de estilo es un archivo .css individual.
� Hoja de estilo empotrada
�También permite usar toda la potencia de CSS.
�Va dentro del archivo .html de la página.
� Hoja de estilo en línea
�Potencia de CSS limitada.
�Se aplica el estilo a cada elemento en su definición.
CÓMO USAR LAS HOJAS DE ESTILO (II)
� Hoja de estilo externa:
� Se implementa la hoja de estilo y se guarda como .css .
� Dentro del HTML hay que hacer referencia a la hoja de estilo .css creada:
�Dentro de <head>:
<link rel=“stylesheet” type=“text/css” href=“URL del
archivo CSS” />
Por ejemplo:
<link rel=“stylesheet” type=“text/css” href=“prueba.css” />
CÓMO USAR LAS HOJAS DE ESTILO (III)
� Hoja de estilo empotrada:
� Todo el css se mete en una etiqueta <style> dentro de <head> en el archivo HTML.
<style type=“text/css”>
<!--
Hoja de estilo CSS
-->
</style>
� Se pone como un comentario para ocultarlo a navegadores que no entiendan CSS.
CÓMO USAR LAS HOJAS DE ESTILO (IV)
� Hoja de estilo en línea:
� Se define el estilo de cualquier elemento HTML en la definición del mismo mediante el atributo <style>.
<p style = “border-bottom: blue”>
� Válido si queremos poco marcado.
� Mezcla HTML con presentación � lo ensucia!
� No puede usar la potencia de CSS, sólo marcado.
PRIORIDAD DE CADA TIPO DE ESTILO
� Es posible realizar definición de estilo de varias formas a la vez (externa + empotrada + en línea).
� En caso de conflicto, la prioridad de mayor a menor es la siguiente:1. Estilo en línea.1. Estilo en línea.
2. Hojas de estilo internas (empotradas dentro de <head>).
3. Hojas de estilo externas.
4. Navegador (estilo por defecto).
�La regla memotécnica es:
Ante conflicto, prevalece la definición más cercana al elemento afectado.
PRIORIDAD DE CADA TIPO DE ESTILO (II)
� Ejemplo:
� Hoja de estilos externa:
h3 { color: red;
text-align: left;
font-size: 8pt;
� Hoja de estilos interna:
h3 { text-align: right;
font-size: 20pt;
}font-size: 8pt;
}
}
Resultado de los atributos que toma el elemento h3:
color: red;text-align: right;font-size: 20pt;
top related