目标

路径

CSS是什么

CSS 通常称为CSS样式或层叠样式表，又称之为网页的美容师，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（高宽、边框样式、边距等）以及版面的布局等外观显示样式。

CSS可以使HTML页面更好看，CSS色系的搭配可以让用户更舒服，CSS+DIV布局更佳灵活，更容易绘制出用户需要的结构。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZfnYhci-1649405959961)(imgs/image-20210711194913360.png)]

CSS名词解释

CSS (Cascading Style Sheets) ：层叠样式表

举例：给同一个标签table添加高度、宽度和背景颜色等

CSS书写格式

一般标签都可以添加一个style属性来书写样式给标签添加一些特殊效果。

CSS使用的基本语法：

注意点：

1、 样式名 和 样式值 之间通过 ： 来隔开 （类似于Key:Value）

2、 多个样式之间使用 ; 隔开。

3、 一般复合样式 (border, font…) 值是多个，而多个值使用空格隔开。例如： border : 1px solid #000； 说明：px表示像素，是一种单位。

补充: 样式非常多，具体的样式名和样式值需要在api中去查询。在今天课程的最后我们会介绍一些常见的css样式。

需求：书写div，要求设置：字体为黄色，字体大小100px， 边框为 1px 实线 边框颜色为红色。

分析： 需要使用到的样式：

代码实现：

注意：上述像素px不能省略，省略就不会出现效果了

目标

路径

上面我们学会了书写css样式的基本语法，而要知道我们的html页面只能书写html标签。那么css可不可以写到html文件中呢？

如果可以，那么css可以写在html文件中的什么地方？

如果不写在html文件中，我能在当前html文件使用这些css样式么？

而我们接下来要做的就是对于这些问题的解决。也就是学习css样式和我们html文件的结合方式。

方式一：使用HTML标签的style属性（行内）

在html标签中，通过标签的style属性，在style属性中写css样式

问题：在实际开发中，一个页面中有很多div标签，那么基于这样一个情况，如果说有500个标签都是用如上同样的样式。当我们需要统一修改所有标签的文字颜色为黄色的话，那么需要一个一个的去改，这样是非常麻烦的，不利于后期的维护。

缺点：

1、html代码和css代码耦合在一起，样式过多后，难以维护；

2、冗余代码过多；

方式二：在head标签使用style标签设置（内部）

内部样式又称为内嵌式，是将CSS代码集中书写在HTML文档的head头部标签体中，并且使用style标签定义。

语法格式：

注意：

1）上述格式为固定格式，书写在head标签中；

2）使用style标签进行设置，type=”text/css”可以省略。

表示是层叠样式表，在中间放入css内容。

需求：新建一个html页面，在这个页面中书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线 边框颜色为蓝色。

分析：

背景颜色使用background-color属性名表示。

代码实现：

注意：可以发现，通过使用style标签的方式，当前页面如果要修改所有标签的样式的时候，那么只需要修改一处就行了。这样是比较方便的。

但是问题是：我们实际开发中有很多html页面。当项目中所有的html文件都需要使用这个页面中的样式的时候，这时，需要在每个html页面中拷贝一份相同的代码。而且，如果后期需要修改样式，需要每一个html文件都去修改。这样是非常麻烦的。

缺点： 代码的复用性低，无法实现多个页面的复用。

内嵌式CSS样式只对其所在的HTML页面有效，可以对多处标签统一设置样式，因此，仅设计一个页面时，使用内嵌式是个不错的选择。但如果是一个网站，不建议使用这种方式，因为他不能充分发挥CSS代码的重用优势。

方式三：在head标签中使用link标签（外部） 【开发主流方式】

外部样式又称为链入式，是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将样式连接到HTML文档中

语法格式：

注意：

1）rel="stylesheet"表示调用的是一种样式。告诉浏览器这里将采用一个样式表文件。简单来说就是告诉浏览器将采用什么样式来对下面的内容进行处理。**rel=“stylesheet” **不能省略。

2） href=“css文件路径” 表示引入的外部css文件的路径。

需求：书写多个div，设置样式为: 字体为红色，字体大小为100px, 背景色为黄色，边框为 1px 实线 边框颜色为蓝色。

