css属性和属性值

1.css文本属性

1. font-size   字体大小  单位是px，浏览器默认的是16px，设计图常用的是12px
2. font-family  字体   当字体是中文字体，英文字体中有空格时，需要加双引号；
                     *** **多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体以此类推
支持字体：宋体 黑体 微软雅黑 微软正黑体 新宋体 新细明体 细明体 标楷体
仿宋 楷体 仿宋_GB2312 楷体_GB2312
3.color       颜色     color:red;   color:#ffffff; 十六进制 前两位是红色，中间绿色，最后蓝色
                       color:rgb(0.0.0) 红.绿.蓝 0-255 0最弱255最强
4.font-weight   加粗    font-weight:ligter（细体） bolder（更粗的）强调作用/bold(加粗)/normal（常规）；
                       font-weight:100-900;100-500不加粗  600-900加粗
                       常用：100细体 400正常 700加粗 900更粗体（强调作用）
5.font-style    倾斜    font-style:italic(斜体字)/oblique（倾斜的文字）强调作用/normal(常规显示)
6.text-align    文本水平对齐   text-align：left;水平靠左
                             text-align:right;水平靠右
                             text-align:center;水平居中
                             text-align;justify;水平两端对齐，但只对多行起作用
7.line-height  行高     line-height的数据=height的数据，可以实现单号文本垂直居中
                  多行文本无法实现文本垂直居中
8.text-indent  首行缩进    text-indent可以取负值；  text-indent属性只对第一行起作用
                        取值px/em<相对于此时字体大小>
9.letter-spacing   字间距 控制文字和文字的间距 文本间距：词间距，字符间距。单位px
                   词间距：word-spacing 单词与单词之间的间距 取负值就交叉了
10.text-decoration   文本修饰  text-decoration:none没有/underline下划线/overline上划线/line-                          through删除线
                        既有上划线，又有下下划线，还有删除线
         text-decoration：underline overline line-through
11.font    文字简写   font是font-style（倾斜）font-weight（加粗）font-size（字体大小）line-                          height（行高）font-family（字体）的简写.
               例：  font:italic 800 30px/80px "宋体" 
******************** 顺序不能改变；必须指定font-size（字体大小）和font-family（字体）属性时才能起到                      作
12.文本属性-检索大小写    text-transform:   capitalize首字母大写  lowercase;字母全部小写 
                               uppercase全部大写 none没有设置

2.css列表属性

1.list-style-type   定义列表符和样式  list-stule-type:disc(实心圆)/circle（空心圆）/square（实心                                    方块）/none（去掉符号）
​
2.list-style-image   将图片设置位列表符合样式    list-style-image:url();
​
3.list-style-position  设置列表标记放置位置  list-style-position:outside;列表的外面默认值
                                          list-style-position:inside;列表的里面
                                     控制实心圆，图片等在列表内外
4.list-style  简写   list-style:none;去除列表符号
​
5.合并写法     list-style:(列表符样式) （图片设置） （列表标记放置位置）;顺序随便换
            例如：list-style: none url(1.png) outside

3.css背景属性

1. background-color   背景颜色   background-color:red;
2. background-image   背景图片   background-image:ur(图片地址); 图片较大自动裁剪放置，图片小会自动                                复制平铺
3. background-repeat  背景图片的平铺  background-repeat:no-repeat不平铺/repeat默认平铺/repeat-                                    x在x轴平铺/repeat-y在y轴平铺;
4. background-position  背景图片的定位 background-position:水平位置 垂直位置;可以给负值
         background-position:20px 30px 距离左边20px 距离上边30px
         background-position:10% 20% 宽的10% 高的20%
                       background-position:left center right 左 中 右
                                            top center bottom  上 中 下
5. background-attachment  背景图片的固定 background-attachment:scroll(滚动)/fixed(固定，固定在                                        浏览器窗口里，固定之后就相对于浏览器窗口了)
                                        fixed 相对于窗口 与盒子无关了，相对于左上角
6.背景图片的大小  background-size:400px 400px 宽 高
                                100% 100%  宽 高
                                cover 将背景图扩展到足够大或小，以使美军图像完全覆盖背景区域，不会使                                 图片失真，不会留白
                                contain 将图片扩展至最大/最小尺寸，以使其宽度和高度完全使用内容区                                 域。铺不满盒子，会留白
7.背景的复合属性
    复合写法      例：background：red（红色） ur() no-repeat center fixed;
                   1.用空格隔开  2.顺序可以换  3.可以只取一个值，放在后面的值能覆盖前面的值
  bakground-size属性只能单独用
​
opacity；0.7；半透明图片属性,可设置图片透明

4.浮动属性

让div可以横向排列
1. float:left;      让元素靠左边浮动
2.float:right;     让元素靠右边浮动
3. float:none;     元素不浮动
浮动的作用：1.定义网页中其他文本如何环绕该元素显示
          2.让竖着东西横着来
   如果都是浮动的会按照平级排列
   全部左浮动，从左到右按顺序排列，右浮动，从右到左按顺序排列
 浮动文字不会被挡住，会围绕显示

清除浮动
1.  clear:none;  允许有浮动对象
2.  clear:right; 不允许前面有右边有浮动对象
3   clear:left;  不允许前面有左边有浮动对象
4.  clear:both;  不允许前面有浮动对象
清除浮动只是改变元素的排列方式，该元素换上扶着，不章句文档位置。
******************当前元素后面不一个盒子设置清除浮动，不设置宽高 clear:both;
     overflow:hidden;能实现内部子标签不影响后面内容
 bfc，让浮动元素计算高度