题目2-3的问题

<!DOCTYPE html>

<html>

<head>

<style>

p{font:italic small-caps bold 20px/50px "微软雅黑",serif ;

color:red;

}

div{

font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:20px;

font-family:"微软雅黑",serif;

line-height:100px;

color:blue;

}

</style>

</head>

<body>

<p>web前端攻城狮（web front siege lion）</p>

<div>css层叠样式表（cascading style sheets）</div>

</body>

</html>

经过代码验证：1、font-style 和 font-variant的顺序可以颠倒，不影响最终显示效果？2、简写方式，是不能省略任何一个样式的？3、简写样式，只有在写到最后字体的时候，整体效果才会生效，而不是写一个马上就能看到效果？

蜀山有雨 2017-09-21

源自：CSS文本样式 2-1 字体属性

收起

3回答

樱桃小胖子 2017-09-22 15:25:51

仔细观看练习的任务描述，发现你的文本书写的不正确

因此可以书写成：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>简写font属性</title>
        <style type="text/css">
            .div1{font: small-caps italic bold 20px "微软雅黑",serif;color:red;}
            .div2{
                font-size:20px;
                font-family:"微软雅黑";
                font-weight:bold;
                font-variant: small-caps;
                color:blue;
            }
        </style>
    </head>
    <body>
        <div class="div1">Web前端攻城狮(Web front siege lion)</div>
        <div class='div2'>CSS层叠样式表(Cascading Style Sheets)</div>
    </body>
</html>

希望可以帮到你！

收起回答

樱桃小胖子 2017-09-21 13:57:55

建议参考“ZZH994”同学的回答来进行理解，如若还有什么疑问。欢迎再次提问，大家会帮你一起解答,祝学习愉快！

收起回答

提问者蜀山有雨 #1

还是没有解决哦

2017-09-22 11:12:46

ZZH994 2017-09-21 11:59:27

font-style和font-variant不是简写方式的情况下，可以颠倒，不挨着也可以。
简写方式可以省略任何一个样式，但其他样式还要按照顺序来书写。
整体写完才能看到效果。

收起回答

提问者蜀山有雨 #1

经过代码验证 1、在简写方式下，font-style和font-variant也可以颠倒，效果一样的 2、简写方式下不能省略……，div{font:small-caps "微软雅黑",serif;}，div{font:small-caps italic "微软雅黑",serif;}这俩完全没效果

2017-09-21 23:47:24
ZZH994 回复提问者蜀山有雨 #2

我刚才也试了一下，发现div{font:small-caps "微软雅黑",serif;}和div{font:italic small-caps "微软雅黑",serif;}运行后确实没有斜体的样式，至于不出现small-caps样式的效果，是因为在<p>web前端攻城狮（web front siege lion）</p>和<div>css层叠样式表（cascading style sheets）</div>这两个标签中没有大写字母，如果改成<p>Web前端攻城狮（Web Front Siege Lion）</p> <div>CSS层叠样式表（Cascading Style Sheets）</div>,浏览器会显示小型大写字母的字体。

2017-09-22 00:17:23
提问者蜀山有雨回复 ZZH994 #3

不是，small-caps会把所有小写转为大写，并不是只对大写起作用， <html> <head> <style type="text/css"> p.normal {font-variant: normal} p.small {font-variant: small-caps} </style> </head> <body> <p class="normal">This is a paragraph</p> <p class="small">this is a paragraph</p> </body> </html>

2017-09-22 11:12:24