css常用样式

云树开清晓

已于 2022-10-04 22:03:22 修改

阅读量107

点赞数

分类专栏： css 文章标签： css 前端 css3

于 2022-10-04 13:38:46 首次发布

本文链接：https://blog.csdn.net/m0_53387706/article/details/127161285

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文本属性

行间距(line-height)

在这里插入图片描述
垂直居中,让行高等于盒子高度

 line-height:40p;
 height: 40p;

标签属性

边框(border)

border-bottom: 2px solid skyblue;

装饰文本(text-decoration)

div {
 text-decoration: underline
}

在这里插入图片描述

文本对齐(text-aligin)

本质是让盒子里面的文字对齐

文本颜色(color)

在这里插入图片描述

总结

在这里插入图片描述

字体(font)

字体大小(font-size)

默认值:16

字体粗细(font-weight)

400等于normal,700等于加粗

font-weight:400

背景(background)

背景颜色(background-color)

background-color:transparent; /*默认值:透明*/

背景图片(background-image)

background-image 属性描述了元素的背景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片, 优点是非常便于控制位置.

background-image : none | url (url)

在这里插入图片描述

背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

在这里插入图片描述

背景图片位置

background-position: x y;

参数代表的意思是：x 坐标和 y 坐标。可以使用方位名词或者精确单位
在这里插入图片描述

练习

效果图
在这里插入图片描述

<html>
<head>
    <style>
        .h3-118-41{
            width: 140px;
            height: 41px;
            line-height: 41px;
            font-size: 14;
            background-image: url(images/image1.png);
            background-repeat: no-repeat;
            background-position: left center;
            text-indent: 3em;
         }
    </style>
    
</head>
<body>
    <div class="h3-118-41">
        成长守护平台
    </div>
</body>
</html>

元素显示模式

块元素

块级元素可以给高度和宽度
在这里插入图片描述

行内元素

在这里插入图片描述

行内块元素

在这里插入图片描述

显示模式的转换(display)

在这里插入图片描述

display: block; /*转化为块元素*/
display: inline /*转化为行元素*/
display: inline-block /*转化为行内块元素*/

案例: 小米侧边栏

<html lang="utf-8">
<head>
<style>
    a {
        text-indent: 2em;  /*缩进*/
        text-decoration: none;  /*去掉下划线*/
        display: block; /*转化为块元素*/
        width: 200px; /*宽度*/
        font-size: 16; /*字体大小*/
        line-height: 40px; /*行高*/
        height: 40px; /*高度*/
        color: white; /*字体颜色*/
        background-color: #535758; /*背景颜色*/
    }
    a:hover{  /*链接被选中*/
        background-color: #fe6700; 
    }
</style>
</head>
<body>
    <a href="#">手机</a>
    <a href="#">电话卡</a>
    <a href="#">冰箱</a>
    <a href="#">出行</a>
    <a href="#">平板</a>
    <a href="#">电脑</a>
</body>
</html>