-
创建一个 css 文件
-
使用 link 标签引入 css```
-
编写CSS和HTML代码
HTML:```
<meta charset="UTF-8"> <title>CSS</title> <link rel="stylesheet" href="cssDemo.css"><div>临考时，奉劝大家不要看不太吉利的电影，譬如《大红灯笼高高挂》</div>CSS:``` div { color: red; font-size: 20px; }
效果：
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效
3.4 多种样式优先级
行内样式 > 内部样式 > 外部样式
示例：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<link rel="stylesheet" href="cssDemo.css">
<style>
div {
color: green;
}
</style>
</head>
<body>
<div style="color: blue;">每天晚上睡觉的时候抱个烫烫的暖宝宝放在胸前，心里默念，热胀冷缩，热胀冷缩</div>
</body>
</html>
CSS代码：
div {
color: red;
}
可以看到绿色和红色被覆盖掉了，并未生效，字体为蓝色（行内样式）。
4. 选择器
=======
4.1 选择器功能
选中页面中指定的标签元素，要先选中元素, 才能设置元素的属性。
4.2 基础选择器种类
-
标签选择器
-
类选择器
-
id 选择器
-
通配符选择器
4.2.1 标签选择器
-
能快速为同⼀类型的标签都选择出来
-
但是不能差异化选择
示例：
<style>
p {
color: red;
}
div {
color: green;
}
</style>
<p>李白</p>
<p>李白</p>
<p>李白</p>
<div>韩信</div>
<div>韩信</div>
<div>韩信</div>
4.2.2 类选择器
-
差异化表示不同的标签
-
可以让多个标签的都使用同一个标签.
示例：
<style>
.red {
color: red;
}
.blue {
color: blue;
}
.green {
color: green;
}
</style>
<div class="red">韩信</div>
<div class="green">韩信</div>
<div class="blue">韩信</div>
语法细节：
-
类名用 . 开头的
-
下方的标签使用 class 属性来调用.
-
一个类可以被多个标签使用, 一个标签也能使用多个类(多个类名要使用空格分割, 这种做法可以让
真题解析、进阶学习笔记、最新讲解视频、实战项目源码、学习路线大纲
详情关注公中号【编程进阶路】
代码更好复用)、
-
如果是长的类名, 可以使用 - 分割.
-
不要使用纯数字, 或者中文, 以及标签名来命名类名.
4.2.3 id 选择器
和类选择器类似
-
CSS 中使用 # 开头表示 id 选择器
-
id 选择器的值和 html 中某个元素的 id 值相同
-
html 的元素 id 不必带 #
-
id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别)
示例：
<style>
#red {
color: red;
}
#green {
color: green;
}
</style>
<div id="red">韩信</div>
<div id="green">韩信</div>
4.2.4 通配符选择器
使用 * 的定义, 选取所有的标签.
示例：
<style>
* {
color: red;
}
</style>
<p>李白</p>
<div>韩信</div>
<H3>赵云</H3>
4.2.5 基础选择器小结
5. 常用元素属性
==========
CSS 属性有很多, 可以参考文档：
5.1 字体属性
5.1.1 设置字体
font-family: '微软雅黑';
font-family: 'Microsoft YaHei';
-
字体名称可以用中文, 但是不建议.
-
多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
-
如果字体名有空格, 使用引号包裹.
-
建议使用常见字体, 否则兼容性不好.
5.1.2 大小
font-size: 25px;
-
不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
-
可以给 body 标签使用 font-size
-
要注意单位 px 不要忘记
-
标题标签需要单独指定大小
5.1.3 粗细
font-weight: bold;
font-weight: 700;
-
可以使用数字表示粗细
-
700 == bold, 400 是不变粗, == normal
-
取值范围是 100 -> 900
5.1.4 文字样式
/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;
5.1.5 设置文本颜色
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color 属性值的写法:
-
预定义的颜色值(直接是单词)
-
[最常用] 十六进制形式（十六进制形式表示颜色, 如果两两相同, 就可以用一个来表示，比如 #ff00ff => #f0f ）
-
RGB 方式
5.1.6 文本对齐
控制文字水平方向的对齐，不光能控制文本对齐, 也能控制图片等元素居。
text-align: [值];
-
center: 居中对齐
-
left: 左对齐
-
right: 右对齐
5.1.7 文本装饰
text-decoration: [值];
常用取值:
-
underline 下划线. [常用]
-
none 啥都没有. 可以给 a 标签去掉下划线.
-
overline 上划线. [不常用]
-
line-through 删除线 [不常用]
5.1.8 文本缩进
控制段落的 首行 缩进 (其他行不影响)
text-indent: [值];
-
单位可以使用 px 或者 em.
-
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
-
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
5.2 背景属性
5.2.1 背景颜色
background-color: [指定颜色]
默认是 transparent (透明) 的. 可以通过设置颜色的方式修改.
5.2.2 背景图片
background-image: url(...);
5.2.3 背景平铺
background-repeat: [平铺方式]
重要取值:
-
repeat: 平铺
-
no-repeat: 不平铺
-
repeat-x: 水平平铺
-
repeat-y: 垂直平铺
默认是 repeat.
5.2.4 背景尺寸
background-size: length|percentage|cover|contain;
-
可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
-
也可以填百分比: 按照父元素的尺寸设置.
-
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
-
把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.
6. 盒子模型
========
每一个 HTML 元素就相当于是一个矩形的 “盒子” ，这个盒子由这几个部分构成：
-
边框 border
-
内容 content
-
内边距 padding
-
外边距 margin
总结
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！
而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。
这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！
资料截图 ：
高级前端工程师必备资料包
扫一扫
8207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
