- 行内样式表（行内式）
- 在元素的标签内部的style属性中，设定CSS样式，适用于简单的样式修改。
- 注意点：
- style其实就是标签的属性
- 在双引号中书写样式，格式要符合css规范
- 书写比较繁琐，不推荐使用
- style其实就是标签的属性
- 例
- 在元素的标签内部的style属性中，设定CSS样式，适用于简单的样式修改。
- 内部样式表（嵌入式）
- 内部样式表就是在<head></head>标签中的<style></style>标签中书写样式
- 注意点：
- 可以更加方便的控制多个元素的样式
- 代码结构比较清晰，实现了结构和样式的部分分离（不完全分离）
- 练习时，经常采用这种方式
- 可以更加方便的控制多个元素的样式
- 例
- 内部样式表就是在<head></head>标签中的<style></style>标签中书写样式
- 外部样式表（链接式）（开发中最常用，实现了结构和样式的完全分离）
- 可以使用链接的方式引入外部样式文件
- 使用步骤
- 1、创建css文件
- 2、使用link标签引入css文件即可（link标签一般写在head标签中）
- rel 定义当前文档与被链接的文档之间的关系，stylesheet表示被链接文档是一个样式表文件
- href 定义链接的文件的路径（URL），可以使用绝对路径也可以使用相对路径
- rel 定义当前文档与被链接的文档之间的关系，stylesheet表示被链接文档是一个样式表文件
- 1、创建css文件
- 例
- css文件
- 引入css文件
- css文件
- 可以使用链接的方式引入外部样式文件
- 作用：可以提高HTML和CSS的编写速度
- 常用的语法有
- 1、输入div 按tab键能快速补全标签
- 2、一次生成多个标签 div*5
- 3、生成父子级关系标签 div>p
- 4、生成兄弟关系标签 div+p
- 5、生成带有类名为demo的p标签 p.demo
- 6、生成带有id属性的标签
- 7、使用自增符号生成顺序内容
- 8、生成标签时直接添加内容
- 9、快速生成css代码
- 1、输入div 按tab键能快速补全标签
- 就是对基础选择进行组合而形成的选择器
- 优点：可以更加高效的选择目标元素
- 常用的复合选择器
- 后代选择器
- 后代选择器又叫做包含选择器，是选择某个父元素下面的子元素。
- 语法：元素1 元素2 {样式声明} 选择元素1中的所有元素2（所有复合条件后代都可以被选中不局限于到底是儿子还是孙子）
- 例
- 后代选择器又叫做包含选择器，是选择某个父元素下面的子元素。
- 子选择器
- 子元素选择器就是只能选择复合条件的最近的一级子元素，简单来说就是选亲儿子元素
- 语法 元素1 > 元素2 {样式声明} 表示选择元素1里面最近的一级元素2
- 例
- 子元素选择器就是只能选择复合条件的最近的一级子元素，简单来说就是选亲儿子元素
- 并集选择器
- 并集选择器就是用多组标签来构成，同时为他们定义相同的样式，通常用于集体样式声明，并集选择器中的各选择器之间用逗号隔开。
- 例
- 并集选择器就是用多组标签来构成，同时为他们定义相同的样式，通常用于集体样式声明，并集选择器中的各选择器之间用逗号隔开。
- 伪类选择器
- 链接伪类选择器
- 给链接来添加特殊效果的选择器
- :link 选择所有未访问过的链接
- 使用方式 a:link
- 使用方式 a:link
- :visited 选择所有已经被访问的链接
- 使用方式a:visited
- 使用方式a:visited
- :hover 选择鼠标指针悬浮的链接
- :active 选择所有鼠标点击时的链接
- 例 尽量采取 link visited hover active 的顺序。（lovehate）
- 给链接来添加特殊效果的选择器
- 焦点伪类选择器
- :focus 伪类选择器用于选取获得焦点的表单元素，一般情况下在<input>表单元素中使用
- 例
- :focus 伪类选择器用于选取获得焦点的表单元素，一般情况下在<input>表单元素中使用
- 伪类选择器的总结
- 伪类选择器和css的类一样，可以附加在其他的选择器之上
- 如果想使用伪类选择器，首先选择器选中的标签必须要支持这种伪类状态
- 伪类选择器和css的类一样，可以附加在其他的选择器之上
- 链接伪类选择器
- 后代选择器
- 什么是元素的显示模式
- html里面的元素（标签）是以什么方式进行显示的，比如<div>自己占一行，比如一行可以放多个<span>
- html里面的元素（标签）是以什么方式进行显示的，比如<div>自己占一行，比如一行可以放多个<span>
- 元素显示模式的分类
- 块元素
- 常见的块元素
- <h1>~<h6>、<p>、<div>、<ul>、<ol>、<dl>等等
- <h1>~<h6>、<p>、<div>、<ul>、<ol>、<dl>等等
- 特点：
- 1、自己独占一行
- 2、高度宽度可以自由设置
- 3、宽度默认是父级宽度的100%
- 4、块级元素内可以放行内元素、行内块元素或者块元素
- 5、文字类的元素中不要使用块元素（如果使用会造成语义混乱）
- 1、自己独占一行
- 常见的块元素
- 行内元素
- 常见的行内元素
- <span>、<strong>、<em>、<ins>等等
- <span>、<strong>、<em>、<ins>等等
- 特点
- 1、相邻的行内元素在一行上显示，一行可以显示多个
- 2、宽和高设置无效
- 3、默认的宽度是它本身内容的宽度
- 4、行内元素只能容纳文本或者其他行内元素
- 1、相邻的行内元素在一行上显示，一行可以显示多个
- 注意点：
- 链接里面不要再套链接。
- 特殊情况下如果<a>标签中需要放块级元素，可以将<a>标签转化为块级元素更安全
- 链接里面不要再套链接。
- 常见的行内元素
- 行内块元素
- 常见的行内块元素
- <img>、<input>、<td>等等，同时具有块元素和行内元素的特点。
- <img>、<input>、<td>等等，同时具有块元素和行内元素的特点。
- 特点：
- 1、相邻的行内块元素在一行上显示，但是它们之间会有空白间隙。（行内元素特点）
- 2、宽高可以设置（块级元素特点）
- 3、默认宽度是它本身内容的宽度（行内元素的特点）
- 1、相邻的行内块元素在一行上显示，但是它们之间会有空白间隙。（行内元素特点）
- 常见的行内块元素
- 块元素
- 元素模式的转换
- 转换为块元素：display:block;
- 转换为行内元素：display:inline;
- 转化为行内块元素：display:inline-block;
- 转换为块元素：display:block;