你好赵伟

这个屌丝很懒，什么也没留下！

热门标签

前端CSS样式零基础教学总结，UI、前端开发都适用

作者：你好赵伟 | 2024-03-06 13:40:43

踩

文章目录

1.CSS介绍
2.css的基本使用

1.CSS介绍

CSS样式学习宝典，关注点赞加收藏，防止迷路哦

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

web项目开发中css的位置
css主要一般都是由前端开发工程师,或者UI设计师完成的.
css3是目前的最新版本

学习工具
学习css一般有三种工具提供给我们开发:

代码编辑器本身一般自带提示或者语法提示.
css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.
http://css.doyoe.com
浏览器也内置了一些css辅助工具给我们学习和开发.
F12,或者Ctrl+shift+i,或者鼠标右键,检查代码

css的基本语法
格式:
选择符{
样式属性: 属性值;
样式属性: 属性值属性值 …;
}

选择符{样式属性: 属性值;样式属性: 属性值属性值 …;}

注意:

选择符主要是告诉浏览器,接下来花括号里面样式给哪一个标签或者哪一批标签添加外观的,在行内样式中,不需要加选择符
样式属性主要是告诉浏览器, 给指定的标签添加什么样的外观,样式属性在同一个花括号里面或者同一个标签中,是唯一的.如果出现重复的话,在浏览器产生覆盖效果.
属性值主要是告诉浏览器,给指定标签添加的指定外观是什么效果,一般如果没有指定样式,浏览器内部都会有对应的默认值,写上属性和属性值以后就会覆盖默认值.属性值也是唯一的.
多个属性值的情况下,必须使用英文的空格隔开.
css中所有的代码,都不需要缩进或者换行.

注释
css中也有注释,注释的目的是为了解释代码的用途或者作用.方便其他开发者更好的了解当前的代码.
/*
多行注释, 这里的内容就不会被显示或者不会被浏览器执行.
*/

单行注释
/* 字体颜色: 白色; */

2.css的基本使用

css在使用过程中,主要就是嵌套进网页中进行使用的.使用过程中,一般有三种引入方式:

（1）行内样式

主要在开始标签中, 通过style属性来编写样式.在工作中,行内样式是使用频率最少的.

一般都是将来通过来javascript来控制的样式才会使用行内样式.
在这里插入图片描述

（2）内部样式

主要通过在head的内部子标签style标签中编写css样式.

在开发中,内部样式主要都是编写在html网页内部,但是开发中一个web项目往往由多个html网页组成.
在这里插入图片描述

（3）外部样式

主要是在css文件中编写css样式, 然后在head的子标签link标签的href属性中指定css路径引入到网页中进行“导包”使用.

创建html网页,编写代码:
在这里插入图片描述

（3）css优先级的 6大分类

通常可以将css的优先级由高到低分为6组：

第一优先级：无条件优先的属性只需要在属性后面使用**！important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。
第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
第三优先级：由一个或多个id选择器来定义。例如，#id{margin:0;}会覆盖.classname{margin:3pxl}
第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如.classname{margin:3px}会覆盖div{margin:6px;}
第五优先级：由一个或多个类型选择器定义。如div{marigin:6px;}覆盖*{margin:10px；}
第六优先级：通配选择器，如 * {marigin:6px;}

（4）css优先级的优先顺序

Inline style（内联样式） > Internal style sheet（内部样式） > External style sheet（外部样式）

   优先级:
        继承 0
        标签div 1
        伪类选择器 10
        属性选择器 10
        类选择器 10

        id选择器 100
        内联样式优先级 1000
        !important 最牛逼 10000
        相同优先级的,后面的覆盖前面的，数值越大越优先
1
2
3
4
5
6
7
8
9
10
11

！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 > 继承选择器

各项示例:
内联样式：写在标签属性style的样式，如

ID选择器，如#id{…}
类选择器，如 .class{…}
属性选择器，如 input[type=“email”]{…}
伪类选择器，如a:hover{…}
伪元素选择器，如 p::before{…}
标签选择器，如 input{…}
通配选择器，如 *{…}

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css学习 css的三种引入方法</title>

    <!-- 2.内嵌样式 -->
    <style>
        p
        {color:blue;}

    </style>
    <!-- 外部引入 -->
    <link href="my.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <p>今天学习css</p>
    <!-- 1.行内样式 -->
    <p style="color:tan;">今天学习css</p>
    <p>我们很开心</p>
    <a href="">我是链接</a>
</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

引入方式一：行内样式，优先级最高，当有其他样式与行内样式冲突时，以行内样式为准
直接在标签中通过style属性来编写样式
在这里插入图片描述

