11、常用CSS样式

最新推荐文章于 2022-07-23 10:48:31 发布

青叶的全栈之路

最新推荐文章于 2022-07-23 10:48:31 发布

阅读量185

点赞数

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

本文链接：https://blog.csdn.net/dream_AI/article/details/107143334

版权

Web前端专栏收录该内容

16 篇文章 2 订阅

订阅专栏

常用CSS样式

字体
文本
高度与宽度
背景色/图像
列表

一、字体样式

font-style：normal(正常)、italic(斜体)
font-variant：normal(正常)、small-caps(所有字母变成小型大写字母)
font-weight：normal(正常)、bold(粗)、bolder(更粗)、lighter(较细)
font-size：字体大小
font-family：字体类型
font：综合定义，style>variant>weight>size >family，顺序不能乱，否则报错。

二、文本样式

color：文本颜色
line-height：行高
letter-spacing：字符间距
word-spacing：单词间距
text-align：文字的对齐方式。left、center、right、justify(左右对齐)
text-decoration：下划线。none、underline(底部)、overline(顶部)、line-through(中间)
text-transform：none、capitalize(首字母大写)、uppercase(大写)、lowercase(小写)

三、高度与宽度

height：高度。auto(自动)、百分比/值
width：宽度。auto(自动)、百分比/值
min-height/width：最小宽高。none(没有)、百分比/值
max-height/width：最大宽高。none(没有)、百分比/值

四、背景色/图像

background-color：背景颜色。transparent(透明)、具体颜色
background-image：图像。【none(没有)、url(路径)】
background-repeat：图像平铺方向。【no-repeat(no)、repeat(yes)、repeat-x(横)、repeat-y(竖)】
background-postion：图像位置。垂直位置(top、center、bottom、y%、长度)，水平位置(left、center、right、x%、长度)
background：综合应用，color>image>repeat>postion

五、列表样式

list-style-type：
- none，空
- disc，(空心圆点●)
- circle，(空心圆点○)
- square，(方块□)
- decimal，(数字1、2、3……)
- decimal-leading-zero，(以0开始的数字01、02、03……)
- lower-roman，(小写罗马数字i、ii、iii……)
- uper-roman，(大写罗马数字Ⅰ、Ⅱ、Ⅲ…….)
- lower-alpha，(小写字母a、b、c……)
- lower-lapha，(大写字母A、B、C……)
list-stylle-position：列表符号的位置。inside(行框内)、outside(行框外)
list-style-image：图片替代列表符号。none(没有)、url(路径)
list-style：综合应用，type>position>image

六、透明度

<body>
    <div>
        <div id="div1">背景色不透明，<br/>文字不透明</div>
        <div id="div2">背景色半透明，<br/>文字不透明</div>
    </div>
</body>

6.1、rgba()设置透明度

RGBA（）：设置背景颜色及其透明度，但是透明度不会影响到上面的文字

R：Red（红色），0~255
G：Green（绿色），0~255
B：Blue（蓝色），0~255
A：Alpha（不透明度），0~1

div>div{
    float: left;
    width: 200px;
    height: 100px;
    color:black;
}
#div1{
    background-color: rgba(0,0,255,1);
}
#div2{
    background-color: rgba(0,0,255,0.5);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z2J6HsW4-1593947253203)(img\常用CSS样式\rhba透明度.png)]

红色：rgb（255，0，0）
绿色：rgb（0，255，0）
蓝色：rgb（0，0，255）
黑色：rgb（0，0，0）
白色：rgb（255，255，255）

6.2、opacity设置透明度

opacity属性具有继承性，会使容器中的所有子元素都具有透明度。

div>div{
    float: left;
    width: 200px;
    height: 100px;
    color:black;
}
#div1{
    background-color: blue;
    opacity:1;
}
#div2{
    background-color: blue;
    opacity:0.5;
}

在这里插入图片描述

opacity:1;

}
#div2{
background-color: blue;
opacity:0.5;
}
在这里插入图片描述

青叶的全栈之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
11、常用CSS样式

常用CSS样式字体文本高度与宽度背景色/图像列表一、字体样式font-style：normal(正常)、italic(斜体)font-variant：normal(正常)、small-caps(所有字母变成小型大写字母)font-weight：normal(正常)、bold(粗)、bolder(更粗)、lighter(较细)font-size：字体大小font-family：字体类型font：综合定义，style>variant>weight>size &g
复制链接

扫一扫