回顾
一 HTML基础
1.html标准结构
<!doctype html>
</body>
</html>
2.常用标记
特殊字符 一个空格 >> &;lt;< ©©版权
标题标记 h1-h6
段落标记 p
换行 br
水平线 hr
文本样式标记：加粗 b,下划线u,斜体 i
3.常用分区元素
块分区元素：独立成行，默认从上到下显示 div
行内区元素：包裹文本，定义样式 span
4.图像 img(src图片的路径;alt当图片加载失败所提示的信息;width height尺寸;)
5.链接 a(href链接路径;target打开页面的方式,_self默认值，当前页面打开链接;_blank，新页面中打开链接
6.列表
无序列表
- 家具
- 日用品
- 电器
群组选择器：定义的是一群选择器的公共样式
语法：选择器1,选择器2,选择器3{样式声明}
4.尺寸和边框
尺寸：px为单位的数字，%表示占父元素的比例
默认尺寸：
块级元素:宽度占父元素的100%，高度自适应(div h1 p ul li)
行内元素:宽度自适应，高度自适应(span u b i img a)
边框:围绕在元素内容和内边距外的线条
边框属性——简写
border:width style color;
width,边框的宽度
style，边框的样式 取值：solid dotted(圆点虚线) dashed(短线)
color,边框颜色，transparent透明色
单边设置：方向
border-left:左边框
border-right:右边框
border-top:上边框
border-bottom:下边框
5.边框倒角
倒角：将元素的直角倒角成圆角
属性：border-radius
取值：以px为单位的数字;
百分比50%（圆，当大于50%也是圆）
单脚设置：右上角设置为倒角为50px
border-top-right-radius:右上角
border-top-left-radius：左上角
border-bottom-right-radius:右下角
border-bottom-left-radius:左下角
练习：新建网页，div宽高300px；边框为绿色实线，背景颜色为黄色；形状为柠檬；
========================================================================
今日学习目标
定义CSS样式的三种方式
伪类选择器
框模型
浮动
一 CSS使用的三种方式
1.CSS简称样式表，负责构建网页的样式，美化网页
2.CSS样式——使用
1.内联样式，行内样式
2.内部样式
样式规则：
选择器{样式声明1;样式声明2;}
练习:页面中添加一对p和h1，内容随意，用内联样式设置p文本颜色为黄色，背景为红色，字体大小35px；设置h1，文本为绿色，背景为灰色
3.外部样式
将定义在外部独立的css文件，在网页中引入css文件
ex: base.css 06_css.html
使用步骤：
1.创建.css文件
base.css
2.在css文件中书写样式规则
语法：选择器{样式声明}
3.在网页的头元素中使用link标记引入css文件
练习：使用外部样式完成以下设置，新建base1.css文件，新建07_css.html文件。在html文件中引入css文件，给页面添加一对div宽高300，边框为蓝色虚线；给页面添加一对h1,内容随意，字体大小为35px，字体颜色为粉色，背景颜色为黄色
二 选择器——伪类选择器
1.伪类选择器
作用：用于匹配元素不同状态的样式
语法：
选择器:伪类选择器{样式声明}
伪类选择器分类：链接伪类和动态伪类
链接伪类：
:link 匹配尚未访问的超链接状态
:visited 匹配的是访问过的超链接状态
ex: a:visited{color:green}
动态伪类：
:active 匹配元素被激活的状态
:hover 匹配鼠标悬停在元素时的状态
:focus 匹配元素获取焦点时的状态
补充：input输入框
练习：要求，a标记点之前是蓝色，点过以后是绿色，点的瞬间黄色字体粉色背景颜色
三 框模型
1.什么是框模型？
凡是元素皆为框
框模型：box model,又称盒子模型。它定义了元素框处理元素内容、内边距、外边距以及边框的计算方式。
2217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
