bai_nian_min_guo
css总结

一、首先介绍如何使用css样式

1、内联样式

通过style属性来控制标签显示的样式
<h1 style="color: red;font-size: 20px">内联样式</h1>

 

2、内部样式表

在html的头部定义一个style的标签，定义某个标签的css的样式，比如可以定义
a、现在head中定义style标签
<style>
h2{
color: blue;
font-size: 10px;

}
h3{
color: palevioletred;
font-size: 20px;
}
h1{
color: aqua;
}
</style>
b、在body中使用该css样式
<h2>内部样式表</h2>
<h3>内部样式表</h3>


如果内部样式表和内联样式表有冲突，那么哪个会生效呢，实际测试，发现内联样式的生效优先级高于内部样式表

 

3、外联样式

定义一个stylesheet文件这个文件中定义某个标签的样式，然后在html文件中通过link去引入文件，这样html中对应的标签就会使用stylesheet文件中定义的样式
a、定义一个stylesheet文件，文件的内容如下
div{
color: palevioletred;
font-size: 20px;
}


h1{
color:green;
font-size: 10px;

}
b、在html文件中使用

<div>外联样式</div>

 <link type="text/css" href="css.css" rel="stylesheet">

二、css的语法规则

div{
color: palevioletred;
font-size: 20px;
}


选择器
元素
class


声明
属性名
属性值

 

比如div这里就是选择器，color是属性名，palevioletred是属性值


.xdd{
color: palevioletred;
font-size: 20px;
}

<p class="xdd"></p>

比如这里的例子，定义个样式，名称为.xdd，然后在标签中通过class属性来设定该标签的样式

 

三、css的属性

1、css定义颜色

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
color定义字体的颜色
         
        定义css样式
        <style>
            .xxx{
                color: red;
            }
            .yyy{
                color: blue;
            }
            p{
                color:brown;
            }
        </style>
         
        使用定义的样式
        <p class="xxx">第一个段落1</p>
        <p class="yyy">第一个段落2</p>
        <p>第一个段落3</p>
        <p>第一个段落4</p>

　　

2、css定义背景

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
        body{
            
            设置背景颜色
            background: url("../1.ico");
            设置背景图片
            background-repeat: no-repeat;
            设置背景图片不重复
            /*background-repeat: repeat-x;*/
            设置背景图片横向重复
            /*background-repeat: repeat-y;*/
            设置背景图片纵向重复
            /*background-repeat: repeat;*/
            设置备份图片横向纵向同时重复
            background-position: right top;
            设置背景图片的位置
            /*background-position: 10px  20px;*/
            设置背景图片的位置，用像素的方式
            /*background-position: 20%  30%;*/
            设置背景图片的位置，用百分比的方式
            background-attachment: fixed;
            设置背景图片固定
        }
    </style>

　

3、css定义边框属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
css定义边框属性
         p{
             border-width: 4px;
             设置边框的宽度
             border-style: solid;
             设置边框的风格类型
             border-color: aquamarine;
             设置边框的颜色
             border-radius: 50px;
             设置边框的圆角，像素越大，圆角越明显
         }
    设置四个框的的属性
        div{
             
             border-left-color: brown;
             border-left-style: solid;
         }     
    也可以单独设置某个边框的属性
     
    css定义padding属性，设置文字举例内边框的距离
        .xxx{
            border-width: 20px;
            border-style: solid;
            border-color: aqua;
            padding: 20px;
        }
    同时设置文字距离4个边框的长度
        .yyy{
            border-width: 20px;
            border-style: solid;
            border-color: aqua;
            padding-bottom: 10px;
            padding-left: 15px;
            padding-right: 20px;
            padding-top: 25px;
        }
    分别设置文件距离4个内边框的距离

　　

