Я пытаюсь выделить различные параметры этого макета с помощью: active.Проблема в том, что выделение не заполняет весь контент.Вот изображение и мой код CSS и HTML.Надеюсь, вы, ребята, можете мне помочь.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: ms-appdata: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<h1 style="padding-left: 30px; padding-top: 35px"><img src="img/perro.png" style="float:left;width:42px;height:42px; padding-right: 10px;">Bibliografía APA</h1>
</head>
<body>
<button onclick="toggle_visibilityone()" style="float: right">[+]
</button>
<a href="html/libro.html" class="hili" type="button">
<div class="tapp">
LIBRO
</div>
</a>
<p id="p1">Un libro debe poseer 25 hojas mínimo (49 páginas), pues
de 24 hojas sería un folleto y de una hasta cuatro páginas se
consideran hojas sueltas (en una o dos hojas). Caen dentro de esta
categoría los e-books y los audiolibros</p>
<hr>
вот мой CSS
*{
-webkit-touch-callout: default;
-webkit-text-size-adjust: none;
-webkit-user-select: text;
-webkit-tap-highlight-color: transparent;
}
body {
width:100%;
height: 100%;
margin: 0%;
padding: 0%;
left: 0%;
top: 0%;
background-color: darkred;
font-size: 18px;
text-align: left;
}
div.tapp:active{
background-color: lightblue;
}
/*Parrafos con descripciones de cada tipo de fuente*/
p{
text-align: center;
background-color: white;
color: black;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 13px;
display: none;
animation-name: fadein;
animation-duration: 1s;
}
@keyframes fadein{
0% {opacity: 0;}
100% {opacity: 1;}
}
/*Enlaces del body*/
.hili{
color: white;
text-decoration: none;
}
/*Botones*/
button{
color: black;
margin-right: 10px;
font-size: 10px;
width: 30px;
height: 15px;
outline: none;
background-color: white;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
/*Título de Bibliografía APA*/
h1{
position: relative;
background-color: rgb(127, 159, 219);
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande',
'Lucida Sans', Arial, sans-serif;
color: white;
text-align: left;
font-size: 30px;
margin-top: 0px;
height: 70px;
border-bottom-style: solid;
border-color: black;
border-width: 2px;
}
И вот как это выглядит прямо сейчас: Изображение
Возможно, глупый вопрос, но я пытаюсь учиться и много читаю, но не могу его решить.Заранее спасибо.