文件的编码格式 – UTF-8
HTML页面的编码格式 – UTF-8
<meta charset=”UTF-8″>
设置当前HTML页面的编码格式
在浏览器运行当前HTML页面时，告诉浏览器当前的编码格式
字符集
概念 – 存放所使用的所有的字符（汉字）
分类
ANSI – 美国
ISO-8859-1 – 欧洲
GBK – 中国
GB2312
Unicode – 万国码
UTF-8 – 主要使用
UTF-16
计算机的存储方式
利用二进制方式 – 1和0
中国
存储 – 将汉字 “中国” 转换成 二进制 进行存储 – GBK
读取 – 将 二进制 转换成 “中国” 进行显示 – UTF-8
CSS内容:
注意
只编写 HTML 页面时
提供的不同的标签，在浏览器运行时 – 不同的样式（效果）
在不同的浏览器中，相同标签显示的样式（效果）不同
浏览器对 HTML 页面的标签进行解析
不同的浏览器，解析方式有差异 – 最终显示的样式不同
在不同浏览器中，样式不同的问题
通过 CSS 方式进行解决
第一个浏览器的兼容问题
在不同浏览器中，显示的样式不同
概念
CSS全称为 Cascading Style Sheets，译为 层叠样式表
作用 – 设置 HTML 页面中标签在浏览器中的显示效果
特点 – 实现了 HTML 页面的 结构与样式 的分离
结构 – 通过 HTML 的标签完成
样式 – 通过 CSS 内容完成
版本
96 年推出第一版本
98 年推出第二版本
目前是第三版本 – 最新版本
*如何使用 CSS
第一种方式 – 内联样式 – 优先级别更高
通过设置 HTML 标签的标准属性 style 完成 CSS 样式
问题 – HTML 结构与 CSS 样式的耦合度很高
第二种方式 – 内联样式
通过设置 HTML 标签的标准属性 class 完成 CSS 样式进行关联
通过 <head> 标签中，定义 <style> 标签编写 CSS 样式内容
.class名称 {样式名称 : 样式的值 ;}
第三种方式 – 外联样式
CSS 样式支持独立文件的 – 扩展名为 “.css”
将所有关于 CSS 样式的内容，编写在独立的 CSS 文件中
HTML 页面中，通过 <head> 标签中的 <link> 标签完成关联
<link rel=”stylesheet” href=”CSS文件路径”>
CSS 语法
CSS 的注释
/ CSS的注释内容 /
CSS 语法
注意 – CSS 本身不规定是否必须换行 – 允许编写成一行
CSS 代码的可读性变差
CSS 的选择器
元素选择器
标签名 {样式名称 : 样式值;}
类选择器
.class名称 {样式名称 : 样式值;}
ID选择器
#id属性值 {样式名称 : 样式值;}
通配符选择器
{
样式名称 : 样式值;}
优先级别
style内联样式 -> ID选择器 -> 类选择器 -> 元素选择器 -> 通配符选择器!important – 设置当前选择器的级别最高
并不建议使用
组合选择器
并集效果 – 同时为多个标签设置相同的样式
用法 – 多个选择器并列使用
格式 – 选择器之间使用逗号(,)隔开
交集效果 – 通过选择器结果相交
用法 – 多个选择器并列使用
格式 – 选择器之间没有任何分隔
注意
相同级别的选择器使用了多个，最后一次的选择器有效(覆盖效果)
HTML设置默认样式
使用通配符选择器方式
问题 – 性能较低
为 <body> 或 <html> 设置样式
CSS 样式是否具有继承性
HTML 标签是否具有特殊性
作用 – 在不同浏览器中，显示的效果相同
设置颜色
使用 英文单词 进行设置
问题
必须记住对应单词和颜色效果
英文单词表示颜色，数量有限的
RGB方式
概念
什么是 RGB? Red(红) Green(绿) Blue(蓝)
红绿蓝被称之为叫做三原色
语法格式
rgb(红,绿,蓝)每个颜色值的范围 – 0 ~ 255 – 推荐使用这种
每个颜色值的范围 – 0% ~ 100%
常见颜色
黑色 – rgb(0,0,0)
白色 – rgb(255,255,255)
红色 – rgb(255,0,0)
绿色 – rgb(0,255,0)
蓝色 – rgb(0,0,255)
黄色 – rgb(255,255,0)
青色 – rgb(0,255,255)
RGB的十六进制表示
语法格式 – 红绿蓝
# + 红 + 绿 + 蓝红绿蓝三个颜色分别使用 两位 表示
值的范围 – 00 ~ ff
通过 JavaScript 控制颜色的变化
使用 RGB 的十进制表示方式
进制
二进制
八进制
十进制 – 每十进一
0,1,2,3,4,5,6,7,8,9,
10,11,12,…
十六进制 – 每十六进一
0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
10,11,12,13,14,15,16,17,18,19,1a,1b..,1f
块级元素与行内元素
块级元素(block)
特点 – 每个块级元素占页面的整个宽度
作用 – 用于完成页面内的布局
代表 – <div> – 无语义化
内联元素(inline)
特点 – 每个内联元素占当前文本的宽度
作用 – 用于设置指定文本的样式
代表 – <span> – 无语义化
关于页面布局
以<table>标签完成页面布局 – 微软的bing搜索
以<div>标签完成页面布局 – bootstrap官网
概念参考了<table>表格 – 行和列
发展历史
第一阶段 – 使用<table>布局
第二阶段 – 使用<div>布局
使用<div>替换<table>
第三阶段 – 使用新的语义化块级元素布局
使用新语义化标签替换<div>
CSS 中使用的单位
固定值
像素值(px) – 页面的尺寸和分辨率是否是固定的: 固定值
相对值
百分值(%) – 相对于父级元素
在实际开发中，多用于宽度(或高度)的设置
(em) – 相对于HTML页面的默认样式
在实际开发中，多用于字体大小的设置
CSS 的选择器
根据 HTML 标签结构的三层关系
祖先元素与后代元素
父元素与子元素
兄弟(相邻)元素
选择器 – 优先级别相同，先后顺序有关
祖先与后代选择器
祖先元素 后代元素父与子选择器
父元素 > 子元素相邻选择器
前一个元素 + 后一个元素
伪类选择器
概念
设置的样式并不是页面运行马上有效果的
而是为将来某一个时刻使用时设置的样式
作用 – 主要应用于 < a> 标签
分类
:link – 未被访问
注意 – 只能作用于< a>标签
:visited – 已被访问
注意 – 只能作用于< a>标签
:hover – 鼠标悬停
不仅可以作用于< a>标签，也可以作用于其他标签
:active – 已被激活
不仅可以作用于< a>标签，也可以作用于其他标签
:focus – 获取焦点
盒子模型
概念
盒子模型，也叫做框模型
作用 – 简化 HTML 页面的布局
HTML 页面的布局
利用表格中的行和列的概念
利用盒子模型的概念
具有的概念
内容区（content） – 定义显示在页面中的元素
内边距（padding） – 显示的元素到盒子边框的距离
边框（border） – 盒子的边框的宽度
外边距（margin） – 盒子之间的距离
元素的宽度和高度
width – 设置元素的宽度
height – 设置元素的高度
边框
类别
border-width – 边框的宽度
border-color – 边框的颜色
border-style – 边框的样式
边框的宽度
简写设置
border-width
只设置一个值 – 同时设置四个方向的边框
设置两个值 – 第一个值设置上下边框，第二个设置左右边框
设置三个值 – 第一个值设置上边框，第二个设置左右边框，第三个设置下边框
设置四个值 – 分别设置上、右、下和左四个方向
分别提供
border-top-width – 设置上边框
border-right-width – 设置右边框
border-bottom-width – 设置下边框
border-left-width – 设置左边框
边框的颜色
与边框的宽度类似
边框的样式
与边框的宽度类似
常用边框样式
solid – 实线
dashed – 虚线
dotted – 点状虚线
double – 双实线
内边距
padding – 同时设置四个方向的内边距
使用方式 – 参考边框的使用方式
注意
实际宽度 = width + padding + border
实际高度 = height + padding + border
外边距
设置上和左外边距
作用 – 改变当前标签所显示的相对父级元素位置
实际 – 父子关系
x轴(水平方向) – 父元素的左内边距+子元素的左外边距
y轴(垂直方向) – 父元素的上内边距+子元素的上外边距
设置右和下外边距
作用 – 改变当前标签的下一个兄弟元素的标签显示位置
注意 – 兄弟关系
下一个兄弟元素的显示位置不会叠加
浏览器默认样式
问题: 不同浏览器提供<body>标签的不同值的外边距
<body>标签被自动添加的外边距
解决: 手动重置 <body> 标签的外边距
外边距的重叠
注意
重叠效果只存在于垂直方向
水平方向不存在重叠问题
问题
两者之间取最大值
解决
只设置上一个元素的外边距