4、css定义margin属性，设置标签距离外部其他元素的距离

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
style>
        .cc{
            border-color: red;
            border-style: solid;
            border-width: 2px;
            padding: 20px;
            margin: 40px;
        }
    </style>
     
    设置一个margin的属性为40px，那么引用cc的这个元素距离外部的元素的距离是40个像素
     
    <h1>测试margin</h1>
    <p class="cc">这是一个margin</p>
    <h2>测试margin</h2>
     
    这个效果就是p标签距离h1和h2标签的距离都是40像素，同样，margin也可以分别设定上下左右的margin的属性值

　　

5、css定义宽度和高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
    <style>
    .cc{
        border-style: solid;
        border-width: 2px;
        border-color: red;
        
        width: 50px;
        height: 100px;
    }
</style>
 
设置宽度和高度，这里设置了具体的值，也可以设置为百分比，这个百分比相当于body的百分比
 
<h1 class="cc">测试元素的宽度和高度</h1>
<p class="cc">测试元素的宽度和高度</p>
<h2 class="cc">测试元素的高度和宽度</h2>
 
 
css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面
 
    <style>
    .cc{
        border-width: 3px;
        border-style: solid;
        border-color: black;
        outline-color: blue;
        outline-style: solid;
        outline-width: 4px;
    }
</style>
 
 
<p class="cc">css设置元素的外边框,这个和border还不一样，outline这个外边框在border外面</p>

　　

6、css定义文本相关样式

1
2
3
4
5
6
7
8
color：设置字体颜色
text-align:设置文本的位置，靠左，靠右
text-docration:定义文本中线【line-throngh】，下划线【underline】，上线【overline】
text-transform: lowercase;定义文本中的字母都为小写，用来转换字母的属性
text-indent：设置文本内容缩行，设置文档的首行往里缩多少个像素
text-spacing：设置文本内容的字符的间隔
line-height:设置文本中的行间距，属性值是数字，是标准行间距的倍数，也可以设置像素值

　　

7、css定义字体

1
2
3
4
font-family:设置字体的类型
font-style：设置字体的风格，比如斜体
font-size：设置字体的大小，一般默认的字体大小是16个像素值
font-weight：设置字体的粗度的效果

　　

8、css控制元素的显示状态display属性

1
2
3
4
display：none    隐藏标签
display：block    显示标签，且会被行内标签调整为块级标签
display：inline  把块级标签调整为行内标签
visibility：hidden：隐藏元素，但是被隐藏的元素所占的高度和宽度还会继续保留，不会被其他元素占用，这个就是和display不一样的地方

　　

9、

css定义元素的最大宽度
max-weith：

 

10、css定义元素位置

1
2
3
4
position
    static，一般就是元素原来的位置，static和没有这个属性的效果是一样的，就算设置了left right top buttom都会不生效
    relative,可以设置left right top buttom的值，意思就是距离左边多远，右边多远，上边多远，下边多远，相对于参数static时候的位置
    fixed，他的效果和relative的效果一致，唯一的区别就是如果有滚动条，如果拉动滚动条，那么relative的的元素会变，而fix的元素位置是固定的

　　

11、css定义元素层次

1
2
z-index
        如果有2个元素在一个位置，z-index就是定义哪个元素在上面显示哪个元素在下面显示，z-index的值越大，则显示的越在上面

　　

12、css控制元素的溢出

1
2
3
4
5
6
7
8
9
10
11
12
13
overflow
        visible:如果一个元素在框中，而元素的内容已经超出元素的外框，那么元素就溢出，不会做任何处理
        hidden：如果一个元素在框中，而元素的内容以及超出元素的外框，那么超出外框的元素就会被隐藏不会被显示
        scroll：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框也有滚动的栏出现
        auto：如果一个元素在框中，而元素的内容已经超出元素的外框，那么就会有滚动条出现，如果元素的内容没有超出外框，外框就不会有滚动的栏出现
.auto{
    border-width: 2px;
    border-style: solid;
    border-color: pink;
    width: 300px;
    height: 100px;
    overflow: auto;
}

　　

13、css控制元素浮动

1
2
3
4
5
css控制元素浮动
    float
        none
        left
        right

　　