引入方式二：内嵌样式
主要通过head标签中的style字标签来编写样式
选择p标签，给所有的p标签都施加该样式
在这里插入图片描述

结果：内嵌样式不会改变行内样式结果，优先级没有行内样式高。其他未设置行内样式的p标签，被施加了该样式
在这里插入图片描述

引入方式三：外部样式
单独创建.css文件来编写样式，在head的子标签 link中通过href=''引入
在这里插入图片描述

（5）常用选择器

万能选择符*
在工作中, 星号基本不用, 如果有使用的话,基本就是用在页面的外观初始化时.

* { /* 代表网页中的所有元素 */
    color: blue;
}
1
2
3

标签选择符
也叫元素选择符,可以指定同一种名称的标签的外观效果,例如,p,h1,a,li在css中都是标签选择符
在这里插入图片描述

ID选择符
给指定的标签指定id值,把这个id值作为选择符,左边加上#,就可以在css中给这个标签[html元素]加上样式了.
在这里插入图片描述

class类选择符
通过标签的class属性值可以对页面中的标签进行分类, 然后在css样式中,使用.分类名作为选择符,可以给指定分类的所有标签增加样式外观
在这里插入图片描述

案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用选择器</title>

    <style>

        /* 标签选择器*/
        h1
        {color:cyan}
        /* 类选择器   点 类名  选择*/
        .one
        {color:green;}
        /* ID选择器   # id名  选择 */
        #two
        {color:red;}

        /* 组合选择器 */
        h1,h2,h3,h4
        {color:goldenrod;}

        /* 越具体指定,优先级就越高 */
        h1.one
        {color:gray;}        
        h2#two
        {color:greenyellow;}

    </style>

</head>
<body>
    <!-- 
    标签选择器 :  指定的是哪一些标签
    类选择器   :  指定的是哪一类标签
    ID选择器   :  指定的是哪一个标签 
    -->
    
    <h1>1号标签111</h1>
    <h1 class="one" >1号标签222</h1>
    <h2 id = "two">2号标签333</h2>
    <a href="" class="one">我是连接</a>
    <span id ="two">我是span</span>
    <h3>我是h3标签</h3>
</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

优先级顺序
！important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
id选择器是特指一个，不要多个元素设置相同id。如果要对多个元素相同配置，那就用类选择器或其他

!important 加在颜色后面，分号前面
在这里插入图片描述

过滤越具体，优先级越高
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器的优先级</title>
    <style>
        font
        {color:greenyellow;}
        .one
        {color:blue;}
        #two
        {color: indigo;}
        font
        {color:greenyellow !important;}    /*注意 !important 的位置*/

    </style>
</head>
<body>
    <!-- 
        !important <- 行内样式 <- ID选择器 <- 类选择器 <- 标签选择器 
        大原则: 泛指的元素优先级低, 特指的元素优先级高 , 越具体优先级就越高 
    -->
    <font style="color:tan;" class="one" id="two"> 选择器的优先级 </font>
    
</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

关系选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 关系选择器 </title>
    <style>
        /*  多行注释  */
        ul li   /* 包含选择器/后代选择器 */
        {color:darkslateblue;}
        ul>li   /* 父子选择器 */
        {color:yellow;}
        ol+li   /* 相邻选择器 特指下面一个*/
        {color:green;}
        ol~li   /* 兄弟选择器 特指下面一堆*/
        {color:deeppink;}
    </style>

</head>
<body>

    <ul>
        <li>动漫频道</li>
        <li>学习频道</li>
        <li>直播频道</li>
        <li>游戏频道</li>
        <ol>
            <li>少儿频道</li>
            <li>智慧树,大风车</li>
            <li>老年人频道</li>
        </ol>
        <li>授课直播</li>
        <li>亚洲捆绑</li>
    </ul>
    
</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

包含选择器，包含ul下的所有元素
在这里插入图片描述

父子选择器，只包含ul下的li
在这里插入图片描述

相邻选择器，向下指定
在这里插入图片描述

兄弟选择器，ol下面一堆li
在这里插入图片描述

下面的ol不被选择
在这里插入图片描述

属性选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性选择器</title>
    <style>
        input[name]
        {background-color: dodgerblue;}
        input[name=username]
        {background-color: red;}
        input[type=password]
        {background-color:yellow;}
        input[type=text]
        {background-color:green;}
    </style>
</head>
<body>
    <form action="" method="" >
        用户名: <input type="text" name="username" />
        <br />
        密码: <input type="password" name="nickname">
        <br />
        性别:<input type="radio" name="sex" value="m"> 男
        <input type="radio" name="sex" value="w"> 女
        <br />

        <input type="submit" value="点我">

    </form>
    
