CSS Flashcards
Selecciona todos los elementos <p> dentro de los elementos <div>
div p {
propiedad:valor; propiedad:valor;
}
Selecciona todos los elementos <p> donde el padre es un elemento <div>
div > p {
propiedad:valor; propiedad:valor;
}
Selecciona el primer elemento <p> que se coloca inmediatamente después de los elementos <div>
div + p{
propiedad:valor; propiedad:valor;
}
Selecciona todos los elementos <ul> que están precedidos por un elemento <p>
p ~ ul{
propiedad:valor; propiedad:valor;
}
elemento con una identificación específica, seguido de la identificación del elemento
para1 {
text-align: center;
color: red;
}
seleccionar elementos con una clase específica, escriba un carácter de punto (.), seguido del carácter nombre de la clase.
.center {
text-align: center;
color: red;
}
especificar que solo los elementos HTML específicos se vean afectados por una clase.
p.center {
text-align: center;
color: red;
}
El selector universal de CSS
- {
text-align: center;
color: blue;
}
agrupar los selectores
h1, h2, p {
text-align: center;
color: red;
}
CSS externo
<!DOCTYPE html>
<html>
<head>
OJO
<link></link>
</head>
</html>
CSS interno
!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}</style></head>
</html>
CSS en línea
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Orden en cascada
1.Estilo en línea (dentro de un elemento HTML)
2.Hojas de estilo externas e internas (en la sección de cabecera)
3.predeterminado del navegador
Un comentario CSS
/* This is a single-line comment */
pueden abarcar varias lineas
comentario HTML
<!-- These paragraphs will be red -->
CSS Box Model
Content - El contenido de la caja, donde aparecen texto e imágenes
Padding - Borra un área alrededor del contenido. El relleno es transparente.
Border - Un borde que rodea el relleno y el contenido. Margin - Borra un área fuera del borde. El margen es transparente.
