css入门常用属性

最新推荐文章于 2024-06-12 12:52:53 发布

祈遇xin

最新推荐文章于 2024-06-12 12:52:53 发布

阅读量105

点赞数 1

文章标签： css css3 前端 html html5

本文链接：https://blog.csdn.net/weixin_52972942/article/details/125947611

版权

style常用属性

颜色

前景色：color
背景色：background-color

字体

字体大小：font-size
字体粗细：font-weight

边框

border格式：宽度样式颜色；
样式：solid 实线；dotted 点线；dashed 虚线
border-&：边框
例：border：1px solid red；
border-top：1px dashed red；
border-radius：圆角

外边框

margin
margin-&：外边框
例：margin-top：10px；

内补

padding
padding-&：内补
例：padding-top：10px；

宽高

width：宽
height：高

文本

text-align：center；水平居中
height-align=line-height：center；垂直居中
text-decoration：none；去除下划线

显示

display属性
- inline 不换行
- block 块元素
- inline-block 行内块
- 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>
    <!-- 
    颜色：color: 前景色
          background-color: 背景色
    字体：font-size: 字体大小
        font-weight: 字体粗细
    边框: border: 1px solid red  border-*  边框
          border-radius: 圆角
    外边距：margin margin-*  外边距
    内补: padding padding-*  内补
    宽高：width height 宽高
    文本：text-align  水平居中  center
         height=lineheight 垂直居中
         text-decoration  none 去除下划线
    显示：display  inline不换行  block块元素  inline-block行内块  none不显示
    列表：list-style none去除列表样式
 -->

    <style>
        li{
            list-style: none;
        }
        .wrapper{
            width: 300px;
            margin: 0 auto;
            border: 1px solid lightcoral;
            padding: 10px 20px 10px 50px;
            text-align: center;
            background-color: lightblue;
            border-radius: 5%;
        }
        .first a{
            text-decoration: none;
        }
        .first li:nth-of-type(2){
            font-size: 10px;
            font-weight: lighter;
        }
        .second{
            color: red;
        }
        .third li{
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="first">
            <a href="#"><li>赋得古原草送别</li></a>
            <li>白居易</li>
        </div>
        <div class="second">
            <li>离离原上草，一岁一枯荣。</li>
            <li>野火烧不尽，春风吹又生。</li>
            <li>远芳侵古道，晴翠接荒城。</li>
            <li>又送王孙去，萋萋满别情。</li>
        </div>
        <div class="third">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
        </div>
    </div>
</body>
</html>