CSS笔记总结 | fighting-bug

Sub-item

type

status

date

slug

summary

使用CSS在HTML页面中添加旋转的水印

这是页面的主体部分，它包含一个带有类名为“watermark”的<div> 元素，作为水印层，以及JavaScript代码将在这个元素之后添加。还可以在该<div> 元素中添加需要覆盖的内容。

该CSS代码定义了水印的样式，包括一个伪元素：.watermark::before

伪元素具有以下样式：

content：用于定义水印的文本内容。

position: fixed：使水印在页面上固定显示。

top: 0; left: 0：将水印定位到页面的左上角。

width: 100%; height: 100%：将水印的宽度和高度设置为页面的宽度和高度。

background-color: rgba(0,0,0,0.1)：设置水印的背景颜色为半透明黑色。

pointer-events: none：使水印不接受任何鼠标事件。

display: flex; align-items: center; justify-content: center：使水印的文本内容在水印中居中显示。

font-size: 5em; font-weight: bold; color: white：设置水印文本的字体大小、加粗和颜色。

z-index属性设置为9999，这将确保水印显示在页面的顶部，并不会被其他元素遮挡。

filter: blur(2px)：对水印应用模糊效果，使其更加柔和。

transform：对每个伪元素应用旋转变换，使它们以不同的角度显示。

总结

这段代码实现了在HTML页面上添加水印的效果。具体实现步骤如下：

创建一个名为"watermark"的div容器，将它的position属性设置为relative，以便后续子元素的定位。

在watermark div容器中添加一个伪元素::before，将它的position属性设置为fixed，使它固定在浏览器窗口的左上角，并将它的z-index属性设置为9999，以确保它在其他元素之上。

在伪元素::before中添加需要显示的水印内容。这里的水印内容是"Line 1 \A Line 2 \A Line 3"，其中"\A"用于在水印中显示换行符。

为伪元素::before设置样式，包括背景颜色、模糊度、文字大小和颜色等属性。此外，还将它的transform属性设置为rotate(-45deg)，将水印旋转45度。

在watermark div容器中添加需要覆盖的HTML内容，例如标题、段落和列表等。

通过这种方式，可以在HTML页面上添加水印，以保护版权或提醒用户某些信息。

user-select

为什么要使用user-select

在样式开发中，有可被选中，和不可被用户选中的元素。这时候就用到了今天介绍的user-select属性。

user-select的属性值

属性值	说明
all	当所有内容作为一个整体时可以被选择。如果双击或者在上下文上点击子元素，那么被选择的部分将是以该子元素向上回溯的最高祖先元素
auto	文本将根据浏览器的默认属性进行选择
contain	选择该元素范围内的文本，只支持(Explorer未测试)
none	元素和子元素的文本将无法被选中
text	文本可以被选中
inherit	继承父元素的此属性
initial	设置为初始的样式属性
revert	样式表中定义的元素属性的默认值。若用户定义样式表中显式设置，则按用户定义的设置否则，按照浏览器默认的的样式设置在否则，等价于unset
unset	如果该属性可以被继承，则是继承的值，不可以被继承(initial),则是默认的值

padding

CSS的padding属性用于设置元素的内边距，即元素内容与元素边框之间的空间。padding属性可以接受一个值或四个值，分别对应上、右、下和左方向的内边距。以下是padding属性的用法示例：

单个值：

上述代码将给元素的上、右、下和左方向的内边距都设置为10px。

两个值：

上述代码将给元素的上/下方向的内边距设置为10px，左/右方向的内边距设置为20px。

三个值：

上述代码将给元素的上方向的内边距设置为10px，左/右方向的内边距设置为20px，下方向的内边距设置为30px。

四个值：

上述代码将按照顺序给元素的上、右、下和左方向的内边距分别设置为10px、20px、30px和40px。

你还可以使用百分比、em、rem等作为单位来定义padding的值，以便根据具体需求进行调整。另外，你还可以单独使用padding-top、padding-right、padding-bottom和padding-left属性来分别设置元素各个方向的内边距。

关键字

inherit：继承父元素的内边距值。

initial：将内边距重置为初始值。

unset：取消设置的内边距值，恢复为默认值。

revert：属性值重置为其继承或初始值，以还原到浏览器的默认样式。

position

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
sticky	粘性定位，该定位基于用户滚动的位置。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。
inherit	规定应该从父元素继承 position 属性的值。
initial	设置该属性为默认值

cursor

类名为 my-zoomable-element 的元素在鼠标悬停时将显示一个 zoom-in 的光标。这有助于用户识别该元素可能触发一些放大或查看详细信息的操作。

常见的 cursor 属性值：

auto：浏览器自动选择适当的光标，通常是箭头。

pointer：标准的指针光标，表示链接或可点击的区域。

move：表示可移动的对象，通常用于拖拽操作。

text：表示文本，通常用于文本输入区域。

wait：表示等待，通常用于表示页面正在加载或处理操作。

crosshair：十字线光标，用于表示可绘制的区域。

pointer-events

常见的 pointer-events 属性值：

auto：元素在指针事件触发时表现为"普通"，即遵循CSS中的标准规则。元素及其子元素都会触发鼠标事件。

none：元素不响应指针事件，而是允许它们穿透到下面的元素。这样的元素将不会触发鼠标事件。

visiblePainted：元素不响应鼠标事件，但鼠标事件会穿透到下面的元素，即使该元素是透明的。这个值通常用于隐藏的但占据布局空间的元素。

all：元素及其子元素都会触发鼠标事件，即使该元素是透明的。

-webkit-user-select

auto：默认值，允许用户选择文本。

none：禁止用户选择文本。

text：允许用户选择文本，但不包括input和textarea元素。

这个属性通常用于控制用户在网页上拖拽或复制文本的行为。请注意，虽然 -webkit-user-select 在WebKit浏览器中起作用，但其他浏览器可能不支持这个属性。因此，为了实现更广泛的浏览器兼容性，你可能需要使用标准的 user-select CSS 属性，而不是私有的 -webkit-user-select。