css语法笔记

2023年3月2日 396

!important的用法及作用

定义及语法

!important，作用是提高指定样式规则的应用优先权（优先级）。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}。

在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级。

浏览器识别

ie7及ie7+,firefox,chrome等浏览器下，已经可以识别 !important属性，但是IE 6.0IE6及更早浏览器下仍然不能完全识别。important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!。

content-box与border-box区别

content-box 的 width 不包括 padding 和 border
border-box 的 width 包括 padding 和 border

CSS:hover选择器

定义和用法

:hover在鼠标移到链接上时添加的特殊样式。

提示::hover 选择器器可用于所有元素，不仅是链接。

提示::link选择器设置了未访问过的页面链接样式,:visited选择器设置访问过的页面链接的样式:active选择器设置当你点击链接时的样式。

注意:为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！

var-css语法

函数的第一个参数是要替换的自定义属性的名称。函数的第二个参数是可选的，用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

<var()> = 
  var( <custom-property-name> , <declaration-value>? )

备注： 自定义属性的回退值允许使用逗号。例如，var(--foo, red, blue) 将 red, blue 同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值。

值

<custom-property-name> 自定义属性名: 在实际应用中它被定义为以两个破折号开始的任何有效标识符。自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。
<declaration-value> 声明值（回退值）: 回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如 )、] 或 }）、感叹号以及顶层分号（不被任何非 var() 的括号包裹的分号，例如 var(--bg-color, --bs;color) 是不合法的，而 var(--bg-color, --value(bs;color)) 是合法的）。

示例

在 :root 上使用自定义属性

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

当第一个值未定义，回退值生效

/* 回退值 */

/* 在 component 的样式中: */
.component .header {
  /* header-color 没有被设置, 将使用回退值 blue */
  color: var(
    --header-color,
    blue
  );
}

.component .text {
  color: var(--text-color, black);
}

/* In the larger application's style: */
.component {
  --text-color: #080;
}

使用自定义属性作为回退值

:root {
  --backup-bg-color: teal;
}

body {
  /* main-bg-color 没有被设置，将使用回退值 backup-bg-color。如果 backup-bg-color 没有被设置，将使用回退值 white。 */
  color: var(--main-bg-color, var(--backup-bg-color, white));
}

CSS overflow 属性

定义和用法

overflow 属性规定当内容溢出元素框时发生的事情。

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

另请参阅：

CSS 教程：CSS 定位

HTML DOM 参考手册：overflow 属性

实例

设置 overflow 属性：

div
  {
  width:150px;
  height:150px;
  overflow:scroll;
  }

亲自试一试

CSS 语法

overflow: visible|hidden|clip|scroll|auto|initial|inherit;

属性值

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

技术细节

默认值：	visible
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.overflow="scroll"

我常用的一些css属性：

1、backdrop-filter 毛玻璃效果

2、旋转动画

/*旋转效果*/
@keyframes yuan{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
/*绑定到任意样式定义内*/
animation: yuan 2.2s linear infinite;
/*动画开始到结束时间为2.2s，线性过度，循环播放动画*/

/*鼠标悬浮元素上暂停*/
    hover{
animation-play-state: paused;
}

/*阴影*/
box-shadow: 0 0 20px 0 rgb(0 0 0 / 50%);

文本对齐

text-align 属性用于设置文本的水平对齐方式。

文本可以左对齐或右对齐，或居中对齐。

下例展示了居中对齐以及左右对齐的文本（如果文本方向是从左到右，则默认为左对齐；如果文本方向是从右到左，则默认是右对齐）：

实例

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

CSS 磨砂效果

backdrop-filter: saturate(180%) blur(20px);