选择器能完成怎样的ui效果？与字体相关的样式新增了哪些？

XMX303
112 阅读2分钟

插入内容

通过before的content属性可以定义插入的内容。

插入文字

h2:before{
    content: 'COLUMN';
    color: white;
    background-color: orange;
    font-family: 'Comic Sans MS', Helvetica, sans-serif;
    padding: 1px 5px;
    margin-right: 10px;
}
h2.sample:before{
    content: none
}

插入图像

h2:before{
    content:url(mark.png);
}
<h2>你好</h2>

使用alt属性的值作为图像的标题来显示

<style type="text/css">
img:after{
    content:attr(alt);
    display:block;
    text-align:center;
    margin-top:5px;
}
</style>
<body>
<p><img src="sky.jpg" alt="蓝天白云"/></p>
</body>

在多个标题前加上连续编号并追加文字与符号

用before或after选择器的content数下，不仅可以追加数字编号，还可以追加字母编号或罗马数字编号。方法如下：

content：counter（计数器名，编号种类）

可以使用list-style-type属性的值来指定编号的种类，默认为数字，upper-alpha为大写字母编号，upper-roman为大写罗马编号。实现效果类似于v-for下的列表

style type="text/css">
h1:before{
    content: '第'counter(mycounter)'章''.';
}
h1{
    counter-increment: mycounter;
}
</style>
<body>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
<h1>大标题</h1>
<p>示例文字。</p>
</body>

与字体相关的样式

text-shadow属性，给文字添加一个或多个阴影

text-shadow：length length length color,...

前面三个length分别指阴影离开文字的横方向距离、阴影离开文字的纵方向距离和阴影的模糊半径，color指阴影的颜色。实例如下：

text-shadow: -21px 10px 5px gray;

<style type="text/css">
div{
        text-shadow: 10px 10px #f39800, 
                  40px 35px #fff100, 
                  70px 60px #c0ff00;
        color: navy;
        font-size: 50px;
        font-weight: bold;
        font-family: 宋体;
}
</style>

word-break属性，让文本自动换行

常用的属性为break-all，意味允许单词内换行

word-break: break-all;

user-select，指定用户是否可以选取文字

一般是设置为none，以拒绝用户直接选择文字。

user-select:none;

@font-face，使用服务端字体

当设计师设计的某个字体类型不常见，可以在服务端安装该字体，再通过@font-face属性来直接使用服务端的字体。

@font-face{
    font-family: WebFont;
    src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}

rem，指定不同屏幕上统一的文字展示单位。

我们指定html㢝的字体大小为10个px，small元素的字体大小为11px，strong元素的字体大小为18px。这样设置，即使多个不同分辨率的屏幕上，他们展示的文字字体大小比例也是相同的。

html { font-size: 10px; }
small { font-size: 1.1rem; }
strong { font-size: 1.8rem; }
avatar
文章
阅读
粉丝