CSS总结1-来自freecode

最新推荐文章于 2025-02-26 14:27:42 发布

进击的前端小白

最新推荐文章于 2025-02-26 14:27:42 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_42051213/article/details/105330870

CSS 专栏收录该内容

5 篇文章

订阅专栏

这篇博客总结了CSS的基础知识，包括em和rem单位的使用，!important的优先级，自定义CSS和root设置。接着探讨了视觉设计的应用，如box-shadow，text-transform，以及渐变和动画效果。此外，还强调了无障碍设计的重要性，如figure元素，fieldset包裹单选按钮，以及accesskey和tabindex的使用。最后，讨论了响应式Web设计的原则，如媒体查询，图片自适应，视网膜图片优化，以及视窗单位在响应式排版中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 宽度)。