响应式网页设计-基础CSS相关记录-优快云博客

文章目录

Google字体

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
加在<style>之前
font-family: Lobster,monospace;
当link被注释掉，及Lobster字体失效，则会自动降级使用monospace字体

多个class

 <img class="class1 class2">
 在一个元素上可以同时应用多个 class，使用空格来分隔不同 class

圆角

圆角
border-radius: 10px;
圆形
border-radius: 50%;

margin外边距

margin-top、margin-right、margin-bottom、margin-left

顺时针标记指定元素的外边距

按顺时针排序：上、右、下、左
margin: 10px 20px 10px 20px;

margin负值
待定

padding 内边距

padding-top、padding-right、padding-bottom、padding-left

顺时针标记指定元素的内边距

按顺时针排序：上、右、下、左
padding: 10px 20px 10px 20px;

body

<body>下的元素会继承 body 中所设置的样式。
如给body设定color：green，则其下所有字体颜色为绿色。
但是如果该元素设定了color：oink，则样式会覆盖body的样式，字体颜色变为pink

样式覆盖

多个class样式覆盖

 .pink-text {
    color: pink;
  }
  .blue-text{
    color: blue;
  }

<h1 class=" pink-text blue-text">Hello World!</h1>

读取CSS 是由上到下的。如果发生冲突，浏览器将会应用最后声明的样式。也就是后读到的样式会覆盖之前的。上文最终显示颜色为蓝色

id选择器

id选择器优先级高于class，id 选择器无论在 style 标签的任何位置声明，都会覆盖 class 声明的样式

内联选择器

内联选择器优先级高于id选择器

<h1 style="color: green;">

!important优先级最高

color: pink !important;
可保证CSS 样式不受影响，不会被覆盖

CSS变量一次更改多个元素

<style>
  .penguin {
    /* 只修改这一行下面的代码 */
    --penguin-skin: gray;  
    通过变量统一修改样式。在变量前添加”--“常见CSS变量
    --penguin-belly: white;
    --penguin-beak: orange;
    /* 只修改这一行上面的代码 */

    position: relative;
    margin: auto;
    display: block;
    margin-top: 5%;
    width: 300px;
    height: 300px;
  }

  .penguin-top {
    top: 10%;
    left: 25%;
    background: var(--penguin-skin, gray);
    #后者为备用值
    #当你的变量有问题或找不到你的变量时，它会使用备用值颜色为gray
    width: 50%;
    height: 45%;
    border-radius: 70% 70% 60% 60%;
  }

  .penguin-bottom {
    top: 40%;
    left: 23.5%;
    background: var(--penguin-skin, gray);
    width: 53%;
    height: 45%;
    border-radius: 70% 70% 100% 100%;
  }
  .right-cheek {
    top: 15%;
    left: 35%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .left-cheek {
    top: 15%;
    left: 5%;
    background: var(--penguin-belly, white);
    width: 60%;
    height: 70%;
    border-radius: 70% 70% 60% 60%;
  }

  .right-feet {
    top: 85%;
    left: 60%;
    background: var(--penguin-beak, orange);
    width: 15%;
    height: 30%;
    border-radius: 50% 50% 50% 50%;
    transform: rotate(-80deg);
    z-index: -2222;
  }
</style>

:root

<style>
  :root {
  	--penguin-belly :pink;
  }
</style>
:root 里创建变量在全局都可用，即在任何选择器里都生效

注意：在元素里设定相同的变量时，会重写