10个非常实用的CSS技巧

html-css0245

10个非常实用的CSS技巧,第1张

CSS 有很多令人欣喜的小技巧,可以让我们的页面效果更加美丽,现在,就让我们来看看工作中非常实用的 CSS 技巧吧。

当我们选中网页上的文字时,通常的效果是蓝底白字,其实,底色和字体颜色是可以改变的。

我们可以使用伪元素来实现这种效果:

首字下沉,是否似曾相识呢?哦,是在以前学 word 软件文字排版的时候。在一些报纸上经常都会看见首字下沉的效果,其他文字围绕在它周围。

看上去还是这么回事。

通过锚点,我们可以滚动到网页特定的位置,原始的锚点跳转是没有过渡效果的。注意滚动条:

通过 CSS scroll-behavior 属性可以让滚动变得更加丝滑。

caret-color 属性可以让我们自定义 input 框闪烁的光标,是不是很神奇鸭

给透明背景图片加背景,感觉很厉害的样子。两行 CSS 样式九搞定咯:

我们可以修改滚动条的样式,滚动条变得更加炫酷。

如果你不想让用户选中页面上的文字,就可以用这个特性了。

很多情况下都需要应用到IE盒子模型的特性,让元素的宽度、高度包含border和padding。

【这是我的学习笔记,你也可以拿去用】

1 元素选择器:比如p{xxxx},选择文档中所有的p元素;

2 类选择器:比如.center_bar{xxxx},选择文档中使用了类center_bar的元素;

3 id选择器:比如.button1{xxxx},选择文档中使用了button1的元素;

4 或选择器:用逗号连接多个选择器;

5 与选择器:多个选择器紧挨在一起;

6 后代选择器:用空格连接多个选择器;

7 子代选择器:用大于号连接多个选择器,它其实是后代选择器的特殊情况;

8 属性选择器:

(1) 比如p[id],选择标签上有属性“id”的p元素;

(2) 比如p[id="button1"],选择标签上有属性“id”并且id的值为“button1”的p元素;

(3) 比如p[id^=”b”],选择标签上有属性“id”并且id的值以“b”开头的p元素;

(4) 比如p[id$=”b”],选择标签上有属性“id”并且id的值以“b”结尾的p元素;

(5) 比如p[id*=”b”],选择标签上有属性“id”并且id的值包含“b”的p元素;

9 p:first-child:既是p元素,也是某元素的第一个孩子;

10 p:last-child:既是p元素,也是某元素的最后一个孩子;

11 p:nth-child(3):既是p元素,也是某元素的第三个孩子;

12 p:nth-child(odd):既是p元素,也是某元素的第奇数个孩子;

13 伪类选择器都是某种状态,比如active、link、hover,使用“:”;

14 伪元素选择器,确实有某些实体的东西,比如第一行文字、第一个文字、被选中的文字,使用“::”

15 只有多个选择器选中了同一个元素的同一个属性,才会出现优先级的问题;

16 如果两个选择器优先级相同,那么写在后面的选择器生效;

17 选择器优先级的排列:

(1) !important

(2) 内联样式

(3) id选择器

(4) 类和伪类选择器

(5) 元素和伪元素选择器

(6) *选择器

(7) 继承样式

你好 这个可以采用js 来实现 你可以写一个函数 每隔半秒执行一次 检测文字是否为选中状态 如果是选中的状态 你可以对这个文字的css样式进行相应的设置 祝你学习进步 生活愉快 谢谢