Scribd
Cargar
5 vistas17 páginas

CSS

Cargado por

antoncarlos2020
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
5 vistas17 páginas

CSS

Cargado por

antoncarlos2020
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como DOCX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 17

CSS

By : Carlos Anton

Podemos utilizar CSS en nuestro archivos HTML una de las formas de hacerlo es escribiendo CSS
dentro de las etiquetas de HTML ( esta forma de integrar CSS no es recomendable y es la mas
incomoda posible )

Al escribir sytle=”color:tomato” todo lo que esta adentro de esta etiqueta recibirá el estilo de
tener un color rojo.
Otra forma de escribir CSS es seleccionando una etiqueta y mediante eso agregarle un estilo
mediando la etiqueta <head>

 <style>
 {
 Color:blue;
 }
Ten en claro que en CSS funciona seleccionando etiquetas y dándoles un estilo para
eso se necesita seleccionar la etiqueta y agregar corchetes {} dentro de estos
corchetes contendrán el estilo que se les dara.
Otra forma de de escribir CSS que es la forma mas recomendable y comoda es escribiéndolo
aparte en su propio archivo.css para esto necesitamos poner en nuestra etiqueta <head> la
etiqueta <link> esta se utiliza para enlazar nuestro archivo con otros archivos en este caso nuestro
archivo HTML será enlazado con el archivo CSS, después utilizaremos la etiqueta <rel> esta se
utiliza para describir la relación que tiene la pagina con la que vamos enlazar nuestro HTML, y
dentro de la etiqueta rel pondremos (stylesheet) el cual indica que vamos a usar el archivo CSS
para dar estilo, después utilizaremos la etiqueta <href> esta etiqueta sirve para poner la ubicación
o el nombre del archivo que vamos a enlazar con nuestro archivo HTML.

 <link rel=”stylesheet” href=”style.css” />

Y en nuestro archivo CSS podemos volver a seleccionar la etiqueta que vamos a usar y darle un
estilo ( es este caso un color verde )
Para seleccionar un titulo solo basta con identificarlo con la etiqueta <id=”NOMBRE”> con esta
tendremos un (NOMBRE) especifico para referirnos a ese titulo o <h1>, para identificar un párrafo
<p> solo basta con identificarlo colocándole una clase con la etiqueta <class=NOMBRE> con esta le
daremos una clase y la podremos identificar por el nombre que le pusimos.

