PDF de programación - Resumen CSS

Imágen de pdf Resumen CSS

Resumen CSSgráfica de visualizaciones

Publicado el 3 de Julio del 2018
751 visualizaciones desde el 3 de Julio del 2018
47,7 KB
6 paginas
Creado hace 14a (02/02/2010)
HOJAS DE ESTILO EN CASCADA

Introducción
Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo.

Forma de definir los estilos

• Como atributo de una etiqueta Æ afecta a esa etiqueta

Sintaxis: <etiqueta style= “propiedad:valor; propiedad:valor; ...”>
Texto sobre el que se aplica
</etiqueta>
Ejemplo: <p style= “color:blue”>Párrafo en color azul

• Como parte de la cabecera dentro de la etiqueta <style> Æ afecta a todo el

documento
Sintaxis:
<head><style>
etiqueta1,etiqueta2,...,etiquetaN{ propiedad:valor; propiedad:valor; ...}
</style></head>
Ejemplo:
<head><style>
h1,p{ color:blue; font-family:comic sans ms}
</style></head>
<body>
<h1>Cabecera de primer nivel en azul y comic</h1>
<p>Párrafo en azul y comic
</body>

• Se puede incluir un estilo en una zona del texto sin necesidad de haberlo

definido antes Æ afecta a esa parte del texto
<span style= “propiedad:valor; propiedad:valor; ...”>
Texto
</span>
Ejemplo:
<head><style>
h1,p{ color:blue; font-family:comic sans ms}
</style></head>
<body>
<h1>Cabecera de primer nivel en azul y comic</h1>
<p>Párrafo en azul y comic
<span style= “font-size:12pt”> y esta parte en distinto tamaño</span >
</body>

Estructura básica de una regla CSS
Selector { declaración }
Selector:



elementos html

o seudoelementos Æ permite definir estilos a partes de un elemento

ƒ

ƒ

first-line Æ primera línea de un texto
first-letter Æ primera letra de un texto

Ejemplo:
<head><style type=’text/css’>
p{ color:red;}
p:first-line{ color:blue;}
</style></head>
<body>
<p>Párrafo en color rojo pero la primera línea en color azul, muestro un poco mas de
texto para provocar mas de una línea </p>
</body>



clases

o seudoclases Æ permite definir estilos a determinadas situaciones de una

página

ƒ

ƒ

ƒ

ƒ

link Æ enlaces según se cargan en el documento
visited Æ enlaces visitados
hover Æ elementos sobre los que se ha situado puntero el ratón
active. Æ elementos activos por el usuario (momento que
transcurre entre presionar y soltar el ratón).

Ejemplo:
<head><style type=’text/css’>
a:link{ color:red;}
a:visited{ color:blue;}
</style></head>
<body>
<a href=’enlace.htm’>Enlace rojo cuando se carga la página y azul cuando sea
bisitado</a>
</body>
Identificadores



Declaración : lista de propiedad:valor separados por punto y coma.

Propiedades

De tipo de letra













font-size Æ tamaño de letra en entero o porcentaje.
font-weight Æ peso de la letra en entro ó normal=400, bold=700, …
font-family Æ familia de tipo de letra genérica; serif, sans-serif, cursive, fantasy
o monoespace.
font-style Æ estilo del tipo de letra; normal, italic u oblique.
font-variant Æ normal o small-caps (versalita). La Versalita de una fuente
consiste en convertir las letras minúsculas en mayúsculas, con una peculiaridad,
su tamaño no se corresponde con la mayúscula normal, sino que su altura queda
entre la altura de una mayúscula normal y la altura de la x de la fuente.
font Æ forma reducida de combinar varios de estas propiedades en una sola
regla, primero se asignan los valores para el estilo, variante y el peso, luego el
tamaño y por último la fuente.

De color











color Æ color del elemento html.
background-color Æ color de fondo de un elemento html.
background-image Æ imagen de fondo de un elemento html.
Ejemplo: background-image: url(“trayectoria de fichero”)
background-repeat Æ tipo de repetición que presentará la imagen especificada
en la propiedad anterior: repeat, no-repeat, repeat-x o repeat-y.
background-position Æ posición inicial de la imagen especificada en la
propiedad background-imagen: top, center, bottom, left, right.

• De te background-attachmentÆ para indicar si la imagen que se ha escogido de

fonodo se deslice o no conjuntamente con el documento: scroll o fixed.

De texto

• word-spacing Æ espaciado entre palabras del texto













letter-spacing Æ espaciado entre letras
text-decoration Æ estilo especial para el texto; none, underline, overline, ...
vertical-align Æ alineación vertical; baseline, sub, super, top, text-top, middle,
bottom.
text-transform Æ efectos sobre un grupo de texto; conversión a mayúsculas,...
text-align Æ alineación horizontal del elemento de texto; left, right, center,
justify
text-indent Æ sangrado del texo en entero.

