Como estudar o CSS?

Frank K Hosaka · Agosto 13, 2022

Estou tentando estudar o CSS através desse portal: Examples · Bootstrap v5.2 (getbootstrap.com)

Eu peguei um exemplo de como fazer um modal, peguei o código original, e reduzi o máximo que pude:

astudy3.html
------------------------------------------------------------
<!DOCTYPE html>
<title>astudy3</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/modals.css" rel="stylesheet">
<body>
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
      </div>
      <div class="modal-footer flex-column border-top-0">
        <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
        <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Ele pega o estilo fora do arquivo HTML. Eu fiz um outro, colocando o estilo dentro do arquivo HTML, assim:

<!DOCTYPE html>
<title>A Study2</title>
<style>
.bg-secondary{--bs-bg-opacity:1;background-color:rgba(var(--bs-secondary-rgb),var(--bs-bg-opacity))!important}
.border-bottom-0{border-bottom:0!important}
.border-top-0{border-top:0!important}
.btn{border-top-left-radius:0;border-top-right-radius:0}
.btn-close{padding:calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
 margin:calc(var(--bs-modal-header-padding-y) * -.5) calc(var(--bs-modal-header-padding-x) * -.5) calc(var(--bs-modal-header-padding-y) * -.5) auto}
.btn-light{--bs-btn-color:#000;--bs-btn-bg:#f8f9fa;--bs-btn-border-color:#f8f9fa;--bs-btn-hover-color:#000;--bs-btn-hover-bg:#d3d4d5;
 --bs-btn-hover-border-color:#c6c7c8;--bs-btn-focus-shadow-rgb:211,212,213;--bs-btn-active-color:#000;--bs-btn-active-bg:#c6c7c8;
 --bs-btn-active-border-color:#babbbc;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#000;
 --bs-btn-disabled-bg:#f8f9fa;--bs-btn-disabled-border-color:#f8f9fa}
.btn-lg{--bs-btn-padding-y:0.5rem;--bs-btn-padding-x:1rem;--bs-btn-font-size:1.25rem;--bs-btn-border-radius:0.5rem}
.btn-primary{--bs-btn-color:#fff;--bs-btn-bg:#0d6efd;--bs-btn-border-color:#0d6efd;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#0b5ed7;
 --bs-btn-hover-border-color:#0a58ca;--bs-btn-focus-shadow-rgb:49,132,253;--bs-btn-active-color:#fff;--bs-btn-active-bg:#0a58ca;
 --bs-btn-active-border-color:#0a53be;--bs-btn-active-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);--bs-btn-disabled-color:#fff;
 --bs-btn-disabled-bg:#0d6efd;--bs-btn-disabled-border-color:#0d6efd}
.d-block{display:block!important}
.flex-column{flex-direction:column!important}
.mb-2{margin-bottom:.5rem!important}
.modal{--bs-modal-zindex:1055;--bs-modal-width:500px;--bs-modal-padding:1rem;--bs-modal-margin:0.5rem;--bs-modal-color: ;--bs-modal-bg:#fff;
 --bs-modal-border-color:var(--bs-border-color-translucent);--bs-modal-border-width:1px;--bs-modal-border-radius:0.5rem;
 --bs-modal-box-shadow:0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);--bs-modal-inner-border-radius:calc(0.5rem - 1px);--bs-modal-header-padding-x:1rem;
 --bs-modal-header-padding-y:1rem;--bs-modal-header-padding:1rem 1rem;--bs-modal-header-border-color:var(--bs-border-color);
 --bs-modal-header-border-width:1px;--bs-modal-title-line-height:1.5;--bs-modal-footer-gap:0.5rem;--bs-modal-footer-bg: ;
 --bs-modal-footer-border-color:var(--bs-border-color);--bs-modal-footer-border-width:1px;position:fixed;top:0;left:0;z-index:var(--bs-modal-zindex);
 display:none;width:100%;height:100%;overflow-x:hidden;overflow-y:auto;outline:0}
.modal-body{overflow-y:auto}
.modal-content{position:relative;display:flex;flex-direction:column;width:100%;color:var(--bs-modal-color);pointer-events:auto;
 background-color:var(--bs-modal-bg);background-clip:padding-box;border:var(--bs-modal-border-width) solid var(--bs-modal-border-color);
 border-radius:var(--bs-modal-border-radius);outline:0}
.modal-dialog{max-width:var(--bs-modal-width);margin-right:auto;margin-left:auto}
.modal-footer,.modal-fullscreen-xxl-down .modal-header{border-radius:0}
.modal-sheet .modal-dialog {width: 380px;transition: bottom .75s ease-in-out;}
.modal-sheet .modal-footer {padding-bottom: 2rem;}
.modal-title{margin-bottom:0;line-height:var(--bs-modal-title-line-height)}
.mx-0{margin-right:0!important;margin-left:0!important}
.position-static{position:static!important}
.py-0{padding-top:0!important;padding-bottom:0!important}
.py-5{padding-top:3rem!important;padding-bottom:3rem!important}
.rounded-4{border-radius:var(--bs-border-radius-xl)!important}
.shadow{box-shadow:0 .5rem 1rem rgba(0,0,0,.15)!important}
.w-100{width:100%!important}
</style>
</head>
<body>
<div class="modal modal-sheet position-static d-block bg-secondary py-5" tabindex="-1" role="dialog" id="modalSheet">
  <div class="modal-dialog" role="document">
    <div class="modal-content rounded-4 shadow">
      <div class="modal-header border-bottom-0">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body py-0">
        <p>This is a modal sheet, a variation of the modal that docs itself to the bottom of the viewport like the newer share sheets in iOS.</p>
      </div>
      <div class="modal-footer flex-column border-top-0">
        <button type="button" class="btn btn-lg btn-primary w-100 mx-0 mb-2">Save changes</button>
        <button type="button" class="btn btn-lg btn-light w-100 mx-0" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</body></html>

Só que o resultado foi um gigantesco fracasso. O problema é que eu não consigo ver onde eu errei, alguém pode me ajudar?

Entrar

Como estudar o CSS?

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades