css属性相关 - 码农教程

CSS属性相关

　　宽度和高度：只有块级标签才有！内联标签的高度和宽度有里面的内容来设置。a标签必须选中才会显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        span{
            width: 400px;
            height: 400px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div>
        高度宽度设置
    </div>
    <span>
        有内容决定高度宽度
    </span>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        span{
            width: 400px;
            height: 400px;
            background-color: green;
        }
        div a{
            color: pink;
        }
    </style>
</head>
<body>
    <div>
        高度宽度设置
        <a href="">前端</a>
    </div>
    <span>
        有内容决定高度宽度
    </span>
</body>
</html>

补充a标签

　　字体属性：字体，字体大小，字体颜色

　　　　字体：默认宋体，写中文就行，可以写多个逗号分隔开（有些浏览器不支持，会按顺序找自己浏览器最能识别的字体来识别）

　　　　字体大小：单位是像素，一个字体在浏览器上默认大小是16px，超过16就变大，小于16就变小

　　　　字体颜色：

　　　　字重：就是字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        #ziti{
            font-family: '楷体','宋体','雅黑';
            font-size: 20px;
            color: red;
            font-weight: lighter;
        }

    </style>
</head>
<body>
    <div id="ziti">
        字体属性
    </div>
</body>
</html>

　　文本颜色：用来设置文字的颜色。

　　　　1、十六进制值

　　　　2、一个RGB值

　　　　3、颜色的名称

　　　　rgba（，，，0-1）透明度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本颜色</title>
    <style>
        p{
            color: #78ffc9;
            color: rgb(255,35,35);
            color: red;
            color: rgba(255,25,35,0.3);
        }
    </style>
</head>
<body>
    <p>hello,大家好</p>
</body>
</html>

　　文字属性：

　　　　文字对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字对齐</title>
    <style>
        div{
            width: 800px;
            height: 200px;
            background-color: yellow;
            /*text-align: center;*/
            text-align: right;
        }

    </style>
</head>
<body>
    <div>
        锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦
    </div>

</body>
</html>

　　　　文字装饰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字装饰</title>
    <style>
        .c1 a{
            text-decoration: none;
        }

    </style>
</head>
<body>
    <div class="c1">
        <a href="">Django</a>
    </div>

</body>
</html>

　　　　首行缩进 text-indent: 32px;首行缩进两个字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首行缩进</title>
    <style>
        p{
            text-indent: 32px;
        }
    </style>
</head>
<body>
<p>
    窗前明月光，疑是地上霜，举头望明月，低头思故乡。
</p>
<div>
   锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦
</div>
</body>
</html>

　　背景属性：

　　　　背景颜色

　　　　背景图片：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景属性</title>
    <style>
        div{
            width: 500px;
            height: 600px;
            /*background-image: url("爷爷.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-position: center center;*/
            /*background-position: 100px 50px;*/
            /*background: url("爷爷.jpg") no-repeat center center;*/
            background: #78ffc9 url("爷爷.jpg") no-repeat left center;
        }
    </style>
</head>
<body>
<div>

</div>
</body>
</html>

原文地址：https://www.cnblogs.com/zhangrenguo/p/12580784.html