首页 > 其他分享> 文章详细

day005——CSS字体和背景

2020-11-26 10:59:53 阅读：154 来源： 互联网

标签：em repeat color text 字体 background day005 font CSS

1.CSS字体

1）font-size：字号（px/%）

2）font-family：字体（黑体/宋体/楷体）

3）font-style：样式（normal/italic/oblique）

4）font-weight：加粗（normal/bold/bolder/lighter/100-900）

5）line-height：行高（px/em/数字（倍数））

6）color：颜色（颜色单词/rgb()->:0-255,g:0-255,b-0-255/16进制（以#开头，后跟6位或3位15进制数））

7）text-decoration：文字修饰（normal/underline/overline/）

8）text-align：文本对齐方式（left/center/right）

9）text-transform：字母大小写（none/capitalize/uppercase/lowercase）

10）text-indent：文本缩进(px/em/pt等)

Tip：font复合属性：

font:font-style font-variant font-weight font-size/line-height font-family;

注意：

1）属性值的位置顺序

2）除了font-size和font-family之外，其他任何一个属性值都可以省略

3）font-variant：文本修饰（normal/small-caps（让大写之母变得小一些））

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体</title>
    <style>
        p{
            font-size:30px;
            font-family:微软雅黑;
            /*font-style:italic;*/
            line-height:55px;
            text-align:right;
            text-transform: capitalize;
            text-indent: 30px;
        }
        span{
            font-weight:bolder;
            color:red;
            /*color:rgb(255,0,0);*/
            /*!*color: #ff0000;   推荐使用16进制*/
            /*color: #f00;*/
        }
        em{
            text-decoration:underline;
        }

        /*font复合属性*/
        .new{
            font:italic small-caps bolder 18px/1.5em 宋体
        }
    </style>
</head>
<body>
    <p> hello<span>央视网新闻：</span>11月25日消息，受到国药集团已提交新冠疫苗上市申请的影响，新冠疫苗再度成为热门热议的话题，
        因再度引发资本市场的狂欢。据悉，<em>中国国药集团有限公司</em>副总经理石晟怡表示，中国国药集团已
        向国家药监局提交了新冠疫苗上市申请。</p>

    <p class="new">hello,好好学习，天天向上</p>
</body>
</html>

2.css背景

1）background-color：设置背景色（transparent/color）

2）background-image：设置背景图像（none/url）

3）background-repeat：设置对象的背景图铺排方式（repeat/no-repeat/repeat-x/repeat-y）

4）background-position：设置对象的背景图像位置（{x-number|top/center/bottom}{y-number|left/center/right}）

5）background-attachment：设置背景图像的滚动位置（scroll/fixed）

6）background：设置背景的复合写法（background:color image repeat acttachment position）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS背景</title>
    <style>
        p {
            /*background-color: red;*/
            /*background-color:transparent;*/
            /*background-image: url("test.jpg");*/
            /*background-repeat: no-repeat;*/
            /*!*!*background-position:right top;*!  如果只带一个参数，y默认为50%*!*/
            /*background-position: 200px 300px;*/
            /*background-attachment: scroll;*/
            /*height:2000px;*/

            background:#888888 url("test.jpg") repeat-y fixed 0 30%;
        }
    </style>
</head>
<body>
<p>好好学习，天天向上</p>
</body>
</html>

标签：em,repeat,color,text,字体,background,day005,font,CSS
来源： https://blog.csdn.net/Teeeeesting/article/details/110132951

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

day005——CSS字体和背景