CSS 基础

CSS学习笔记

字体如何优雅降级

首先引入google字体

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

如果你想将一个元素的字体设置成Helvetica，当Helvetica不可用时，降级使用sans-serif字体，那么可以这样写：

p {
  font-family: Helvetica, sans-serif;
}

在元素周围添加边框

CSS 边框具有style，color和width属性。

<img class="smaller-image thick-green-border" src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫">
.thin-red-border {
    border-color: red;//边框为绿色
    border-width: 5px;//边框宽度为5px
    border-style: solid;//细边框
  }

border-radius 添加圆角边框

.thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius:10px;//变得圆润
  }

像素单位

px:像素px是一种长度单位.
相对单位长度:有些单位长度选项是相对视窗大小来改变值的，符合了响应式 web 的设计原则。
（em和rem）

css选择器优先级

在“”标签里面声明的class顺序十分重要。第二个声明始终优于第一个声

<style>
  .pink-text {
    color: pink;
  }
  .blue-text {
    color: blue;
  }
</style>
<h1 class="pink-text blue-text"  >Hello World!</h1>

ID 选择器优先级高于 Class 选择器

无论在class 的上面或者下面声明，id 选择器的优先级总是会高于 class 选择器

内联样式的优先级高于 ID 选择器

Important 的优先级最高

字体将会变为粉色

  .pink-text {
    color: pink !important;
  }

CSS 变量

.penguin {
    --penguin-skin: gray;//声明变量
    --penguin-belly: white;//声明变量
    --penguin-beak: orange;//声明变量
  }
.penguin-top {
    background: var(--penguin-skin);//使用变量
  }
<div class="penguin">
	<div class="penguin-top">
    </div>
</div>

给 CSS 变量附加回退值

.penguin {
    --penguin-skin: gray;//声明变量
    --penguin-belly: white;//声明变量
    --penguin-beak: orange;//声明变量
  }
.penguin-top {
    background: var(--penguin-skin, gray);//使用变量，并给变量附加回退值，当变量有问题是使用gray颜色。
  }
<div class="penguin">
	<div class="penguin-top">
    </div>
</div>

使用媒体查询更改变量

在缩放页面时定义的变量就会随着页面改变大小

:root {
    --penguin-size: 300px;
    --penguin-skin: gray;
    --penguin-belly: white;
    --penguin-beak: orange;
  }
  
  @media (max-width: 350px) {
    :root {
      /* add code below */
      --penguin-size:200px;
      --penguin-skin:black;
      /* add code above */
      
    }
  }