步骤一：首先创建一个css文件。选中css样式文件夹，鼠标右击 New–》Stylesheet。

创建css文件,取名为demo.css

步骤二：然后将上面案例中的css样式拷贝到css文件中：

步骤三：在html文件中引入css文件的代码实现：

实现效果：

小结

在html页面中要使用css样式，有几种方式？

3种

目标

路径

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器

标签名选择器

标签名选择器：

语法格式：

代码示例：

小结

标签名选择器：

在css样式中使用标签中作为选择器的名字时

在html中只在使用该标签，就会按照css样式来显示

应用场景：

目标

路径

ID选择器

根据指定标签的id来设置css样式，作用于某一个特定的标签上。

说明：一个页面中要求id的属性值唯一（不能重复）

定义ID选择器语法格式：

使用：

需求： 页面上多个div，让第二个div：字体红色 字体大小50px，边框为1px，实线，红色

代码示例：

注意：页面的id值不允许重复。作为一个合格的开发者，只要看到id，第一反应都应该是id的值不能重复。如果一个页面中含有多个div的id属性值一样的情况，并且以该属性值作为选择器名，那么多个div都会改变样式。

小结

目标

路径

Class选择器

ID选择器只能作用单个标签。而class选择器可以作用在单个或者多个标签上。

语法格式：

使用：

需求：页面上有多个div，让第二和第三个div以同样的样式去显示： 字体颜色红色，50px字体大小，边框1px 实线 红色。

代码实现：

小结

目标

路径

组合选择器

应用场景：如果页面不同的选择器想使用相同的css样式。

语法格式：

例如：

说明：上述表示id是div的选择器和标签名是p的选择器组合在一起。

需求：让页面所有的div和span都以同样的样式去显示：字体颜色黄色，50px字体大小，边框1px 实线 红色 。

分析：

这里要求是将所有的div和span都改变样式，其实我们使用class选择器可以实现，但是弊端必须给标签都添加class属性，比较麻烦，所以这里可以使用组合选择器来实现。

代码实现：

注意：组合选择器可以使用任意的选择器来组合，个数可以任意个。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Gn1Mx2Gg-1649405959967)(imgs/33.bmp)]

小结

组合选择器的使用场景：

目标

路径

关联选择器

准备代码：

需求：让id为a的标签下的所有的span以同样的样式去显示： 字体颜色黄色，50px字体大小，边框1px 实线 红色

分析：其实这能通过我们之前学习的class选择器解决，但是这里提供另一种方式，也就是我们这里的关联选择器。可以通过id为a的标签找到下面的所有的span标签，也就是说，关联选择器更加强调的是通过父亲查找孩子。看下面的语法格式和代码演示。

语法格式：

代码演示：

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oRBxzrGb-1649405959968)(imgs/34.bmp)]

目标

路径

属性选择器

属性选择器是在原有选择器的基础上，通过标签的属性，再次对标签进行筛选。

语法格式：

说明：这里的选择器名一般都是标签名选择器。

需求：给页面所有input标签的type属性为text的标签加上一个边框：边框宽度2px, 实线, 蓝色框。

代码示例：

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g5AMnkvn-1649405959969)(imgs/35.bmp)]

小结

css中的基础选择器：

css中的扩展选择器：

目标

路径

边框和尺寸：border、width、height

1、border ：设置边框的样式

格式：

例如：

表示1像素实边红色

边框样式取值：solid 实线，none 无边，dashed虚线

2、width、height：用于设置标签的宽度、高度

格式：

需求：给页面某个div设置：宽度200像素，高度200像素，1像素实线黑色的框。

代码示例：

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XmRbo6Xy-1649405959969)(imgs/37.bmp)]

注意：在html中只有块级标签(div、p、ul等)才有高度和宽度，其他标签没有的。

转换：display

HTML提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。

1、块标签：以区域块方式出现。每个块标签独自占据一整行或多整行。

2、行内元素：不必在新的一行开始，同时也不强迫其他元素在新的一行显示。

在开发中，如果希望行内元素具有块元素的特性，或者希望块元素具有行内元素的特性。也就是希望行内元素和块元素之间相互转换。需要使用display属性将行内元素转换成块级元素 或者将块级元素转换为行内元素。

