常用的CSS样式列表

CSS是前端开发中不可或缺的一部分，掌握一些常用的CSS样式可以大大提高前端开发的效率和质量。本文将介绍一些常用的CSS样式，帮助前端工程师们更好的应用CSS。

一、字体样式

CSS可以对字体进行多方面的样式设置，包括字体大小、字体颜色、字体粗细、字体样式等等。 1、设置字体大小 可以使用font-size属性来设置字体大小，下面是一个示例代码：

    
    p {
        font-size: 16px;
    }
    

2、设置字体颜色 可以使用color属性来设置字体颜色，下面是一个示例代码：

    
    p {
        color: #333;
    }
    

3、设置字体粗细 可以使用font-weight属性来设置字体粗细，下面是一个示例代码：

    
    p {
        font-weight: bold;
    }
    

4、设置字体样式 可以使用font-family属性来设置字体样式，下面是一个示例代码：

    
    p {
        font-family: "Microsoft YaHei";
    }
    

二、布局样式

CSS可以对页面进行多方面的布局设置，包括盒子模型、定位、浮动等等。 1、盒子模型 盒子模型是CSS中的重要概念，可以用来设置元素的宽度、高度、内边距和外边距等。下面是一个示例代码：

    
    div {
        width: 200px;
        height: 100px;
        padding: 10px;
        margin: 10px;
        border: 1px solid #ccc;
    }
    

2、定位 定位可以用来设置元素的位置，包括绝对定位、相对定位、固定定位等。下面是一个示例代码：

    
    div {
        position: absolute;
        left: 0;
        top: 0;
    }
    

3、浮动 浮动可以用来设置元素的位置，常用于实现两列布局或者图片文字混排等。下面是一个示例代码：

    
    .left {
        float: left;
        width: 200px;
    }
    .right {
        float: right;
        width: 200px;
    }
    

三、动画效果

CSS可以实现多种动画效果，包括旋转、缩放、渐变等等。 1、旋转 可以使用transform属性来实现元素的旋转效果，下面是一个示例代码：

    
    .rotate {
        transform: rotate(45deg);
    }
    

2、缩放 可以使用transform属性来实现元素的缩放效果，下面是一个示例代码：

    
    .scale {
        transform: scale(2);
    }
    

3、渐变 可以使用gradient属性来实现元素的渐变效果，下面是一个示例代码：

    
    .gradient {
        background: linear-gradient(to bottom, #fff, #000);
    }
    

以上是常用的CSS样式列表，掌握这些样式可以帮助前端工程师更好的开发网页。