CSS walk 2 Metrics Units, Background images
Metrics units px, em , rem
Having the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<h1>h1 text for css selectors</h1>
<h2>h2 text for css selectors</h2>
<h3>h3 text for css selectors</h3>
<h4>h4 text for css selectors</h4>
<h5>h5 text for css selectors</h5>
<h6>h6 text for css selectors</h6>
<a href="https://jalbertomr.blogspot.com">ankor outside p</a>
<div>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi
blanditiis velit fuga quaerat,
<a href="#">ut mollitia cumque?</a> Assumenda dignissimos sapiente cum
eos rerum saepe,
<span>animi distinctio? Placeat repellat,</span> voluptates unde minus
vitae non labore
</p>
</div>
<p>
mollitia ducimus error quam quas delectus suscipit, voluptas, vel corrupti
earum? Quis ea est distinctio sapiente temporibus
<a href="#">labore itaque officiis</a>, vero eius illum, fuga ipsum
molestiae, nesciunt a amet? In voluptas officiis, voluptate sunt dolorem
fugit corrupti enim.
</p>
</body>
</html>
and styles.css file
body {
background: lightskyblue;
}
div {
background: #aaa;
}
browser output:
By default the font-size is 16px, to make it explicit let code in the body, put 20px on div - p, and a p with 1em, use the reference of his parent (div)
body {
background: lightskyblue;
font-size: 16px;
}
div {
background: #aaa;
font-size: 20px;
}
p {
font-size: 1em;
}
browser output:
Let´s use 1.7 rem
body {
background: lightskyblue;
font-size: 16px;
}
div {
background: #aaa;
font-size: 20px;
}
p {
font-size: 1.7em;
}
browser output:
Let´s change em to rem, it will take the body font-size for the two paragraphs.
body {
background: lightskyblue;
font-size: 16px;
}
div {
background: #aaa;
font-size: 20px;
}
p {
font-size: 1.7rem;
}
browser output:
1.7rem take the 1.7 times the font-size of the body, not now the parent div.
Background Images
Let´s use the following html.file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<h1>background images css</h1>
<a href="https://jalbertomr.blogspot.com">ankor outside p</a>
<a href="#">this is an anchor</a>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi blanditiis
</p>
<p>
mollitia ducimus error quam quas delectus suscipit, voluptas, vel corrupti
</p>
</body>
</html>
with the css file
body {
background: url(../images/css3.png);
}
browser output:
By default the image is repeated, to not repeat
body {
background: url(../images/css3.png);
background-repeat: no-repeat;
}
...
body {
background: url(../images/css3.png);
background-repeat: repeat-x;
}
...
repeat-y
body {
background: url(../images/css3.png);
background-repeat: repeat-y;
}
...
Let´s change the back image and add many <br> to made appear the vertical scroll, and check the fixed image when scroll the page.
body {
background: url(../images/fondo.gif);
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
}
With scroll the image also scroll joined to the text
body {
background: url(../images/fondo.gif);
background-repeat: no-repeat;
background-attachment: scroll;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<h1>background images css</h1>
<a href="https://jalbertomr.blogspot.com">ankor outside p</a>
<a href="#">this is an anchor</a>
<div>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt neque
in expedita totam quidem ipsa possimus vero aliquid! Sint voluptatem
vitae similique! Rem animi doloremque libero ducimus quidem enim commodi
possimus. Est vero quas reiciendis repudiandae ea mollitia cumque
asperiores beatae voluptatum doloremque nesciunt a accusamus velit dicta
totam iusto, tempora culpa harum? Temporibus, tenetur nam eaque, animi
necessitatibus iusto eius sint doloremque porro in sit odit fuga iure
quos rem totam eveniet consequuntur id molestiae vero asperiores
repellat ratione hic officia! Dolore iure commodi fugit esse atque
iusto. Odio laborum at ut. In, saepe repellat aperiam omnis doloremque
aliquam.
</p>
</div>
<div>
<p>
mollitia ducimus error quam quas delectus suscipit, voluptas, vel
corrupti
</p>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS course</title>
<link rel="stylesheet" type="text/css" href="./css/styles.css" />
</head>
<body>
<h1>background images css</h1>
<a href="https://jalbertomr.blogspot.com">ankor outside p</a>
<a href="#">this is an anchor</a>
<div>
<br />
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt neque
in expedita totam quidem ipsa possimus vero aliquid! Sint voluptatem
vitae similique! Rem animi doloremque libero ducimus quidem enim commodi
possimus. Est vero quas reiciendis repudiandae ea mollitia cumque
asperiores beatae voluptatum doloremque nesciunt a accusamus velit dicta
totam iusto, tempora culpa harum? Temporibus, tenetur nam eaque, animi
necessitatibus iusto eius sint doloremque porro in sit odit fuga iure
quos rem totam eveniet consequuntur id molestiae vero asperiores
repellat ratione hic officia! Dolore iure commodi fugit esse atque
iusto. Odio laborum at ut. In, saepe repellat aperiam omnis doloremque
aliquam.
</p>
</div>
<div>
<p>
mollitia ducimus error quam quas delectus suscipit, voluptas, vel
corrupti
</p>
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
the css file looks like
div {
background: url("../images/css3.png");
height: 250px;
color: white;
}
p {
background: url("../images/fondo.gif");
margin-top: 20px;
padding-top: 30px;
border: 10px solid black;
}
and the browser output
div {
background: url("../images/css3.png");
height: 250px;
color: white;
}
p {
background: url("../images/fondo.gif");
margin-top: 20px;
padding-top: 30px;
border: 10px solid black;
background-position: 3300px;
}
browser output:
Also can be moved in X Y with background-position: 123px 123px
div {
background: url("../images/css3.png");
background-repeat: no-repeat;
background-position: 100px 50px;
height: 250px;
color: white;
}
p {
background: url("../images/fondo.gif");
margin-top: 20px;
padding-top: 30px;
border: 10px solid black;
background-position: 3300px 200px;
}
...
browser output
Also can be centered
div {
background: url("../images/css3.png");
background-repeat: no-repeat;
background-position: center;
height: 250px;
color: white;
}
p {
background: url("../images/fondo.gif");
margin-top: 20px;
padding-top: 30px;
border: 10px solid black;
background-position: center;
}
browser output, the images are centered
div {
background: url("../images/css3.png");
background-repeat: no-repeat;
background-position: center 0;
height: 250px;
color: white;
}
p {
background: url("../images/fondo.gif");
margin-top: 20px;
padding-top: 30px;
border: 10px solid black;
background-position: center 0;
}
eot
No hay comentarios:
Publicar un comentario