CSS总结1-来自freecode

这篇博客总结了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
ValueResult
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.针对高分辨率屏幕应使用视网膜图片

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

4.响应式排版

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

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

资源下载链接为: https://pan.quark.cn/s/9648a1f24758 Java JDK(Java Development Kit)是Java编程语言的核心组件,为开发运行Java程序提供了必要的工具环境。JDK 8是Oracle公司推出的一个重要版本,它引入了许多新特性改进,极大地提升了开发效率代码质量,对开发者来说具有极高的实用价值。 本次提供的“jdk-8u251-macosx-x64.dmg”安装包是专为Mac OS X系统设计的64位版本,其中不仅包含了Java运行环境(JRE),还涵盖了丰富的开发工具,方便用户在Mac平台上进行Java程序的开发与运行。 JDK 8的关键更新特性如下: Lambda表达式:这是JDK 8的一项重大语法创新,允许开发者使用简洁的匿名函数替代复杂的多行回调代码,从而使代码更加简洁、易读且高效。 方法引用与构造器引用:与Lambda表达式配合使用,可以更直观地引用已有的方法或构造器,进一步减少冗余代码,提升代码的可维护性。 Stream API:这是一个用于处理集合的新API,采用声明式处理方式,使集合操作(如过滤、映射归约等)更加高效且易于理解。 日期时间API的改进:JDK 8对日期时间API进行了重构,引入了java.time包,包含LocalDate、LocalTimeLocalDateTime等类,替代了原有的java.util.Datejava.util.Calendar,使日期时间的处理更加友好灵活。 Optional类:为解决null对象导致的空指针异常问题,JDK 8引入了Optional类,它是一个容器对象,可以表示一个值存在或不存在,从而有效避免空指针异常。 接口的默认方法静态方法:接口现在可以定义默认方法(使用default关键字)静态方法。默认方法允许在不破坏向后
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值