Sandbox WebEstilos CSS
Orden de preferencia
- !important: p.e.
width:580 !important; - style: dentro de cualquier tag en la página, p.e.:
<body style="color:red">. - ID: p.e.:
#slider {display:none;}. - class: p.e.:
.cap {list-style:none;}. - attribute: para aplicar estilos por su atributo. Ejemplos:
a[target="_blank"] {background-color: yellow;}. Existen modificadores como | (que empiece por y sea exacto), ^ (que empiece), $ (que termine), * (que contenga). P.e.:[class$="test"] {background: yellow;}. - element: tags, p.e.:
p {margin: 0 auto;} - *: afecta a todos los elementos, p.e.:
* {outline:none;}. - inherited: estilos heredados, p.e.:
font:inherit;.
li:hover > ul {height:100%;}
CSS media queries
Las Media queries consisten de un media type y una o mas expresiones unidas por operadores lógicos, implicando características del medio, la cual se resuelve como verdadera o falsa.@media screen and (max-width:1152px) {
#wrapper {
max-width:960px;
}
}
Media types: all, aural (sintetizadores), braille, embossed (braille printers), handheld (pequeños devices), print, projection, screen, tty, tv.
Background
| background: | color position/size repeat origin clip attachment image; | todo en uno |
| background-color: | color | transparent; | color: #b0c4de | rgb(255,0,0) | red |
| background-position: | valor; | valor: 40px 30px | 30% 40% | left-center-right center-bottom-top |
| background-size: | auto | length | cover | contain; | length: 40px 20px | 10% 5% | 40px | 10% |
| background-repeat: | repeat | repeat-x | repeat-y | no-repeat; | repetición |
| background-origin: | padding-box | border-box | content-box; | posición relativa para imágenes |
| background-clip: | padding-box | border-box | content-box; | posición relativa para fondo |
| background-attachment: | scroll | fixed | local; | scrolls o no |
| background-image: | url | none; | url de la imagen |
Text
| color: | color; | color: #b0c4de | rgb(255,0,0) | red |
| direction: | ltr | rtl; | dirección de escritura left-to-right o right-to-left |
| letter-spacing: | normal | length; | length: -3px |
| line-height: | normal | number | length; | number: multiplica el espaciado entre líneas; length: 40px | 10% |
| text-align: | left | right | center | justify ; | alineamiento horizontal |
| text-decoration: | none | underline | overline | line-through; | líneas decorativas en texto |
| text-indent: | length; | length: indentación de la primera línea en px o % |
| text-shadow: | h-shadow v-shadow [blur-radius] color | none; | sombra del texto, parámetros en px |
| text-transform: | none | capitalize | uppercase | lowercase; | capitalización del texto |
| unicode-bidi: | normal | embed | bidi-override; | orientación del texto para otras lenguas |
| vertical-align: | baseline | length | sub | super | top | text-top | middle | bottom | text-bottom; | alineamiento vertical |
| white-space: | normal | nowrap | pre | pre-line | pre-wrap; | indicamos si el texto permite saltos de línea (word wrap) |
| word-spacing: | normal | length; | length: -3px |
Fuentes
| font: | font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar; | todo en uno, las últimas propiedades indican la fuente a usar en distintos controles |
| font-family: | font; | font: nombre de la fuente o familia de fuentes |
| font-size: | medium | xx-small | x-small | small | large | x-large | xx-large | smaller | larger | length; | length: 40px | 10% |
| font-style: | normal | italic | oblique; | oblique mantiene el tipo de fuente, italic en algunos casos no |
| font-variant: | normal | small-caps; | transforma el texto en pequeñas mayúsculas |
| font-weight: | normal | bold | bolder | lighter | number; | number de 100 a 900, 400 es normal y 700 bold |
Listas
| list-style: | list-style-type list-style-position list-style-image; | todo en uno |
| list-style-image: | none | url; | reemplaza el marcador de las listas por una imagen |
| list-style-position: | inside | outside; | inside: indenta el marcador, outside lo deja fuera |
| list-style-type: | value; | value: lower-alpha (a,b,..), lower-roman (I,II,...), upper-latin (A,B,...), decimal-leading-zero (01,02,...) |
Contenedores - Box Model
Outline - Margin - Border - Padding - Content| border[-left|-right|-bottom|-top]: | border-width border-style border-color; | todo en uno |
| border[-left]-width: | medium | thin | thick | length; | length: 10px [20px [30px [40px]]] |
| border[-left]-style: | none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset; | 1,2,3 o 4 parámetros |
| border[-left]-color: | color | transparent; | 1 parametro: todos, 2 TB LR, 3 T LR B o 4 T R B L |
| outline: | outline-color outline-style outline-width; |
| margin[-left|-right|-bottom|-top]: | length|auto; | 1,2,3 o 4 parámetros, px o % |
| padding[-left|-right|-bottom|-top]: | length; | 1,2,3 o 4 parámetros, px o % |
| align-content: | stretch | center | flex-start | flex-end | space-between | space-around | alineación de los elementos dentro de un contenedor cuando queda espacio |
| align-items: | stretch | center | flex-start | flex-end | baseline | alineación de los elementos dentro de un contenedor |
| align-self: | auto | stretch | center | flex-start | flex-end | baseline | alineación de un elemento dentro de un contenedor |
| bottom: | auto | length; | posicionamiento relativo a abajo de un elemento dentro de un contenedor |
| left: | auto | length; | posicionamiento relativo a izquierda de un elemento dentro de un contenedor |
| right: | auto | length; | posicionamiento relativo a derecha de un elemento dentro de un contenedor |
| top: | auto | length; | posicionamiento relativo a arriba de un elemento dentro de un contenedor |
| clear: | none | left | right | both; | elimina flotabilidad |
Tablas
| caption-side: | top | bottom | ubicación del título |
Imágenes
| clip: | auto | shape; | shape: rect (top, right, bottom, left), ajustando la imágen a la figura |
Animaciones
| animation: | name duration timing-function delay iteration-count direction fill-mode play-state; | todo en uno |
| animation-delay: | time; | time: -2s, 4ms |
| animation-direction: | normal | reverse | alternate | alternate-reverse; | alternate-reverse: 1,3,.. reverse 2,4...normal |
| animation-duration: | time; | time: s o ms |
| animation-fill-mode: | none | forwards | backwards | both; | estilo del elemento antes y/o después de la animación |
| animation-iteration-count: | number | infinite; | cuantas veces se repite |
| animation-name: | keyframename | none; | nombre del keyframe |
| animation-play-state: | paused | running; | pausa o no |
| animation-timing-function: | linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n); | ease-in: comienzo lento, ease-out: final lento |
-- MiguelPriego - 17 Feb 2015
Sandbox.EstilosCss moved from Sandbox.ComprenderTwiki on 17 Feb 2015 - 14:51 by MiguelPriego - put it back
Sandbox Web
Create New Topic
Index
Search
Changes
Notifications
Statistics
Preferences
TWiki Tip of the Day
WebChanges to see recent activity
Each TWiki web has a WebChanges topic that lists recent activity from all editors of the web. This page ... Read on
Each TWiki web has a WebChanges topic that lists recent activity from all editors of the web. This page ... Read on
Antares_KM3Net |
|
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding TWiki? Send feedback