【HTML】CSS样式（一）

上一篇我们学习了表单的基本组件，相信大家对于表单有了初步了解并使用。

本篇我们主要来认识一下CSS是什么，有什么作用，并且如何使用。

详细介绍了各个分类的用法和示例。

介绍了基础选择器使用。

下一篇我们将会学习CSS中的扩展选择器。

喜欢的

【点赞】【关注】【收藏】

1、先来认识CSS

CSS，层叠样式表，利用它可以对页面进行美化，精确的定制页面

优点：

• 丰富的修饰样式
• 内容与样式分离，方便项目开发
• 重复利用，提升开发效率
• 实现页面的精确控制

语法：

选择器{

        属性1:属性1值；

        属性2:属性2值；

        ......

}

规范：

 

2、CSS分类

根据使用方式分为三类：

外部样式表、内嵌样式表、行内样式表

三种样式表的优先级：

行内样式表>内嵌样式表>外部样式表

2.1 外部样式表

跟html文件分开的一个css文件，使用的时候在html文件的head标签中使用link标签引入

语法：

<link rel="stylesheet"  type="text/css"  href="css文件路径" />

示例： 

2.2 内嵌样式表

将样式表内容直接放在head标签中，通过style来定义。

语法：

<style>
    选择器{
        属性:属性值;
        ....
    }
</style>

示例：

 2.3 行内样式表

在html的内容标签中添加style属性来定义，style属性的值就是对应CSS3属性和属性值

语法：

<li style="属性1:属性值1;属性2:属性值2;......">首页</li>

示例：

 3、CSS基本选择器

基本选择器分为：

标签选择器、类选择器、ID选择器

优先级：ID选择器>类选择器>标签选择器

使用场景：

• 标签选择器：单独针对某一类要求同样样式的标签时
• 类选择器：不同的标签，但是样式相同或者有某些相同的样式
• ID选择器：独立的标签，样式只有某一个标签来使用时

 3.1 标签选择器

语法：

<style>
    标签名{
        属性:属性值;
        ....
    }
</style>

示例：

 

3.2 类选择器 

语法：类名前面加点 .

<style>
    .类名{
        属性:属性值;
        ....
    }
</style>

示例：

 

注意：类名可以重复 

3.3 ID选择器

语法：id前面加#

<style>
    #ID{
        属性:属性值;
        ....
    }
</style>

示例：

 

好了，就到这里吧，大家抓紧时间去学习吧😄
后续内容持续更新中，创作不易，给个三连支持一下哦😘
祝各位看官万福金安😊

---

⭐️徒手摘星，爱而不得，世人万千，再难遇我。⭐️