Fuentes web. CSS 3. Páginas web HTML / XHTML y hojas de estilo CSS. Bartolomé Sintes Marco Las fuentes web son las fuentes que pueden mostrarse en el navegador sin necesidad de que el usuario las tenga instaladas en su ordenador ya que se descargan automáticamente. Fuentes web en CSS 2 La recomendación CSS 2 permitía la utilización de fuentes web mediante el uso de la regla-arroba @font-face, pero la regla-arroba @font-face no está incluida en la recomendación CSS 2.1, por lo que el uso de fuentes web en CSS 2 puede considerarse obsoleto. Fuentes WOFF (Web Open Font Format) En 2009 se desarrolló un formato de fuentes llamado WOFF (Web Open Font Format) pensado para la web. En abril de 2010, Mozilla, Microsoft y Opera presentaron este formato al W3C, que aprobó la recomendación WOFF File Format 1.0 en diciembre de 2012. Actualmente (octubre de 2015) se está preparando la recomendación WOFF File Format 2.0 (artículo en lwn.net sobre WOFF2 13/11/2013). Fuentes web en CSS 3 Google Fonts / Google Fonts API Google ofrece un servicio de alojamiento de fuentes libres, Google Fonts. Nota:
CSS Pseudo-elements Tabla Caracteres ASCII - Conversion y Equivalencias Hexa - Octal - HTML Entities La tabla ASCII (American Standard Code for Information Interchange) es un juego de caracteres creado en 1963 y publicado en 1967 para representar el alfabeto latino, otros caracteres alfanumericos y comandos para control de textos (nueva linea, tabulacion, etc) en sistemas informaticos. La codificacion esta basada en un estandard de 7 bits para la composicion de cada byte, a diferencia de estandares mas modernos que utilizan 8 bits para incorporar caracteres internacionales (como ISO-8859-1). El octavo bit en la codificacion ASCII es utilizado habitualmente como un bit de paridad para el control de errores en transferencia de datos. A diferencia de ASCII, el estandard Unicode fue creado a finales de la decada del '80 para contener en un mismo sistema de codificacion la multiplicidad de caracteres posibles para distintos idiomas, inclusive idiogramas como los utilizados en chino.
Selectutorial: CSS selectors Selectutorial - CSS selectors Selectutorial - CSS selectors Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled. Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout. Rules The document tree - it's a family thing Selectors Advanced stuff Selectors in action - a step by step tutorial Max Design Feeds Recent articles Popular articles Other Max Design articles and presentations Associated with webstandardsgroup.org
Tip: Cambiar estilos de Checkbox y Radio Button con CSS3 Veremos una forma rápida y sencilla de cambiar los estilos de los checkbox y radio button con css3, usando el pseudo selector :checked, seremos capaces de apuntar a un elemento basándonos en su estado activo o desactivo(checked o unchecked). Creación de nuestro HTML Solo se mostrara esta técnica para un elemento checkbox, pero sera el mismo proceso para los radio button, y se podrá apreciar mejor en el demo. Comenzamos creando nuestro checkbox seguido de un label Ahora asociamos el elemento label a nuestro checkbox, esto se hace mediante el uso de for=”” y el id del checkbox También se agrego un <span> dentro del label, se vera el porque al momento de aplicar los estilos. Estilos CSS Aquí es donde empieza la diversión, lo primero que haremos, que es el motivo de este tutorial, sera ocultar el checkbox Nuestra imagen Sprite Y este el estilo completo para el css
CSS table cell hover change background color - CSS-Tricks # March 19, 2013 at 5:42 pm Hi, I’m trying to for a CSS ‘menu’ script that when a table cell is hovered the cell background color changes. Here are 2 good examples of what I’d like, in action (note: this doesn’t reflect my personal music taste!) (It is highly preferred to have ‘cells’ that contain logos, such as amazon, iTunes, etc.) (click buy now at top of page – I’d prefer the code to not be ‘pop-up’ – instead more like the Bon Jovi page.) Just need a little push in the right direction – don’t need all buttons written out! Thanks in advance – greatly appreciated!!
Modulo de las tablas HTML5 Las tablas representan una de las funcionalidades más poderosas de HTML y se le pueden dar muchos usos. Si antiguamente eran utilizadas para mostrar solamente resultados de cálculos científicos, hoy en día se puede organizar y maquetar una página Web en totalidad. Cada celda de una tabla puede contener cualquier elemento HTML, incluso otra tabla y solamente nuestra imaginación puede ser la barrera que nos pueda impedir en alcanzar la verdadera potencia de una tabla. Como hemos hablado al principio, HTML utiliza un mínimo de directivas para gestionar el flujo de contenido de una tabla: <table>, <tr> y <td>. <table border="1"> <tr> <td>cabecera</td> <td>cabecera</td> <td>cabecera</td> </tr> <tr> <td>cabecera</td> <td>cuerpo</td> <td>cuerpo</td> </tr> <tr> <td>cabecera</td> <td>pie</td> <td>pie</td> </tr> </table> La tabla que acabo de ejemplificar está formada por 3 columnas, 3 filas y 9 celdas. <caption>Titulo de la tabla</caption> Partes de una tabla Definir las filas de una tabla vs
Unidades VH y VW de CSS3 En este tutorial vamos a conocer las unidades vh y vw, que introdujo la versión 3 de CSS. Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Es por eso, que hoy responderemos a las preguntas ¿Qué son estas medidas? y ¿Cómo usarlas en nuestros proyecto? ¿Qué son las medidas vh y vw? Las medidas vh y vw son medidas relativas de acuerdo al viewport. 1vh = 1% de la altura del viewport 100vh = altura del viewport 1vw = 1% del ancho del viewport 100vw = ancho del viewport ¿Para qué nos sirven? Estas medidas tienen múltiples usos, por ejemplo cuando queremos tener una imagen de fondo que ocupe todo el ancho y alto de nuestro pantalla. Tenemos un texto dentro de un div con una imagen de fondo y luego un parrafo con texto lorem ipsum. See the Pen YyJqma by Edwin Gonzales Melquiades (@edwinpgm) on CodePen. See the Pen mezEyG by Edwin Gonzales Melquiades (@edwinpgm) on CodePen. Compatibilidad
align-content The align-content property is a sub-property of the Flexible Box Layout module. It helps aligning a flex container's lines within it when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis. Note, this property has no effect when the flexbox has only a single line. The align-content property accepts 6 different values: flex-start: lines packed to the start of the containerflex-end: lines packed to the end of the containercenter: lines packed to the center of the containerspace-between: lines evenly distributed; the first line is at the start of the container while the last one is at the endspace-around: lines evenly distributed with equal space between themstretch (default): lines stretch to take up the remaining space The following figure helps understand how the lines are stacked up in a flex container depending on the align-content value: Syntax Demo Related Properties Other Resources Browser Support
Responsive Data Tables In addition to the techniques below, see this roundup of additional explorations of this problem. Garrett Dimon: Data tables don’t do so well with responsive design. Just sayin’. He has a good point. Responsive design is all about adjusting designs to accommodate screens of different sizes. So here’s what we are gonna do… We’re going to use “responsive design” principles (CSS @media queries) to detect if the screen is smaller than the maximum squishitude of our table. We’re being good little developers and using Plain Ol’ Semantic Markup here for our table. <table><thead><tr><th>First Name</th><th>Last Name</th><th>Job Title</th></tr></thead><tbody><tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td></tr><tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td></tr></tbody></table> Our regular CSS is nothing special: The small-screen responsive stuff comes in now. Hey what about IE? <! See it View Demo This isn’t perfect… UPDATE: Other ideas View Demo
vertical-align The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span>, <img>) or inline-block (e.g. as set by the display property) elements. The valid values are: baseline - This is the default value.top - Align the top of the element and its descendants with the top of the entire line.bottom - Align the bottom of the element and its descendants with the bottom of the entire line.middle - Aligns the middle of the element with the middle of lowercase letters in the parent.text-top - Aligns the top of the element with the top of the parent element's fonttext-bottom - Aligns the bottom of the element with the bottom of the parent element's font.sub - Aligns the baseline of the element with the subscript-baseline of its parent. You can see examples of each here: A common use case is lining up an avatar with a username. #More Information