CSS学习笔记（初识）

（2）提高代码的可重用性和可维护性。文件后缀是.css。

3、css与HTML之间的关系

（1）HTML用于构建网页的结构

（2）CSS用于构建HTML元素的样式

（3）HTML是页面的内容组成，CSS是页面的表现

结构层 HTML

表示层 CSS

行为层 JS

4、导入CSS的方式

（1）内联方式

直接把CSS代码用style属性添加到开始标签中

金色字体

（2）内部样式

直接把CSS代码添加到头部的style标签中

（3）外部样式表

（4）导入式

优先级：行内样式>内部样式>外部样式>导入样式

5、CSS样式表特征

• 继承性

• 层叠性

• 优先级

6、CSS基础选择器

• 通用选择器，全局选择器(*)

• 可以与任何元素匹配

• 常用于设置一些默认样式

优先级最低

• 元素选择器

• HTML文档中的元素

p、b、div、a、img、body等

• 类选择器

• 如：.body{color:red;}

类名不能以数字开头

一个页面中class名字可以重复

• ID选择器

• #box{color：skyblue;}

id的名字不能重复ID属性是惟一的

• 合并选择器

• 语法：选择器1，选择器2，…{}

可以提取共同的样式，减少重复代码

7、CSS基础样式

• font-style 设置文本是否倾斜

normal（正常字体） 默认值

italic 斜体

如：

p{font-style:italic;} /* 倾斜 */

• font-family 定义文本使用某个字体

p{font-family:microsoft YaHei;}

可以设置多个字体，排名越靠前优先级越高 默认值由浏览器决定

• font-weight 指定文字的粗细

p{ font-weight:normal;} /* 默认值 */

p{ font-weight:bold;} /* 粗体 */

font-style 、 font-weight 、 font-size 、line-height 、 font-family

• 文本属性

• text-decoration 设置文字是否有修饰线，默认值是none

p{text-decoration:underline;} /* 指定文字的修饰线是下划线 */

p{text-decoration:overline;} /* 指定文字的修饰线是上划线 */

p{text-decoration:through;} /* 指定文字的修饰线是贯穿线，类似于删除标签的效果 */

常用text-decoration:none;来去除a标签的下划线

• text-indent 文本缩进

• 文本缩进属性是用来指定文本的第一行的缩进

也可以隐藏一个盒子中的文本

如

p{text-indent:2em} /* 首行缩进2个文字的大小 */

p{text-indent:-9999em;} /* 用来隐藏文本 */

1em和当前字体大小相等。如在谷歌浏览器中默认字体是16px， 那么，1em的默认大小是16px

• word-wrap 设置当前行超过指定容器的边界时是否换行

• 如果容器中的单词过长，超出了容器本身的宽度会造成长单词溢出

• word-wrap:break-word;可设置过长的文本自动换行。

• line-height 设置对象的行高（不允许使用负值）

normal 默认，设置合理的行间距

number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距

8、盒子模型

盒模型主要定义四个区域：内容（content）、内边距（padding）、边框（border）、外边距（margin）。

所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素在网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子模型特性：

• 每个盒子都有：边界、边框、填充、内容 4个属性；

• 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

• border 边框

border : border-width || border-style || border-color

注意：顺序不能错误。

在style属性为空的情况下，整个边框是不会出现的，不写width会有默认3像的值，不写颜色会默认为黑色。

border-radius: 左上角 右上角 右下角 左下角;

border-radius: 10px 40px; /* 左上角 和 右下角 是 10px 右上角 左下角 40 对角线 */

border-radius: 10px 40px 80px; /* 左上角 10 右上角 左下角 40 右下角80 */

border-radius: 10px 40px 80px 100px; /* 左上角 10 右上角 40 右下角 80 左下角 100 */

扩展：

table{ border-collapse:collapse; }

collapse 单词是合并的意思，通过该属性可以来设置一个细线表格

• margin 外边距

margin是围绕在元素边框周围的空白区域，会在元素外创建额外的空白区域，外边距是透明的

单边设置：

margin-top/right/bottom/left:value;

value可取值为像素、%、auto、负值

外边框简写：

margin:value(四个方向相同);

margin:value(上下) value(左右)；

margin:value(上) value(左右) value(下);

margin:value(上) value(右) value(下) value(左)

扩展1：盒子水平居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

• 必须是块级元素。

• 盒子必须指定了宽度（width）

• 然后就给左右的外边距都设置为auto，就可使块级元素水平居中。

.header{ width:960px; margin:0 auto;}

扩展2：清除元素的默认内外边距

为了更方便地控制网页中的元素，制作网页时，可使用如下代码清除元素的默认内外边距：

• {

padding:0; /* 清除内边距 */

margin:0; /* 清除外边距 */

}

Tips： 行内元素是只有左右外边距的，是没有上下外边距的。 内边距，在ie6等低版本浏览器也会有问题。我们尽量不要给行内元素指定上下的内外边距就好了。

扩展3：外边距合并

（1）、相邻块元素垂直外边距的合并（外边距垂直塌陷）

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方法：避免就好了。一般都是为一个元素添加margin-top或者 margin-bottom ，不必同时为两个元素同时加。

（2）、嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方案：

（1）可以为父元素定义1像素的上边框或上内边距。

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

[外链图片转存中…(img-8o0HFDlU-1712871641199)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

资料领取方式：戳这里前往获取