【php基础班】第5天 div+CSS好处、web标准、CSS基本语法、CSS单位与字体、CSS组合选择器、CSS新闻媒体案例

第一节 DIV+CSS的好处

缩减代码，提高页面浏览速度

页面体积变小，浏览速度变快

强大的字体控制和排版能力

更灵活控制页面布局

表现和内容相分离，干净利落

在修改页面的时候更加容易省时

保持视觉的一致性

更好地被搜索引擎收录

由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形。

第二节 web标准

1.web标准

web标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European
Computer Manufacturers Association）的ECMAScript标准。

web标准的目的

在创建一个统一的用于WEB表现层的技术标准。以便于通过不同的浏览器或设备向用户展示信息内容。

2.Web标准——结构标准

XHTML是可扩展超文本标识语言的缩写。目前推荐遵循的是W3C于2000年1月26日推荐XML1.0。XML虽然数据转换能力强大，完全可以替代HTML，但面对成千上万已有的站点，直接采用XML还为时过早。因此，我们在HTML4.0的基础上，用XML的规则对其进行扩展，得到了XHTML。简单的说，建立XHTML的目的就是实现HTML向XML的过渡。

XML是可扩展标识语言的简写。和HTML一样，XML同样来源于SGML，但XML是一种能定义其他语言的语言。XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。

3.Web标准——表现标准

CSS是(Cascading Style Sheets)层叠样式表的缩写。目前推荐遵循的是W3C于1998年5月12日推荐CSS2。W3C创建CSS标准的目的是以CSS取代HTML表格式布局、帧和其他表现的语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。

4.Web标准——行为标准

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范，DOM是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM解决了Netscaped的Javascript和Microsoft的Jscript之间的冲突，给予web设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。

ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）。目前推荐遵循的是ECMAScript 262

5.HTML的缺点

1) 维护困难。为了修改某个标记，需要花费很多时间，尤其对于整个网站而言，维护成本更高。
2) 样式标记不足。HTML本身的样式标记很少，大部分标记是为网页内容服务的。
3) 网页过胖。由于没有统一对各种风格样式进行控制，HTML页面体积过大，占用掉了很宝贵的宽度。
4) 定位困难。过多的<table>标记导致页面的复杂和后期维护困难。
6.采用标准的好处

1) 提高页面的浏览速度，使用CSS方法，比传统的web设计方法，可以节省50%以上的文件尺寸（有权威统计）

2) 缩短改版时间，将表现（样式与内容分离），几个样式文件修改，版面将会发生变化。

3) 更容易被搜索引擎搜索到

4) 内容能被更广泛的设置所访问，屏幕阅读，手机，平板等。

5) 实例：内容，结构，表现，行为

第三节 CSS

1.什么是CSS

•   CSS（Cascading StyleSheets的缩写），翻译为“层叠样式表”或者“级联样式表”，简称样式表。它允许网页设计者定义网页元素的样式，包括字体、颜色及其他的高级样式。

•   样式表由一组决定显示格式的规则组成，这些规则用于定义网页中任何HTML元素内容的显示格式。



2.CSS基础

CSS语法

1)  一个CSS样式表代码由一个或多个CSS规则组成；

2)  CSS样式规则由选择器和格式声明语句组成；

3)  选择器通常是您需要改变样式的 HTML 元素；

4)  格式声明语句放在{ }内；

5)  每一条格式声明语句由“属性名:属性值”对组成，属性名和属性值间以(:)冒号隔开，每条声明语句以分号“;”结束。

6)  CSS选择器区分大小写，强烈建议小写。

属性

在格式声明语句中，属性名称与属性值之间以冒号“：”隔开，

当定义多个值时，浏览器按照从前向后顺序选择属性值。如果第1个值有效，则尝试使用，如果第1个无效，则使用第2个，依次类推。

div.news .title{

   font-family:”华文行楷”,”宋体”,”TimesNew Roman”,Arial;

   text-align:center;

   font-weight:bold;

   color:#444444;

   background-color:#808080;

}

第三节 CSS选择器

1.CSS选择器分类—基本选择器



2.CSS选择器—组合选择器



后代选择器：浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。

3.子元素选择符

