学习笔记:
学习视频链接: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 类名是有顺序的, 可以用 自增符号 $
- 如果想要在生成的标签内部写内容可以用 { } 表示