学习笔记：
学习视频链接：https://www.bilibili.com/video/BV14J4114768?p=62&spm_id_from=pageDriver
1、 CSS-网页的美容师 :
CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称
- CSS 是也是一种标记语言
- CSS 主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、 边距等）以及版面的布局和外观显示样式。
- CSS 让我们的网页更加丰富多彩，布局更加灵活自如。简单理解：CSS 可以美化 HTML , 让 HTML 更漂亮， 让页面布局更简单。
2、 CSS 引入方式 :
（1）内部样式表 ：
所有的样式，都包含在 style标签内，表示是样式表。style 一般写到 head 标签里面。 属性名，属性值关键字全部使用小写字母
<head>
<style>
h4 {
color: blue;
font-size: 100px;
}
</style>
</head>
（2）行内样式表：
<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div>
（3）外部样式表：
- 引入外部样式表分为两步：
- 新建一个后缀名为 .css 的样式文件，把所有 CSS 代码都放入此文件中。
- 在 HTML 页面中，使用 标签引入这个文件
<link rel="stylesheet" href="css文件路径">
| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为"stylesheet",表示被链接的文档是一个样式表文件 |
| href | 定义所连接的样式表文件的URL，可以说相对路径，也可以是绝对路径 |
3、 CSS 基础选择器 :
选择器(选择符)就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说，就是选择标签用的。
选择器分为基础选择器和复合选择器两个大类，我们这里先讲解一下基础选择器。
- 基础选择器是由单个选择器组成的
- 基础选择器又包括：
1.标签选择器 div{ }
2.类选择器 .class{ }
3.id 选择器 .id{ }
4.通配符选择器 .*{ }
4、 Chrome 调试工具 :
打开 Chrome 浏览器，按下 F12 键或者右击页面空白处检查
- Ctrl+滚轮 可以放大开发者工具代码大小。
- 左边是 HTML 元素结构，右边是 CSS 样式。
- 右边 CSS 样式可以改动数值（左右箭头或者直接输入）和查看颜色。
- Ctrl + 0 复原浏览器大小。
- 如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。
- 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误
5、 Emmet 快速生成HTML结构语法 :
- 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键， 就可以生成
- 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div
- 如果有父子级关系的标签，可以用 > 比如 ul > li就可以了
- 如果有兄弟关系的标签，用 + 就可以了 比如 div+p
- 如果生成带有类名或者id名字的， 直接写 .demo 或者 #two tab 键就可以了
- 如果生成的div 类名是有顺序的， 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示
7027
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
