第0405课：css与html文档

css与html文档

0405作业实例网址：http://php.wangsoo.com/css/0405/

1. 非置换元素:双标签

<p style="background-color: lightgreen;">Hello World</p>

2. 置换元素: 单标签 , 双标签

<img src="1.jpg" alt="" width="100" height="80" />
<input type="text" style="width: 50px;" />
<a href="" style="width: 50px;">php.cn</a>
<strong style="width: 100px;">PHP中文网</strong>
<!-- 行内元素,如果是非置换元素的话, 不能设置大小,
如果是置换元素,可以设置宽高, 对于这类元素,称之为行内块元素 -->

3.内部样式与外部文件

3.1：在html文档中如果添加其它内容,必须通过标签的方式加入
3.2：内部样式表, 写在当前的html文档中, 仅在当前文档有效

4.媒体选择器media

常用 “媒体描述符”(显示区域相关)

序号	媒体描述符	描述
1	width	显示区域宽度
2	min-width	显示区域最小宽度
3	max-width	显示区域最大宽度
4	device-width	设备显示区域宽度
5	min-device-width	设备显示区域最小宽度
6	max-device-width	设备显示区域最大宽度
7	height	显示区域高度
8	min-height	显示区域最小高度
9	max-height	显示区域最大高度
10	device-height	设备显示区域高度
11	min-device-height	设备显示区域最小高度
12	max-device-height	设备显示区域最大高度

max-width与max-device-width区别:

• max-width: 浏览器显示区域宽度,与设备无关,通常用于 PC 端
• max-device-width: 设备分辨率的最大宽度,通常用于移动端

作业总结：

1.媒体选择器media是今后做html5页面的最常用的方法之一，能使开发的网站适应不同分辨率设备的浏览，应注意媒体查询器的使用方式，一般是从大到小的写法；
2.注意内部样式和引用外部样式的文件的使用，只在本页使用的的可以使用内部样式，通用性样式的一般写在外部文件引用；