常用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;
}