CSS常用属性汇总0724

最新推荐文章于 2024-01-24 09:10:19 发布

Brooke_w

最新推荐文章于 2024-01-24 09:10:19 发布

阅读量101

点赞数 1

文章标签：前端 html css

本文链接：https://blog.csdn.net/Brooke_w/article/details/125965988

版权

文章目录

CSS15种常用属性汇总

前言

总结一下目前学到的15种常用的CSS属性的汇总，只是目前学到的哈，以后会有更多😀

color 前景色
background-color 背景色
font-size 字体大小
font-weight 字体粗细
text-algin 文本居中
line-height 垂直居中和高度
width height 宽高

display里面又分为：
inline 行内元素相当于span
block 块元素相当于div
inline-block 行内块，既不会换行又可以给宽高
none 不显示

margin 外边距
padding 内补
border 边框书写样式：border：1px solid red
border-radius 图片圆角
text-decoration none 超链接去除下划线
list-style none 去除列表样式

使用大多数属性做了一个简易导航栏

代码如下

<!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>
        * {
            padding: 0px;
            margin: 0px;
            font-size: 0px;
          }

        .ceshi1 {
            width: 1000px;
            background-color: aqua;
            border-radius: 20px;
            height: 50px;
            border: 2px solid slateblue;
               }

        .ceshi2 {
            background-color: burlywood;
            height: 100%;
            line-height: 50px;
            margin: 0px 10% 0 10%;
               }

        a {

            color: blue;
            display: inline-block;
            text-decoration: none;
            text-align: center;
            width: 20%;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div class="ceshi1">
        <div class="ceshi2">
            <a href="">1</a>
            <a href="">2</a>
            <a href="">3</a>
            <a href="">4</a>
            <a href="">5</a>
        </div>
    </div>
</body>

</html>

效果如下