Right Now!: Css

Mostrando entradas con la etiqueta Css. Mostrar todas las entradas

sábado, 23 de junio de 2012

Especificidad en CSS

La especificidad (Specificity) en CSS describe los pesos relativos de los diversos selectores para la resolución de conflictos.

Para entender esto el siguiente ejemplo (en la imagen) es muy claro.

Tenemos en el código, dos declaraciones una que indica que el selector H1 debe tener color rojo, y una clase que aplica el color azul. Mas abajo en el HTML, aplicamos ambas reglas a un mismo elemento. La pregunta es: ¿De que color se va a mostrar el texto dentro de H1?.

Eso lo define la especificidad, y para encontrar la especificidad se debe seguir este algoritmo:

Contar el numero de atributos ID en el selector = a
Contar el numero de atributos CLASS en el selector = b
Contar el numero de Tags en el selector = c

La concatenación de los tres números nos da la especificidad.

Para el ejemplo anterior seria:

Selector	a	b	c	Especificidad
h1	0	0	1	1
.titulo	0	1	0	10

Por lo que nuestro ejemplo el título queda con color azul.

Fuente

Reference Sitepoint CSS Specificity

miércoles, 9 de noviembre de 2011

Attribute rel not allowed on element link at this point.

Al revisar una página, con la herramienta del W3C para validar documentos Web http://j.gs/PJS. Encontré el siguiente error:

Attribute rel not allowed on element link at this point.

La página es adaptada a HTML5, por lo que eso me daba una pista.

Al quitar el atributo rel, ocurrió el siguiente error:
Element link is missing one or more of the following attributes: itemprop, rel.

Al final usé un generador HTML5 (link mas abajo), el cual dejo la linea con problemas de la siguiente forma:

<link rel="stylesheet" href="css/styles.css" />

Recomiendo usar este generador de HTML5 para obtener código válido:
http://j.gs/PJQ

martes, 1 de marzo de 2011

cursor:hand en Firefox

Si llegaste a este post de seguro ya sabes que para cambiar el puntero del mouse desde CSS se debe usar cursor:<tipo de cursor>. Pero en el caso, que quieras colocar el puntero como mano, esta funciona en todos los navegadores excepto en Firefox.

Para solucionar eso se debe usar pointer, tal como se indica a continuación y en la imagen que adjunto:
cursor:pointer;

domingo, 29 de marzo de 2009

Listas con css

He copiado el estilo de un par de tutoriales de css para hacer que una lista aparesca en forma horizontal y nada.

Supongamos que mi lista es la siguiente:

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>

Y deseo que aparesca de forma horizontal, como lo hago con CSS?

El estilo necesario es el siguiente:

<style>
ul li{
display:inline;
}
</style>

Si deseas agregarle un icono a los elementos li puedes hacer lo siguiente:
Agrego padding-left para establecer la zona de relleno izquierdo al texto, y la imagen que quiero mostrar en ese link.

.icono1{
padding-left: 20px;
background:url(../templates/maps/maps/mapa_r1_c2_r2_c2.jpg) no-repeat;
}

por lo que la lista quedaría como sigue:

<ul>
<li class="icono1" >Elemento 1</li>
<li>Elemento 2</li>
</ul>

Encontre este codigo css que asocia la extension a la que apunta el link con una imagen, no lo he probado.

a[href $='.pdf'] {
padding-left: 20px;
background: transparent url(icon_pdf.gif) no-repeat center left;
}

sábado, 27 de diciembre de 2008

Botones con CSS .NET

Tanto las aplicaciones que se hacen con controles HTML como con controles .NET se pueden manipular su interfaz gráfica utilizando CSS.

Lo ideal es que si vas a desarrollar una interfaz gráfica no dejes las definiciones de estilos, colores, letras en el archivo donde declaras los controles. Por ejemplo, si tienes una página que se llama index.aspx, y en ella declaras botones, campos de textos y otros controles, tengas tambien un archivo de estilos que podria ser estilos.css donde defines el color de fondo, tipos de letras, etc.

Cuando hablamos de controles HTML es posible definir en el archivo CSS los elementos por ejemplo: body, table, input, etc. Sin tener que intervenir en el archivo que define los controles indicando a que clase corresponde. En .Net en algunos casos es necesario indicarle al control que estilo le corresponde con el atributo CssClass

<html>
<head>
<title></title>
<link href="estilo.css" type="text/css" rel="stylesheet">
</head>
<body>

<form runat="server">
<asp:Button id="b1" Text="Submit" runat="server" CssClass="boton" />
</form>
</body>
</html>

estilo.css

.boton{
background-color:#c2c2c2;
border-left:1px solid #FFFFFF;
border-right:1px solid #FFFFFF;
color:#515151;
font-family:arial,helvetica,sans-serif;
font-size:14px;
text-align:center;
vertical-align:middle;
height: 40px;
width: 150px;
}