CSS属性：文本属性、列表属性、背景属性、浮动属性_利用css修饰文本、背景与列表有哪些属性?-CSDN博客

本文链接：https://blog.csdn.net/weixin_51209513/article/details/126529203

1、文本属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .t1{
            /* 1）font-size:字体大小，单位是px，浏览器默认16px，设计图中常用12px。 */
            font-size:20px;
            /* 2）font-family:字体，当字体是中文、英文字体中有空格时，需要加双引号；当多个字体中间用逗号连接，先解析第一个字体，如果没有，就解析第二个字体，以此类推。 */
            font-family:"Microsoft YaHei";
            /* 3）color: 颜色，可以使用red、#ff0、rgb(255,0,0)、0-255 */
            color: red;
            /* 4）font-weight: 加粗，bolder(更粗的) 、bold(加粗)、nomal(正常)、100-900(100-500不加粗,600-900加粗)*/
            font-weight: bolder;
            /* 5）font-style: 倾斜，italic(斜体字)、oblique(倾斜的文字)、normal(常规显示)*/
            font-style: italic;
            /* 6）text-align: 文本水平对齐，left(水平靠左)、right(水平靠右)、center(水平居中)、justify(水平两端对齐，但只对多行其作用) */
            text-align: center;
            /* 7）line-height: 行高， line-height的数据=height的数据，可以实现文本垂直居中*/
            line-height: 100px;
            /* 8）text-indent: 首行缩进，可以取负值，只对第一行起作用 */
            text-indent: 2em;/*text-indent:20px;*/
            /* 9）letter-spacing: 字间距，控制文字和文字之间的间距 */
            letter-spacing: 10px;
            /* 10）text-decoration: 文本修饰，none(没有)、underline(下划线)、overline(上划线)、line-through(删除线) */
            text-decoration: underline;
            /* 例：
            红色删除线：text-decoration: line-through red; 
            红色波浪形下划线: text-decoration: underline wavy red;  */
            /* 11）font:是font-size font-weight font-size/line-height font-family的缩写，顺序不能变，必须同时指定font-size和font-family属性才起作用*/
            font:800 30px/80px "宋体";
            /* text-transform:控制文本的大小写，capitalize(首字母大写)、lowercase(全小写) 、uppercase(全大写)、inherit(规定应该从父元素继承 text-decoration 属性的值)*/
            text-transform:caption;
        } 
    </style>
</head>
<body>
    <div>
        <text class="t1">
            啦啦啦啦啦啦啦hhhhhhhh
        </text>
    </div>
    
</body>
</html>

2、列表属性

            /* 1）list-style-type: 定义列表符合样式，disc(实心圆)、circle(空心圆)、square(实心方块)、none(去掉符号) */
            list-style-type: disc;
            /* 2）list-style-image: 将图片设置为列表符合样式 */
            list-style-image: url();
            /* 3）list-style-position: 设置列表项标记的放置位置，outside(列表的外面，默认值)、inside(列表的里面) */
            list-style-position: inside;
            /* 4）list-style: 简写 */
            list-style: none;

3、背景属性

        div{
            /* 背景颜色 */
            background-color: aqua;
            /*background-color:rgb(255,0,0)//红色--绿色--蓝色*/
            /*background-color:rgba(255,0,0,0.5)粉红色，半透明效果*/
            /* 背景图片 */
            background-image: url();
            /* 背景图片的平铺，no-repeat、repeat、repeat-x、repeat-y */
            background-repeat: no-repeat;
            /* background-position: 水平位置 垂直位置;可以给负值， background-position:20px 20px;//10% 10%//center center */
            background-position: 20px 20px;
            /* 背景图片的固定，scroll(滚动)、fixed(固定在浏览器窗口里面) */
            background-attachment: scroll;
            /* 可以简写成background */
        }

 /* 图片背景大小： */
        .box{
            background-size:cover;
            /*
            1.400px 400px
            2.100% 100%
            3.cover:把背景图片扩展至足够大，以使背景图像完全覆盖背景区域，也许无法显示再背景指定区域中（一边显示完整）
            4.contain:把图片图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域，铺不满盒子，留白
            */
        }

        /* 背景的复合属性：（会覆盖backgronund-color等的值） */
        div{
            background:yellow url(./1.jpg) no-repeat center fixed;
        }

4、浮动属性

/*浮动的作用：1.定义网页中其他文本如何环绕该元素显示
             2.就是让竖着的东西横着来*/
    /*float:left(左浮动)/right(右浮动)/none(不浮动);*/
    float:left;
    
    /*clear:none(允许有浮动对象)/right(不允许右边有浮动对象)/left(不允许左边有浮动对象)/both(不允许有浮动对象);*/
    clear:none;
/*清除浮动只是改变元素的排列方式，该元素还是浮着的，不占据文档位置*/