14、css定义元素：把元素从水平方向摆放，如果浏览器变大，会自动向下摆放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
inline-block
<style>
.cc{
    border-width: 2px;
    border-style: solid;
    border-color: red;
    width: 440px;
    height: 80px;
    display: inline-block;
}
.bb{
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}
</style>

　　

15、css定义元素的对齐方式

1
2
3
4
5
6
7
8
9
元素居中对齐
        .cc{
            border-color:red;
            border-style:solid;
            border-width:2px;
            width:50%;
            margin: auto;
        }
        上面的办法可以实现元素居中显示，如果元素要居中，对已块级标签，则必须要有一定的宽度

　　

1
2
3
4
5
6
7
8
9
10
文本的居中对齐
        <style>
            .cc{
                border-color:red;
                border-style:solid;
                border-width:2px;
                width:50%;
                text-align: center;
                }
        </style>

　　

1
2
3
4
5
图片居中对齐
        .pic{
            display: block;
            margin: auto;
            }

　　

1
2
3
4
5
6
7
8
元素的左对齐，右对齐
        .right{
            
            width: 100px;
            height: 50px;
            position: absolute;
            right: 0;
        }

　　

16、css定义元素的透明度

1
2
3
4
5
opacity
           .opacity{
                opacity: 0.2;
             
            }

　　

17、css定义元素的阴影

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.box{
border-color: red;
border-style: solid;
border-width: 2px;
width: 300px;
height: 300px;
color: green;
 
box-shadow: 20px 15px 10px black
}
20px 15px 10px black
 
20：定义x轴的宽度
15：定义y轴的宽度
10：定义虚幻的程度，这个可以不加，非必须的
black：阴影的颜色

　　

18、css定义元素样式过度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
transition
         
        .transition{
            width: 100px;
            height: 200px;
            
            transition: 1s;
 
        }
        .transition:hover{
            width: 150px;
            height: 250px;
            
        }
 
    上面这个例子的效果就是，把鼠标放到标签上，过1s后，样式会自动过度到transition:hover的样式上，如果没有定义transition: 1s，那么只要鼠标放在标签上，就会立刻切换到
    transition:hover的样式上

　　

19、css定义元素动画效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
animation
         <style>
        .animation{
            width: 200px;
            height: 200px;
            border-color: blue;
            border-width: 1px;
            border-style: solid;
            position: relative;
            
            animation: example 10s;
        }
        @keyframes example {
            from{width: 200px;
                height: 200px;
                border-color: blue;
                border-width: 1px;
                left: 0px;
                top: 0px;
                
 
            }
            to {
                width: 400px;
                height: 400px;
                border-color: red;
                border-width: 10px;
                left: 600px;
                top: 100px;
                
            }
        }
    </style>
     
    上面的例子的意思是，初始的样式为animation定义的样式，然后在10s完成切换，然后从keyframes example from切换到keyframes example to的状态

　　

1
2
3
animation: example 4s infinite;
      
     这个的意思是4s完成切换，但是会一直切换，也就是无穷尽的执行

　　

1
2
3
4
animation: example 4s ease-in-out alternate infinite;
这个意思是无穷尽的切换，从from到to，然后从to到from
alternate的效果是从from到to，然后从to到from
infinite的效果是无穷尽的切换

　　

四、最后介绍一下css的选择器

元素选择器
用标签的名称作为css的名称，去定义样式，如果有定义，那么该标签都会自动应用该样式

类选择器
以点“.”开头，然后在标签中通过class去应用该样式，就可以在该标签中应用该样式

id选择器
以“#”号开头，在标签中id为样式定义的id的标签会应用定义的样式


组合选择器
div p{
}
这个意思是div中的p元素应用该样式，如果div中有个span，在span中又有一个p元素，这个p元素也会应用该样式


div > p{
}
这个意思只对div下的p元素生效，如果div中有个span，span中又有一个p，则该p不会应用该样式

posted on 2018-03-09 15:34  bainianminguo  阅读(160)  评论(0)  编辑  收藏  举报

Copyright © 2024 bainianminguo
Powered by .NET 9.0 on Kubernetes Powered By博客园