CSS之文本、列表、背景、浮动

豆芽菜♀

已于 2022-04-28 22:37:38 修改

阅读量90

点赞数

分类专栏：前端文章标签： css3

于 2022-04-19 22:46:51 首次发布

本文链接：https://blog.csdn.net/m0_57752092/article/details/124213436

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、文本属性

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>
       p{color: brown;
        font-style: oblique;
        font-size: 20px;
        } 
       .h{
           text-align: center;
           font-size: 47px;
           font-family: "宋体";
           font-weight: 800;
           font-style: italic;
       }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> neque architecto in voluptate ratione facilis eos rem veritatis ipsum explicabo assumenda beatae accusantium unde nulla minus consequatur,<br> repellat quo quibusdam?</p>
    <div class="h">好好好好好好</div>
</body>
</html>

2.行高，首行缩进，字间距，文本修饰，检索大小写，简写方式

 <style>
        p{color: brown;
        font-style: oblique;
        font-size: 20px;
        /* "2em"缩进两个字符 */
        text-indent: 2em;
        /* 字符间距 */
        letter-spacing: 0;
        /* 下划线，删除线，上划线 */
        text-decoration: underline;
        /* 转换大小写 */
        text-transform: uppercase;
        }  

        /*font简写方式，顺序不能变 */
        p{
            color: rgb(23, 116, 163);
            font: italic bold  20px 楷体
        }
        .h{
           height: 20px;
           background-color: antiquewhite;
           text-align: left;
           font-weight: 800;
           font-style: italic;
           line-height: 10px;
       }
    </style>
</head>
<body>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <br> neque architecto in voluptate ratione facilis eos rem veritatis ipsum explicabo assumenda beatae accusantium unde nulla minus consequatur,<br> repellat quo quibusdam?</p>
    <div class="h">好好好好好好</div>
</body>

二、列表属性

.r{
           list-style-type:decimal;
           list-style-image: url();
           list-style-position: outside;
       }
.box{
           list-style: circle url() inside;
       }
<div>
        <li class="r">你好啊</li>
        <li class="r">我很好</li>
        <li class="r">那就行</li>
    </div>
<ul class="box">
        <li>你好啊</li>
        <li>我很好</li>
        <li>那就行</li>
    </ul>

三、背景属性

6 background-size 背景图片尺寸大小

<style>
.kk{
           height: 400px;
           width: 400px;
           /* rgba透明度 */
           background-color: rgba(246, 45, 100, 0.5);
           background-image: url(../image/ciyun.png);
           background-position: -20px 10%;
           background-position: right bottom;
           /* background-repeat: no-repeat 不平铺;
           background-repeat: repeat-x; x轴平铺
           background-repeat: repeat-y;  y轴平铺*/

           /* 
          1.100% 100%
          2.400px 400px
          3.cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
          也许无法显示在背景定位区域内
          4.contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
          铺不满盒子，会留白
           */
          background-size: 100% 100%;
       }
    </style>
<div class="bk">
        大家好
        <div class="kk"></div>
    </div>

四、浮动属性

<style>
        div{
            width: 100px;
            height: 100px;
            /*加上 float: left;就可以横向排列了*/
            float: left;
        }
        .red{
            background-color: red;
        }
        .blue{
            background-color: blue;
        }
        .yellow{
            background-color: yellow;
        }
    </style>
</head>
<body class="div">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="yellow"></div>
    </div>
</body>

豆芽菜♀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS之文本、列表、背景、浮动

一、文本属性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-scal
复制链接

扫一扫