liuliuya's blog
0%

css入门

发表于 更新于 分类于

前端课程

CSS介绍与基本使用

css介绍：

​ CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示 HTML 元素的计算机语言

css作用：

​ 可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
​ 让页面更加美观

使用方法：

  • 直接写在标签style属性
  • 写在style 标签内
  • 使用外部 .css 文件

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    优先级：行内样式 > 内部样式 = 外部样式（就近原则）-->

    <!--    外部样式：写在head中，通过link标签来进行引入  rel表示的引入的是css样式表  href里面填写的是文件路径
    优点：完全实现了结构分离，可以控制整个站点
    缺点：需要引入-->
    <link rel="stylesheet" href="01-css的引入.css">

    <!--内部样式：在head中增加style，然后给这个标签设置样式
    优点：结构分离
    缺点:并没有彻底实现结构分离，只能控制当前页面-->
    <style>
        p {
            color: blue;
        }
    </style>

</head>
<body>
<!--行内样式：直接写在标签中
缺点：没有实现样式结构分离，只能控制一个标签
优点：书写方便，权重高-->
<p style="color:green">今天开始学习css</p>
<p>今天开始学习css</p>


</body>
</html>

CSS选择器

css选择器介绍:

作用: 指定元素添加样式，精准且效率高

优先级: 选择器有权重差别，当多个选择器同时选择一个标签引发冲突时，需要看优先级

选择器分类:

简单选择器：
id选择器 class选择器 标签选择器
复杂选择器：
子代选择器
后代选择器
兄弟选择器
相邻选择器
群组选择器
属性选择器
伪类选择器

简单选择器:

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
38
39
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--简单选择器：id，class，标签选择器-->
<!--    优先级：id选择器 > class选择器 > 标签选择器-->

    <style>
         /*标签选择器*/
        p {
            color:red;
        }

    /*     class选择器，针对每一个元素，都具有class属性，至于属性值是需要自定义的
    通过class去选中它，.作为标识符， 名字
    class属性值能够重复*/
         .p1 {
             color:yellow;
         }

    /*     id选择器 #作为标识符   id属性值具有唯一性*/
         #p2 {
             color: skyblue;
         }

    </style>
</head>
<body>

<p>这是基础选择器</p>
<p class="p1">这是基础选择器1</p>
<p id="p2" class="p1">这是基础选择器2</p>
<p>这是基础选择器3</p>
<span class="p1">文本1</span>
<span>文本2</span>

</body>
</html>

复杂选择器：

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*层次选择器  颜色可以被继承*/

        /*复杂选择器*/
        /*子代选择器*/
        p > span {
            color: red;
        }

        /*    后代选择器(孙辈，子代）*/
        /*div span{*/
        /*    color:green;*/
        /*}*/

    /*    兄弟选择器(向下运行）*/
        .p1 ~ p {
            color: blue;
        }

    /*    相邻选择器  相邻的一个*/
        .p1 + p {
            color: rosybrown;
        }

    /*    属性选择器 针对name 可以指定name */
        span[name='sp'] {
            color: saddlebrown;
        }

    /*    群组选择器*/
        div,p,.p1 {
            color: purple;
        }

    /*    全选选择器 优先级最低*/
    * {
        font-size: 16px;
    }
    </style>
</head>
<body>
<div>
    <p>这是基础选择器</p>
    <p class="p1">这是基础选择器1</p>
    <p id="p2" class="p1">这是基础选择器2</p>
    <p>
        <span>这是基础选择器3</span>
    </p>
    <span class="p1" name="sp">文本1</span>
    <span name="sp1">文本2</span>
</div>
</body>
</html>

伪类选择器：

  • link 未访问时的状态
  • hover 鼠标悬浮时的状态
  • active 鼠标点击时的状态
  • visited 鼠标点击松开后的状态
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*伪类选择器，主要作用于a标签*/
        /*未访问时*/
        a:link {
            color: rosybrown;
        }

    /*    鼠标悬浮时*/
        a:hover {
            color: blue;
        }

    /*    鼠标点击时*/
        a:active {
            color: red;
        }

    /*    鼠标点击过后*/
        a:visited {
            color: gray;
        }

          /*  id个数不同，     id优先*/
      /*id相同，     class优先*/
          /*id,class相同，    标签*/
    </style>
</head>
<body>
<a href="#">百度一下</a>

</body>
</html>

优先级总结:

  • 复杂选择器

    id 个数不等，id越多，优先级越高
    id相同，class越多，优先级越高
    id，class都相同，则标签越多，优先级越高

  • 普通选择器 id > class > 标签

  • 都相同的情况下满足就近原则

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
        /*    字体样式*/
        /*    字体类型*/
            font-family: 幼圆;
        /*    字体粗细 300-700(bold)*/
            font-weight: 700;
        /*    字体大小*/
            font-size: 30px;
        /*    字体样式  斜体*/
            font-style: italic;
        /*    颜色*/
            color: purple;

        /*    字体样式大小写：针对英文*/
        /*    font-variant: all-small-caps;  全部大写*/
        /*    font-variant: all-petite-caps;   短身大写*/
        /*    font-variant: full-width;  对短*/

        /*    复合样式*/
        /*    顺序：字体样式 字体大小写 字体粗细 字体大小 字体类型*/
            font:italic 300 24px 仿宋;


        /*    文本样式*/
        /*    对齐方式  居中对齐*/
        /*    text-align: center;*/
        /*    缩进两个中文长度  em相当于中文字符的宽度的倍速*/
            text-indent: 2em;
        /*   字体行高*/
            line-height: 40px;
        /*    词距*/
            word-spacing: 70px;
        /*    字距*/
            letter-spacing: 15px;
        /*    下划线*/
        /*    text-decoration: underline;*/
        /*    删除线*/
            text-decoration: line-through;
        }

        a {
        /*    取消下划线*/
            text-decoration:none;
        }
    </style>
</head>
<body>
<p>这是开始给字体 设置样式了  Rs ss</p>
<a href="#">百度一下</a>
<p>这是文本样式</p>
</body>
</html>

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
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            /*    背景颜色 transparent 透明*/
            background-color: purple;
            /*    背景图片*/
            background-image: url("../model1/1.jpg");

            /*    背景图片大小*/
            background-size: 100px 100px;
            /*    取消平铺 no-repeat*/
            background-repeat: no-repeat;
            /*    背景定位 居中 center top bottom right left*/
            background-position: center;

            /*    复合样式*/
            /*    背景颜色 背景图片 是否需要平铺 背景定位/背景大小*/
            background: transparent url("../model1/1.jpg") no-repeat center/100px 100px;


        /*    边框*/
            border: 1px blue solid;
        /*    边框弧度*/
        /*    border-radius: 10px;*/
            border-radius: 15%;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>