CSS学习笔记2

伪类

CSS 伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。例如，伪类 :hover 可以用于选择一个按钮，当用户的指针悬停在按钮上时，设置此按钮的样式。

/* 用户的指针悬停在其上的任何按钮 */

button:hover {

  color: blue;

}

伪类由冒号（:）后跟着伪类名称组成（例如，:hover）。函数式伪类还包含一对括号来定义参数（例如，:dir()）。附上了伪类的元素被定义为锚元素（例如，button:hover 中的 button）。

伪类让你可以将样式应用于元素，不仅与文档树内容有关，也与外部因素有关——如与导航历史有关的（例如，:visited）、与其内容的状态有关的（如某些表单元素上的 :checked）或者与鼠标位置有关的（如 :hover，它可以让你知道鼠标是否在一个元素上）。

button常用伪类： :active激活可点击，:focus在被选中时，:disabled不可被点击

媒体查询@media

 

CSS 媒体查询（media query）是响应式设计的关键组成部分，你可以根据各种设备特征和参数是否存在以及对应的值来应用 CSS 样式。

通常根据视口大小来应用媒体查询，以便可以为不同屏幕大小的设备做出布局调整。例如，你可以为小屏设备设置较小的字体，在纵向模式下查看页面时增加段落间的边距，或者增加触摸屏上按钮的大小。

在 CSS 中，可以使用 @media at 规则根据媒体查询的结果有条件地应用样式表的一部分。要有条件地应用整个样式表，请使用 @import。

在设置可重用的 HTML 组件时，你还可以使用容器查询，它允许你根据容器元素的大小而非视口或者其他设备特征来应用样式。

@media (max-width: 480px) {

  .container {

    width: 100xw;

  }

  .panel:nth-of-type(4),

  .panel:nth-of-type(5) {

    display: none;

  }

}

以上代码表示只在视图宽度不大于480px时候生效。设置container类元素的视图占满，选择panel类元素的第四，第五个元素不显示。

transform

CSS transform 属性允许你旋转、缩放、倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间实现的。

transform: matrix(1, 2, 3, 4, 5, 6);

transform: translate(120px, 50%);

transform: scale(2, 0.5);

transform: rotate(0.5turn);

transform: skew(30deg, 20deg);

transform: scale(0.5) translate(-100%, -100%);

rotate(deg90)

transform.origin 旋转中心

.container.show-nav + nav li {

  transform: translateX(0);

  transition-delay: 0.3s;

}

.container.show-nav: 选择类名为container且同时包含类名show-nav的元素。

+ nav: 选择紧邻在.container.show-nav之后的nav元素。

li: 选择nav元素下的所有li元素（列表项）。

translateX(0): 将元素在X轴上平移0个单位，即不移动。这个属性用于重置或确定元素的水平位置。

transition-delay: 用于设置过渡效果的延迟时间。

0.3s: 表示过渡效果在开始前会延迟0.3秒。这意味着当li元素的任何其他过渡效果（如位移、透明度等）发生时，会在0.3秒后开始。

Transition

transition CSS 属性是 transition-property、transition-duration、transition-timing-function 和 transition-delay 的一个简写属性。

过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 :hover，:active 或者通过 JavaScript 实现的状态变化。

 

/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition:
  margin-right 4s,
  color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

opacity不透明度

opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。

当 opacity 属性的值应用于某个元素上时，是把这个元素（包括它的内容）当成一个整体看待，即使这个值没有被子元素继承。因此，一个元素和它包含的子元素都会具有和元素背景相同的透明度，哪怕这个元素和它的子元素有不同的 opacity 属性值。

使用 opacity 属性，当属性值不为 1 时，会把元素放置在一个新的层叠上下文中。

/* 完全不透明 */
opacity: 1;
opacity: 1;

/* 半透明 */
opacity: 0.6;

/* 完全透明 */
opacity: 0;
opacity: 0;

opacity: inherit;

 

position设定为absolute时偏移是元素相对于所包含块的偏移，设定为relative时是相对于离开正常位置时的偏移

百分号是指相对于所包含块的宽度百分比

z-index

CSS z-index 属性设置定位元素及其后代元素或 flex 项目的 Z 轴顺序。z-index 较大的重叠元素会覆盖较小的元素。

 

对于定位盒子（即 position 属性值非 static 的盒子），z-index 属性会指定：

1. 盒子在当前层叠上下文中的层叠等级。
2. 盒子是否会创建局部层叠上下文。

/* 关键字值 */

z-index: auto;

/* 整数值 */

z-index: 0;

z-index: 3;

z-index: 289;

z-index: -1; /* 使用负值降低优先级 */

/* 全局值 */

z-index: inherit;

z-index: initial;

z-index: unset;

取值

auto

盒子不会创建一个新的局部层叠上下文。盒子在当前层叠上下文的层叠等级是 0。

<integer>

盒子在当前层叠上下文的层叠等级就是 <integer> 的值。盒子还会创建一个局部层叠上下文。这意味着该元素的后代元素不会和该元素的外部元素比较 z-index。

 

outline

CSS 的 outline 属性是在一条声明中设置多个轮廓属性的简写属性 ，例如 outline-style, outline-width 和 outline-color。

 

与其他简写属性一样，忽略的子属性会被设为 初始值。

border 和 outline

border 和 outline 很类似，但有如下区别：

outline 不占据空间，绘制于元素内容周围。

根据规范，outline 通常是矩形，但也可以是非矩形的。

/* 样式 */
outline: solid;

/* 颜色 | 样式 */
outline: #f66 dashed;

/* 样式 | 宽度 */
outline: inset thick;

/* 颜色 | 样式 | 宽度 */
outline: green solid 3px;

/* 全局值 */
outline: inherit;
outline: initial;
outline: unset;

outline 属性可使用以下一个、两个或三个值来声明，且顺序不重要。

备注： 对于很多元素来说，如果没有设置样式，轮廓是不可见的。因为样式（style）的默认值是 none。但 input 元素是例外，其样式默认值由浏览器决定。

 

取值

<'outline-color'>

设置轮廓的颜色。没有设置时默认值为 currentcolor。参见 outline-color。

<'outline-style'>

设置轮廓的样式。没有设置时默认值为 none。参见 outline-style。

<'outline-width'>

设置轮廓的宽度。没有设置时默认值为 medium。参见 outline-width。