回顾

1. 计算机单位
   1. 最小单位是位（B）
   2. 字节（b） 一个字符的大小
   3. 1K=1024b
   4. 1M=1024K
   5. 1G=1024M
   6. 1T=1024G
2. 进制转换
   1. 十进制转二进制：整数除2反向取余，小数乘2正向取整
   2. 二进制转成十进制：以2为底，从右往左依次是2的0次方，1次方…
   3. 八进制转二进制，一个八进制转成3位的二进制，然后再合并起来
   4. 十六进制转二进制：一个十六进制转成4位的二进制，然后在合并起来。
3. 网页中的颜色表示：光的三原色，红色（red），绿色(green)，蓝色（blue）。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255，颜色的表示通过RGB的十六机制数表示，
4. CSS介绍：层叠样式表，用来控制网页的外在表现（网页的装修），
5. 语法

选择器{

属性:属性的值;

属性:属性的值;

}

1. 注释 /* */
2. CSS选择器
   1. ID选择器
      1. 以#开头
      2. 只能供一个元素使用。
   2. 类选择器
      1. 以点（.）开头
      2. 可以供多个元素使用
   3. 标签选择器：选择标签
   4. 通配选择器：*
   5. 组合选择器：h1,#aa,.bb
   6. 后代选择器：p b #aa .bb
   7. 子元素选择器p>b
   8. 相邻元素选择器div+p div~p
   9. 伪类：4种状态。 lvha
      1. :link 正常连接的状态
      2. :visited 点击完后代状态
      3. :hover 当鼠标移上去的时候状态
      4. :active 当鼠标点击下去的状态

网页中图像的基础知识

1. 位图：由像素点组成的图
   1. 体积大
   2. 放大失真
   3. 颜色丰富，达到256*256*256种颜色

1. 矢量：是由线条和面组成的图形
   1. 体积小
   2. 可以无限制的放大
   3. 支持的颜色数比较少

脚下留心：网页上的图片都是位图

1. 分辨率

思考：是不是像素点越多，图片的质量越高？

答：不是，衡量一个照片的质量通过的是分辨率。

分辨率：单位长度里的像素点的多少，一般都以一英寸为单位。

在尺寸一定情况下，分辨率越大质量也好，图片的体积也越大，网页打开的速度也越慢。网页上的分辨率一般是72。（印刷的分辨率一般在300）

1. 网站默认尺寸单位为象素（px）。
2. 网页常见的图象格式：网页中常用的图片格式有png，jpg，gif

伪类选择器与类选择器一起使用

思考一个场景：如何实现一个页面中有两种超链接的样式。

<style type=”text/css”>

a.first:link{

color:#F00;

text-decoration:none;

font-size:12px;

}

a.first:hover{

color:#060;

text-decoration:underline;

font-size:12px;

}

a.second:link{

color:#00F;

text-decoration:overline;

font-size:36px;

}

a.second:hover{

color:#90F;

text-decoration:underline;

font-size:36px;

}

</style>

<a href=”#” class=”first”>链接1</a> <br>

<a href=”#” class=”first”>链接1</a> <hr>

<a href=”#” class=”second”>链接2</a> <br>

<a href=”#” class=”second”>链接2</a> <hr>

运行结果

思考题：a.first和a .first的区别

伪对象选择器

伪类描述的是状态，伪对象描述的是对象。

元素:first-letter，选择元素中内容的第一个字

元素:first-line，选择元素中是内容的第一行

<style type=”text/css”>

p:first-letter{ /*选择元素的第一个字*/

font-size:24px;

color:#F00;

}

div:first-line{ /*选择元素的第一行*/

font-size:12px;

color:#060;

text-decoration:underline;

}

</style>

<p>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

</p>

<div>

离离原上草，一岁一枯荣。<br>

野火烧不尽，春风吹又生。<br>

远芳侵古道，晴翠接荒城。<br>

又送王孙去，萋萋满别情。

</div>

属性选择器

1. 元素[属性]：具备指定属性的元素

