1 CSS

Para aplicar un estilo a una etiqueta en particular, usaremos la siguiente sintaxis:

<etiqueta style="propiedad:valor;...;propiedadN:valor;"> ... </etiqueta>

style

Sintaxis:

Ejemplo

p {color:red;text-align:center;}

Podemos poner otra manera para hacerlo más fácil de leer.

Ejemplo

{

color:red;

text-align:center;

}

Prueba tu mismo »

CSS Comentarios

El comentario es el texto que genera el usuario. El propósito es proporcionar instrucciones de código. Son útiles si necesitamos hacer cambios en el futuro. Los navegantes, de ninguna manera, saltar.

Los comentarios o descripciones con caracteres "/ *" empiezan por "* /", terminando con caracteres:

/*Esto es un comentario*/

{

text-align:center;

/*esto es otro comentario*/

color:black;

font-family:arial;

}

Redefinición de etiquetas

Suele suceder que desea definir los estilos que se aplican a todas las etiquetas de documento, es decir, tener todos los documentos con una fuente específica, que las tablas deben tener un color diferente entre sí y los encabezados; Para ello, definimos estilos globales, <style> ...

</ style>, de la siguiente manera:

<style type="text/css">

<!--

Etiqueta1, Etiqueta2 {propiedad1:valor}

Etiqueta2 : {propiedad1:valor;...;propiedadS:valor}

Etiqueta4 : {propiedad1:valor;...;propiedadT:valor}

.clase1 : {propiedad1:valor;...;propiedadT:valor}

//-->

</style>

Podemos aplicar el mismo estilo a varias etiquetas, separadas por escritura, y luego la propiedad: separadas por un punto y coma separadas por estilo y por {} teclas. En un bloque de estilo global podemos definir tantos estilos como queramos. .Class1 aparece y pertenece a la llamada clase; Cada etiqueta nos permitirá ver como se ve diferente de la definida globalmente.

Es recomendable definir estos estilos globales dentro del encabezado del documento (<head> ... </ head>) para garantizar que se aplique un estilo a todas las etiquetas definidas. Veamos un ejemplo:

<html>

<head>

<title> Bloque de estilos </title>

<style type="text/css">

<!--

body {font-family:Verdana,sans-serif;font-size:x-small;

margin-left:0.25in; margin-right:0.25in}

h2 {font-family:Verdana,sans-serif;font-size:14pt;color:red}

b, td {font-family:Verdana,sans-serif;font-size:x-small;color:olive}

