笔记：css基础样式
接上篇/仍然是5.28
一、背景
1.background-color 背景颜色
默认值是transparent(透明的)
当同时定义了背景图像和颜色时，背景图像将覆盖在背景颜色之上
.divclass{ background-color:#808080;}
background-color 颜色的取值：
1.关键字：red
2.十六进制：#f00 #0f0 #00f
3.rgb(0,0,0) 参数取值范围：0-255
4.rgba(0,0,0,.5) 最后一个参数的取值范围 0-1 0代表完全透明 0.5半透明 1 不透明
2.background-image 背景图片
background-image 加载的图片默认在水平垂直方向式平铺的
默认值是none(没有图片)
元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距
通过url使用绝对或相对地址指定图片
background-image: url("images/img.jpg");
3.background-repeat 背景图片是否重复
4.background-size 背景图片大小
5.background-position 背景图片位置（相对于外层容器）
/*background-position:center center ;第一个参数代表水平位置 第二个参数代表垂直位置*/
/* background-position: top; 第二个参数默认是center */
/*background-position: 30px 10px; 第一个参数是水平方向 第二个参数是垂直位置*/
background-position 定位的三种方式
1.方位名称 left top right center bottom
2.精确数字
3.混搭
6.background-attachment： 背景图片是否随内容滚动
7.background 简写
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性：
background-color background-image
background-repeat background-attachment
background-position background-size
如果不设置其中的某个值，也不会出问题，取默认值
二、字体
color: green;
font-style: normal; 斜体等
font-size: 20px;
font-family: "宋体";
font-weight: 100; 文本粗细
Font简写：
font: italic bold 20px "黑体";
letter-spacing: 2px;/*设置字的间距*/
其他属性：
6.letter-spacing:;设置字的间距 如：div{letter-spacing:2px;}
7.opacity 设置颜色的透明度，整个元素都会透明 1为不透明，0为完全透明（和rgba中的”a”作用一样）
8.overflow: hidden|auto|scroll;当内容溢出元素框时隐藏|自动|显示滚动条
9.text-overflow：让溢出的文字以省略号显示
p{
height: 20px; width:100px; background:#ddd;
white-space: nowrap; //让文字在同一行显示，不换行
overflow: hidden; //溢出部分隐藏
text-overflow: ellipsis; //文字溢出部分省略号显示，另外一个值为clip
}
三、文本属性
1.text-align 内容对齐方式，它是针对于元素的内容
属性值 left |center |right
p{text-align: center;} p是块元素，left、right和center会作用于整个行
2.text-decoration 指定文字有无装饰，默认值为none
属性值：
underline 下划线 overline 上划线
line-through 贯穿线，类似于删除标签的效果
3.text-transform 设置对象中的文本的大小写 默认值none 无转换
属性值：
capitalize 将每个单词的第一个字母转换成大写
uppercase 全部转换成大写
lowercase 转换成小写
p{ text-transform: lowercase; } <p>THIS IS PARAGRAPH</p>
4.text-indent文本缩进
文本缩进属性是用来指定文本的第一行的缩进。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。因此，1em的默认大小是16px。
5.word-wrap 设置当前行超过指定容器的边界时是否换行
（容器中的单词过长，超出了容器本身的宽度，会造成“长单词溢出”）
word-wrap: break-word;可设置过长的文本自动换行
6.vertical-align 设置对象内容的垂直对其方式。
是容器中元素相对于内容的显示
7.line-height 设置对象的行高（不允许使用负值）
我们一般用行高来使一行文字垂直居中，当行高等于高时，一行文字垂直居中
height: 80px;
font-size: 20px;
line-height:4 ;——————》line-height * font-size=height
四、列表属性
1.list-style-image 设置列表项标记的图像(项目符号) 只有一个属性url，引导一个图片
2.list-style-position 设置列表项标记如何根据文本排列 这个属性有两个值outside和inside
outside项目符号放在文本以外（默认）inside项目符号放在文本以内
ul li{ list-style-position:outside; width:100px; border:1px solid red;}
——交集选择器（并集选择器是逗号隔开）
3.list-style-type 设置列表项所使用的预设标记
none不使用项目符号 disc实心圆（相当于html属性type=”disc”）
circle空心圆 square实心方块
4.list-style 简写
list-style：list-style-image list-style-position list-style-type
——图片备用符号
示例：ul{ list-style: url("images/icon.png") outside disc;}
前面设置了图片，最后再设置项目符号的目的是，如果图片未能正常显示，可以有符号来代替
#今日份的CSS就到这里～
我们手指交叉
一颗星星煞住车
照亮我们
——北岛《紫色》