1. 元素[属性=值]：选择指定属性指定值的元素

1. 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素

1. 元素[属性|=值]：选择具有attr属性且属性值为用连字符分隔的字词列表，并且由指定的值开始的元素

E1[attr] element（元素） attribute（属性）

常用CSS属性的讲解

字体属性

<style type=”text/css”>

body{

color:#F00; /*字体颜色*/

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”; /*字体*/

font-size:16px; /*字号*/

font-weight:bold; /*字体粗细*/

text-decoration:underline; /*文本修饰*/

text-transform:uppercase; /*文本转换（大小写）*/

line-height:30px; /*行高*/

}

</style>

锄禾日当午，<br>

汗滴禾下土。<br>

谁知盘中餐，<br>

粒粒皆辛苦。<br>

I a am boy!

运行结果

详细说明text-transform属性值

思考：为什么font-family跟多个字体？

font-family:”黑体”, “隶书”, “微软雅黑”, “宋体”;

答：客户端首先用第一个字体来解析，如果没有就选择第二个字体，依次类推，一直到最后。如果一个字体都没有，就选择客户端的默认字体。中文的浏览器默认字体是宋体。

文本属性

text-align的值

尺寸属性

width：宽度

height：高度

边框属性

多学一招：

背景属性

边距属性 （margin）

margin-top：上边距

margin-right：右边距

margin-bottom：下边距

margin-left：左边距

margin：符合边距

列表属性

内容溢出属性

overflow:hidden; /*溢出部分隐藏*/

overflow:auto; /*如果有溢出，就会出现垂直滚动条*/

CSS样式的的分类

样式按照写的地方不同分成3类：

1. 内部样式：写在页面的内部，只能给当前页面使用

<style type=”text/css”></style>

1. 外部样式：写在页面的外部，可以给所有页面使用

新建一个css文件，将样式写到文件中

1. 行内样式：写在元素的后面，只能给当前元素使用

<div style=””></div>

内部样式

写在页面的内部，通过<style>开头</style>结束，可以给整个页面使用

行内样式

每个元素都有style属性，通过style属性也元素添加样式

外部样式

将样式写到外部文件中，给所有页面使用

第一步：创建CSS文件

脚下留心：在CSS文件中，不需要<style>开头，</style>结束。

第二步：新建html，并引入css文件

引入CSS文件的方式：链接和导入

1. 链接

语法：<link rel=’stylesheet’ href=’地址’>

1. 导入

语法：@import url(地址);

思考：为什么<link>不需要写在<style></style>之间，而@import需要呢？

答：因为<link>是HTML标签，而@import是CSS指令

思考：<link>和@import引入样式的区别？

分析：

答：1、<link>在HTML页面中引入CSS文件

2、@import在HTML页面和CSS页面都能引入。

样式的继承

内层标签继承和覆盖外层标签的样式。

1. 子级标签继承父级标签没有的样式
2. 子级标签覆盖父级标签相同的样式

样式的优先级

1. ID选择器>CLASS选择器>HTML标签选择器
2. 直接（行内）样式表>内部样式表>外部样式表

例题2

1. class=“类1，类2”，以类的加载的顺序为优先级，后加载的将先加载的覆盖。

1. 强制优先级（important）

1. 权重叠加
   • 标签 < 类 < id选择器<直接<important
   • 1 < 10 < 100 <1000<10000

例题：

标签的显示模式

标签的显示模式有两种：块显示，行显示

1. 块显示特点
   1. 上下排列
   2. 默认宽度是100%，高度0px
   3. 可以设置宽度和高度
2. 行显示特点
   1. 左右排列
   2. 默认框架是宽度0px，高度是0px
   3. 不能设置宽度和高度

思考：如何设置行显示标记的宽度和高度？

答：将行显示转成块显示即可

思考：既要设置宽高，又要显示在一行，如何实现？

display:block; 将标签显示方式改为块显示

display:inline：将标签显示方式改为行显示

div+css拼版好处

1. 提高页面执行效率
2. 代码维护变得简单
3. 提高代码的可重用性。