lucky 的学习笔记(CSS 基础)

lucky 的学习笔记(CSS 基础)
0

1、更改颜色(优先级从高到低):

<style>
  h2 {color: red ! important;}
</style>

or

<h2 style="color: blue;">CatPhotoApp</h2>

or

<style>
  #cat-photo-element {
  background-color: green;
}
</style>

or

<style>
  .blue-text {
    color: blue;
  }
</style>
<h2 class="blue-text">CatPhotoApp</h2>

or

<style>
  h2 {color: red;}
</style>

2、边框:

<style>  
    .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 10px;
</style>

3、CSS 变量:创建,使用,回退值,:root 选择器,@media 媒体查询

<style>
  .penguin {
    --penguin-skin: gray;
    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }
.penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, white);
    width: 50%;
}
</style>
<style>
  :root {
    --penguin-belly: pink;
  }
 
  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  @media (max-width: 350px) {
    :root {
     --penguin-belly: orange; 
    }
  }
</style>