Clase 6 - CSS
Clase 6 - CSS
Clase 6 - CSS
Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es
.css. Se pueden crear todos los archivos CSS que sean necesarios y cada página
HTML puede enlazar tantos archivos CSS como necesite.
Etiqueta de enlace
Para enlazar un archivo .css se utiliza la etiqueta <link> de la siguiente manera:
rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso, el
archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor
stylesheet
type: indica el tipo de recurso enlazado. Para los archivos CSS su valor siempre es
text/css
href: indica la URL del archivo CSS que contiene los estilos.
Selector de etiqueta:
Sintaxis: etiqueta { propiedad:valor ; }
Selector descendente:
Selecciona los elementos que se encuentran dentro de otros elementos. Están
formados por dos o más selectores separados entre sí por espacios en blanco. El
último selector indica el elemento sobre el cual se aplican los estilos y todos los
selectores anteriores indican el lugar en el que se encuentra el elemento.
Su sintaxis es: selector1 selector2… slectorN { propiedad:valor }. Siendo el
selector N el elemento sobre el que se aplica el estilo.
Tipos de selectores
Selector de clase:
Sintaxis: .clase { propiedad:valor ; }
Selector de identificación:
Utiliza el atributo id para seleccionar un elemento. Solo puede haber un
elemento con un id dado en un documento.
Sintaxis: #id { propiedad:valor ; }
Selectores combinados:
Nos permite dar un estilo a todos los selectores indicados.
Sintaxis: selector1, selector2, selector3 { propiedad: valor; }
Tipos de selectores
Selector de hijos:
Se usa para seleccionar un elemento que es hijo de otro elemento y se indica
mediante el signo “mayor que” (>).
Sintaxis: selector1 > selector2 { propiedad: valor; }
Selector adyacente:
Se usa para seleccionar elementos que están seguidos en el código HTML. Se
indica mediante el signo “más” (+).
Sintaxis: selector1 + selector2 { propiedad: valor; }
Tipos de selectores
Selector de atributos:
Permiten seleccionar elementos HTML en función de sus atributos y/o valores
de esos atributos.
[attr] : Este selector 'seleccionará' todos los elementos que contengan el
atributo attr, sin importar el valor que tenga.
[attr=val] : Este seleccionará los elementos con el atributo attr, pero solo
aquello cuyo valor coincida con val.
[attr^=val] : Seleccionará todos los elementos cuyo atributo attr comienza por
el valor val.
[attr$=val] : Este selector elegirá todos los elementos cuyo atributo attr
termina por el valor val.
Tipos de selectores
Ejemplos de selectores de atributos:
/* Se muestran de color azul todos los enlaces que tengan un atributo "class",
independientemente de su valor */
a[class] { color: blue; }
a:hover { ... } /* se activa cuando el usuario pasa el ratón por encima de un elemento */
a:active { ... } /* se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el ratón sobre un elemento */
a:focus { ... } /* se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado */
h1 {
color: red;
}
h1 {
color: blue;
}
Por ejemplo:
• Un selector de clase es más específico que un selector de etiqueta.
• Un selector de ID es más específico que un selector de clase.
Modelo de cajas
En CSS todo elemento está enmarcado en una caja.
Hay dos tipos de cajas: cajas en bloque y cajas en línea. Estas características se
refieren al modo como se comporta la caja con otras.
Las cajas en bloque siempre empiezan en una nueva línea y ocupan todo el espacio
disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de
la línea.
Las cajas en línea sólo ocupan el espacio necesario para mostrar su contenido. Los
párrafos (p) por ejemplo son elementos de bloque y lo links (a) son de línea.
div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
Ancho total de la caja: 30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 píxel
Modelo de cajas
Esto se puede modificar a través de la propiedad box-sizing que acepta los
siguientes 2 valores:
Ejemplo de serif
font-weight
font-family: "Times New Roman", Times, serif; Establece el peso de la fuente
Valores: normal | bold | light
Valor por defecto: normal
Ejemplo de sans serif
text-transform
Transforma el texto original, a mayúsculas, minúsculas, etc.
Valores: none | capitalize | uppercase | lowercase
Valor por defecto: none
letter-spacing
Permite establecer el espacio entre las letras que forman las palabras del texto
(interletrado)
Valores: normal | unidad de medida | inherit
Valor por defecto: normal
Propiedades color y background
color background-repeat background-position
Establece el color del texto Establece la imagen de fondo Establece la imagen de fondo
Valores: repeat | repeat-x Valores: valor | top | center |
background-color (horizontalmente) | repeat-y bottom || left | center | right
Establece el color de fondo (verticalmente) | no-repeat Valor por defecto: 0% 0%
Valores: color | transparent Valor por defecto: repeat
Valor por defecto: transparent
background-attachment
background-image Establece la fijación del fondo
Establece la imagen de fondo Valores: scroll | fixed
Valores: url | none Valor por defecto: scroll
Valor por defecto: none
Otras propiedades
width margin
Establece el ancho del elemento Permite especificar el espacio entre
Valores: medida | inherit los elementos
Valor inicial: 0 Valores: medida | auto
height padding
Establece el alto del elemento Establece cada uno de los rellenos
Valores: medida | inherit horizontales y verticales de un
Valor inicial: 0 elemento
Valores: medida | inherit
Valor inicial: 0
Propiedad position
Existe una propiedad llamada position que sirve para posicionar un elemento
dentro de la página. Dependiendo de cual sea la propiedad que usemos, el
elemento tomará una referencia u otra para posicionarse respecto a ella.
Los posibles valores que puede adoptar la propiedad position son: static |
relative | absolute | fixed
Propiedad position
position: static
Es el valor que toma un elemento por defecto para posicionarse. No tendrá en
cuenta los valores para las propiedades top, left, right y bottom.
position: relative
Se comporta de la misma manera que static a menos que le agreguemos las
propiedades top, left, right y bottom. Esto causará que su posición normal se
reajuste, pudiendo causar solapamiento entre los distintos elementos.
position: absolute
Cuando se posiciona un elemento de manera absoluta, se hace en base a su
elemento contenedor (por lo general el cuerpo del documento, o un elemento
posicionado relativamente que lo contenga).
Propiedad position
position: sticky
Es una posición nueva que todavía no está soportada por todos los
navegadores. Su comportamiento va a ser relativo hasta que al hacer scroll
llegamos al elemento con position sticky y en ese momento pasa a tener un
comportamiento fijo.
Propiedad z-index
Cuando varios elementos se superponen, z-index determina cual está por
encima del otro. Un elemento con mayor z-index se ubica por encima de uno
con z-index menor. Esta propiedad se puede aplicar solamente en los elementos
que poseen algún tipo de posición que no sea static.
Referencias
- https://code.tutsplus.com/es/tutorials/the-30-css-selectors-you-must-me
morize--net-16048
- https://cssreference.io/
- https://css-tricks.com/almanac/properties/
- https://www.quackit.com/css/properties/
- https://developer.mozilla.org/es/docs/Web/CSS/position#Examples
- https://www.w3schools.com/css/exercise.asp
Flexbox
¿Qué es flexbox?
Es un sistema de elementos flexibles que se caracterizan por su habilidad
de alterar su ancho y alto para ajustarse lo mejor posible al espacio
disponible en cualquier dispositivo.
Al no haber definido aún el comportamiento de dirección y tamaño que tendrán los elementos de
nuestro contenedor, aunque hayamos definido un ancho de 25%, éstos se adaptan a su padre
ocupando el 100% de ancho entre la suma de todos.
Dirección de los ejes
Propiedad flex-direction
Permite modificar la dirección del eje principal del contenedor para que se
oriente en horizontal (por defecto) o en vertical. Además, también
podemos incluir el sufijo -reverse para indicar que coloque los ítems en
orden inverso.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies: