✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！

📃个人主页：@每天都要敲代码的个人主页

🔥系列专栏：Web前端

💬推荐一款模拟面试、刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习

目录

一：CSS

1. HTML引入CSS样式的三种方式

2.  HTML引入CSS样式

第一种方式：内联方式

第二种方式：样式块方式

第三种方式：引入外部独立CSS文件

二：常用样式总结

结束语

一：CSS

1. CSS概述

1、什么是CSS，有什么作用？
（1）CSS(Cascading Style Sheet)：层叠样式表语言。
（2）CSS的作用是：
        修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。
        CSS好比是HTML的化妆品一样！
（3）HTML还是主体，CSS依赖HTML；CSS的存在就是修饰HTML，所以新建的文件还是xx.html文件。

2、在HTML页面中嵌套使用CSS的三种方式：

    第一种方式：

        在标签内部使用style属性来设置元素的CSS样式，这种方式称为内联定义方式。
        语法格式：

    第二种方式：

        在head标签中使用style块，这种方式被称为样式块方式。
        语法格式：           

           选择器 {                  样式名 : 样式值;                  样式名 : 样式值;                  .....             }    

    第三种方式：

        链入外部样式表文件，这种方式最常用。（将样式写到一个独立的xxx.css文件当中，在需要的网页上直接引入css文件，样式就引入了）
        语法格式：           

        这种方式易维护，维护成本较低。

2.  HTML引入CSS样式的三种方式

第一种方式：内联方式

（1）style的参数可以是：
                width 宽度样式
                height 高度样式
                background-color 背景色样式
                display 布局样式（none表示隐藏，block表示显示，默认是显示）
（2）还可以有边框，需要三个参数：

        border-width(边框宽度)、border-style(边框线)、border-color(边框线颜色)

第二种方式：样式块方式

（1）id选择器：使用id选择器，不能够重复使用，因为id是唯一性标识，每次使用都要重新编写代码，使用时前面加上#：#id

语法格式：

                #id{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }                    

 #username{font-size: 30px;color: orangered;}你好，123

（2）标签选择器：使用标签选择器，不够灵活，只要我们使用了这个标签，所有的样式就都是相同的；标签选择器作用的范围比id选择器广，使用时前面什么都不用加：标签名

语法格式：

                标签名{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }                 

div{width : 100px;height: 100px;background-color: black;border: 1px solid red}

（3）类选择器：使用类选择器，相对比较灵活，只要是类名相同就是同一类，就可以使用同一种样式；使用时前面加上.：.类名

语法格式：

                .类名{
                        样式名 : 样式值;
                        样式名 : 样式值;
                        样式名 : 样式值;
                        ....

                     }               

.myclass{width: 60px;height: 30px;border: 1px solid red;color: darkred;}姓名 
爱好高中本科硕士

第三种方式：引入外部独立CSS文件

固定格式：

百度

/* 这是一个标签选择器同一个目录下创建，独立的.css文件，用来去除下划线*/a{text-decoration: none;}

二：常用样式总结

1. 边框

div{border : 1px solid red;}div{border-width : 1px;border-style : solid;border-color : red;}

2. 隐藏

div{display : none;}

3. 字体

div{font-size : 12px;color : red;}

4. 文本装饰

a{text-decoration : none;}a{text-decoration : underline;}

5. 列表

ul{list-style-type : none;}

6. 设置鼠标悬停效果

:hover

7. 定位

div{position : absolute;left : 100px;top : 100px;}

8. 鼠标小手

div{cursor : pointer;}

9. 列表样式

ul{list-style-type: none;}
安徽
阜阳
太和

10. 绝对定位（定的是左上角的点）

#mydiv{background-color: red;border: 1px black solid;width: 300px;height: 300px;position: absolute;left: 100px;top: 100px;}

结束语

今天的分享就到这里啦！快快通过下方链接注册加入刷题大军吧！

各种大厂面试真题在等你哦！
💬刷题神器，从基础到大厂面试题👉点击跳转刷题网站进行注册学习