Para seleccionar un título en el archivo CSS solo basta con poner un (Hashtag #) y después de el
poner el nombre de la <id> que le pusimos a nuestro título el cual era #titulo después abrir
corchetes {y darle un color}, para seleccionar un párrafo solo basta con poner un punto y el
nombre de la clase que le pusimos a nuestro párrafo (.texto) pero también podemos ser mas
específicos y seleccionar el párrafo literalmente solamente poniendo ( p ) antes del punto (p.texto)

Podemos crear un grupo de contenido con la


etiqueta <div> dentro podremos agregar párrafos
<p> y títulos <h1>
<h2>
Si queremos seleccionar específicamente la etiqueta <div> solo basta con poner ( div y la etiqueta
que vamos a seleccionar dentro de ella ) en este caso es ( div p ), pero si queremos seleccionar
mas de una etiqueta solo basta con poner una coma ( , ) como por ejemplo ( div h2, div h3 ) esto
indica que la etiqueta (h2) y (h3) dentro de la etiqueta (div) serán seleccionadas.

Si queremos seleccionar toda la pagina HTML solo basta con poner el símbolo asterisco ( * ) este
es una etiqueta universal que selecciona todo lo visible en nuestra pagina, pero este modificara o
seleccionara todas las etiquetas que no han sido seleccionadas o proclamadas. En este caso dentro
de ella puse ( Font-Size ) esto determina el tamaño de las letras de mi pagina web.

 *
 {
 Font-size: 24px;
 }

Para crear un comentario en un archivo CSS solo baste con poner /*COMENTARO*/ esto no
afectara al código en absoluto
Podemos agregar un borde a nuestro texto mediante la etiqueta (border)
{border: (TAMAÑO) (COLOR) (MODELO)

Existen muchos modelos entre ellos están:

 Solid
 Dotted
 Dashed
 Doublé
 Groove
 Ridge
 Inset
 Outsed
 None
 hidden

También podemos agregarle propiedades específicas al borde a nuestra etiqueta con la etiqueta
border-(propiedad)

 style ( Estilo )
 color ( Color )
 radius ( bordes redondos )
 width ( tamaño o anchura )

Unidades de medidas
Podemos agregar backgrounds a nuestros párrafos con la etiqueta (background)

 background-color (Darle color al bakground)


 opacity: ( darle opacidad o trasparencia al contenido seleccionado)
 background-image (Para poner una imagen dentro del background )
 url ( para mencionar la dirección de la imagen )

Las dimensiones del texto se pueden modificar con (height De Alto) o (Width De Ancho) y las
dimensiones del background se puede modificar con ( background-size ) el cual le puedes dar un
valor de alto y ancho ( background-size: 400px 400px ) o puedes agregarle estos 3 elementos

 Auto (Mantiene las proporciones originales de la imagen


 Cover( Aprovecha todo el ancho que tiene disponible la pagina para adaptar las
proporciones de la imagen
 Contain (Contiene la imagen dentro de las proporciones que nosotros especifiquemos
Con ( background-repeat ) podemos hacer que deje de
repetir las imágenes o las repita en dirección x o y

 no-repeat (No repetir )


 Repeat-x ( repetir horizontalmente )
 Repeat-y ( repetir verticalmente )

Con (background-position) podremos mover la posicion del background

 Center * Top(arriba)
 Left * Center(centro)
 Right * Bottom(Abajo)
Ademas tambien le podemos poner valores con px ( 100px 100px )
Los margin es una función que crea un margen afuera de un texto

Los padding crean un margen adentro del texto

La función overflow tiene la función ( hidden y scroll )

 hidden (Hace que si el texto es largo y se sale de los bordes no aparezca


 scroll (Crea una barra direccional para ver lo que no aparece)

Para decorar un texto podríamos utilizar la función (text)


 align ( esta mueve el texto a una posición, center, right o left )
 decoration ( esta decora el texto con rallas, overline, underline o line-through)
 Shadow ( esta le da sombra al texto, text-shadow: (izquierda) (abajo) (Difuminado)
(Color) )
Para incorporar una fuente a nuestro archivo CSS solo basta con poner (Font-family) y seleccionar
las fuentes accesibles

Si quieres importar una fuente de afuera tendras que hacerlo desde (Google Fonts) aquí
encontraras muchas fuentes y también código de incorporación a HTML el cual incorporaremos en
la etiqueta <head> de nuestro archivo HTML

Ya con estos pasos cumplidos solo basta con ir de nuevo a nuestro archivo CSS y en la función
(Font-family) poner entre comillas simples en nombre de la fuente incorporada de Google

Los links tiene estados

No visitado visitado mouse sobre el abriendo link


Y a estos se les puede cambiar el color incluso su estilo y forma.

Se le pueden dar estilo a las listas mediante CSS

Con la función (list-style)


=

=
Podemos crear tablas personalizadas con CSS

 Width: 100% ( Usa todo el ancho


de la web )
 Border-collapse: collapse ( quita
las separaciones que tienen las
palabras dentro de la tabla )
 Border: (modelo) (tamaño) (color)
crea un borde para nuestra tabla
 Padding: 5px ( crea un espacio
dentro de cada cuadro de la tabla )
 Background-color ( color de
background )
 Color: ( color del texto )
 Text-align: (posición de texto)

 tr:nth-child(podemos poner even o odd) esto seleccionara cuadros de en dos en dos

 cursor: (pointer) cuando pases el mouse por la tabla tendrás la acción de clickear
Display es una fusión que le da un modelo espacios al texto como por ejemplo las
etiquetas de párrafos tienen el Display por defecto como (block) estas cada vez que creas
un párrafo se crea abajo del primer párrafo mientras que hay una etiqueta llamada <span>
la cual funciona como párrafo pero esta tiene el Display por de defecto como (Inline) ósea
cada vez que crear un párrafo en vez de crearse abajo, se crea al lado

Aunque también podemos cambiar el Display mediante CSS solo modificando el modelo de Display

Para hacer desaparecer un texo solo basta con poner (none en la función display) o (visibility:
hidden)
La función de width es darle anchura a una etiqueta pero existe otra función llamada max-width
esta no le da anchura define el ancho máximo que un elemento puede tener.

Podemos utilizar la función position para posicionar o mover un elemento

 Relative (mueve el elemento dependiento de lo que pongas en


left, right, top o bottom)
 Fixed ( el elemento se queda pegado en la posición donde lo
pongas no importa cuánto bajes siempre estará en ese lugar )
 Absolute ( el elemento se posiciona al elemento padre o más
cercano )
 Sticky ( es una mezcla de Relative y Fixed )

Relative Fixed Absolute

La función ( Float ) ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a


los elementos de texto y en línea aparecer a su costado.
=

Inline block funciona igual que la fucion ( inline ) la cual mantiene su párrafo a la derecha en vez de
forzarlo a ir abajo, lo único que esta crea bloques de líneas en vez de una línea normal y corriente,
estos se pueden manipular en su tamaño ect,
Como centrar un elemento ? para centrar un
elemento tenemos que utilizar la función
( margin: 0 auto; ) con esta podremos centrar nuestro elemento

También podría gustarte