[持续更新]CSS3学习笔记（一）伪类选择器&自定义字体&背景图片

最新推荐文章于 2021-08-31 20:00:05 发布

Aus0049

最新推荐文章于 2021-08-31 20:00:05 发布

阅读量3.6k

点赞数

分类专栏： CSS 文章标签： CSS3 前端基础

本文链接：https://blog.csdn.net/u014267351/article/details/48251357

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了CSS3中的伪类选择器，包括:nth-child()、:first-of-type等，并探讨了如何实现自定义字体、字体反射效果、多列属性和文本溢出的控制。此外，还讲解了背景图片的大小调整、origin和clip的使用，帮助读者深入理解CSS3的高级特性。

摘要由CSDN通过智能技术生成

CSS3学习笔记

1. 伪类选择器

CSS3之前的伪类共有：::first-line,::first-letter, :after, :before, :hover, :active, :visited, :focus, :link,:first-child, :lang这11种。

CSS3新增了许多选择器，下面列出常见的几种。

1. :nth-child(n) 某个父元素的第n个子元素。（CSS3）

2. :nth-child(2n) 选择偶数项。（CSS3）

3. :nth-child(n+5) 从第五个元素开始全选。（CSS3）

4. :nth-last-child(n) 获取倒数第n个元素。（CSS3）

5. li:nth-of-type(n) 获取第n个li元素。

6. li:nth-last-of-type(n) 获取倒数第n个li元素

7. :last-child 最后一个子元素。（CSS3）

8. :first-of-type: 相当于:nth-of-type(1)。

9. :last-of-type: 相当于:nth-last-of-type(1)。

10. only-child: 获取只有一个子元素的子元素。

11. only-of-type: 类似于only-child，区别于不指定type时，会选择body。

12. :root 选择文档的根元素。（CSS3）

13. :empty 选择没有任何内容的元素。（CSS3）

14. :target选择当前被选中的锚点元素。（CSS3）

15. :enabled 选择所有可用的表单元素。（CSS3）

16. :disabled 选择所有不可用的表单元素。（CSS3）

17. :checked 选择所有被选中的checkbox和radio。（CSS3）

18. :not(S) 否定伪类，排除S选取其他，如li:not(.test)。（CSS3）

兼容性方面：

IE6~8 不支持CSS3属性。

FF3 不支持 :nth-child;

2. 个性化字体

1. 自定义字体：@font-face 加载服务器端的字体文件，让客户端显示客户端没有安装的字体。

@font-face {
    font-family: myFont;
    src: url('MyFont.ttf');
}
div {
    font-family: myFont;
}

2. 字体图标：现在常用FontAwesome图标，需引入字体文件和css文件，文档中使用<i class=”fa fa-camera-retro”>照相机</i>。

官网地址：http://fortawesome.github.io/Font-Awesome/#

官方中文网：http://fontawesome.dashgame.com

3. 字体反射效果：box-reflect

对字体和图片都能应用，类似镜面反射的效果。目前只有webkit内核的浏览器支持，不过该属性对布局无影响。

语法：box-reflect: 方向间距渐变效果;

方向：blow,above,left,right;

间距：倒影和本体的间的距离。(padding会影响间距)

渐变效果：常用的又linear-gradient

例如：

-webkit-box-reflect:below 1px linear-gradient(transparent,transparent 50%,rgba(0,0,0,.3));<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span>

4. 字体阴影：

text-shadow:h-shadow v-shadow blur color;

h-shadow: 必须，水平阴影的位置，允许负值；

v-shadow: 必须，垂直阴影的位置，允许负值；

blur: 可选，模糊的距离；

color: 可选，阴影的颜色。

偏移量为0，光晕的效果。

水平偏移量和垂直偏移量相同，浮雕的效果。

5. 多列属性：

column-count:定义分列数量。

column-gap:定义每一列中间的宽度。

column-rule: 定义分栏的中间样式。一般还有：

dotted点状；

dashed虚线；

solid实线；

double双线；

groove3D grooved

ridge3D ridged

inset3D inset

outset3D outset

另外，IE和Opera支持该属性 FF和webkit内核的需要加前缀，IE9以前的版本不支持。

例如：

    column-count:3;
    column-gap:30px;
    column-rule:1px dashed black;
    -webkit-column-count:3;
    -webkit-column-gap:30px;
    -webkit-column-rule:1px dashed black;
    -moz-column-count:3;
    -moz-column-gap:30px;
    -moz-column-rule:1px dashed black;

6. 文本溢出：

text-overflow:当文字内容超出该区域时的处理。

值：clip修建文本。

ellipsis 显示省略号来代替被修建的文本。

string 使用给定的字符串来代表被修建的文字。