CSS总结1-来自freecode

CSS-freecode

一.css基础

1.绝对单位em和rem

​ em是相对父元素单位大小；rem是相对根元素单位大小

2.Important 的优先级最高

color: red !important;

3.自定义css和root

  @media (max-width: 350px) {
    :root {
      /* root是根css，所有的css都会从这继承 */
 		--penguin-size: 300px;
      /* --penguin-size--：自定义css变量 */
    }
      .penguin {
        width: var(--penguin-size, 300px);
        /*通过var使用自定义css变量，300px是附加返回值，当自定义变量有问题时它会生效*/
  		}

二.应用视觉设计

1.boxshadow

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
/* offset-x offset-y blur-radius spread-radius*/

2.text-transform

Value	Result
lowercase	“transform me”
uppercase	“TRANSFORM ME”
capitalize	“Transform Me”
initial	使用默认值
inherit	使用父元素的text-transform值。
none	**Default:**不改变文字。

3.互补色搭配

页面配置使用一种颜色作为主色；同时使用互补色来装点页面。

4.线性渐变

​ linear-gradient()和repeating-linear-gradient()

background: repeating-linear-gradient(
      90deg,
      yellow 0px,
      blue 40px,
      green 40px,
      red 80px
    );
/*渐变开始于 0 像素位置的yellow，然后过渡到距离开始位置 40 像素的blue。由于下一个起止渐变颜色值的起止位置也是 40 像素，所以颜色直接渐变成第三个颜色值green，然后过渡到距离开始位置 80 像素的red。*/

5.transform

transform：SkewX(-32deg);
/*沿X轴倾斜元素*/
transform:SkewY(0deg);
/*沿Y轴倾斜元素*/
transform:scale(2);
/*更改元素大小*/

6.关键帧和动画

#anim {
  animation-name: colorful;
  animation-duration: 3s;
  animation-iteration-count:infinite;
    /*创造持续动画*/
}
@keyframes colorful {
  0% {
    background-color: blue;
  }
  100% {
    background-color: yellow;
  }
}

三.应用无障碍

1. figure 元素提高图表的可访问性

<figure>
  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
  <br>
  <figcaption>
    Master Camper Cat demonstrates proper form of a roundhouse kick.
  </figcaption>
</figure>

2.将单选按钮包裹在 fieldset 元素中

<form>
  <fieldset>
    <legend>Choose one of these three items:</legend>
    <input id="one" type="radio" name="items" value="one">
    <label for="one">Choice One</label><br>
    <input id="two" type="radio" name="items" value="two">
    \*label*\
    <label for="two">Choice Two</label><br>
    <input id="three" type="radio" name="items" value="three">
    <label for="three">Choice Three</label>
  </fieldset>
</form>

3.时间选择器type=date

<label for="input1">Enter a date:</label>
<input type="date" id="input1" name="input1">
/*当点击input标签时，时间选择器会显示出来，这可以让用户填写表单更加容易。*/

4.accesskey给链接快速导航

<button accesskey="b">Important Button</button>
/*按键盘B字母键就可以触发，每个浏览器都不相同*/

5.tabindex将键盘焦点添加到元素中

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
/*按Tab键触发的顺序*/

四.响应Web原则

1.媒体查询

@media (min-height: 350px) { /* CSS Rules */ }

2.图片自适应

img {
  max-width: 100%;
    /*图片以100%最大宽度适应父容器*/
  display: block;
  height: auto;
    /* height属性为 auto 保持图片的原始宽高比。*/
}

3.针对高分辨率屏幕应使用视网膜图片

​ 为优化图片在高分辨率设备下的显示效果，最简单的方式是定义它们的 width和 height值为源文件宽高大小。

4.响应式排版

​ 用视窗单位来做响应式排版，视窗单位相对于设备的视窗尺寸 (宽度或高度) ，百分比是相对于父级元素的大小。

• vw：如 10vw的意思是视窗宽度的 10%。
• vh：如 3vh的意思是视窗高度的 3%。
• vmin：如 70vmin的意思是视窗中较小尺寸的 70% (高度 VS 宽度)。
• vmax：如 100vmax的意思是视窗中较大尺寸的 100% (高度 VS 宽度)。