Scribd
Cargar
24 vistas41 páginas

UT2. Presentación CSS

Presentación CSS

Cargado por

eugen.registros
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 PDF, TXT o lee en línea desde Scribd
24 vistas41 páginas

UT2. Presentación CSS

Presentación CSS

Cargado por

eugen.registros
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 PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 41

LMSGI UT 2 - CSS

Sintaxis básica de
CSS

• CSS es un lenguaje distinto de HTML


es muy sencillo, pero su dificultad
radica en que es muy extenso. CSS
sigue esta sintaxis
• selector {
• propiedad1:valor1;
• propiedad2:valor2;
• …
• }
• El selector es la parte de CSS que
nos permite indicar a qué elemento
(o elementos) de la página web se va
a aplicar el formato CSS.
Sintaxis básica de CSS
 Por ejemplo:
p{
font-size:14pt;
color:red;
}
 Ese código CSS provocaría que los elementos de tipo p
salgan con tamaño de letra de 14 puntos y color rojo.
Comentarios
 Dentro del código CSS se pueden colocar comentarios.
Para ello el texto del comentario se encierra entre los
símbolos /* y */. Ejemplo:
p{
line-height:10pt;
/*El siguiente código marcará el texto
subrayado*/
text-decoration:underline;
text-align:center;
}
Inserción de código CSS
1. En una etiqueta concreta de HTML

Todos los elementos de HTML (p, strong, abbr,


h1,…) pueden utilizar un atributo llamado style,
dentro de este atributo podemos añadir código CSS.

<p style="color:red;">Este texto sale de color rojo


</p>

En este caso el código CSS no lleva selector alguno,


porque el estilo se aplica al elemento en el que se
incrustó el código CSS.
Inserción de código CSS
2. En el elemento de cabecera style
En este caso el código CSS se inserta debajo del elemento
HTML style que se colocará en la zona de cabecera
(head).

<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
Inserción de código CSS
 El elemento style usa fundamentalmente dos atributos:
 type. Que siempre contiene el valor text/css. En el caso de que
apareciera otro lenguaje de estilos su contenido sería el tipo
MIME correspondiente a ese lenguaje.
 media. Identifica a qué tipo de dispositivo se aplican los estilos.
