222 前端之CSS：属性操作2

一、文本属性

1.text-align:cnter 文本居中
2.line heigth 垂直居中：行高，和高度对应
3.设置图片与文本的距离：vertical-align
4.text-decoration:none 去掉超链接下划线
5.要是给a标签修改颜色的时候，就定到a标签上，用继承有时候是搞不定的
因为继承的级别是很低的，如果a标签设置了样式，是不会继承父亲的
6.首行缩进：text-indent:30px
7.font-style:oblique 或者italic....(设置字体的样式为斜体)

二、背景属性

background-color:背景颜色
background-image:url('11.jpg'); 背景图片链接
background-repeat:repeat-x; x轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中

简写：
background: url('11.jpg') no-repeat center;

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景处理</title>
 6     <style>
 7         .c1{
 8             width: 100px;
 9             height: 100px;
10             border: 1px solid red;
11             background: url("xhr.jpg")  -206px -29px;
12             /*可在那个网页上右击点击检查，调试*/
13             /*background-position: center; */
14             /*定位*/
15         }
16     </style>
17 </head>
18 <body>
19 <div class="c1">
20 </div>
21 </body>
22 </html>

背景调试小黄人的眼睛

三、边框属性

常用属性

　　简写：border :1px soild red;
　　deshed:虚线
　　只加有一个方向的：border-right :1px soild red;

四、列表属性

去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}

上面两行也可写成下面一行
去掉盒子上面的间隙：*{margin:0; padding :0;}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul li{
            font-family: 华文中宋;
            list-style: none; //去掉点
            /*list-style: circle;//空心圆*/
            /*list-style: disc;//实心圆（默认也是实心圆）*/
        }
        ul{
            padding: 0; //把字体移到前面

        }
    </style>
</head>
<body>
<div>
    <ul>
        <li>第一章</li>
        <li>第二章</li>
        <li>第三章</li>
        <li>第四章</li>
    </ul>
</div>
</body>
</html>

五、display属性

display属性
1.将块级标签设置成内联标签：disply：inline;
2.将内联标签设置成块级标签：disply：block;
3.内联块级标签：像块级一样可设长宽，也可像内联一样在一行显示：display:inline-block;
4.display:none; 吧不想让用户看到的给隐藏了（很重要的一个属性）
5.visibility :hiddon；也是隐藏

注意与visibility:hidden的区别：

　　visibility:hidden：可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

　　display:none：可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         .c1{
 8             width: 100px;
 9             height:100px;
10             background-color: rebeccapurple;
11         }
12         .c2{
13             width: 100px;
14             height:100px;
15             background-color: burlywood;
16         }
17         .c3{
18             width: 100px;
19             height:100px;
20             background-color: crimson;
21             display: inline;
22         }
23         .c4{
24             width: 100px;
25             height:100px;
26             background-color: gray;
27         }
28         .s1{
29              display: block;
30             width: 200px;
31             height: 200px;
32             background-color: royalblue;
33             /*visibility: hidden;*/  //隐藏了其他的不会顶上去
34             display:none; //隐藏了其他的会顶上去
35 
36         }
37     </style>
38 </head>
39 <body>
40 <div class="c4">div</div>
41 <span class="s1">span</span>
42 <div class="c1">年后</div>
43 <div class="c2">年后</div>
44 <div class="c3">年后</div>
45 </body>
46 </html>

举例