CSS常用声明

wp2023090219

于 2024-10-09 22:02:21 发布

阅读量485

点赞数 14

文章标签： css 前端

本文链接：https://blog.csdn.net/2301_81426182/article/details/142770076

版权

常用样式声明（属性）

一.文本

字体属性
color	颜色
font-size	字号
font-family	字体
font-style	字的倾斜（normal：正常，italic：倾斜）

示例代码

    <style>
        .w{
            color: red;
        }
        .w1{
            font-size: 50px;
        }
        .w2{
            font-family: 宋体;
        }
        .w3{
            font-style: italic;
        }
        .w4{
            font-style: normal;
        }
    </style>
<body>
    <p class="w">我</p>
    <p class="w1">我</p>
    <p class="w2">我</p>
    <p class="w3">我</p>
    <p class="w4">我</p>
</body>
</html>

运行结果

font-weight（字的粗细）
值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100-900	定义由细到粗（400等同默认，而700等同bold）

示例代码

    <style>
        .n{
            font-weight: bold;
        }
        .n1{
            font-weight: bolder;
        }
        .n2{
            font-weight: lighter;
        }
        .n3{
            font-weight: 900;
        }

    </style>
<body>
    <p class="n">你</p>
    <p class="n1">你</p>
    <p class="n2">你</p>
    <p class="n3">你</p>
</body>
</html>

运行结果

文本属性
text-align	文本的水平对齐方式
text-decoration	文本修饰线（overline：上划线，underline：下划线）
text-transform	单词的大小写（uppercase：所有大写 lowercase：所有字母小写，capitalize：首字母大写）
text-indent	文本块中首行文本的缩进程度

示例代码

    <style>
        .t{
            text-align: center;
        }
        .t1{
            text-decoration:underline;
        }
        .t2{
            text-transform:capitalize;
        }
        .t3{
            text-indent: 20px;
        }
    </style>
<body>
    <p class="t">abc</p>
    <p class="t1">abc</p>
    <p class="t2">abc</p>
    <p class="t3">abc</p>
</body>
</html>

运行结果

二.图像

图像属性
width	定义图像宽度
height	定义图像高度
border-color	定义边框颜色
border-style	定义边框线型 dotted：点线边框 dashed：虚线边框 solid：实线边框 double：两个边框
border-width	定义边框宽度
opacity	定义图像透明度，取值范围0~1

示例代码

    <style>
        #img{
            width: 140px;
            height: 200px;
            border-color: blue;
            border-style: dashed;
            border: width 2px; 
            opacity: 0.5;
        }
    </style>

<body>
    <img src="../1.png" id="img">
</body>

运行结果

三.背景

背景属性
background-color	设置元素的背景色
background-image	以图像作为元素的背景
background-repeat	设置背景图像是否重复及如何重复
background-size	设置背景图尺寸 contain：以图片长边设配 cover：以图片短边设配
background-position	设置背景图像的起始位置（left：水平，top：垂直）

示例代码

        .table{
            width: 500px;
            height: 500px;
            background-color: blue;
            background-image: url(../1.png);
            background-repeat: no-repeat;
            background-size: contain;
            background-position: left;
        }
    </style>

<body>
    <div class="table">
</body>

运行结果