th {font-family:Verdana,sans-serif;font-size:x-small;

color:white;background-color:#0080C0}

pre, tt, code {font-family:Courier New,Courier;font-size:9pt;color:maroon}

//-->

</style>

</head>

<body bgcolor="white">

<h2>Bloque de estilos de prueba</h2>

<p>

Como se puede ver, esta página se ve completamente

se definen en el encabezado del documento

estilo que hemos fijado. Los márgenes son más anchos que de costumbre

<b>negrita</b> Tiene tamaños y colores fijos,

texto de teletipo, como <tt>estas partes</tt>

Tienen su fuente, tamaño y color definidos,

y veamos cómo quedan las tablas, un ejemplo

acabado</p>

<p>

<center>

<tr> <th>Titulo1</th> <th>Titulo2</th> </tr>

<tr> <td>Celda(1,1)</td> <td>Celda(1,2)</td> </tr>

</table>

</center>

</p>

</body>

</html>

Distinguir HTML y CSS

A medida que definimos estilos globales, sería interesante tener un archivo separado definido; Porque si queremos dar el mismo estilo a todas las páginas, tendremos un gran trabajo de copiar y pegar las definiciones de estilos a cada página.

Afortunadamente, podemos definir estilos en un documento HTML separado en otro archivo, y luego podemos referirnos a él desde el documento HTML. Esto se hará con esta etiqueta, en el encabezado del documento (<head> ... </ head>):

<link rel="stylesheet" type="text/css" href="URL_HOJA.css">

Podemos verlo con un ejemplo:

<html>

<head>

<title> Prueba </title>

<link rel="stylesheet" type="text/css" href="ejemplo.css">

</head>

<h2>Bloque de estilos de prueba</h2>

<p>

Como se puede ver, esta página se ve completamente

se definen en el encabezado del documento

estilo que hemos fijado. Los márgenes son más anchos que de costumbre

<b>negrita</b> Tiene tamaños y colores fijos,

texto de teletipo, como <tt>estas partes</tt>

Tienen su fuente, tamaño y color definidos,

y veamos cómo quedan las tablas, un ejemplo

acabado</p>

<p>

<tr> <th>Titulo1</th> <th>Titulo2</th> </tr>

<tr> <td>Celda(1,1)</td> <td>Celda(1,2)</td> </tr>

</table>

</center>

</p>

</body>

Si queríamos tener el mismo estilo de otros documentos, usar la etiqueta LINK sería suficiente para aplicar.

Esta es la ventaja de las hojas de estilo externas.

EJEMPLO.css

body{

font-family:Verdana,sans-serif;

font-size:x-small;

margin-left:0.25in;

margin-right:0.25in}

h2 {

font-family:Verdana,sans-serif;

font-size:14pt;

color:red}

/* Bestelako etiketentzako estiloak */

b, td {

font-family:Verdana,sans-serif;

font-size:x-small; color:olive}

th {

font-family:Verdana,sans-serif;

font-size:x-small; color:white;

background-color:#0080C0}

pre,tt, code {

font-family:Courier New,Courier;

font-size:9pt;

color:maroon}

Herencia de estilos

En el grupo de etiquetas HTML, podemos establecer una jerarquía de etiquetas que contienen otras, para ser una relación de herencia. En primer lugar, se etiquetaría <body> ... </ body>, que corresponde a todo el documento, y podemos tomar la etiqueta de todos los demás formatos de etiqueta como "padre", ya que todos los demás forman parte del cuerpo del documento.

Luego, las etiquetas de párrafo (<p> ... </ p>, <div> ... </ div>, los encabezados ...) y los elementos etiquetados en la línea (<strong> ... </ strong> <em> ... </ em> <b> ... </ b>, <i> ... </ i>, <span> ... </ span> ...). Las etiquetas de párrafo serán el contenido de los elementos etiquetados en la línea (en el sentido que les hemos dado), de modo que tendremos otra relación "padre-hijo".

Esto es interesante, ya que la mayoría de los estilos definidos se heredan, es decir, si definimos un estilo particular para una etiqueta, este estilo será heredado por sus estilos "infantiles", por lo que no será necesario redefinirlos para ellos. Por ejemplo, si definimos una fuente y un color para <body> ... </ body>, este estilo será heredado por todas las etiquetas de documento y no será necesario definirlas para otras etiquetas.

Sin embargo, si hemos definido un estilo para una etiqueta "padre", podemos definir otro estilo para una etiqueta "secundaria", es decir, heredar un estilo heredado a menos que se indique lo contrario. Las propiedades que no heredamos serán heredadas, y las etiquetas etiquetadas como "padre" se aplicarán a la etiqueta.

Podemos ver un ejemplo:

<html>

<head>

<title> Ejemplo de herencia</title>

</head>

<body bgcolor="white">

<div>Todos los estilos de texto han sido definidos: Fuente: Verdana, Tamaño: x-small, Left Margin: 0.25in, Right margin: 0.25in, <span style="bgcolor:red">pero

Esta parte de la línea es de un color diferente, el resto de las propiedades </span>

guardado, lo que hace que sea interesante cambiar las partes específicas de la herencia y los estilos heredados.

</div>

</body>

</html>

adibidea.css

body {font-family:Verdana,sans-serif;font-size:x-small;

margin-left:0.25in; margin-right:0.25in}

h2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

b, td {font-family:Verdana,sans-serif;font-size:x-small;

color:olive}

th {font-family:Verdana,sans-serif;font-size:x-small;

color:white;background-color:#0080C0}

pre, tt, code {font-family:Courier New,Courier;

font-size:9pt;color:maroon}

Estilo de acuerdo al contexto

En lugar de un estilo para una etiqueta, se puede definir un estilo según el contexto.

Por ejemplo, es posible que desee tener texto en negrita si tiene un color verde cuando sólo está en una celda de una tabla o un color morado cuando está en una lista.

Definiríamos esto como sigue:

<html>

<head>

<title> Ejemplo dependiendo del contexto</title>

<link rel="stylesheet" type="text/css" href="ejemplo.css">

<style type="text/css">

<!--

td em {color:green}

ul em {color:purple}

//-->

</style>

</head>

<p>

En este ejemplo, seguiremos utilizando las páginas de estilo externas, pero veremos que los estilos definidos por el contexto están marcados: la letra gruesa de cualquier celda debe ser verde y la letra gruesa en una lista debe ser púrpura.</p>

<p>

<li>Cualquier elemento</li>

<li>Un elemento<em>en negrita</em> escrito</li>

<li>Otro elemento</li>

</ul>

</p>

<tr><th>Titulo 1</th><th>Titulo 2</th></tr>

<tr><td>Celda (1,1)</td><td>Celda (1,2)</td></tr>

<tr><td><em>Celda(2,1) en negrita</em></td><td>Celda (2,2)</td></tr>

</table>

</center>

Tenemos varias opciones para definir un estilo: definir directamente la etiqueta que se va a utilizar, definirla por separado y aplicarla a las etiquetas que queremos utilizar, o definir etiquetas de estilos globales (que pueden cambiar cuando no se quieren aplicar)

</body>

</html>

ejemplo.css

body {font-family:Verdana,sans-serif;font-size:x-small;

margin-left:0.25in; margin-right:0.25in}

h2 {font-family:Verdana,sans-serif; font-size:14pt;color:red}

em, td {font-family:Verdana,sans-serif;font-size:x-small;

color:olive}

th {font-family:Verdana,sans-serif;font-size:x-small;

color:white;background-color:#0080C0}

pre, tt, code {font-family:Courier New,Courier;

font-size:9pt;color:maroon}

Clases

Es normal querer homogeneizar la apariencia de nuestras páginas, definir algunos estilos en las páginas externas y luego cambiar el estilo de una página específica en algunas etiquetas específicas. Como sabemos, podemos hacerlo definiendo el estilo en esa etiqueta.

Pero también puede ser necesario aplicar una definición de un estilo específico a otra etiqueta. Lo primero que estamos pensando es copiar el otro estilo que queremos aplicar esta definición de estilo. Sin embargo, un estilo específico que queremos aplicar a determinadas etiquetas se puede definir en un bloque de estilo global, o incluso en la página externa, y, gracias a un identificador, aplicar este estilo a las etiquetas que queremos. Las clases se definen para este propósito.

Clase es una definición de un estilo, normalmente desvinculado de las etiquetas HTML, pero podemos adjuntarlo a etiquetas específicas del documento.

Para ello, primero definiremos la clase (en bloque de estilo o página externa) como si fuera otro estilo, de la siguiente manera:

.Nombre_Clase {propiedad1:valor;...;propiedadN:valor}

Es decir, escribiendo el nombre que queremos dar a un punto después de la clase, y definiendo el estilo como definido por cualquier otro: propiedad: pares de valores, separados por punto y coma y claves. Además, podemos definir suficientes clases.

Ahora, para aplicar un estilo de clase a una etiqueta específica, usaremos el parámetro class como sigue:

donde Nombre_Clase es la categoría Clase, sin un punto.

<html>

<head>

<title> Ejemplo de uso de clases</title>

<style type="text/css">

<!--

body {font-family:Verdana,sans-serif;font-size:x-small}

p,a,strong {color:red}

.BUrdina {color:blue}

//-->

</style>

</head>

<body bgcolor="white">

En este ejemplo, veremos cómo se aplican las clases.

Por ejemplo, <strong>en estas letras en negrita</strong> utilizamos un estilo de bloque <strong class="BUrdina">en estas otras</strong> tenemos otro color.

Y la clase también se puede utilizar en letras no negritas. Por ejemplo, <span class="BUrdina">

Esta parte de la línea también utiliza la clase para su estilo particular</span>.

</body>

</html>

Adibidea

.center {text-align:center;}

Saiatu zu zeu »

En este ejemlos, class="center" los p que tienen marca .center se colocan en el cento

Adibidea

p.center {text-align:center;}

Saiatu zu zeu »

Etiqueta ID

Veamos ahora el atributo id de una etiqueta HTML en términos de definición de estilo. Cualquier etiqueta en HTML puede tener una etiqueta de identificación y, a continuación, un nombre para el parámetro, por ejemplo:

Esta "Referencia" debe ser única en el documento HTML (es decir, hay dos etiquetas idénticas idénticas), que se usará para tratar JavaScript (si lo necesitamos), por lo que no debe confundirse con el nombre como referencia.

Para definir un estilo para ID, utilizaremos esta notación (en un bloque de estilo o en una página externa):

#Nombreid{propiedad1:valor;...;propiedadN:valor

Es decir, # y luego el nombre que queremos escribir, y definir el estilo como lo sabemos: propiedad: pares de valores, separados por punto y coma y claves. Podemos definir todos los identificadores que deseamos, pero cada identificador sólo debe estar asociado con una etiqueta específica, de la siguiente manera:

De esta manera, identificaremos esta etiqueta específica de una sola manera, asignando una definición en el bloque o bloque en ese id. Podremos tratarlo desde JavaScript (por ejemplo, cambiando algunas de las características de estilo definidas);

JavaScript determinará el identificador que necesita cambiar, siempre que lo deseemos cambiar

Ejemplo

#para1

{

text-align:center;

color:red;

}

Pruebalo tu mismo»

Multiple Styles Will Cascade into One

Styles can be specified:

inside an HTML element
inside the head section of an HTML page
in an external CSS file

Tip: Even multiple external style sheets can be referenced inside a single HTML document.

Cascading order

What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

Browser default
External style sheet
Internal style sheet (in the head section)
Inline style (inside an HTML element)

So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).

Note: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!

Propiedades

Cómo definir estilos en un documento, así como jerarquía, clase, etc., ahora definimos un estilo que define el valor de lo que podemos hacer.

Para ser más fáciles de identificar, los distribuiremos en las siguientes categorías:

Propiedades:

Bloke-formatua
Tipo de letra
Texto
Color y fondo
Listas

En algunas propiedades debemos especificar una longitud (por ejemplo, en márgenes). Para ello, utilizaremos esta notación:

[–]NN tipo

–

Es un signo, y es opcional (esto indica que los corchetes son opcionales, no se deben colocar corchetes).

Es el número NN y la magnitud del tipo. Este último puede ser relativo o absoluto.

Magnitudes relativas: em (La altura de una M mayúscula), ex (La mitad de una M mayúscula, La altura de una x en minúscula), px (pixel).
Magnitudes absolutas: pt (puntos), pc (picas), in (inches, esto es,pulgadas ), mm (milímetros), cm (centímetros) .

Se considera que todos los elementos de bloque están rodeados por una caja con propiedades de margen, borde, relleno y fondo. Además, la caja que rodea tiene un ancho y la alineación con el documento.

Listas

Page updated

Report abuse