Bueno vamos a arrancar con algo suave de CSS puesto que es un lenguaje muy extenso y uno de los elementos con mayor utilidad en la actualidad.
CSS
Lenguaje de hojas de estilo
llamado CSS lo cual permite darle color, forma y estilo a lo que son los sitios
web, CSS no es un lenguaje de programación en un lenguaje de hojas de
estilo este ermite controlar el aspecto
y los elementos de cada uno de un sitio web ejm: titulo, enlace, imagen, tabkas
CSS3 solo agrega nuevos
elementos pero la sintaxis bsica es el CSS
Los elementos que tenemos
que tener básicamente es un Archivo de HTML previamente realizado lo cual
permitirá añadir el estilo atraves de nuestra hoja de estilo.
Se debe crear el archivo y
se debe guardar con la extensión .css comúnmente
se crea una carpeta llamada CSS y dentro de ella se almcenan los archivos.
Para hacer referencia desde HTML
al CSS es de la siguiente manera
<link rel=”stylesheet” href=”css/estilos.css”>
Esto se debe realizar en el
Head de la pagina web
Reglas CSS
Una regla css es el conjunto
de grupo que permite darle estilo a un elemento, las reglas se componen de un
selector (body) que seria todo el documento adicional lleva la propiedad (css)
luego el valor que es lo que deseamos modificar (#000000 o black) esta regla
asignaría el color negro al fondo
body {
background: #000000;
}
Propiedades
Background: Color de Fondo
Color: color de fuente
Lo mas relevante de CSS es
conocer las propiedades y como usar cada una de ellas
Los Comentarios en
CSS se realizan de la Siguiente manera /*
*/
Selectores
Son las partes de nuestras
reglas CSS que nos permiten indicar a quien le vamos a hacer cambios a su
aspecto por ejemplo si queremos cambiar
el H1 que sea de un color distinto, ese seria el selector, o indicar que todos
los H tendrán un color o estilo distinto
Selector Universal (Poco
usado ya que cambia todos los aspectos)
* { /*
Selector Universal */
margin:0;
/*
Margen */
padding:
0; /*
Margen Interno */
}
Selectores de Etiqueta
permite asignar el estilo a las etiquetas que se necesitan (H,p)
H2 {
color: blue;
}
Si se quieren trabajar
multiples selectores solo se deben separar por comas
H1, H2, H3 {
color: blue;
}
H4 {
font-size: 20px; Tamaño de fuente se mide en px
}
Se pueden sectorizar
multiples las propiedades comunes e individual las no comunes
Selectores Descendentes
apuntan a un elemento que se encuentre contenido dentro de otro ya asignado
p a{
color: gray;
}
Indica que los elementos a
que se encuentren contenidos dentro de los párrafos van a asumir el estilo
Selectores de Clase
Permite tener varios
elementos del mismo tipo pero con un estilo diferente cada uno y definido por
el usuario
.yellow{ /*
Selector de Clase */
color: yellow;
}
Para ello en el elemento que
queremos esa propiedad se le debe llamar con la clase
class="yellow"
Este tipo de clases se
pueden repetir en el elemento que se necesite
Selectores de ID
Estos cumplen una función
muy similar salvo que el selector no inicia con un ( . ) sino con un ( # )
.nueva{ /*
Selector de ID */
color: yellow;
}
La diferencia entre los
selectores de Clase y los ID es que los selectores de clase se pueden asignar a
diversos elementos y los de id es uno exclusivo para cada uno, los id no son
muy utilizados son obsoletos
Con los selectores de clases
también se pueden hacer limitaciones en los cuales se asignala clase pero que
pertenesca a un elemento en espesifico como en el ejemplo
p .yellow{ /*
Selector de Clase */
color: red;
}
Solo las clases que
pertenezcan al parrafo
0 Comentarios