第三天CSS-CSDN博客

本文链接：https://blog.csdn.net/runlonglong/article/details/124698629

本文详细介绍了CSS的基础知识，包括其作用、语法结构以及与HTML的结合使用。CSS用于设置页面的样式效果，通过选择器选择要作用的HTML元素。样式表可以内联、内部或外部引用，优先级遵循就近原则。讲解了标签选择器、ID选择器和类选择器的使用，还涉及伪类、字体样式、文本样式、行高、背景属性和列表样式等。此外，还探讨了CSS的优先级和伪类选择器，如`:hover`和`:active`。

摘要由CSDN通过智能技术生成

1：css是什么

html主要是用来把需要在网页展示的文本进行封装的。可以使用html的标签对封装的数据进行简单的样式设定，但是html标签的样式太过于单一。在后期的发展中，慢慢形成html标签只对要显示的数据进行封装，而把数据的样式效果设定交给了CSS。

html是用来封装数据，CSS是用来给页面数据进行样式效果设定。

CSS：层叠样式表：主要是负责页面的样式效果设置。（Cascading Style Sheet）

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

2：css语法

Css注释 /* 我是注释的内容 */

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明；

如：selector {declaration1; declaration2; ... declarationN }

选择器是最终需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（key）是设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

选择器 {

声明1;

声明2;

声明3;

……

}

即：

selector {

key: value；

----

}

案例：

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {

color:red; // 声明

font-size:14px;

}

3：css与html结合使用

1：内联样式、行内样式

在所有的html标签上都有style属性，这个属性就是专门用来书写CSS代码。

使用内联样式书写的css代码，直接作用于该标签。

CSS代码的书写格式：

CSS代码都是有key和value组成的声明。key可以从CSS手册查阅。而value可以由用户根据实际的效果进行调试。

在html标签中使用style属性书写CSS代码，如果是多个CSS属性值，需要在多个属性之间使用分号隔开。

2：内部样式

内联样式可以实现css的样式，但是如果在一个页面中有很多相同的标签都需要同一个样式，在各自的标签内写css肯定不行，效率太低，而且html和css一起使用，看起来很臃肿，没有做到内容与表现相分离，不建议使用。

可以在html文件中直接把CSS代码抽取出来，在head标签中书写style标签，然后在引用到某个html标签上。

3：外部样式

内部样式实现了同一页面中相同标签样式的统一，他是他的作用域仅仅是在一个页面，

如果在一个项目中，多个页面中有相同的标签，并且他们需要相同的CSS效果相同的时候，我们可以把CSS代码单独的抽取到一个独立的CSS文件中。在需要使用CSS代码的文件中引入这个CSS文件即可。

CSS文件中可以不用书写具体的style标签。而直接书写css代码。

引入css方式：

使用link标签引入：

在head标签中可以直接使用link标签引入外部的css文件

注意：link中的属性说明：

rel="stylesheet"表示连接的资源是一个样式表，即就是CSS文件,固定写法

type 表示连接的资源是文本资源，其中放的css代码，默认，可有可无

href表示资源的路径，css文件的地址

4：样式优先级

当样式发生冲突的时候，看css代码和标签的距离，哪个样式离标签最近，就会使用冲突的样式，--- 就近原则

其他的样式声明不受影响。样式进行叠加展示

4：css选择器介绍

选择器：表示当前的CSS代码要作用在具体的哪个html标签上。

下面介绍3个常用的选择器，id选择器，类选择器，标签名选择器

1：标签名选择器

见名思意，就是通过标签的名字，选择最终css代码要作用的标签

Div,span -- 选择所有的div和span

Div span -- 选择的是div下面的所有的span

2：id选择器

在html中，所有标签中都有一个id属性，可以根据这个id的属性值，来确定CSS代码到底要作用在哪个标签上。

id 选择器以 "#" 来定义。要求每一个html标签的id属性值必须要唯一。

语法：

#id属性值{

css代码

}

注意：html标签中可以书写id属性，要求在html页面上所有的标签的id值不能重复，如果定义重复，虽然不会影响CSS的效果，但是后期学习JavaScript和DOM技术动态根据id获取页面上的标签时就会出现错误。记住：id唯一

3：class选择器

由于页面上的标签的id一般不会重复，使用id选择器只能给某个标签设置样式，如果有多个标签需要相同的样式，或者不同的标签需要相同的样式，这时我们可以使用html标签中的class属性，这时我们在css代码中就可以根据这个class属性值来选择css代码要作用的html标签。每一个html标签都可以书写class属性。

语法：

.class属性值{

css代码

}