标签：html css 网页设计 javascript w3c
1、"DIV+CSS"这种叫法其实是一种不准确的叫法，是大家开始在对这种技术理解不透彻的情况下，给这种布局标准页面的方法
起的名字，而标准的叫法是什么呢？ XHTML+CSS！
2、平时说的W3C其实是World Wide Web Consortium的缩写，中文是W3C组织或者万维网联盟，W3C这个组织是做什么的呢？
简单说，就是出网页标准的，那么由W3C组织推出的标准就被称为W3C标准或Web标准。
3、什么是Web标准？
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合，包含我们所熟悉的HTML、XHTML、
JavaScript、以及CSS等
4、Web标准的目的？
在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。
5、采用标准好处：
a、提高页面浏览速度。使用CSS方法，比传统的Web设计方法至少节约50%以上的文件尺寸；
b、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单的修改几个CSS文件就可以重新设计一个有成
千上万页面的站点；
c、降低网站流量的费用，带宽要求降低（代码更简洁），成本降低；
d、更容易被搜寻引擎搜索到，提高网站在百度或Google中的排名。
e、内容能被更广泛的设备所访问，包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等。
6、Web标准主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。
结构标准对应的主要语言是XHTL
表现标准对应的主要语言是CSS
行为标准对应的主要语言是JavaScript
制作成一个静态页面，主要用到的就是XHTML与CSS，所以制作标准页面的技术就是XHTML+CSS
7、web标准的好处之一是"理解表现和内容分离"---那这到底是什么意思呢？
首先必须明白一些基本概念：内容、结构、表现和行为
a、内容：就是制作者放在页面内真正想要让访问者浏览的信息；
b、结构：使内容更加具有逻辑性和易用性[类似于：1级2级标题、正文、列表等把它们称为结构]；
c、表现：用于修饰内容的外观的样式的东西称为表现；
d、行为：对内容的交互及操作效果，如通过JavaScript判断表单提交等。
8、网页开发的小工具----火狐浏览器中的firebug（工具—附加组件—搜索firebug—安装）。
9、做为Web前段工作要兼容的浏览器：IE/6/7/8/9/，火狐，谷歌，苹果等
10、CSS简介
概念：CSS是Cascading Style Sheets（层叠样式表）的简称。
CSS可以做为html，xhtml，xml的样式控制语言。
11、CSS语法结构
选择符{属性：值}例如：body{font-size:12px;}
参数说明：
a、选择符（selector）：指明这组样式所要针对的对象。可以是一个XHTML标签，如body，h1；也可以是定义了特定的
ID或Class的标签，如#main选择符表示选择<div id="main">，即一个被指定了main为id的对象。
b、属性（proprety）：选择符的样式属性，如颜色、大小、定位、浮动方式等。
c、值（value）：是指属性的值。
d、同时可以为一个选择符定义多个属性，每个属性之间用分号";" 分隔。
12、网页是否有CSS样式，测试--在浏览器中改变字体大小，看结果。
13、CSS定义的技巧
a、为了将来的CSS代码优化，建议所有属性值后面都要带上分号";"。
b、某些html标签有自己默认的CSS属性值，例如：h1标签就有自己的属性值，自动加粗显示，字号比较大。
c、为了兼容主流的浏览器，为了统一效果建议我们在设置时，将所有元素的CSS属性，重置为标准的。
d、不同的浏览器，有各自不同的CSS属性值---要命的，就是浏览器的兼容。
e、就有一个比较特殊的字体想用，怎么办？--将其转为图片。
分中英文字体。设置字体的顺序。将英文字体设置在前，中文在后。
f、想让文字在垂直方向上居中，将行高设置为元素高度，行高=元素高度，
文字的内容不能超过元素的宽度，也就是不能换行。
g、CSS可以重新设置，xhtml标签默认样式。
14、CSS控制字体
功能 语法
设置字号 font-size:12px
设置字色 color:#00000
设置字体 font-family:Arial,‘宋体‘
设置行高 line-height:150% line-height:1.5em
设置字体的粗细 font-weight:normal[正常]bold[粗体]
CSS长度单位
相对长度单位 说明
em 相对于当前对象内文本的字体尺寸
px 像素(Pixel)推荐使用
in 英寸
cm 厘米
mm 毫米
pt 点(Point)
CSS颜色单位
颜色单位 说明
十六进制 如：color:#ff0000
颜色名称 如：color:red
三原色单位 如：rgb(255,0,)
一般最常用的是十六进制，三原色单位的原理【红 （r），绿（g），蓝（b）】混合而成，每个值域在0—255之间。
15、CSS字体使用注意事项，要尽量使用通用宋体，用大家电脑上都有的字体。
16、网页中加CSS的方式有4种：
a、内联式样式表：直接写在现有的标记中如：<p style="color:red">这里文字是红的</p>
b、嵌入式样式表：使用"<style></style>"标签嵌入到html文件的头部中<head>标记内，
如：<style type="text/css">
<!--body {background:white;color:black;} -->
</style>
c、外部链接式样式表：将样式表写在一个独立的 .css文件中，然后在页面head区<head>标记内用<link>标签调用它，主要用
于实现表现与结构分离
如：<link href="main.css" rel="stylesheet" type="text/css>
d、导入式样式表：导入式样式表与链接式样式表的功能基本相同，只是语法和动作方式略有不同，同样也将导入样式代码写
在<head>标记内。
语法：<style type="text/css">
@import url("basic.css");
</style>
导入式，会占用html文件空间， 有些浏览器，解析会有问题，浏览器会最后读取@import中内容。将多个样式文件，导入到一
个样式文件中。
17、将CSS样式写到一个单独的文件中style.css，要使用的网页，只需要调用即可，这才是我们学习xhtml+css的核心，结构与样
式分离。
18、CSS选择符类型
a、标签（类型）选择符
就是针对HTML文档中的标签（哪些html标签应用哪些CSS样式），如：p{font-size:12px;} div{background:blue;}
b、类型选择符：可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英
文"."开头，后面的名字自己定义，类定义后还需要在网页中加入class-类名称，加以调用。
如：.warning{属性：值}
<p class="waring"> </p>
同时给某个元素应用多个类
<p class="a1 a2"> </p>
c、ID选择符：与类基本相似，只是以英文"#"开头，因为ID具有唯一性，所以在网页中只能出现一次，用于定义只出现一次的
样式。
如：#main{属性：值}
<p id="main"> </p>
同时给某个元素应用多个类与ID
<p class="a1 a2" id="a6"> </p>
*类名或ID名不要以数字开头。
d、通配选择符：* {属性值}，用于定义所有html元素，作用范围广泛，但是效率最低。
*{nargin:0;padding:0} 重置所有元素的外边距与内边距，为零
e、包含选择符（嵌套/派生）：语法e1 e2 {属性：值}，
含义是所有被e1包含e2，
如：table td {属性：值} #hearder li a {属性：值}
优点就是不需要在单独为id为hearder的标签内，li 标签内的 a 标签单独定义class或者ID，CSS代码就少了、同样也优化
了CSS代码。
如果我们针对，某个元素中电子元素进行控制，可以使用嵌套的方式，不必再为子元素设置id，语法：父元素 子元素
{属性：值}
f、选择符分组（集体控制）：将同样的样式定义用于多个选择符，选择符之间用逗号分隔。如：p,div, .waring {属性：值}
g、标签指定式选择符：如果既想使用id或class，也想同时使用标签选择符
h1#content{} 白哦是针对所有id为content的h1标签
h1.p1{} 表示针对所有class为p1的h1标签
h、组合选择符：将以上选择符进行组合使用
h1.p1,#content h1{}
CSS选择符作用？指定CSS样式所作用对象（范围）。
19、我们想针对网页中的，某一个元素或者某一些元素，设置样式---可通过不同的CSS选择符。CSS选择符就是要控制的对象。
20、CSS样式的特点
a、继承
网页中字元素，将继承父元素的样式（继承某些样式，因为有些子元素本身就有默认值，所以就不用父元素）。
例如：要控制段落p中的文字大小，可以直接给body标记加样式。
c、层叠
网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。
后面定义的样式，会覆盖前面蒂尼的样式。
标签：html css 网页设计 javascript w3c
原文地址：http://blog.csdn.net/hanbo622/article/details/45153997