语法结构：

需求：定义几个行内元素span，其中将一部分转换为块级标签，进行对比。

代码示例：

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eG7Ga5SB-1649405959969)(imgs/38.bmp)]

css样式的优先级： 行内样式 > 内部样式|外部样式

字体：color、line-height

语法格式：

需求：书写两个div标签，然后在div标签中写两个span标签。在span标签中演示字体颜色和行高。

分别给2个div设置style样式：height: 50px; width: 200px; border: 1px solid #000;

代码示例：

注意： 给元素设置行高一般设置为当前父容器的高度以便于让当前的元素在父元素中纵向居中显示。

举例：上述第二个div作为父标签的高度是50px,而他的子标签span的行高也设置为50px,这样可以保证当前span元素居中显示。

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BDNzRNFy-1649405959970)(imgs/39.bmp)]

背景：background-color，background-image

语法格式：

需求：给body设置浅灰色(#eee)的背景色。在body中定义1个div标签，给div标签添加宽度、高度、设置背景颜色为白色(#fff)并加边框，最后设置背景图片，演示背景平铺方式。

代码示例：

小结

常用css样式：

边框

尺寸

转换

意义：实现块标签和行内标签之间的互相转换

字体

背景

目标

路径

盒子模型的介绍

我们可以把每一个标签都看成是一个盒子，每个盒子都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。

盒子模型的组成跟我们生活中也是一样的：例如在淘宝上买东西，我们的商品和快递盒子之间可能是有距离的。而快递盒子之间也可能存是有距离的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMwQ3FYI-1649405959972)(imgs/44.bmp)]

说明：

1）元素的内容相当于快递盒子中的东西。内边距padding相当于盒子和东西之间的空隙。边框border相当于盒子的边框。外边距margin相当于当前盒子和其他快递盒子之间的距离。

2）能够影响当前某一个盒子的大小主要是：元素的内容、内边距padding、边框border。而外边距margin不会影响当前盒子的大小。

盒子模型的相关属性

盒子模型相关的属性：border（边框）、padding（内边距）、margin（外边距）

边框：border

内边距：padding

内边距四边距离定义：

使用css给上述四个属性赋值，可以按照顺时针理解进行赋值

给盒子的内边距的属性赋值如下所示：

给所有h1元素的各边都有10像素的内边距

还可以按照上、右、下、左的顺序分别设置各边的内边距

问题：有时候想设置h1上下的内边距为10px，左右不想设置，那怎么实现呢 ？

外边距：margin

使用方法同内边距一致！

案例：演示盒子模型

1、 先创建一个div，它的内部也创建一个div，两个div同时设置边框 宽度1像素 实线 黑框

2、 外层div高度宽度各500像素，内部div高度，宽度各280像素，背景色为红色

3、 设置内部div的外边距100px，内边距为10px

代码实现：

实现效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMt7sWkE-1649405959972)(imgs/47.bmp)]

说明：

上述含有两个div，一个标签看作一个盒子。所以上述可以看作两个盒子模型。通过谷歌浏览器可以查看盒子模型。

在谷歌浏览器中按f12即可查看盒子模型。

内部div的盒子模型如下图所示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-87XzxdUC-1649405959973)(imgs/48.bmp)]

总结：面试可能会被问到

1、 盒子模型有哪些部分组成

元素的内容(高度、宽度)、内边距（padding）、边框（border）和外边距（margin）组成 。

2、 盒子模型大小受哪些部分影响

盒子模型的大小受元素的内容(高度、宽度)、内边距（padding）、边框（border）的影响，不受外边距的影响

3、外边距影响在页面中的位置

目标

路径

需求：使用盒子模型修改注册页面

案例效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yGyuN6ZT-1649405959973)(imgs/image-20210711215924032.png)]

案例步骤

使用盒子模型修改注册页面的步骤：

1、给body添加背景图片 regist_bg.jpg

2、用一个div包裹form表单，设置div宽度30%、高度500px，背景为白色，边框实线 5px 颜色：#ccc

3、设置外边距上下100px，左右auto

4、设置内边距padding-left=150px ，padding-top=75px;

5、设置行高30px；

案例代码

代码实现：