CSS2
回顾
- 计算机单位
- 最小单位是位（B）
- 字节（b） 一个字符的大小
- 1K=1024b
- 1M=1024K
- 1G=1024M
- 1T=1024G
- 进制转换
- 十进制转二进制：整数除2反向取余，小数乘2正向取整
- 二进制转成十进制：以2为底，从右往左依次是2的0次方，1次方…
- 八进制转二进制，一个八进制转成3位的二进制，然后再合并起来
- 十六进制转二进制：一个十六进制转成4位的二进制，然后在合并起来。
- 网页中的颜色表示：光的三原色，红色（red），绿色(green)，蓝色（blue）。所有光的颜色都是由这三种颜色组成。他们的范围都是0-255，颜色的表示通过RGB的十六机制数表示，
- CSS介绍：层叠样式表，用来控制网页的外在表现（网页的装修），
- 语法
选择器{
属性:属性的值;
属性:属性的值;
}
- 注释 /* */
- CSS选择器
- ID选择器
- 以#开头
- 只能供一个元素使用。
- 类选择器
- 以点（.）开头
- 可以供多个元素使用
- 标签选择器：选择标签
- 通配选择器：*
- 组合选择器：h1,#aa,.bb
- 后代选择器：p b #aa .bb
- 子元素选择器p>b
- 相邻元素选择器div+p div~p
- 伪类：4种状态。 lvha
- :link 正常连接的状态
- :visited 点击完后代状态
- :hover 当鼠标移上去的时候状态
- :active 当鼠标点击下去的状态
- ID选择器
网页中图像的基础知识
- 位图：由像素点组成的图
- 体积大
- 放大失真
- 颜色丰富，达到256*256*256种颜色
- 矢量：是由线条和面组成的图形
- 体积小
- 可以无限制的放大
- 支持的颜色数比较少
脚下留心：网页上的图片都是位图
- 分辨率
思考：是不是像素点越多，图片的质量越高？
答：不是，衡量一个照片的质量通过的是分辨率。
分辨率：单位长度里的像素点的多少，一般都以一英寸为单位。
在尺寸一定情况下，分辨率越大质量也好，图片的体积也越大，网页打开的速度也越慢。网页上的分辨率一般是72。（印刷的分辨率一般在300）
- 网站默认尺寸单位为象素（px）。
- 网页常见的图象格式：网页中常用的图片格式有png，jpg，gif
| 格式 | 特点 |
| jpg（jpeg） |
|
| png |
|
| 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>
属性选择器
- 元素[属性]：具备指定属性的元素
- 元素[属性=值]：选择指定属性指定值的元素
- 元素[属性~=值]: 选择具有attr属性且属性值为用空格分隔的字词列表，其中一个等于指定值的元素
- 元素[属性|=值]：选择具有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类：
- 内部样式：写在页面的内部，只能给当前页面使用
<style type=”text/css”></style>
- 外部样式：写在页面的外部，可以给所有页面使用
新建一个css文件，将样式写到文件中
- 行内样式：写在元素的后面，只能给当前元素使用
<div style=””></div>
内部样式
写在页面的内部，通过<style>开头</style>结束，可以给整个页面使用
行内样式
每个元素都有style属性，通过style属性也元素添加样式
外部样式
将样式写到外部文件中，给所有页面使用
第一步：创建CSS文件
脚下留心：在CSS文件中，不需要<style>开头，</style>结束。
第二步：新建html，并引入css文件
引入CSS文件的方式：链接和导入
- 链接
语法：<link rel=’stylesheet’ href=’地址’>
- 导入
语法：@import url(地址);
思考：为什么<link>不需要写在<style></style>之间，而@import需要呢？
答：因为<link>是HTML标签，而@import是CSS指令
思考：<link>和@import引入样式的区别？
分析：
答：1、<link>在HTML页面中引入CSS文件
2、@import在HTML页面和CSS页面都能引入。
样式的继承
内层标签继承和覆盖外层标签的样式。
- 子级标签继承父级标签没有的样式
- 子级标签覆盖父级标签相同的样式
样式的优先级
- ID选择器>CLASS选择器>HTML标签选择器
- 直接（行内）样式表>内部样式表>外部样式表
例题2
- class=“类1，类2”，以类的加载的顺序为优先级，后加载的将先加载的覆盖。
- 强制优先级（important）
- 权重叠加
- 标签 < 类 < id选择器<直接<important
- 1 < 10 < 100 <1000<10000
例题：
标签的显示模式
标签的显示模式有两种：块显示，行显示
- 块显示特点
- 上下排列
- 默认宽度是100%，高度0px
- 可以设置宽度和高度
- 行显示特点
- 左右排列
- 默认框架是宽度0px，高度是0px
- 不能设置宽度和高度
思考：如何设置行显示标记的宽度和高度？
答：将行显示转成块显示即可
思考：既要设置宽高，又要显示在一行，如何实现？
display:block; 将标签显示方式改为块显示
display:inline：将标签显示方式改为行显示
div+css拼版好处
- 提高页面执行效率
- 代码维护变得简单
- 提高代码的可重用性。