</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

选择input里面的具有name属性的
在这里插入图片描述

指定input里面具有name属性，并且name的值是username的

在这里插入图片描述

伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        /* 鼠标悬停的时候触发 */
        a:hover
        {color:teal;}
        /* 列表中第一个元素 */
        ul li:first-child
        {color:yellow;}
        /* 列表中最后一个元素 */
        ul li:last-child
        {color:green;}
        /* 列表中具体某一个元素 */
        ul li:nth-child(4)
        {color: red;}
        /*  偶数个2n / even   奇数个2n-1 / odd n不可换 */
        ul li:nth-child(even)
        {color:turquoise;}
        ul li:nth-child(odd)
        {color:violet;}


        /* 小练习 */
        /* 1.写一个table表格,设置一个背景色 */
        table
        {background-color:green;}
        /* 2.偶数行颜色为蓝色 */
        table tr:nth-child(2n)
        {background-color: blue;}
        table tr td
        {}
        /* 3.第3 , 6 , 9   3倍行颜色为黄色 */
        table tr:nth-child(3n)
        {background-color:yellow;}
        /* 4.鼠标滑过时,颜色变成红色 */
        table tr:hover
        {background-color: red;}

    </style>
</head>
<body>
    
    <a href="#"> 老男孩教育 </a>
    <ul>
        <li>马春妮</li>
        <li>孙坚</li>
        <li>晓东</li>
        <li>文东</li>
        <li>王伟</li>
        <li>好心</li>
        <li>蜂拥</li>
        <li>倩倩</li>
        <li>石超</li>
        <li>帅帅</li>
    </ul>

    <!--
    小练习:
        1.写一个table表格,设置一个背景色
        2.偶数行颜色为蓝色
        3.第3 , 6 , 9   3被行颜色为黄色
        4.鼠标滑过时,颜色变成红色
    -->

    <!--
    颜色设置:
        RGB:  三原色
            R:red     0~255 0~ff
            G:green   0~255 0~ff
            B:blue    0~255 0~ff
            
            1.使用rgb方式表达颜色:
                rgb(100,100,100)      三原色的设置    
                rgba(100,100,100,0~1) 三原色+透明度设置     透明度值越接近于1 越不透明    越接近于0越透明

            2.使用十六进制的方式表达颜色
                f -> 15 1111  ff -> 255  1111 1111
                纯红色: # ff 00 00   => #f00 (简写)
                纯绿色: # 00 ff 00   => #0f0 (简写)
                纯蓝色: # 00 00 ff   => #00f (简写)
                
                两个值不相同时不能简写

    -->
    <table border=1 style="width:600px;" cellspacing=0 cellpadding=0 >
        <tr>
            <td style="background-color: #800000;">111</td><td style="background-color:#0f0;">222</td><td  style="background-color:#00f;">333</td><td>444</td>
        </tr>
        <tr>
            <td  style="background-color:rgb(100,100,100);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td style="background-color:rgba(100,100,100,0.7);">111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
        <tr>
            <td>111</td><td>222</td><td>333</td><td>444</td>
        </tr>
    </table>

</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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

伪类选择器，冒号的形式：hover
鼠标悬停上去后触发，移走后恢复：
可以是标签，tr td ul li 等冒号 hover
伪类选择器种类：
在这里插入图片描述

ul的第一个元素
ul li:first-child
在这里插入图片描述

查找具体某一个li
ul li:nth-child(4)
在这里插入图片描述

找到偶数个li
ul li:nth-child(even)
在这里插入图片描述

奇数个li
ul li:nth-child(odd)
在这里插入图片描述

在这里插入图片描述

<!--
小练习:
    1.写一个table表格,设置一个背景色
    2.偶数行颜色为蓝色
    3.第3 , 6 , 9   3被行颜色为黄色
    4.鼠标滑过时,颜色变成红色
-->
1
2
3
4
5
6
7

在这里插入图片描述

设置表格中所有内容居中，可以将所有tr包含在tbody中，在tbody中设置
在这里插入图片描述

在这里插入图片描述

伪对象选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪对象选择器</title>
    <style>
        .name
        {color:goldenrod;}
        /* 在内容之前插入 */
        .name::before
        {
            content:"我问:";
            color:green;
        }

        /* 在内容之后插入 */
        .name::after
        {
            content:"肯定对!";
            color:magenta;
        }

        /* 鼠标选中后的样式 */
        .name::selection
        {
            background-color: mediumspringgreen;
            color: white;
        }



    </style>
</head>
<body>
    
    <span class="name">王文很帅,对不对?</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