CSS常用声明

@动感超人

已于 2024-10-09 12:53:04 修改

阅读量271

点赞数 8

文章标签： css 前端

于 2024-10-07 23:42:25 首次发布

本文链接：https://blog.csdn.net/2301_82005922/article/details/142748440

版权

1.文本属性

文本，字体属性
color	字体颜色	font-weight	字粗细
font-size	字号	text-align	文本对齐
font-family	字体	text-decoration	文本修饰线
font-style	字倾斜	text-transform	单词大小写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #font3{
        width: 480px;
        height: 60px;
        background-color: darkgray;

        color: aquamarine;
        font-size: 30px;
        font-family: 楷体;
        font-weight: 2px;
        font-style: italic;
        text-align: right;
        text-decoration: underline;
        text-transform: uppercase;
        /* 首字母大写：capitablize */
        text-indent: 50px;
        /* 文本块中首行文本的缩进程度 */
    }
    </style>
</head>
<body>

<p class="font" id="font3">i like you</p>
    
</body>
</html>

2 图像属性

图像属性
width	宽	border-style	边框线型
height	高	border	边框
background-color	边框颜色	opacity	透明度
border-width	边框宽度

<!DOCTYPE html>
<html lang="en">
<head>333333
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    #img1{
        width: 300px;
        height: 300px;
        background-color: gray;

        border-color: brown;
        border-width: 30px;
        border-style: dashed;

        /* border: brown 30px dashed; */
        opacity: 0.2;
    }
</style>
</head>
<body>
    <img src="../HTML-5/第五图片.png" id="img1">
    
</body>
</html>

3.背景属性

            width: 1000px;
            height: 1000px;


            background-color: darkgray;
            background-image:url(../HTML-5/第五图片.png);
            background-repeat: no-repeat;

            background-size: 50% 50%;
            background-position: center top;

background-color设置背景颜色

background-image以图像作为元素的背景，元素的背景是元素的总大小，包括填充和边界（不包括外边距），默认情况下background-image属性放置在元素左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像超过元素大小，则从图像的左上角开始裁剪。

4 小作业

CSS的常用属性我们已经学习的差不多啦，现在用上面学过的知识来写一个和下图一样的代码吧！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #font{
            text-align: left;
            text-decoration: underline;
            text-transform: uppercase;
        }
        #font2{
            text-align: center;
            text-decoration: line-through;
            text-transform: lowercase;

            width: 1000px;
            height: 60px;
            background-color: darkgray;
        }
        #font3{
            text-align: right;
            text-decoration: overline;
            text-transform: capitalize;
        }
        #img1{
        width: 300px;
        height: 300px;
        background-color: gray;

        /* border-color: brown;
        border-width: 30px;
        border-style: dashed; */

        border: brown 30px dashed;
        }
        div{
            width: 600px;
            height: 400px;

            background-color: rgb(169, 169, 169);
            background-image:url(../HTML-5/第五图片.png);
            background-repeat: no-repeat;

            background-position: center center;
            
        }
    </style>
</head>
<body>
    <p id="font">first测试文本:靠左对齐，下划线，大写字母</p>
    <p id="font2">second测试文本:居中对齐，删除线，小写字母</p>
    <p id="font3">third测试文本:靠右对齐，上划线，首字母大写</p>
    <img src="../HTML-5/第五图片.png" id="img1">
    <div>div</div>
</body>
</html>