web前端--CSS


前端时间学了些HTML的基本内容,现在开始学CSS,CSS之后才是真的开始前端,Javascript,jquery等等。。入题

一、CSS基本了解

CSS层叠样式表(Cascading Style Sheets)是用来表现html或者xml的一种语言,可以简单理解为CSS是用来修饰html网页的一种语言。

二、应用

添加到html中,来修饰网页,以下是三种样式表。
1、元素样式表
2、文档样式表
3、外部样式表(常用,将html和css样式分离,结构清晰)

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>CSS样式表</title>
6
    <link rel="stylesheet" type="text/css" href="color.css">
7
<!--    link链接到外部样式表,采用color.css,对应word3-->
8
    <style type="text/css">
9
        .class2:hover{
10
            font-size:30px;color: #ff2539;
11
            /*设置文档内嵌样式表,所有word标签都将这个格式50,红色*/
12
        }
13
    </style>
14
</head>
15
<body>
16
<p class="class1" style="font-size: 20px;color: #2066ff">元素内嵌样式表</p><br>
17
<p class="class2">文档内嵌样式表</p><br>
18
<p class="class3">外部CSS样式表</p><br>
19
<!--若都设为word,则出现层叠效果,优先级:元素>文档>外部-->
20
<!--动作选择器hover:鼠标移到此处字体变大显色-->
21
</body>
22
</html>

word3中的外部样式表,需要在project中新建一个color.css文件,内容如下:

1
.class3{
2
    font-size:40px;
3
    color: #f123ff;
4
}

三、选择样式

(1)选择所有元素:*
(2)根据类设置属性:.class1{}
(3)根据id: #id1{}
(4)根据属性选择元素:【href=href1】{}
(5):冒号选择器

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>样式</title>
6
    <style type="text/css">
7
        *{/*设置所有样式都一样用**/
8
            font-size: 30px;
9
            color: #ff2539;
10
        }
11
        [href="02CSS选择样式.html"]{}
12
        a:hover{/*鼠标经过时变化*/
13
            font-size: 30px;
14
            color: #dbff08;
15
        }
16
    </style>
17
</head>
18
<body>
19
<a class="class1">文本</a>
20
<a href="02CSS选择样式.html">文本2</a>
21
<a class="class1"> 文本</a>
22
<p>文本3</p>
23
<h1>一级标题</h1>
24
</body>
25
</html>

四、控制边框和背景

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>样式</title>
6
    <style type="text/css">
7
        *{/*设置所有样式都一样用**/
8
            font-size: 30px;
9
            color: #ff2539;
10
        }
11
        [href="02CSS选择样式.html"]{}
12
        a:hover{/*鼠标经过时变化*/
13
            font-size: 30px;
14
            color: #dbff08;
15
        }
16
    </style>
17
</head>
18
<body>
19
<a class="class1">文本</a>
20
<a href="02CSS选择样式.html">文本2</a>
21
<a class="class1"> 文本</a>
22
<p>文本3</p>
23
<h1>一级标题</h1>
24
</body>
25
</html>

五、文本样式

1、对齐文本 text-align:center
2、文本方向 direction:ltr从左到右,rtl右左
3、字符间距 letter-spacing:10px
4、首行缩进 text-indent
5、文本装饰 text-decoration:underline下划线, line-through删除线
6、文本大小写转换 text-transform:capitalize, lowercase小写, upercase大写

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>文本样式上</title>
6
7
</head>
8
<style type="text/css">
9
    .class3{
10
        text-align:center;
11
        direction: rtl;
12
        letter-spacing:10px;/*字母或字间距*/
13
        word-spacing: 3px;/*单词间距*/
14
        text-indent: 20px;
15
        text-decoration: line-through;
16
        text-transform: capitalize;首字母自动大写
17
    }
18
</style>
19
<body>
20
<p class="class3">文本123456789</p>
21
</body>
22
</html>

六、过渡、动画

所谓过渡即渐变效果,动画类似,注释部分为过渡。
hover为动画hover效果:鼠标放到此处,出现动画。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>CSS过渡&动画</title>
6
    <style type="text/css">
7
        p{
8
            width: 100px;
9
            height: 200px;
10
            background-color: aqua;
11
        }
12
        /*p:hover{*/
13
        /*    width:200px;*/
14
        /*    height: 300px;*/
15
        /*    background-color: #2066ff;*/
16
        /*    transition-delay: 200ms;*/
17
        /*    transition-duration: 500ms;!*渐变时间*!*/
18
        /*    !*transition-property: background-color;!*颜色渐变,其他立刻*!*!*/
19
        /*    transition-timing-function: linear;*/
20
        /*    !*linear变化速度线性;ease:慢快慢;ease-in:下凹慢快;ease-out上凸快慢;ease-in-out慢快慢,效果更明显*!*/
21
        /*整体效果:100*200--》200*300,颜色变化,有渐变效果*/
22
        /*}*/
23
        p:hover{
24
            animation-duration: 500ms;
25
            animation-delay: 200ms;
26
            animation-name: dongHua;
27
            animation-iteration-count: infinite;/*循环播放*/
28
            animation-iteration-count: 3;/*播放3次*/
29
            animation-direction: alternate;/*以反方向运行大小大小效果*/
30
31
32
    }
33
    @keyframes dongHua {
34
        from{
35
            width: 100px;
36
            height:100px;
37
            background-color: #ff2687;
38
        }
39
        50%{}
40
        75%{}
41
        to{
42
            width: 200px;
43
            height:200px;
44
            background-color: #ff2539;
45
        }
46
47
    }
48
</style>
49
</head>
50
<body>
51
<p></p>
52
</body>
53
</html>

七、盒子模型

盒子模型是css样式中最常用的一种模型,简单来说是用来排版页面上的结构,样式。只是用html+CSS切图的话,肯定少不了用盒子模型。盒子模型中有以下几个常用的属性:
content 内容
padding 内边距
border 边框
margin 外边距,距离页面边界的距离
div 常用标签,用来排版,设计结构,无其他作用

这是盒子模型的标准结构,以下给一个简单示例。

1
```css
2
<!DOCTYPE html>
3
<html lang="en">
4
<head>
5
    <meta charset="UTF-8">
6
    <title>盒子</title>
7
    <style type="text/css">
8
        .class1{
9
            border: 1px solid rebeccapurple;
10
            background-color: aqua;
11
            /*padding-top: 20px;*/
12
            /*padding-bottom: 20px;*/
13
            padding: 20px 10px;/*上下20,左右10(top,bottom,left,right)*/
14
            /*margin: 500px;*/
15
            background-clip: content-box;/*只在文本处加背景颜色*/
16
        }
17
    </style>
18
</head>
19
<body>
20
<div class="class1">文本</div>
21
</body>
22
</html>