p>span,区别于后代选择符，pspan,指的是所有p下面的span都设置。而p>span只作用于子元素一层关系

4.CSS属性—伪类属性



a:link,a:visited{}

a:hover:active{}

a.footer:link,a.footer:visited{}

a.footer:hover,a.footer:active{}

5.CSS中的注释

CSS中加入注释的方式与HTML中加入注释的方式不同，注释以“/*”符号开始，以“*/”符号结束。

td{

   color:black;  /*定义颜色*/

   font-size;14px;  /*定义大小*/

   text-align:center;  /*对齐方式*/

}

6.CSS属性—尺寸属性



第四节 CSS单位与字体

1. CSS单位



2.CSS属性-字体属性

font可以同时设置字符的各种属性，包括font-style、font-weight、font-size、line-height、font-family。各属性间用空格隔开。如果同时设置font-size和line-height，这两属性值间以“/”隔开。



/*新浪首页css*/

body{font:12px/20px "SimSun","宋体","ArialNarrow",HELVETICA;
}

3.CSS属性——文本属性



p{ text-decoration: underline overlineline-through;}   //同时设置多线

4.CSS属性——列表属性



5.CSS属性——边框属性

边框线型

none：无  solid(实线)  dotted(点状线)  dashed(虚线)  double(双线)  groove(3D 凹槽边框)





border

border-top:width style color /**不分先后/

style:solid实线，dotted点线，dashed,虚线

border-right

border-bottom

border-left

border:1pxsolid red /*同时设置四条边*/

第五节 CSS组合选择器

1.标签和类组合选择器

如：p.test{color:red}

2.多元素选择器

多个标签或选择器同时声明

如：h1,h2,ul,li{margin:0;padding:0;}

定义的方法注意思：

选择器之间用逗号隔开

3.后代选择器

p空格span{color:red;}

含义：针对p标签中的span标签定义样式。

注意：选择器之间用空格隔开。

4.子元素选择器

定义的方法

P>span{CSS规则}

只针会p标签中的span一级有效。

5.伪类选择器

链接<a href=”#”></a>

a:link链接的正常状态

a:visited鼠标单击过的链接状态

a:hover鼠标放在链接上面的（悬停）状态

a:active当前正在访问的链接状态

第五节 CSS尺寸属性

1.尺寸属性

px,em,%（相对单位）

font-size:25不加单位的数字毫无意思

px像素，相对单位。和屏幕的分辨率有关。

em：一个字体高（1倍字体高）,2em(当前默认字体的2倍)

%,百分比。相对单位。相对于当前默认值的百分比。

浏览器的默认字体大小为16px.

第六节 新闻模块案例

<styletype="text/css">
.title,.content{/*多元素组合声明*/
width:500px;/*设置div的宽度*/
border:1pxsolid green;/*设置div的边框*/
}
.title{
height:45px;/*设置div的高度*/
line-height:45px;/*设置div的行高*/
background:green; /*设置div的背景色*/
font-size:25px;/*设置字体的大小*/
font-weight:200;/*设置字体的加粗*/
}
.contenta:link,.content a:visited{color:gray; text-decoration:none;}/*同时声明链接默认样式及鼠标单击过后的样式*/
.contenta:hover{color:red; text-decoration:none;}/*设置鼠标放上面的样式*/
.contentli{
border-bottom:1pxdashed gray; /*设置li的底边的线的样式*/
width:450px; height:25px; /*设置li的宽和高*/
line-height:25px;/*设置li行高*/
}
</style>
Body中的内容：
<divclass="title"> 新闻中心</div>
<divclass="content">
<ul>
<li><ahref="#">长春供暖首日遇重度“烟霾“ 市民:以为谁家着火了</a></li>
<li><ahref="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><ahref="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
<li><ahref="#">年内5次降息为买房人减负 百万房贷可省17万</a></li>
<li><a href="#">台湾太平岛灯塔完工 可照射越南所占岛礁</a></li>
<li><ahref="#">解放军允许智能手机进军营安装部队自研软件</a></li>
<li><ahref="#">广州去年28部门罚没8.7亿 7亿其他收入未说明</a></li>
</ul>
</div>