Podemos diseñar diferentes estilos en función de los
dispositivos. Sus posibilidades son:
❑ all. Opción por defecto que significa que los estilos se aplicarán a
cualquier tipo de dispositivo en el que se esté viendo la página.
❑ screen- Para pantallas a color
❑ print. Para ser impreso.
❑ tty. Pantallas de texto (como los terminales ssh por ejemplo o los de
teletexto)
❑ tv. Pantallas de televisión
❑ projection. Proyectores de vídeo
❑ Etc …
Inserción de código CSS
<style>
h1 {color:#FF0000;}
p {color:#0000FF;}
body {background-color:#FFEFD6;}
</style>
<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

 En cualquier medio aparece el texto en azul, el título en rojo y el fondo en


amarillo. Si lo imprimes sale el texto en negro y el fondo blanco.
Inserción de código CSS
<style>
body {
background-color: pink;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}
</style>
 Si el dispositivo es una pantalla a color y con una anchura mínima de
480px, el fondo aparecerá en verde y sino en rosa
Inserción de código CSS
Otra forma (más utilizada) de indicar diferentes medios es
utilizar dentro del código CSS la directiva @media,
ejemplo:
<style type="text/css" >
@media screen{ <!—pantalla de color-->
p{
color:green;
}
}
@media print{
p{
color:#333333; }
}
</style>
Inserción de código CSS
3. En un archivo externo
 NO es recomendable porque, la web descarga el css antes de actualizarse
<style> @import 'css/import.css'; </style>
4. En un archivo externo
 Es el caso más habitual . La ventaja es que el mismo archivo nos sirve para
aplicar sus estilos a diferentes documentos y si variamos simplemente el
archivo CSS, todos los documentos que usen esa hoja de estilo cambiarán
automáticamente.
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="estilo1.css" type="text/css">
</head>

 La etiqueta link tiene los atributos:


 href. Con el que se indica la ruta de la hoja de estilos que se está
incluyendo.
 rel. Que siempre contiene el texto stylesheet (para indicar que estamos
incluyendo una hoja de estilos).
 Type. De tipo text/css
Orden de aplicación de estilos
 Es posible que algunas páginas web utilicen varios estilos referidos al mismo
elemento. Ejemplo:

La cuestión es de color saldrá el texto


Hola (que dentro del elemento p al que
hacen referencia dos definiciones).
Orden de aplicación de estilos
 La respuesta es de color rojo, porque tiene prioridad la definición más restrictiva. Es decir, en orden
de preferencia se ejecuta:

1. Primero se aplican los estilos del navegador. Es decir el formato predefinido del navegador.
Todos los navegadores poseen un estilo predefinido, que dicta con que tamaño por defecto
se muestra el texto, los colores, el tipo de letra,… Estos estilos son los que se ejecutan en
primer lugar. Pero cualquier estilo definido fuera del navegador, tiene preferencia.
2. Después se aplican los estilos externos (los que se incorporan con la etiqueta link)
3. Después los que proceden de la etiqueta style.
4. Después los que se definan internamente en el elemento (mediante el atributo style).

 En caso de dos estilos referidos al mismo elemento y definidos en el mismo ámbito (por ejemplo
ambos procedentes de archivos externos e incluidos con el elemento link) tiene preferencia el
último que se utilice en el código (es decir ganan los estilos del segundo link).
Orden de aplicación de estilos
<style>
strong{ color:red; }
p{ color:green; }
</style>
<body>
<p>Soy verde<strong>Soy rojo</strong></p>
</body>

 El elemento strong aparece de color rojo ya que es más


interno que el elemento p.
Orden de aplicación de estilos
 No obstante se puede alterar la preferencia utilizando una
palabra clave: !important
 Los estilos marcados con ella tienen preferencia sobre
cualquier otro. Ejemplo:
p{
color:green !important;
}
 El color verde para los párrafos tendrá preferencia sobre
cualquier redefinición de estilos sobre el elemento p.
Herencias
 Hay que tener en cuenta que hay etiquetas que son padre de
otras. Es decir etiquetas que contienen a otras. En el ejemplo:

<p>Arturo Herrero: <em>Los años veinte</em></p>

 La etiqueta p es padre de la etiqueta em (em está dentro de p).


Esto hace que em herede todo el estilo que posea p y además
añada el suyo propio. Por ejemplo, si hemos definido:

p{ color:blue; font-size:12pt }
em{ font-size:14pt; }

 En el ejemplo anterior, los años veinte tendrán color azul y


Selectores
 Los estilos CSS se aplican hacia el elemento HTML
que indiquemos. Este elemento puede ser una
etiqueta HTML, pero también podemos hacer
selecciones más elaboradas
p{
}
#identificador{
}
.clase{
}
Selectores – Elementos HTML
 Podemos aplicar un estilo a un elemento concreto de
HTML. Como en los ejemplos anteriores:
p{ color:blue; font-size:12pt }
 En principio con ese código todos los elementos de
tipo p de la página saldrán de color azul.

Podemos incluso aplicar el estilo a varias etiquetas a la


vez:
h1,h2,h3{ color:blue; }
 Los títulos de tipo h1, h2 o h3 saldrán de color azul.
Selectores – Clases
 Una clase es un identificador que asignamos a una
serie de propiedades y valores CSS. Se configuran de
esta forma:
selector.nombreclase{
propiedad1:valor1;
propiedad2:valor2;
…
}
 Por ejemplo:
p.clase1{
color: #339999;
background-color: #D6D6D6;
}
Selectores – Clases
 Para que un párrafo (necesariamente marcado con la etiqueta p)
adopte este estilo hay que indicarlo gracias a un atributo presente
en todos los elemento HTML; se trata del atributo class. Ejemplo:
<p class="clase1">
Este texto sale con el formato indicado por la clase
<em>clase1</em>
</p>
 Definir la clase sin indicar a qué selector pertenece:
.clase1{ color: #339999; background-color: #D6D6D6; }

 En ese caso cualquier elemento HTML podrá utilizar esa clase.


Ejemplo:
<h1 class="clase1"> Título con estilo clase1 </h1>
Selectores – Identificadores
 La idea es parecida a la de las clases, pero ahora el
nombre que indiquemos se referirá al atributo
identificador de un elemento, el cual se marca con el
conocido atributo id de HTML .
 Los identificadores no se pueden repetir en el
mismo documento, por lo que el formato indicado
sólo se aplicará a un elemento de la página.
 Ejemplo:
#parrafo1{ color: #339999; background-color:
#D6D6D6; }
 Y la forma de aplicar:
<p id="parrafo1"> texto del párrafo coloreado </p>
Selectores – De Limitación
 Permite indicar que el estilo definido se aplica a una
determinada etiqueta pero cuando sea hija de otra
que especificada. Ejemplo:
td p{
color:red;
}
 Se aplica a los elementos de tipo p cuando están
dentro de elementos de celda (td).
Selectores – Selector universal
 Existe un selector que permite aplicar un estilo a
todas las etiquetas. Es el asterisco. Ejemplo:
*{ color:black; }
 No se suele utilizar de esa forma ya que es demasiado
indiscriminada. Pero sí se utiliza para elementos de
este tipo:
table * p{ color:red; }
 Permite colorear en rojo el texto de los párrafos
cuando esta etiqueta se use en tablas (es decir, dentro
de elementos table); no importará si entre table y p
hay otras etiquetas (sean del tipo que sean).
Selectores – por atributos
 Permite aplicar estilos a un elemento cuando este usa un
atributo sobre el que toma un determinado valor. Para ello se
indica el atributo entre corchetes, seguido del signo de igualdad
y el valor entre comillas. Ejemplo:
<head> <meta charset="UTF-8">
<title>Document</title>
<style type="text/css" >
p[lang="en"]{
font-style: italic;
}
</style>
</head>
<body>
<p lang="es">texto que sale de forma normal</p>
<p lang="en">texto que sale en cursiva</p>
</body>
Selectores – por atributos
 Se puede mezclar este tipo de definiciones con clases o
definiciones por identificador:
p.clase1[lang="en"]{
font-style: italic;
}

En este caso el estilo definido se aplica a párrafos de clase 1 que estén


marcados con el valor en en el atributo lang (es decir que estén en
inglés).
 Se puede incluso utilizar más de un atributo:

p [lang="en"][spellcheck="true"]{ font-style: italic; }

En este caso se aplica el estilo para los elementos de tipo p


que usen los atributos lang y spellcheck con los valores
indicados
Selectores – por atributos
 Por otro lado gracias a CSS3 disponemos de estas
posibilidades:
sintaxis significado
elemento[atributo~="v Elementos que usen el atributo indicado que contengan el
alor"] valor aunque separado de otros valores por espacios
elemento[atributo$="va Elementos que utilicen el atributo y cuyo contenido finalice
lor"] con el valor indicado
elemento[atributo^="v Elementos que utilicen el atributo y cuyo contenido empiece
alor"] con el valor indicado
elemento[atributo*="va Elementos que utilicen el atributo indicado y contengan (en
lor"] cualquier parte) el atributo indicado
Selectores – Jerárquicos
 Podemos entender HTML como un documento
formado de manera jerárquica, donde hay elementos
que contienen otros elementos formando una
estructura de árbol.

 ¿Cuál es la jerarquía del siguiente código?


Selectores – Jerárquicos
Selectores – Jerárquicos
 En él se observa como los elementos body y head son
hijos de html. Mientras que meta y title son hijos de
head (luego nietos de html). Los nodos al mismo nivel
forman hermanos (h1, h2, p y ul en este esquema son
hermanos).
 Para especificar una relación padre/hijo, vimos antes
como indicarla de esta forma:
td p{ color:red; }
 Y esto significa lo mismo que:
td > p{ color:red; }
El signo > indica una relación jerárquica de padre a
hijo
Selectores – Jerárquicos
Sintaxis Significado
elemento1 + El estilo se aplica al elemento2 cuando es hermano del
elemento2 elemento1 y además el elemento1 precede inmediata-
mente al elemento2.
elemento1 ~ Se aplica al elemento2 cuando es hermano del elemento1
elemento2 y éste le precede, aunque no sea inmediatamente.
Selectores – Jerárquicos
Sintaxis Significado
elemento:nth- Se aplica al elemento indicado cuando sea el hijo con el
child(n) número indicado (por ejemplo número sería 3, para el
tercer hijo).
Se pueden utilizar expresiones más complejas mediante el
uso de la variable n para conseguir fórmulas más
complejas
Se permite también usa las palabras clave odd (impar)
y even (par)
Ejemplos de uso:
tr:nth-child(3). Selecciona la tercera fila de una tabla
tr:nth-child(odd). Selecciona las filas impares
td:nth-child(even). A los pares
tr:nth-child(2n+1). Selecciona las filas 1,3,5,... (las
impares)
tr:nth-child(3n+1). Selecciona las filas 1, 4, 7, 10, 13... (de
tres en tres)
Selectores – Jerárquicos
Sintaxis Significado
elemento:nth-last- Igual que el anterior pero cuenta el orden de atrás hacia delante.
child(n)
elemento:nth-of- Funciona como nth-child pero ahora se refiere al elemento
type(n) número n (con n teniendo todas las posibilidades comentadas
anteriormente) siendo n el número de hijo de ese tipo.

<style>
article p:nth-of-type(2) { color:red; }
</style>
</head>
<body>
<article>
<h1> Primer hijo, no se colorea </h1>
<p> Segundo hijo, primero de tipo p. No se colorea </p>
<p> Tercer hijo, segundo de tipo p. SE COLOREA </p>
<p> Cuarto hijo, tercero de tipo p. No se colorea </p>
</article>
</body>
Selectores – Jerárquicos
Sintaxis Significado
elemento:nth-last- Como el anterior pero cuenta n desde el final.
of-type(n)
elemento:first-child Se aplica al elemento cuando es el primer hijo

elemento:last-child Se aplica al elemento cuando es el último hijo

elemento:first-of- Primer descendiente de su tipo


type
elemento:last-of- Último descendiente de su hijo
type
Selectores – Jerárquicos
Sintaxis Significado
elemento:empty Se aplica cuando el elemento está vacío
elemento:only- Se aplica cuando el elemento es el único hijo
child
elemento:only-of- Se aplica cuando el elemento es el único hijo de ese tipo
type

Podemos incluso hacer combinaciones avanzadas. Ejemplo:

ul > li + li { color:green; }

Se aplica a los elementos li que estén dentro de elementos ul


y además estén inmediatamente precedidos por otro
elemento li.
Pseudoclases
 Las pseudoclases permiten asociar estilos a un selector
cuando le ocurre una determinada circunstancia. Las
pseudoclases más famosas son las que se aplican a los
enlaces (elemento a). Las cuales son:
a:link. Se aplica para los enlaces no visitados
a:visited. Enlaces visitados
a:active. Enlaces activos (aquellos sobre los que hacemos clic)
a:hover. Se aplica cuando el ratón pasa por encima del enlace

 Estas pseudoclases permiten un cierto dinamismo en la


página HTML. Actualmente además es posible utilizarlas
en otros elementos distintos de la etiqueta a (como p, div,
etc.) lo que da enormes posibilidades.
Pseudoclases
Sintaxis Significado
:focus Cuando el elemento obtiene el foco. Muy útil en formularios.
:lang(códi Se aplica cuando el elemento esté marcado con el lenguaje indicado
go) por su código (es para español, en para inglés,…)
:enabled Cuando está habilitado (útil en formularios)

:disabled Cuando está deshabilitado (útil en formularios)

:checked Para controles de formulario de tipo radio o checkbox cuando


estén activados
:before Para indicar contenido anterior al párrafo. Siempre se suele usar con
la propiedad content para añadir contenido al elemento.
:after Para indicar contenido después del elemento.
:first-line Aplica estilo a la primera línea del elemento.

:first- Aplica el estilo a la primera letra del elemento.


letter
Clase sin columnar

Clase con tres columnas


Maquetación Web, caja box-sizing

Siempre para la maquetación:


*{
box-sizing: border:box;
}
Estructura web html5
Float:rigth

Float:left

Float:left

Clear:both
Cuidado con elementos flotantes y la
altura del bloque

Dado un mismo elemento HTML que recibe estilos desde 4 ubicaciones distintas, indica cuál es el orden de
aplicación de esos estilos sobre el elemento

1 - !important
2 - hoja de estilos .css
3 - estilos de la cabecera HTML
4 - estilos de la etiqueta del elemento

2, 3, 4, 1

También podría gustarte