• white-space Æ comportamiento de los espacios en blanco: normal, pre o wrap

(el navegador no provoca saltos de línea de forma automática).
direction Æ dirección del texto: ltr ó rtl.
line-height Æ altura de la caja de línea: normal, <medida> ó <porcentaje>





De cuadro

• margin, margin-top, margin-right, margin-bottom, margin-left Æ valores para

los diferentes márgenes de la página.
padding, padding-top, padding-right, padding-bottom, padding-left Æ espacio
entre el margen y el elemento.
border-width Æ anchura del borde en entero o porcentaje; thin, medium, thick.
border-style Æ estilo del borde del elemento; none, dotted, dashed, solid,
double, groove, ridge.
border-color Æ color del borde









• width Æ anchura de la zona del elemento



height Æ altura de la zona de elemento.

Unidades de medida





pt Æ puntos
pc Æ picas

• mm Æ milímetros
cm Æ centímetros
in Æ pulgadas
px Æ pixels







1 pulgada (in) equivale a 2.54 centímetros (cm)
1 punto (pt) equivale a 1/72 de pulgada (in)
1 pica (pc) equivale a 12 puntos (pt)

Estilos mediante clases
Se definen en la etiqueta style de la cabecera y se utilizan para las siguientes
situaciones:

• Cuando se quiera definir diferentes versiones de estilos para un mismo elemento

Sintaxis:
DefiniciónÆ etiqueta.nombrestilo{propiedad:valor; propiedad:valor; ... }
Uso Æ <etiqueta class=nombrestilo> Texto perteneciente a la clase definida
</etiqueta>
Ejemplo:
<head><style>
p.estilop1{ color:blue; font-family:comic sans ms}
</style></head>
<body>
<p class=estilop1>Párrafo en azul y de tipo comic
</body>

• Cuando se quiera definir un mismo estilo para diferentes elementos.

Sintaxis:
Definición Æ .nombrestilo{propiedad:valor; propiedad:valor; ... }
Uso Æ <etiqueta class=nombrestilo> Texto perteneciente a la clase definida
</etiqueta>
Ejemplo:
<head><style>
.estilo1{ color:blue; font-family:comic sans ms}
</style></head>
<body>
<h1 class=estilo1>Cabecera de primer nivel en azul y comic</h1>
<p class=estilo1>Párrafo en azul y comic
</body>

Importación de las hojas de estilo

1. Primero se crea un fichero en formato ascii con la extensión .css con todas las

definiciones de estilo que se vayan a usar

2. Después se importan desde los documentos, de una de las siguientes formas:

• Con la etiqueta link en la sección de la cabecera (no se pueden sustituir



los estilos importados por otros definidos en el propio documento)Æ
<link rel= “stylesheet” href= “estilos.css” type= “text/css”>
sentencia @import de la etiqueta style en la sección de la cabecera Æ
<style type= “text/css”>
@import url(“estilos.css”);
etiqueta1,etiqueta2,...,etiquetaN{propiedad:valor; propiedad:valor; ... }
</style>
La definición local sustituye a la importada del documento “estilos.css”.

Posicionamiento
Se puede utilizar una etiqueta div como un elemento contenedor de otros elementos y
así poder aplicar a todos ellos un determinado estilo, por ejemplo una determinada
posición. Esta etiqueta se puede identificar asignándole un nombre al atributo id dentro
de la misma.
Para posicionar un elemento en cualquier lugar de la pantalla se utilizan los atributos top
y left, que permiten situar el elemento a una distancia de la parte superior (top) e
izquierda (left) de la ventana activa.
Sintaxis: style=“position:absolute; top:entero px; left:entero px”
Ejemplo:
<div id= “txt1” style=“position:absolute; top:150; left:100”>
Texto desplazado 150 pixels hacia abajo y 100 a la derecha
</div>

Capas
Para crear capas primero definimos el posicionamiento de varios elementos
superpuestos a través de las siguientes propiedades: position, top, left, width, height.
Luego se define el plano en el que queremos que aparezcan los elementos a través de la
propiedad zIndex utilizando valores enteros del uno en adelante (el valor mas alto
corresponde al primer plano).
Se pueden ocultar elementos a través de la propiedad visibility y sus valores hidden y
visible.
Se puede desplazar texto dentro de un elemento a través de la propiedad overflow y su
valor scroll.

Estilos dinámicos
En DHTML todos los elementos de un documento pueden tratarse de una forma
independiente con solo añadirles una identificación con el atributo id.
Para cambiar el estilo de un elemento
Sintaxis: nombreid.style.propiedad=valor
Ejemplo:<p id= “prf” style= “color:red” onclick= ‘prf.style.font-size=20pt’>Este párrafo cambia de
tamaño al pulsar sobre él.
Notación estándar:
[window].document.getElementById(“ID_elemento”).style.nombre_propiedad= valor
  • Links de descarga
http://lwp-l.com/pdf12306

Comentarios de: Resumen CSS (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad