day005——CSS字体和背景_背景颜色字体搭配16进制-优快云博客

本文链接：https://blog.youkuaiyun.com/Teeeeesting/article/details/110132951

本文详细介绍了CSS中字体和背景的相关属性及用法，包括字号、字体、颜色、文本修饰等字体属性，以及背景颜色、背景图片、背景重复方式等背景属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>