常见CSS样式详解

1、背景 background

背景基本属性
背景颜色: background-color：”颜色”
背景图片: background-image: url(“图片地址”)
背景-简写属性
background: “ 颜色” url(“图片地址”) 是否（重复）平铺图片 图片的水平位置 图片的垂直位置 （如果不需要颜色，就可以不加）
注：背景图片设置后，一般需要设置background-size
在我们开发中，有时要开发一种半透明的效果，这时我们可能会用到opacity， 但是，这样会有一个问题，就是当一个父元素的opacity设置为半透明的时候，子元素也会变成半透明 ，这时就可以用到：
==>设置透明的背景色 background-color:rgba(); 填写4个值,前三个数字，指的是RGB的颜色，最后一个数字是透明度(0-1)

2、文本格式

文本颜色
color: “”
颜色属性： 十六进制-eg: #ff0000; 一个RGB值-eg: RGB(255, 0, 0)
颜色的名称-eg: red
文本对齐方式
text-align: “”
文本居中： center 文本对齐到左： left
文本对齐到右： right

文本修饰
text-decoration: “”
overline
line-through
underline

文本缩进
指定文本的第一行的缩进。
text-indent:“50px”

行高
line-height: “50px” 指定文本一行文字的行间距, (当设置为1时，高度=字体大小)

3、字体Font

字体系类
fong-family:“宋体”
字体大小
font-size:14px
字体粗细
font-weight: normal （正常）
bold （粗体字符）
bolder（更粗的字符）
100–900

4、表格

border-collapse: collapse
设置表格的边框是否被折叠成一个单一的边框或隔开
使用前

使用后

5、边框-border

border-style: 边框样式 none （无边框）
solid （ 实线边框）
dashed （虚线边框）

border-color: 边框颜色

简写属性：(常用)
border: 边框的粗细 边框的样式 边框的颜色

也可以是只显示一边： border-top:
border-bottom
border-right
border-left

6、隐藏元素

（1）display:none
隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
这是一个可见标题
注意：实例中的隐藏标题不占用空间

（2）visibility:hidden
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
这是一个可见标题
注意：实例中的隐藏标题仍然占用空间

7、补充

list-style:none
使用前

使用后

text-decoration:none
使用前

使用后

outline: none
input聚焦外层自带的蓝框


将超出区域的文字变为省略号，可以使用以下属性：
1.强制文本单行显示：white-space:nowrap;
2.设置溢出文本显示为省略标记：text-overflow:ellipsis;
3.设置溢出隐藏：overflow:hidden;